jQuery

11 jQuery

1. jQuery引入

1.1 介绍

• jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

• jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

// 下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
​
# 中文文档 ：http://jquery.cuishifeng.cn/

1.2 优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

2. jquery对象和dom对象

jquery找到的标签对象成为--jquery对象。
原生js找到的标签对象成为--dom对象。
dom对象只能使用dom对象的方法，不能使用jquery对象的方法
jquery对象也是，它不能使用dom对象的方法
​
dom对象和jquery对象互相转换：
    jquery对象转换dom对象--jquery对象[0] 示例：$('#d1')[0]
    dom对象转换jquery对象--$(dom对象)

3. jQuery选择器

jQuery('#d1') --$('#d1')
基本选择器（同css）
1 id选择器：     
$("#id") # 不管找什么标签，用什么选择器，都必须要写$(""),引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生Js找到的标签对象叫做DOM对象。
​
2 标签选择器:
$("tagName") $('div')
​
3 class选择器：
$(".className")
​
配合使用：
$("div.c1") //找到有c1 class类的div标签
​
所有元素选择器：
$("*")
​
组合选择器：
$("#id,.className, tagName")
​
​
​
    选择器找到的可能是多个标签，会放到数组里面，但还是jQuery对象，能够直接使用jquery的方法，意思是找到的所有标签进行统一设置，如果要单独设置选中的所有标签的某个标签，可以ton过索引去值的方式找到，然后注意，通过索引取值拿到的标签，是个dom对象。
    
    
    
    
层级选择器：
$('div p')
$('div.p')
$('div+p')
$('div>a')
$('div~a')

4. 基本选择器

<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的那个元素
：even // 匹配所有索引值为偶数的元素，从0开始计数
：odd //  匹配所有索引为奇数的元素，从0开始计数
：gt(index) // 匹配所有大于给定索引值的元素
：lt(index) // 匹配所有小于给定索引值的元素
：not(元素选择器) //移除所有满足not条件的标签
：has(元素选择器) // $("li:has(.c1)") 找到后代中含有满足has里面选择器的那个标签
：not(:has(.c1)) -- $("li:not(:has(.c1))") // 排除后代中含有满足has里面选择器的那个标签

5 属性选择器

[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标签

6 表单筛选器

/ 找到的是type属性为这个值的input标签
：text
：password
：fild
：radio
：checkbox
：submit
：reset
：button

7 表单对象属性筛选器

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

8 筛选器方法

/下一个：
    $("#l3").next();  /找到下一个兄弟标签
    $("#l3").nextall(); /找到下面所有的兄弟标签
    $("#l3").nextUntil('l5'); /直到找到id值为l5的标签就结束查找，不包含它
​
# 上一个
$("#id").prev()
$("#id").prevall()
$("#id").prevUntil("#i2")
​
​
​
# 父亲元素
$("#id").parent()
$("#id").parent() //查找当前元素的所有的父辈元素（爷爷辈，祖先被都找到）
$("#id").parentsUntil('body') //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以都可以放到这里面使用。
​
​
儿子和兄弟元素
$('ul').children();
$('ul').children('#i3'); # 找到符合后面这个选择器的儿子标签
​
$('#l5').siblings();
$('#l5').siblings('#l3'); # 找到符合后面这个选择器的兄弟标签
​
​
find
    $("ul").find("#l3") --类似于 $("ul #l3"); # 找后代标签
filter过滤
    $('li').filter('#l3');
​
.first() // 获取匹配的第一个元素
.last()  // 获取匹配的最后一个元素
.not()  // 从匹配元素的集合中删除与指定表达式匹配的元素 $('li').not('#l3');
.has()  // 保留包含特定的元素，去掉那些不包含指定后代的元素。
.eq()  // 索引值等于指定指定值的元素

9 标签操作

1 样式类操作

addClass(); //添加指定的css类名。
removeClass(); //移除指定的css类名。
hasClass(); //判断样式存不存。
toggleClass；//切换css类名，如果有就移除，如果没有就添加。
    
示例代码
$('.c1').addClass('c2');
$('.c1').removClass('c2');
$('.c1').hasClass('c2');
$('.c1').toggleClass('c2');

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'});

10 jQuery绑定点击事件的写法

原生js绑定点击事件
$('.c1')[0].onclick = function(){
    this.style.backgroundColor = 'green';
 }
​
jquery绑定点击事件
$('.c1').click(function(){
    $this.css('background-color','green');
})
​
​
$().on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。
​
此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
​
要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。
​
该函数属于jQuery对象(实例)。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: green;
            height: 1000px;
            width: 100px;
        }
        .c3{
            background-color: blue;
            height: 1000px;
            width: 100px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom: 20px;
            height: 40px;
            width: 80px;
            background-color: purple;
            line-height: 40px;
            text-align: center;
​
        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>
​
<button class="change-postion">走你</button>
​
<div class="c2"></div>
<div class="c3"></div>
​
<span class="s1 hide">
    <!--<a href="#top">返回顶部</a>-->
    <span>返回顶部</span>
​
</span>
​
<script src="jquery.js"></script>
<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>   
    
</body>
</html>

11 尺寸

$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerHeight(); //content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight(); //content高度+padding高度+border高度
$('.c1').outerWidth(); //content宽度+padding宽度+border宽度
​
​
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            border:2px solid red;
            background-color:green;
            padding:20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
​
<script src="jquery.js"></script>
</body>
</html>    

12 文本操作

html() //取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
​
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val) // 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例：
$('.c1').text('<h3>你好，太白</h3>');
$('.c1').html('<h3>你好，太白</h3>');

13 值操作

获取值：
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'd的标签 --$('#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'])

14 属性操作

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()

15 文档处理

添加指定的元素内部的后面
$(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的前面
​
移除和清空元素
$('div').remove();
$('div').empty();
​
替换
replaceWith()
replaceAll()
示例：
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a);
$(a).replaceAll('span');
​
clone()克隆
<button class='btn'>宝刀屠龙，点击就送！</button>
​
$('.btn').click(function(){
    // var a = $(this).clone(); // 克隆标签
    var a = $(this).clone(true); //连带事件一起克隆
    $(this).after(a);
})

16 jQuery事件

1 事件绑定方式

<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 左键点击事件
//获取光标触发的事件
$('[type="text"]').blur(function(){
    $('.c1').css({'background-color':'black'});
});
​
//失去光标（焦点）触发的事件
$('[type="text"]'.blur(function(){
    $('.c1').css({'backgroun-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'});
});
​
//$('.c1').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 type="text" id="search">
<script src="jquery.js"></script>
<script>
    $("#search").on('input',function(){
        console.log($(this).val()); 
    });
</script>

3 事件冒泡

# 子表签事件触发后，会连带触发父级标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
​
    </style>
</head>
<body>
​
<div id="d1">
    <div id="d2"></div>
​
</div>
​
​
<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
    
​
</script>
​
</body>
</html>
​
​
/*阻止后续事件的发生*/
​
$('#d1').click(function(){
    alert('父级标签');
});
$('#d2').click(function(e){
    alert('子级标签');
    return false;
    // e.stopPropagation();
});
​

4 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
将事件委托给上层标签
上层标签对象.on('click','委托人选择器',function(){});
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<div id="d1">
    <button class="c1">爱的魔力转圈圈</button>
​
</div>
​
<script src="jquery.js"></script>
<script>
    // $('.c1').on('click',function () {
    //     alert('小明被小红调教了,小鑫很难受!');
    //     var btn = document.createElement('button');
    //     $(btn).text('爱的魔力转圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     //添加到div标签里面的后面
    //     $('#d1').append(btn);
    //
    // });
​
    #将'button' 选择器选中的标签的点击事件委托给了$('#d1');
    $('#d1').on('click','button',function () {
        alert('小明被小红调教了,小鑫很难受!');
        var btn = document.createElement('button');
        $(btn).text('爱的魔力转圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        console.log($(this)) //还是我们点击的那个button按钮
        //添加到div标签里面的后面
        $('#d1').append(btn);
​
    });
​
​
</script>
</body>
</html>

5 页面转载和window.onload

1. jquery文件要在使用jquery的代码之前引入
​
2. js代码最好都放到body标签下面或者里面的最下面来写
​
3.window.onload
    // window.onload = function () {
    //     $('.c1').click(function () {
    //         $(this).css({'background-color':'green'});
    //     })
    // }
4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
    页面载入与window.onload的区别
　　　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
　　　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
　　　　
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
        // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
        // window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }
​
        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });
​
    </script>
    <script src="xx.js"></script>
​
​
    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
​
<div class="c1"></div>
​
<img src="" alt="">  # 这是一个异步的操作
​
​
</body>
​
</html>

17 动画效果

1 each循环

循环标签对象数组
$('li').each(function(k,v){   # 循环列表的jquery对象
    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);
});

2 data

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

3 插件（了解）

<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.extent({ //给任意的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>