jQuery

jQuery

简介

jQuery是一个可以简单方便实现DOM操作的工具，是一个类库，类似于Python中的模块

功能：通过jQuery方法对HTML文档进行一系列的操作。

 jQuery版本

1、1.xx的版兼容IE678，官方只做BUG维护，功能不再新增。最终版本：1.12.4 (2016年5月20日)

2、2.xx版本不兼容IE678，官方只做BUG维护，功能不再新增。

3、3.xx版本不兼容IE678，只支持最新的浏览器。并且很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

4、压缩版（mini,js）与未压缩版本的功能一致，区别只在于文件大小

 jQuery基础语法

jQuery变量的声明通常需要在变量名之前加$，让人知道该变量是jQuery对象。

 jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象，它具有自己独有的方法。

jQuery对象与DOM对象可以相互转换，转换之后可以使用对方的对象方法对HTML进行操作。

查找标签方法

$().()等同于jQuery().()

标签选择器

#id选择器
$("#ID值");

#标签选择器
$('tagName');

#class类选择器
$('.className')

#交集选择器,选择两个条件同时成立的标签
$('div.c1')#选择class=c1的div标签

#并集选择器，选择满足以下条件中任意一个的所有标签
$('#d,.c1,p')#选择id=d的标签，具有class=c1的标签，标签是p的标签。

#所有元素选择器
$('*')#选择所有的标签

层级选择器

#后代选择器
$('a b');#处于a标签级别下的所有b标签，用空格分开。

#子类选择器
$('a>b');#处于a标签级别下一级别的所有b标签。

#毗邻单一弟弟选择器
$('a+b');#与a标签同一级别的紧挨着a标签的b标签。

#毗邻多个弟弟选择器
$('a~b');#与a标签同一级别的位于a标签之后的所有b标签。

基本筛选器

<div class="c1">
    <a href=""></a>
    <p class="c2"></p>
    <p class="c3"></p>
    <div class="c4"></div>
    <p class="c5"></p>
</div>
<div class="c6">
    <a href=""></a>
    <a href=""></a>
</div>

#查找满足条件的第一个
$('div>p:first');
#找出div标签子集中的第一个p标签,
#jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)]

#查找满足条件的最后一个
$('div>p:last');
#找出div标签子集中最后一个p标签
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#查找索引号为指定数字的元素
$('div>p:eq(2)');
#找出div标签子集中的第三个p标签
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有索引值为偶数的元素，从 0 开始计数
$('div>p:even');
#找出div标签子集中的索引为偶数的p标签，取出class=c2,class=c5的p标签。
#jQuery.fn.init(2) [p.c2, p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有索引值为奇数的元素，从 0 开始计数
$('div>p:odd');
#找出div标签子集中的索引为奇数的p标签，取出class=c3的p标签。
#jQuery.fn.init [p.c3, prevObject: jQuery.fn.init(1)]

#匹配所有大于给定索引值的元素
$('div>p:gt(1)');
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有小于给定索引值的元素
$('div>p:lt(1)');
#jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)]

#选取后代中包含一个或多个指定标签的标签
$('div:has(a)');
#jQuery.fn.init(2) [div.c1, div.c6, prevObject: jQuery.fn.init(1)]

#找出所有满足not条件的标签
<label>篮球
    <input type="checkbox" checked name="hobby" id="i1">
</label>
<label >足球
    <input type="checkbox" name="hobby" id="i2">
</label>
$('label>input:not(:checked)');
#选出没有checked属性的input标签
#w.fn.init [input#i2, prevObject: w.fn.init(1)]

#示例代码
<p class="c1"></p>
<p class="c1"></p>
<p id="d1"></p>
<ul>
    <li id="d2"></li>
    <li id="d3">
        <a href=""></a>
    </li>
</ul>

#找到所有后代中不含a标签的li标签
$("li:not(:has(a))")
#Query.fn.init [li#d2, prevObject: jQuery.fn.init(1)]

#找到不含class=c1的p标签
$('p:not(.c1)');
#jQuery.fn.init [p#d1, prevObject: jQuery.fn.init(1)]

属性选择器

#示例代码
<p class="c1"></p>
<p class="c1"></p>
<p id="d1"></p>

#选取带有该属性的指定标签
$('p[class]');
#jQuery.fn.init(2) [p.c1, p.c1, prevObject: jQuery.fn.init(1)]


#选取该属性值等于指定值的标签
$('p[id="d1"]');
#Query.fn.init [p#d1, prevObject: jQuery.fn.init(1)]

##选取该属性值不等于指定值的标签
$('p[class!="c1"]');
#jQuery.fn.init(2) [p#d1, p.c2, prevObject: jQuery.fn.init(1)]

表单常用筛选方法

方法	说明
$(":text");	找出type="text"(文本)的input标签
$(":password");	找出type="password"（密码）的input标签
$(":file");	找出type="file"（文件）的input标签
$(":radio");	找出type="radio"（单选框）的input标签
$(":checkbox");	找出type="checkbox"（多选框）的input标签
$(":submit");	找出type="submit"的input标签
$(":reset");	找出type="reset"的input标签
$(":button");	找出type="button"的input标签

注意：$(":text")与$("input:text");结果相同

表单对象属性

方法	说明
$("input:enabled");	找出属性为enabled（可用）的input标签
$("input:disabled");	找出属性为disabled（不可用）的input标签
$("input:checked");	找出属性为checked（显示默认选择）的input标签
$(":selected");	找出属性为selected（显示默认选择）的option标签

#示例代码
<p>爱好</p>
<label>篮球
    <input type="checkbox" checked name="hobby" id="i1">
</label>
<label >足球
    <input type="checkbox" name="hobby" id="i2">
</label>
<label>双色球
    <input type="checkbox" name="hobby" id="i3">
</label>

<p>
    <label >出生地
        <select name="from">
            <option >黄浦区</option>
            <option >静安区</option>
            <option  selected>浦东新区</option>
        </select>
    </label>
</p>

#找到属性含有checked的input标签
$("input:checked");
#w.fn.init [input#i1, prevObject: w.fn.init(1)]

#找到含有属性checked的标签
$(":checked");
#w.fn.init(2) [input#i1, option, prevObject: w.fn.init(1)]
#找到input标签和option标签

#找到含有属性select的标签
$(":selected");
#w.fn.init [option, prevObject: w.fn.init(1)]
#只找到option标签

注意：checked查找会包含option中的含有selected属性的option标签，
而selected中查找select标签下的option标签。

筛选方法

同级别筛选

#选出某标签同级别的后面的一个标签
$("#d1").next()
#选出id=id的标签同级别后面的一个标签

#选出某标签同级别的后面的所有标签
$("#d1").nextAll()
#选出id=id的标签同级别后面的所有标签

#选出某标签同级别的后面的所有标签直至指定的标签为止
$("#d1").nextUntil("#i2")
#选出id=d1的标签的同级别的后面的标签直至id=i2的标签为止（不包含id=i2的标签）

#选出某标签同级别的前面的一个标签
$("#d1").prev()
#选出id=id的标签同级别前面的一个标签

#选出某标签同级别的前面的所有标签
$("#d1").prevtAll()
#选出id=id的标签同级别前面的所有标签

#选出某标签同级别的前面的所有标签直至指定的标签为止
$("#d1").prevtUntil("#i2")
#选出id=d1的标签的同级别的前面的标签直至id=i2的标签为止（不包含id=i2的标签）

层级筛选

#找出某元素的父级标签
$("#id").parent()

#找出当前元素的所有的父辈元素
$("#id").parents()

#找出当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").parentsUntil()

#找到当前元素的所有的子集元素
$("#id").children();

#找到当前元素的所有的同级元素
$("#id").siblings();

其他筛选方法

以下相邻2行代码的功能相同
查找
#找出div标签中所有的后代p标签
$("div").find('p')
$('div p')

筛选
#从结果中过滤出有class='c1'的标签
$("div").filter(".c1")
$("div.c1")

#获取匹配的第一个元素
$('div>p').first();
$('div>p:first');
#获取匹配的最后一个元素
$('div>p').last();
$('div>p:last');
#获取索引值匹配的元素
$('div>p').eq();
$('div>p:eq(2)');
#获取具有指定条件的元素
$('div').has();
$('div:has(a)');
#获取不含指定条件的元素
$('p').not(c1);
$('p:not(.c1)');

操作标签

样式操作

对于类class的相关操作

#为当前标签添加指定的样式类
$('div').addClass('c1')

#移除当前标签的指定的css类
$('div').removeClass('c1')

#判断当前标签是否含有指定的类
$('div').hasClass('c1')

#切换当前标签的css类，有则移除，没有则添加
$('div').toggleClass('c1')

对于css属性的修改

方法:在要修改的标签后添加方法
#设置单个属性
css('属性','值')
#设置多个属性
css（{'属性':'值','属性':'值','属性':'值'}）

示例
$("p").css("color", "red"); 
#将所有p标签的字体设置为红色
#等同于DOM操作：tag.style.color='red'
#设置p标签的字体颜色和边框属性
$("p").css({"color"："red"，"border":"1px solid black"}); 

 标签位置相关

示例代码
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin-top: 50px;
            margin-left: 50px;
        }
        .d1{
            height:50px;
             50px;
            background-color: cornflowerblue;
            position: relative;
        }
        .d2{
            height: 50px;
             50px;
            background-color: mediumpurple;
            position: absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
    </div>

    <div class="d3">div3</div>
    <script src="jquery-3.3.1.js"></script>
</body>

#获取指定元素相对于窗口左上角的偏移位置
$(".d1").offset();
#返回{top: 50, left: 50}
$(".d2").offset();
#返回{top: 150, left: 150}

#设置指定元素相对于窗口左上角的偏移位置
$(".d3").offset({top:200,left:200});


#获取指定元素相对于父级元素的位置偏移量
$(".d2").position();
#返回{top: 100, left: 100}

#获取当前位置的滚动条距离页面顶端的距离
$(window).scrollTop();

#设置滚动条距离页面顶端的距离
$(window).scrollTop(1000);

标签尺寸相关

示例代码
<head>
    <meta charset="UTF-8">
    <title>尺寸相关</title>
    <style>
        .c1 {
            height: 100px;
             100px;
            padding: 15px;
            border: 5px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.3.1.min.js"></script>
</body>
#获取指定标签的高c
$(".c1").height();
#返回100

#获取指定标签的宽
$(".c1").width();
#返回100

$(".c1").innerHeight();
#返回130
#得到内容+内填充（padding）的高

$(".c1").innerWidth();
#返回130
#得到内容+内填充（padding）的宽

$(".c1").outerWidth();
#返回140
#得到内容+内填充（padding）+边框（border）的宽

$(".c1").outerHeight();
#返回140
#得到内容+内填充（padding）+边框（border）的高

文本操作

HTML代码
#获取符合指定条件的第一个元素的标签内的所有内容
$('.c1').html();
#返回"段落1"
$('.c2').html();
#返回"<p class="c3">段落2</p>，<p class="c1"><a href="">a</a></p>"

#设置或修改匹配到的所有的标签中的内容
$('.c1').html("<h1>111</h1>");
#含有class='c1'的标签内的内容都被修改。

文本内容
#获取符合指定条件的所有元素的标签内的内容
$('.c1').text();
#返回"段落1，div，a"

##设置或修改匹配到的所有的标签的内容
$('.c1').text("111");
#含有class='c1'的标签内的内容都被修改

#text()与html()的区别
$('#d1').text();
#返回"段落1"
$('#d1').html();
#返回"<p class="c1">段落1</p>"

标签中值的相关操作

示例代码
用户名<input type="text" name="username" value="Chris" >
用户名<input type="text" name="username" value="Kris" >

#获取匹配条件的第一个标签的值
$('input[name="username"]').val();
#结果"Chris"

#设置或修改匹配条件的所有的标签的值
$('input[name="username"]').val('A');

<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
#获取选中的第一个标签的值
$('input[name="hobby"]:checked').val();
#若同时选中football，doublecolorball，则结果为"football"
$('input[name="hobby"]:checked')[1].value;
#结果为"doublecolorball"，想获得选中的第二标签的值，则用上述方法。

#给多选框（checkbox，select）设置默认选项val([val1, val2])
$('input[name="hobby"]').val(["basketball","doublecolorball"]); 
#给上述checkbox的选项框设置了"basketball"和"doublecolorball"这2个默认选项。

属性相关操作

示例代码
<div id="d1" class="c1">div1</div>
<div id="d2" class="c1">div2</div>
<div class="c1">div3</div>

#返回符合条件的第一个标签的指定的属性值attr(attrName)
$(".c1").attr("id");
#返回"d1"
#给符合条件的所有标签的设置一个属性值attr(attrName, attrValue)
$(".c1").attr("x","1");
#上述3个div都添加上x=1的属性

#给符合条件的所有标签的设置多个属性值attr({k1: v1, k2:v2})
$(".c1").attr({"y":"1"，"z":"1"});

#移除当前标签的指定属性
$("#d1").removeAttr("class");

checkbox和radio的属性操作

 文档相关处理

示例代码
<div id="d1">
    <div class="d2">div</div>
</div>
<div id="d2" class="c1">divdiv</div>

var pEle = document.createElement("p");
pEle.innerText='段落';

#添加到指定标签内容的后面
$('#d1').append(pEle);
$(pEle).appendTo($('#d1'));
#结果如下
<div id="d1">
    <div class="d2">div</div>
    <p>段落</p>
</div>

#添加到指定标签内容的前面
$('#d1').prepend(pEle);
$(pEle).prependTo($('#d1'));

#添加到指定标签的后面
$('#d2').after(pEle);
$(pEle).insertAfter($('#d2'));
#结果如下
<div id="d2" class="c1">divdiv</div>
<p>段落</p>

#添加到指定标签的前面
$('#d2').before(pEle);
$(pEle).insertBefore($('#d2'));

移除和清空元素

示例代码
<div id="d1" class="d">
    div1
    <p class="c1">段落1</p>
</div>
<div class="c1">div</div>
<div class="d">
    <p class="c3">段落2</p>
    <p class="c1">
        <a href="">a</a>
    </p>
</div>

#清除所有满足条件的标签
$('.c1').remove();
#带有class="c1"的标签全被移除

#清空符合条件的所有标签的子节点(标签中的内容)
$('.d').empty();
#含有class="d"的标签中的内容都被清空

替换

#示例代码
<div id="d1" class="d">
    div1
    <p class="c1">段落1</p>
</div>
<div class="c1">div</div>
<div class="d">
    <p class="c3">段落2</p>
    <p class="c1">
        <a href="">a</a>
    </p>
</div>

var pEle=document.createElement('p')
pEle.innerText='段落'
#将符合条件的所有标签替换成指定的标签
$('.c1').replaceWith(pEle);
$(pEle).replaceAll($('.c1'));

#含有class="c3"的标签全部替换成新建的p标签

克隆

var pEle=document.createElement('p')
pEle.innerText='段落'

复制得到相同的标签
$('p').clone()

 事件

# 目标标签被点击时触发
click(function(){...})
# 鼠标放在目标标签上时触发
hover(function(){...})
# input框失去焦点时触发
blur(function(){...})
# input框获取焦点时触发
focus(function(){...})
# input数据更改时触发
change(function(){...})
# 按键抬起时触发
keyup(function(){...})

hover事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .top{
            height:40px;
            100%;
            background-color: slategrey;
        }
        ul{
            margin: 0;
            margin-left: 20px;
            padding:0;
            list-style-type: none;
        }
        a{
            text-decoration: none;
            line-height: 40px;
        }
        a:hover{
            color: white;
        }
        ul li{
            float: left;
            margin-right: 15px;
            padding: 0 10px;
        }
        ul li:hover{
            background-color: #111111;
        }
        .shop{
            position: relative;
        }
        .box{
            height: 80px;
             200px;
            background-color: bisque;
            position: absolute;
            top:40px;
            left:0;
            text-align: center;
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
<div class="top">
    <ul>
        <li><a href="">注册</a></li>
        <li><a href="">登录</a></li>
        <li class="shop">
            <a href="">购物车</a>
            <div class="box">空空如也</div>
        </li>
    </ul>
</div>

<script src="jquery-3.3.1.js"></script>
<script>
    $('.shop').hover(
        function () {
            $(this).find('.box').addClass('show');
        },
        function () {
            $(this).find('.box').removeClass('show')
        }
    )
</script>
# this是指触发该事件的元素
# 鼠标移动到该元素上时发生的事和移开时发生的事
</body>
</html>

事件绑定

1、给$('选择器')选择出来的对象绑定event事件
方法:1：
$("选择器").on("envent",function(){触发后执行的代码})

方法2：
$("选择器").envent(function(){触发后执行的代码})

$('选择器')：被绑定的对象
envent：要绑定的事件
function(){}：触发事件后要执行的匿名事件函数

2、委托事件绑定方法
$("选择器").on("envent","selector",function(){触发后执行的代码})
$('选择器')：被委托的对象
"selector"：选择器，选择出要被绑定事件的对象
envent：要绑定的事件
function(){}：触发事件后要执行的匿名事件函数

移除事件

1、给$('选择器')选择出来的对象绑定event事件
$("选择器").off("envent",function(){触发后执行的代码})


2、委托事件解绑方法
$("选择器").off("envent","selector",function(){触发后执行的代码})
$('选择器')：被委托的对象
"selector"：选择器，选择出要被绑定事件的对象
envent：要绑定的事件
function(){}：触发事件后要执行的匿名事件函数

事件绑定注意事项

DOM中定义的事件如：click，keydown等，一般使用on方法绑定事件，而jQuery中定义的事件如：hover等，一般不用on来绑定。

阻止后续事件执行

$("selector").event(function(){
触发事件后执行的代码
return false
})

在执行匿名函数的执行代码后添加return false，阻止后续事件的发生

页面载入

当浏览器读取HTML文档是会按照层级关系生成DOM树，从上到下读取文档时若遇到JQuery操作对象的命名在jQuery执行操作之后，则浏览器会报错。

报错文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载完执行</title>
</head>

<script>
 $(function () {
       var d1Ele = document.getElementById("d1");
       console.log(d1Ele);
       console.log(d1Ele.innerText);
   })
</script>

<body>
<div id="d1">div</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
#该文档的jQuery操作中对象（d1Ele）的定义处于该操作之后，浏览器加载完文档后报错。

解决方法

#方法1：把jQuery相关操作放在body标签中内容的后面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载完执行</title>
</head>
<body>

<div id="d1">div</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
 $(function () {
       var d1Ele = document.getElementById("d1");
       console.log(d1Ele);
       console.log(d1Ele.innerText);
   })
</script>

</body>
</html>

#方法2；
$(document).ready(function(){
//js代码
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载完执行</title>
</head>
<body>

<script>
  $(document).ready(function () {
        var d1Ele = document.getElementById("d1");
        console.log(d1Ele);
        console.log(d1Ele.innerText);
    });
</script>

<div id="d1">div</div>
<script src="jquery-3.3.1.min.js"></script>

</body>
</html>

事件委托

事件委托原理：利用事件冒泡原理，通过父标签将事件绑定到子标签身上。

事件冒泡：事件从最深的节点开始，会逐层向上传播。例如div>ul>li>a，给a绑定一个点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。因此给最外面的div加点击事件，其后代标签ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以后代标签都会触发绑定的事件，这就是事件委托，委托它们父级代为执行事件。

动画效果

$("selector")：根据选择器selector选择出的对象
#盒子效果
$("selector").show(s)  # 逐渐显示
$("selector").hide(s)  # 逐渐消失
$("selector").toggle(s)  # 显示时隐藏，隐藏时显示
# 参数是变化时间，单位毫秒，不设置参数时，默认为0，即执行该命令立刻消失或显示


#竖向压缩效果，改变对象的高来实现
$("selector").slideDown(s)   # 从上向下显示
$("selector").slideUp(s)  # 从下向上压缩，逐渐消失
$("selector").slideToggle(s)

#淡入淡出效果，通过改变透明度来实现
$("selector").fadeIn(s)  # 逐渐变深
$("selector").fadeOut(s)  # 逐渐变淡
$("selector").fadeTo([[s],o])  # 参数o设置透明度变为多少
$("selector").fadeToggle(s)

each函数

each是一个迭代函数，可以用来依次取出数组或jQuery对象集中的每一个元素。

var list=[1,2,3];
$.each(list,function(i,v){console.log(i,v)});
#结果如下
0 1
1 2
2 3

$.each(list,function(i){console.log(i)});
#结果如下
0
1
2

示例代码
<div>div1</div>
<div>div2</div>

var $divEles=$("div");
$.each(divEles,function(i){
    console.log($divEles[i]);
})
#结果
        <div>div1</div>
        <div>div2</div>   

 $('div').each(function(){
    console.log(this)
})
#结果
        <div>div1</div>
        <div>div2</div>   
each方法迭代出jQuery对象中的每一个DOM元素，每次回调函数执行时，会传递当前循环次数（从0开始）作为索引取出对象中的DOM元素
this指向当前循环取出的元素。

var list=[1,2,3];
$.each(list,function(i){
    if (list[i]===2){
    return
    }
    console.log(list[i])
});
#结果1,3
#跳出本次循环
var list=[1,2,3];
$.each(list,function(i){
    if (list[i]===2){
    return false
    }
    console.log(list[i])
});
#结果1
#跳出each循环

data方法

示例代码
<div>div1</div>
<div>div2</div>
#给匹配的所有元素存储任意相关的数据 
.data(key,value)
$("div").data('x',1);
#给上述2个div标签都保存数据x=1

#通过存储时的key可以拿到对应的值
.data(key)
$("div").data('x');
#返回1
#返回匹配的元素集合中的第一个元素的指定key所对应的值
#返回第一个div保存的1

#移除存放于元素上的数据
$("div").removeData('x');
#移除上述2个div标签上存储的x=1

#不假参数，移除存放于匹配元素上的所有数据
$('selector').removeData();