Jquery

Jquery

一、Jquery简介

​ jQuery是一个轻量级的、兼容多浏览器的JavaScript库。能使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

​ 特点：

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插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

​ Jquery官网：https://jquery.com/

二、Jquery基本语法

2.1 Jquery对象

​ Jquery对象是通过Jquery包装的DOM对象产生的对象，Jquery对象是Jquery所独有的，表示方法为：

var $variable    -->Jquery对象
var variable     -->DOM对象
$('#i1').html()  -->获取id值为 i1的元素的html代码
$variable[0]     -->Jquery对象转成DOM对象

2.2 查找标签

2.2.1 基本选择器

$('#id')                      --->id选择器
$('tagName')                  --->标签选择器
$('.className')               --->class选择器
$('div.cl')                   --->找到有cl的class类的标签
$('*')                        --->所有元素选择器
$('#id,.className,tagName')   --->组合选择器

2.2.2 层级选择器

$('x y');     --->x的所有后代y
$('x > y');   --->x的所有儿子y
$('x + y');   --->x后面的y
$('x ~ y');   --->x后所有的兄弟y

2.2.3 基本筛选器

$('div: first')           --->div标签里的第一个
$('div: last')            --->div标签里的最后一个
$('div: ep(n)')           --->div标签里的索引为n的元素
$('div: even')			  --->div标签里的索引为偶数的
$('div: odd')             --->div标签里的索引为奇数的
$('div: get(n)')          --->div标签里的大于索引的元素
$('div: lt(n)')           --->div标签里的小于索引的元素
$('div: not(元素选择器)')   --->div标签里的不包含某元素
$('div: has(元素选择器)')   --->div标签里的包含某元素

2.2.4 属性选择器

<input type='text'>
<input type='password'>
<input type='button'>
$('input[attribute = 'text']');    --->属性等于text
$('input[attribute!= 'button']);   --->属性不等于button

2.2.5 表单筛选器

​ 表单删选可以选择text、password、file、radio、checkbox、submit、reset、button等，表单对性的属性有enable、disable、checkable、selected等。

$(':submit')  --->找到所有的submit

<form>
    <input name='email' disabled='disabled' />
    <input name='id' />
</form>
$('input:enabled')    --->找到可以使用input的标签

2.2.6 筛选器方法

​ 之前之后：

$("#id").next()           --->下一个元素
$("#id").nextAll()        --->之后所有元素
$("#id").nextUntil(#id)   --->直到id元素
$("#id").prev()           --->上一个元素
$("#id").prevAll()        --->之前所有元素
$("#id").prevUntil(#id)   --->直到id元素

​ 父类元素：

$('#id').parent()         --->查找父类元素
$('#id').parents()        --->查找所有父类元素
$('#id').parentsUntil()   --->查找所有父类元素，直到。。。

​ 子类元素：

$('#id').children();  --->儿子们
$('#id').siblings();  --->兄弟们

​ 查找元素：

$('div').find('p')
$('div p')

​ 筛选元素：

$('div').filter('.c1')
$('div.c1')

​ 其他方法：

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

2.3 操作标签

2.3.1 样式操作

​ 样式类：

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

​ CSS：

$('p').css('color','red');  --->将所有p标签的字体设置为红色

2.3.2 位置操作

offset()     --->获取匹配元素在当前窗口的相对偏移或设置元素位置
position()   --->获取匹配元素相对父元素的偏移
scrollTop()  --->获取匹配元素相对滚动条顶部的偏移
scrollLeft() --->获取匹配元素相对滚动条左侧的偏移

2.3.3 文本操作

​ html代码：

html()    --->取得第一个匹配元素的内容
html(val) --->设置所有匹配元素的内容

​ 文本值：

text()     --->取得所有匹配元素的内容
text(val)  --->设置所有匹配元素的内容

​ 值：

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

2.3.4 属性操作

​ 用于id或自定义属性:

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

​ 用于checkbox和radio属性：

prop()        --->获取属性
removeProp()  --->移除属性

​ attributr和propetrty都有属性的意思，但二者是有差别的：

• property是DOM中的属性，是JavaScript里的对象；
• attribute是HTML标签上的特性，它的值只能够是字符串；

​ 总结：对于标签上有的能看到的属性和自定义属性都用attr；对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

2.4 文档处理

​ 添加到指定元素内部的后面：

$(a).append(b)    --->把b追加到a
$(a).appendTo(b)  --->把a追加到b

​ 添加到指定元素内部的前面：

$(a).prepend(b)    --->把b前置到a
$(a).prependTo(b)  --->把a前置到b

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

$(a).after(b)        --->把b放到a前面
$(a).insertBefore(b) --->把a放到b前面

​ 移除和清空元素：

remove()   --->从DOM中删除所有匹配的元素
enpty()    ---> 删除匹配的元素集合中所有的子节点。

​ 替换：

replaceWith()
replaceAll()

​ 克隆：

clone()

三、事件

3.1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

3.2 事件的绑定

...on(event [,selector],function(){})
events:事件
selector:选择器（可选）
function:事件处理函数

3.3 移出事件

...off(events[,selector][,function({})])
events:事件
selector:选择器（可选）
function:事件处理函数

3.4 阻止后续事件执行

return false;

3.5 页面载入

​ 当DOM载入就绪就可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

$(document).ready(function()){JS代码})
$(function(){JS代码})

3.6 事件委托

​ 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。例：表格中每一行的编辑和删除按钮都能触发相应的事件。

$('table').on('click','.deldte',function(){})

四、补充

4.1 each

​ 一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li = [10,20,30,40]
$.each(li,function(i,v){
console.log(i,v);
})

010
120
230
340

​ .each(function(index, Element))方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

$('li').each(function(){$(this).addClass('cl');})
为每一个li标签添加foo

​ 终止each循环

return false;

4.2 data

​ .data(key,value)：在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

$('div').data('k',100);
给所有div标签都保存一个值为100的key；

​ .data(key)：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

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

​ .removeData(key)：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$('div').removeData('k');
移除元素上k对应的数据