day 50 jquary 终极版本

jQuary

一、jquary对象和dom对象

1. jquary找到的标签对象成为-- jquary对象

2. 原生js找到的标签对象成为 -- dom对象

   dom对象只能使用dom对象的方法,不能使用jquery对象的方法
   jquery对象也是,它不能使用dom对象的方法
   
   dom对象和jquery对象互相转换:
    jquery对象转dom对象 -- jquery对象[0]  示例:$('#d1')[0]
    dom对象转jquery对象 -- $(dom对象)

二、jquary选择器

1.基本选择器

选择器是使用
jQuery('#d1')  -- $('#d1')
    #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

1. id选择器 -- $("#id")

2. 标签选择器 -- $("tagName") --> $('div')

3. class选择器 -- $(".className") -->$('.c1') //里面直接放类值

4. 配合使用 -- $('div.c1') //找到c1 class类的div标签

5. 组合选择器 -- $("#id, .className, tagName")

   总结：

   ​ 选择器可能找到的标签是多个，会放到数组里面，如果想到单独设置，用索引拿出来的是dom对象，通过 $(dom对象) 的方式转换成jquary对象。

2.基本筛选器

<ul>
    <li>蔡世楠</li>
    <li>尤利阳</li>
    <li id="l3">张雷</li>
    <li>申凯琦</li>
    <li id="l5">程德浩</li>
    <li>罗新宇</li>
    <li>曾凡星</li>
</ul>

:first  -- 示例:$('li:first')   # 第一个
:last   // 最后一个
:eq(index)  // 索引等于index的那个元素   #index表示的是数字
:even   // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd   // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

总结：筛选器是对选择器选择多个标签进行筛选，拿到数组中符合筛选的结果

3.属性选择器

[attribute]
[attribute=value]   // 属性等于
[attribute!=value]  // 属性不等于

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']");   // 取到类型不是text的input标签

4.表单筛选器

找到的是type属性为这个值的input标签中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
总结：
    通过表单的这些属性可以找到属性所在的标签，
弊端：
    可能找到多个没用的标签，不能指定某个标签，建议使用 属性选择器

5.表单对象属性筛选器

:enabled   #可用的标签
:disabled  #不可用的标签
:checked   #选中的input标签
:selected  #选中的option标签

6.筛选器的方法

下一个:
    $('#l3').next();  找到下一个兄弟标签
    $('#l3').nextAll(); 找到下面所有的兄弟标签
    $('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找，不包含它
    
上一个
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

父亲元素
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
    $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素
    $('ul').children(); 
    $('ul').children('#l3');  #找到符合后面这个选择器的儿子标签

    $('#l5').siblings();
    $('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签

find
    $('ul').find('#l3')  -- 类似于后代选择器  $('ul #l3')
filter过滤
    $('li').filter('#l3'); -- 过滤掉后代中不包含#l3的标签


.first()  // 获取匹配的第一个元素
.last()   // 获取匹配的最后一个元素
.not()    // 从匹配元素的集合中删除与指定表达式匹配的元素  $('li').not('#l3');
.has()    // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()     // 索引值等于指定值的元素

三、标签操作

样式操作

1.样式类的操作

• addClass();// 添加指定的CSS类名

• removeClass();// 移除指定的CSS类名

• hasClass();// 判断样式存不存在

• toggleClass(); //切换CSS类名，如果有就移除，没有就添加

  2.css样式

原生js
    标签.style.color = 'red';
jquery
    $('.c1').css('background-color','red');  
    同时设置多个css样式
    $('.c1').css({'background-color':'yellow','width':'200px'})

3.位置操作

查看位置
$('.c2').position();  //查看相对位置
    {top: 20, left: 20}

$('.c2').offset();    //查看距离窗口左上角的绝对位置
    {top: 28, left: 28}

设置位置
$('.c2').offset({'top':'20','left':'40'});
    //设置位置的时候不用添加px，

4.jQuery绑定点击事件的写法

    原生js绑定点击事件
    // $('.c1')[0].onclick = function () {
    //     this.style.backgroundColor = 'green';
    // }
    
jquery绑定点击事件
    $('.c1').click(function () {
        $(this).css('background-color','green');
    })
    //this是dom对象，需要转化为jquary

点击事件和滚动事件的示例代码

<script>
    //点击事件来改变标签位置
    $('.change-postion').click(function () {
        $('.c1').offset({top:200,left:200});
    });
    
    //滚动事件,监听滚动距离来显示或者隐藏标签
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >=200){
            $('.s1').removeClass('hide');
        }else {
            $('.s1').addClass('hide');
        }
    });
    
    // 回到顶部,scrollTop设置值
    $('.s1').click(function () {
        $(window).scrollTop(0);
    })
</script>

5.尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度

文本操作

html()    //取得第一个匹配元素的html内容，包含标签内容
html(val) //设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

text()    // 取得所有匹配元素的内容，只有文本内容，没有标签
text(val) //设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');

值操作

获取值
    input type='text'的标签--      $('#username').val();
    input type='radio'标签获取被选中的标签的值 ---  $(':radio:checked').val();
    input type='checkbox'标签获取被选中的标签的值 ---   直接$(':checkbox:checked').val();//是不行的,这样选取多个的时候只能取到第一个，需要循环取值才可以拿到  
        var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
        
    单选select --- $('#city').val();
    多选select --- $('#author').val(); // ["2", "3"]  

设置值
    input type='text'的标签 --- $('#username').val('李杰');
    input type='radio'标签 ---  $('[name="sex"]').val(['3']);
            如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';

    input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
    单选select --- $('#city').val('1');  option value='1'
    多选select --- $('#author').val(['2','3'])
    

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性

示例:
    设置单个属性
        $('.c1').attr('xx','oo');
    设置多个属性
        $('.c1').attr({'age':'18','sex':'alex'});
    查看属性
        $('.c1').attr('属性名');
        $('.c1').attr('xx');
    删除属性
        $('.c1').removeAttr('xx');

prop -- 针对的是checked\selected\disabled..

查看标签是否有checked属性,也就是是否被选中
        attr $(':checked').attr('checked'); //结果有checked --没有 undefined
        prop $(':checked').prop('checked'); //结果有true  --没有 false
        
        通过设置属性的方式来设置是否选中:
            $(':radio').eq(2).prop('checked',true);  true和false不能加引号
            $(':radio').eq(2).prop('checked',false);

简单总结:
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

添加到指定元素内部的后面
    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B   
    #添加字符串照样能识别标签  *****
    $('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B
    示例
        $('a').prependTo($('div'));

添加到指定元素外部的后面
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
移除和清空元素
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
    $('div').remove();    //包括自己
    $('div').empty();     //清空不包括自己

替换
    replaceWith()     
    rep laceAll()     //用前面的内容替换 括号中的内容
    示例:
        var a = document.createElement('a')
        a.href = 'http://www.baidu.com';
        a.innerText = 'xxx';
        
        $('span').replaceWith(a);  //用 a标签 替换 span
        $(a).replaceAll('span');   //用 span 替换 a标签
        
clone()克隆
    <button class="btn">屠龙宝刀,点击就送!</button> 

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆标签
        var a = $(this).clone(true);  //连带事件一起克隆
        $(this).after(a);

    })

四、事件

1.事件的绑定方式

• 方式一： $('#d1').click(function () {}）
• 方式二： $('#d1').on('click',function () {}）

<script src="jquery.js"></script>
<script>
    //方式1
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'});
    // });
    //方式2
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'});
    })
</script>

2.常用事件

• .click() 左键单击事件
• .dblclick() 双击
• .focus(function(){}) -->获取光标触发的事件
• .blur(function(){}) -->获取光标触发的事件
• $('select').change(function () {}） -->域内容发生改变时触发的事件
• .mouseenter()/leave() -->只穿过父级元素 可以用hover合并enter和leave

    //获取光标触发的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });
    //失去光标(焦点)触发的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });

    //域内容发生改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
    });

    //鼠标悬浮触发的事件
    // $('.c1').hover(
    //     //第一步:鼠标放上去
    //     function () {
    //         $(this).css({'background-color':'blue'});
    //     },
    //     //第二步,鼠标移走
    //     function () {
    //         $(this).css({'background-color':'yellow'});
    //     }
    // )

    // 鼠标悬浮  等同于hover事件
    // 鼠标进入
    // $('.c1').mouseenter(function () {
    //     $(this).css({'background-color':'blue'});
    // });
    // 鼠标移出
    //  $('.c1').mouseout(function () {
    //     $(this).css({'background-color':'yellow'});
    // });
    
    // $('.c2').mouseenter(function () {
    //     console.log('得港绿了');
    // });
    // 鼠标悬浮事件
    // $('.c2').mouseover(function () {
    //     console.log('得港绿了');
    // });
    // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象


//键盘按下触发的事件  e\event事件对象
    $(window).keydown(function (e) {
        // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件
        if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 键盘抬起触发的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

input事件:

input事件:
    22期百度:<input type="text" id="search">

    <script>
    $('#search').on('input',function () {
    console.log($(this).val());
    })
    </script>
### input事件 只能用on 来做点击事件

3.事件冒泡

<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
</script>
## 点击子级标签，父级标签会重新执行下自己的方法
解决方法：
    在子级标签后面添加
        return false
或者     e.stopPropagation()

4.事件委托

​ 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

格式：上层标签对象.on('click','委托人选择器',function(){});

<div id="d1">
    <button class="c1">爱的魔力转圈圈</button>
</div>
<script>
#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
    $('#d1').on('click','button',function () {
        alert('得港被雪飞调教了,大壮很难受!');
        var btn = document.createElement('button');
        $(btn).text('爱的魔力转圈圈');
        $(btn).addClass('c1');
        //添加到div标签里面的后面
        $('#d1').append(btn);
    });
</script>

5.页面载入和window.onload

window.onload = function () {
     $('.c1').click(function () {
          $(this).css({'background-color':'green'});
     })
// 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
        // window.onload 有覆盖现象,会被后面的window.onload给重新赋值

页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
$(function () {
    $('.c1').click(function () {
         $(this).css({'background-color':'green'});
    })
});
//等待所有的文档标签加载完之后才会执行

区别：
　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

五、高级操作

动画效果

each循环

循环标签对象数组
$('li').each(function(k,v){
    console.log(k,v);
});

循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
    console.log(k,v);
})

跳出循环  return false; 类似于break
$('li').each(function(k,v){
    console.log(k,v.innerText);
    if (k === 1){
        return false;
    }

});

跳出本次循环  return; 类似于continue
$('li').each(function(k,v){
    
    if (k === 1){
        return;
    }
    console.log(k,v.innerText);
});

data

给标签对象添加数据,类似于添加了全局变量
    .data(key, value): 设置值
    .data(key)   取值
    .removeData(key) 删除值

插件(了解)

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>