一、jQuery介绍

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

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

jQuery引入

首先需要jQuery官网下载jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

<script src="jQuery.js"></script>

二、jQuery对象和DOM对象

jQuery 找到的标签对象称为 ——> jQuery对象

原生 JS 找到的标签对象称为 ——> DOM对象

DOM对象只能使用DOM对象的方法,不能使用jQuery对象的方法

jQuery对象也是,它不能使用DOM对象的方法

我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像;
var variable = DOM对象;

jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了

$variable[0];

DOM 对象和 jQuery 对象互相转换：

jQuery对象转DOM对象 ——> jQuery对象[0]  示例:$(‘#d1‘)[0]
DOM对象转jQuery对象 ——> $(dom对象)

三、jQuery选择器

不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本选择器

和css一样

id选择器：
$("#id");

标签选择器：
$("tagName");

class选择器：
$(".className");

配合使用：
$("div.c1");  	// 找到有c1 class类的div标签

所有元素选择器：
$("*");

组合选择器：
$("#id, .className, tagName");

层级选择器

和css一样

x 和 y 可以为任意选择器

$("x y");		// x 的所有后代 y（子子孙孙）
$("x > y");		// x 的所有儿子 y（儿子）
$("x + y");		// 找到所有紧挨在 x 后面的 y
$("x ~ y");		// x 之后所有的兄弟 y

基本筛选器

选择之后进行过滤筛选

方式一：

:first 		// 第一个
:last 		// 最后一个
:eq(index)	// 索引等于index的那个元素
:even 		// 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 		// 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)	// 匹配所有大于给定索引值的元素
:lt(index)	// 匹配所有小于给定索引值的元素
:not(元素选择器)	// 移除所有满足not条件的标签
:has(元素选择器)	// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)


// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(h1)")
// 找到所有后代中有c1样式类（类属性class=‘c1‘）的div标签
$("div:has(.c1)")

$("li:not(.c1)")		// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")	// 找到所有后代中不含a标签的li标签

例子：
<ul>
    <li id="1">上海</li>
    <li id="2">成都</li>
    <li id="3">泸州</li>
    <li id="4">雅安</li>
    <li id="5">北京</li>
</ul>

$(‘li:first‘);	// 查找所有li标签中的第一个标签

方式二：

和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法

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

$(‘li‘).first();	// 查找所有li标签中的第一个标签

属性选择器

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

表单筛选器

多用于找form表单里面出现的input标签

找到的是type属性为这个值的input标签中

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子：多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
    
$(‘:password‘)	// 找到input标签中type属性为password的标签

表单对象属性筛选器

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

例子1：
<input type="text" disabled="disabled">
<input type="password">
$("input:enabled")  	// 找到可用的input标签

例子2：
<select id="s1">
  <option value="1">北京</option>
  <option value="2">四川</option>
  <option selected value="3">云南</option>	// 默认选中
  <option value="4">深圳</option>
</select>
$(":selected")  	// 找到所有被选中的option

筛选器方法

选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。

下一个：

$(‘#l3‘).next();  			// 找到下一个兄弟标签
$(‘#l3‘).nextAll(); 		// 找到下面所有的兄弟标签
$(‘#l3‘).nextUntil(‘#l5‘);	// 往下直到找到id为l5的标签，不包含它

上一个：

$("#id").prev()				// 找到上一个兄弟标签
$("#id").prevAll()			// 找到上面所有的兄弟标签
$("#id").prevUntil("#i2")	// 往上直到找到id为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

和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

// 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class=‘c1‘属性的div
(‘li‘).filter(‘.l3‘);

四、标签操作

样式操作

样式类操作：

addClass();		// 添加指定的CSS类名。
removeClass();	// 移除指定的CSS类名。
hasClass();		// 判断样式存不存在
toggleClass();	// 切换CSS类名，如果有就移除，如果没有就添加。

例子：

$(‘div.c1‘).addClass(‘c2‘);
$(‘div.c1‘).removeClass(‘c2‘);
$(‘div.c1‘).hasClass(‘c2‘);
$(‘div.c1‘).toggleClass(‘c2‘);

CSS样式：

// 原生js
标签.style.backgroundColor = ‘black‘;

// jQuery
$(‘.c1‘).css(‘background-color‘,‘red‘);  
// 同时设置多个css样式
$(‘.c1‘).css({‘background-color‘:‘yellow‘,‘width‘:‘200px‘})

位置操作：

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

.position()的差别在于： .position()获取相对于它最近的具有相对位置(position: relative 或 position: absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器界面左上角的距离。

offset()	// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()	// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop();  	// 滚轮向下移动的距离
$(window).scrollLeft(); 	// 滚轮向左移动的距离

// 查看位置
$(‘.c2‘).position();  // 查看相对于父级元素位置
$(‘.c2‘).offset();    // 查看距离窗口左上角的绝对位置

// 设置位置
$(‘.c2‘).offset({‘top‘:‘20‘,‘left‘:‘40‘});

尺寸操作：

// 与盒子模型相关
$(‘.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内容，包含标签内容
html(val)	// 修改所有匹配元素的html内容，识别标签，能够表现出标签的效果

文本值：

text()		// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)	// 修改所有匹配元素的内容，不识别标签，将标签作为文本插入进去

例子：

$(‘.c1‘).text(‘<h3>hello Word</h3>‘);
$(‘.c1‘).html(‘<h3>hello Word</h3>‘);

值操作

val()		// 取得第一个匹配元素的当前值
val(val)	// 修改所有匹配元素的值
val([val1, val2])	// 修改多选的checkbox、多选select的值

实例一：获取值

<input type="text" class="c1">  ————>获取值：$(‘.c1‘).val();

<input type="checkbox" value="1">
// 获取被选中的值这样是不行的：$(‘: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" class="c1">  ——>设置值：$(‘.c1‘).val(‘小杨‘);

<input type="checkbox" value="1">	——>设置值：$(‘:checkbox‘).val([1,3]);
// 如果直接：$(‘:checkbox‘).val(1);这样的话会把所有的的value全部设置为1

单选select ---> $(‘#city‘).val(‘1‘); // 或者——> option value=‘1‘
多选select ---> $(‘#author‘).val([‘2‘,‘3‘])；

属性操作

用于ID自带属性等或自定义属性：

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

用于checkbox和radio

prop() 		// 获取属性

实例：

// 设置单个属性
$(‘.c1‘).attr(‘id‘,‘d1‘);

// 设置多个属性
$(‘.c1‘).attr({name:‘xiao‘,id:‘d1‘});

// 查看属性
$(‘.c1‘).attr(‘属性名‘);

// 删除属性
$(‘.c1‘).removeAttr(‘属性名‘);


// 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);

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

简单总结：

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

实例：
// 添加字符串照样能识别标签
$(‘#d1‘).perpend(‘<a href="http://www.jd.com">京东</a>‘);

添加到指定元素--外部的后面

$(A).after(B)		// 把B放到A的后面
$(A).insertAfter(B)	// 把A放到B的后面

实例：
// 添加字符串照样能识别标签
$(‘#d1‘).after(‘<a href="http://www.jd.com">京东</a>‘);

添加到指定元素--外部的前面

$(A).before(B)			// 把B放到A的前面
$(A).insertBefore(B)	// 把A放到B的前面

移除和清空元素

remove()	// 从DOM中删除所有匹配的元素。
empty()		// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在

实例：
$(‘div‘).remove();	// 移除div标签
$(‘div‘).empty();	// 清空div标签中的所有内容

替换

replaceWith()
replaceAll()

实例：
var a = document.createElement(‘a‘)
a.href = ‘http://www.baidu.com‘;
a.innerText = ‘百度‘;

// 写法不一样效果一样
$(‘div‘).replaceWith(a);		// 将所有的div标签替换成a标签
$(a).replaceAll(‘div‘);			// 将所有的div标签替换成a标签

克隆

clone()		// 克隆 


实例：
<button class="btn">按钮</button>

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

</script>

五、事件

事件绑定方式

方式一：

<style>
.c1{
    height: 100px;
    width: 100px;
    background: red;
}
</style>

<div class="c1"></div>

<script>
    $(‘.c1‘).click(function () {
        $(this).css({backgroundColor:‘green‘})
    })
</script>

方式二：

<style>
.c1{
    height: 100px;
    width: 100px;
    background: red;
}
</style>

<div class="c1"></div>

<script>
    $(‘.c1‘).on(‘click‘, function () {
        $(this).css({backgroundColor:‘green‘})
    })
</script>

常用事件

click(function(){...})		// 左键点击的事件
hover(function(){...})		// 鼠标悬浮触发的事件
blur(function(){...})		// 失去光标(焦点)触发的事件
focus(function(){...})		// 获取光标触发的事件
change(function(){...}) 	// 内容发生变化，input，select等
keyup(function(){...}) 		// 键盘抬起触发的事件
keydown(function(){...})	// 键盘按下触发的事件

**左键点击的事件：click **

$(‘.c1‘).click(function () {
	$(this).css({backgroundColor:‘green‘})
})

获取光标触发的事件：focus —— 失去光标(焦点)触发的事件：blur

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div class="c1" ></div>
<input type="text">

<script>
    $(‘[type="text"]‘).focus(function () {			// 获取光标事件
        $(‘.c1‘).css({backgroundColor:‘green‘})
    })

    $(‘[type="text"]‘).blur(function () {			// 失去光标事件
        $(‘.c1‘).css({backgroundColor:‘red‘})
    })
</script>

域内容发生改变时触发的事件：change ——内容发生变化，input，select等

<select name="" id="d1">
    <option value="1">成都</option>
    <option value="2">北京</option>
    <option value="3">上海</option>
</select>

<script>
    $(‘#d1‘).change(function () {	
        console.log($(this).val())
    })
</script>

input 实时监听事件：只要input框里面的值发生变化就触发某个事件，input事件不能直接绑定，必须用on绑定才行

<input type="text" id="d1">

<script>
    $(‘#d1‘).on("input", function () {
        console.log($(this).val())
    })
</script>

鼠标悬浮触发的事件：hover

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div class="c1"></div>

<script>
    $(‘.c1‘).hover(
        // 第一步：鼠标放上去
        function () {$(this).css({backgroundColor: ‘yellow‘});},
        // 第二步：鼠标移走
        function () {$(this).css({backgroundColor: ‘red‘});}
    )
</script>

鼠标悬浮触发的事件：mouseenter、mouseout——等同于hover

mouseover 和 mouseenter 的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div class="c1"></div>

<script>
    // 第一步：鼠标放上去
    $(‘.c1‘).mouseenter(function () {
        $(this).css({backgroundColor: ‘yellow‘})
    })
    // 第二部：鼠标移走
    $(‘.c1‘).mouseout(function () {
        $(this).css({backgroundColor: ‘red‘})
    })
</script>

键盘按下触发的事件：keydown

$(window).keydown(function (e) {
    console.log(e.keyCode); 	//每个键都有一个keyCode值,通过不同的值来触发不同的事件
})

键盘抬起触发的事件：keyup

$(window).keyup(function (e) {
    console.log(e.keyCode);
})

移除事件：. off

.off( events [, selector ][,function(){}])

1.events： 事件
2.selector: 选择器（可选的）
3.function: 事件处理函数


off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了

事件冒泡

冒泡的意思就是因为HTML可以嵌套，如果你给儿子标签绑定了事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的往上找点击事件

<!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>

阻止事件冒泡

就是为了阻止后续事件发生

1、return false；

$(‘#d1‘).click(function () {
    alert(‘父级标签‘);
});
$(‘#d2‘).click(function () {
    alert(‘子级标签‘);
    return false
});

2、e.stopPropagation( );

用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）

$(‘#d1‘).click(function () {
    alert(‘父级标签‘);
});
$(‘#d2‘).click(function (e) {	// 这个参数e(只是个形参)表示当前事件本身，这个事件也是一个对象
    alert(‘子级标签‘);
    e.stopPropagation();
});

事件委托

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

例一：没有事件委托，只有第一个按钮可以触发事件，其他新添加的按钮虽然 class=c1 但是不能触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="cc">
    <button class="c1">添加按钮</button>
</div>

<script src="jQuery.js"></script>
<script>
    $(‘.c1‘).click(function () {
        var btn = document.createElement("button");		// 新建button标签
        btn.innerText = ‘添加按钮‘;	
        btn.className = ‘c1‘		// 给新标签添加class=c1
        $(this).after(btn);			// 把新标签放在自己的后面
    })
</script>
</body>
</html>

列二：设置事件委托，每个新增按钮都可以触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="cc">
    <button class="c1">添加按钮</button>
</div>

<script src="jQuery.js"></script>
<script>
    
    // 将 ‘button.c1‘ 选择器中的标签的点击事件委托给了 $(‘div.cc‘)
    $(‘div.cc‘).on(‘click‘,‘button.c1‘,function () {
        var btn = document.createElement("button");
        btn.innerText = ‘添加按钮‘;
        btn.className = ‘c1‘
        $(this).after(btn);
    })
</script>
</body>
</html>

六、补充

页面载入

JS 代码写到head标签和写道 body 标签下面的作用是不同的，写在 head 标签里面的话，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的 JS 代码，就找不到这个标签，所以不会生效，所以写在 body 标签最下面是一种解决办法，但还有另外两种方法：

方法一 ：等页面上所有的元素都加载完，在执行这里面的 JS 代码

缺点：如果你自己写了两个 JS 文件，每个 JS 文件中都有一个 window.onload 的话，那么后引入的文件会把前面引入的文件的 window.onload 里面的 JS 代码全部覆盖掉，也会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的 JS 代码，加载比较慢

window.onload=function(){
    // JS的代码
}

方法二（推荐）：不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片视频什么的，加载 JS 效果的速度快。

// 写法一：
$(document).ready(function(){
	// JS的代码
})

// 写法二：简写
$(function(){
	// JS代码
})

$(document).ready 与 window.onload( ) 的区别

1、window.onload() 函数有覆盖现象，必须等待着图片资源加载完成之后才能调用

2、$(document).ready 的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

动画效果

基本动画

show()	--> $(‘.c1‘).show(5000)	// 5秒之后显示这个标签，显示过程有个动画
hide()	--> $(‘.c1‘).hide(5000)	// 5秒之后这个标签消失，消失过程有个动画

滑动（拉窗帘一样）

slideDown()		--> $(‘.c1‘).slideDown(5000)
slideUp()		--> $(‘.c1‘).slideUp(5000)
slideToggle()	--> $(‘.c1‘).slideToggle(5000)	// 前两个互相切换

淡入淡出（控制透明度）

fadeIn()		-->$(‘.c1‘).fadeIn(5000)
fadeOut()		-->$(‘.c1‘).fadeOut(5000)
fadeTo()		-->$(‘.c1‘).fadeTo(5000,0.2)	// 0.2是最后显示透明度
fadeToggle()	-->$(‘.c1‘).fadeToggle(5000)	// 前两项互相切换

each 循环

$.each (可迭代对象，function (k,v) { 迭代结果操作 } )

function 里面可以接受两个参数，K 是索引，V 是每次循环的具体元素。

实例一：获取选中的值
<input type="checkbox" value="1">一
<input type="checkbox" value="2">二
<input type="checkbox" value="3">三
<input type="checkbox" value="4">四
<input type="checkbox" value="5">五

$.each($(‘:checkbox:checked‘),function(k,v){
    console.log(k,v.value);
})

// 输出
0 "2"
1 "4"
2 "5"

实例二：
var li =[10,20,30,40]
$.each(li,function(k, v){  
  console.log(k, v);
})

// 输出
0 10
1 20
2 30
3 40

.each ( function (k,v) { 迭代结果操作 } )

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

K 是索引，V 是每次循环的具体元素。

// 由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签加class
$("li").each(function(){
  $(this).addClass("c1");
});

注意： jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 -- 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  	// 对所有标签做统一操作

终止 each 循环

在遍历过程中可以使用 return false提前结束each循环。

而直接使用return后面什么都不加，不写false，就是跳过本次循环的意思。

JS 和 jQuery 中的 for 循环也是通过他们两个来跳出当此循环或者终止循环

实例一：return false
var a = [1,2,3,4,5,6,7,8]
$.each(a, function(k,v){
    if (v > 3){			// 大于3就结束循环
        return false;
    }else{
        console.log(v);
    }
});

// 输出
1
2
3

实例二：return
var a = [1,2,3,4,5,6,7,8]
$.each(a, function(k,v){
    if (v > 2 && v < 7){	// 在2-7之间的数字就跳过循环
        return false;
    }else{
        console.log(v);
    }
});

// 输出
1
2
7
8

.data( ) 方法

任意 jQuery 对象都有 data 方法，可以保存任意值，可以用来代替全局变量

.data(key, value)：设置值

描述：在匹配的元素上存储任意相关数据。

$("div").data("age",18);	//给所有div标签都保存一个名为age，值为18

.data(key)：取值，没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

$("div").data("age");		//返回第一个div标签中保存的"age"的值

可以保存标签

$(‘div.c1‘).data(‘a标签‘,$(‘a.c2‘));
$(‘.c1‘).data(‘a标签‘).text();	-->百度

.removeData(key)：删除

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$(‘.c1‘).removeData(‘a标签‘);		// 移除元素上存放’a标签‘对应的数据

JQuery总结