jQuery总结

Jquery的入口是默认等DOM树加载完就开始执行，而JS的入口等页面所有的元素加载完才执行。为了使Jq能正常使用，所以把它的入口函数也设置为所有元素加载完。

$(document).ready(匿名函数)或者$(function(){})。//在Jquery里"$"=“jQuery”

DOM对象：使用js方式获取到的元素，var li=document.getElementById()

jQuery对象：使用Jquery方式获取的元素，var $li=jQuery(“li”)

//DOM转Jquery对象
$(DOM对象).方法
//Jquery对象转DOM对象
var $li=$(“li”)[0]//或者$(“li”).get(0)

$就是一个函数，三种用法。作为入口函数，DOM转Jquery对象，找对象。
①基本选择器

标签选择器:p。id选择器:#p。类选择器:.class的属性值。并集选择器:选择器1，选择器2。交集选择器:选择器1选择器2。
②层级选择器：
选择器名 语法 功能
后代选择器 $("A B ") 选择A元素内部的所有B元素
子选择器 $(“A > B”) 选择A元素内部的所有一级B元素
③属性选择器
选择器名 语法 功能
属性名称选择器 $(“A[属性名B]”) 选择器A中属性名包含B的选择器
属性选择器 $(“A[属性名B=‘值C’]”) 选择器A中属性名包含B且值为C的选择器
复合属性选择器 $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
$(“A[属性名B^=‘C’]”) 匹配属性名B中值以C开头的
④过滤选择器
选择器名 语法 功能
首/尾元素选择器 :first/:last
奇/偶元素选择器 :odd/:even
非元素选择器 :not(selector) 选择不包括指定内容的元素
大于/等于/小于索引选择器 :gt(index)/:lt(index)/:eq(index) 获取><=索引的元素
标题选择器 :header 获取标题(h1~h6)元素
⑤表单过滤选择器
选择器名 语法 功能
可用元素选择器 :enabled 获得可用元素
不可用元素选择器 :disabled 获得不可用元素
选中选择器 :checked 所有表单元素中被选中的元素

内容操作：

①html():获取/设置元素标签体内容。②text():获取或设置纯文本内容。③获取或设置value值

属性操作：

①通用属性操作：
获取/设置元素的属性 删除属性 使用场景
attr() removeAttr() 自定义属性
prop() removeProp() 固有属性，布尔类型属性

②class属性操作：

addClass():添加class属性值

removeClass():删除class属性值

toggleClass():切换class属性，有则删除，无则添加

css():获取和设置属性值。

**隐式迭代：**设置时会把伪数组里所有元素的属性都设置上；获取时只会返回第一个元素对应的值。
③CRUD节点操作
方法 作用
对象1.append(对象2) 将对象2添加到对象1的内部，并在末尾
对象1.perpend(对象2) 将对象2添加到对象1的内部，在开头
对象1.after(对象2) 对象2添加到对象1的后面，兄弟关系
对象1.before(对象2) 对象2添加到对象1的前面，兄弟关系
remove(对象1) 移除对象1
对象1.empty() 清空对象1的所有后代元素。但是保留对象1
对象1.clone(true|false) 复制对象1，ture是完全复制，false复制除绑定事件外的
三组动画
显示 隐藏 切换 效果
show() hide() toggle() 默认
slideDown() slideUp() slideToggle() 滑动
fadeIn() fadeOut() fadeToggle() 淡入

上面表中的方法都有三个参数：

speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
easing：用来指定切换效果，默认是"swing"，可用参数"linear"匀速
fn：在动画完成时执行的函数，每个元素执行一次。

遍历

1.jq对象.each(callback)

2.$.each(object,[callback])

3.for(元素对象 of 容器对象)

@回调函数的返回值为true，跳过本次循环；false，结束循环
事件机制

1.简单事件 对象1.bind({事件类型1：f1,事件类型n:fn})

2.委托事件 delegate/undelegate 父对象为子对象绑定

父对象.delegate(“子对象”，“事件类型”，回调函数)

利用了事件冒泡，当点击子元素时，无反应。但是其父元素被冒泡到，通过委托事件方法里的参数找到对应的子对象。帮助子对象绑定事件。这样做可以动态创建元素时绑定

3.on绑定事件/off解除绑定

注册简单事件：jq对象.on(“事件名称”,回调函数)

注册委托事件：jq父对象.on(“事件名称”,“子对象”,回调函数)

jq对象.off(“事件名称”)

如果off方法不传递任何参数，则将组件上的所有事件全部解绑

4.事件切换：toggle

jq对象.toggle(fn1,fn2…) //当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
事件对象event

event.type:获取触发元素事件的类型；

event.pageX/pageY:获取事件触发时，鼠标相对于当前页面的坐标值；

event.target:获取触发事件的元素;

​ target和this的区别是：对象1里有对象2，对象1绑定个click，点击对象2

​ 用e.target得到的是对象2。 用this得到的是对象1。

event.preventDefault() ：阻止默认行为

event.stopPropagation() ：阻止事件冒泡
三大家族
offset()方法：

1.offset()方法获取到的是一个对象,里面有left值和top的值.

2.offset方法获取元素距离document的位置.

3.不传参是获取，传参是设置
scrollTop()与scrollLeft()

​ $(window).scrollTop();
position()方法：元素距离有定位的父元素(offsetParent)的位置

1.获取到的也是一个对象,包含top和left值.
2.不能进行设置
链式编程

对象1对象2.end()方法：链式编程时使用后，把返回值由对象2的返回值变为对象1的。

@一次性定时器用递归方法可以实现多次定时