jQuery知识点详解

一、基本使用

主要是为了快速操作DOM，存放了许多的函数，是JS库中的一种
入口函数（等着页面DOM加载完毕在执行js）：

$(function){
})

1.*对象$

(1) jQuery可替代$
(2) $相当于原生JavaScript中的window

2.jQuery对象和DOM对象

1. DOM对象：用原生JS获取过来的对象，一般使用原生的JS方法和属性
2. jQuery对象：通过$把DOM元素获取过来（以伪数组形式存储），不能使用DOM对象的原生JS方法和属性

两者之间的转换

3. DOM对象—>jQuery对象：$(DOM对象）
4. jQuery对象—>DOM对象(index是索引号）

$(“元素”)[index]
$(“元素”).get(index)

3.jQuery常用API

（1）jQuery选择器

$(“选择器”)要直接写css选择器，记住加引号

选择器	写法
ID选择器	$("#id")
全选选择器	$("*") 匹配所有元素
类选择器	$(".class")
标签选择器	$(“标签”) eg：div
并集选择器	$(“div,p,li”) 选取多个元素
交集选择器	$(“li.current”)
子代选择器	$(“ul>li”) 只获取亲儿子层级的元素
后代选择器	$(“ul li”) 中间空格表示，获取ul下边的所有li，包括孙子

筛选选择器：

语法	用法
:first	$(“li:first”) 获取第一个li元素
:last	$(“li:last”) 获取最后一个li元素
:eq(index)	$(“li:eq(2)”) 获取到的li元素中选取索引号是2的元素
:odd	$(“li:odd”) 获取li元素中，选取奇数
:even	$(“li:even”) 获取li元素中，选取偶数

（2）筛选方法

方法	说明
parent()	查找父级
children(selector)	$(“ul”).chidren(“li”)查找最近一级（儿子）
find(selector)	查找子孙后代，相当于后代选择器
siblings(selector)	查找兄弟节点，不包含自身
eq(index)
nextAll([expr])	查找所有元素之后的所有同辈元素
prevtAll([expr])	查找所有元素之前的所有同辈元素
eq(index)

（3）排他思想

• 隐式迭代：给所有的按钮都绑定点击事件
• $(“button”).click(function(){})
• 当前元素css变化：$(this).css(“xx”,“xx”);
• 其余兄弟元素去掉…隐式迭代：$(this).siblings(“button”).css(“xx”,"");

二、jQuery样式操作

1.操作css方法

1. 如果是只写属性名，就返回的是属性值
2. 参数是属性名，属性值，属性名必须加引号，属性值若是数字可以不跟单位和引号，两者之间必须用逗号相隔
3. 参数可以是对象形式，方便设置多种样式，属性值和属性名用冒号分开，属性若是数字可以不加“”

2.设置类样式方法

1. 操作类里面的参数不要加.
2. 添加类：相当于追加类名，不影响以前的类名。addClass(“类名”)
   以前学习的className会覆盖原先的类名

$(“元素”).addClass(“类名”)

3. 删除类removeClass(“类名”)

$(“元素”).removeClass(“类名”)

4.切换类toggleClass(“类名”)：有里面的类名就移除，没有的话就添加上

三、jQuery效果

1.显示隐藏效果

1. show ([speed,[easing],[回调函数]])
2. hide([speed,[easing],[回调函数]])
3. toggle([speed,[easing],[回调函数]])

speed可以写具体的数值时间/fast/slow/normal
easing默认是swing，还有linear

2.滑动效果

1. 下滑slideDown()
2. 上滑动slideUp()
3. 滑动切换slideToggle

3.事件切换

hover：鼠标经过和离开的复合写法

1. 两个参数写法

$(".xx").hover(function(){
},
function(){
});

• 如果只写一个参数，可用slideToggle()

4.动画队列及其停止排队方法

• stop()方法必须写在动画的前边，让动画运行完之后在执行接下来的
• 如果写在动画的 后边就是没有动画效果的

5.淡入淡出效果

• fadeIn()淡入
• fadeOut()淡出
• fadeToggle()切换淡入淡出
• fadeTo([speed],opacity,[easing],[回调函数])
• opacity是必须写出来的

6.自定义动画animate()

1. animate(params,[speed],[easing],[fn])

四、jQuery属性操作

1.设置或获取元素固有属性值prop()

1. element.prop(“属性”)获取元素的固有属性
2. element.prop(“属性”，“属性值”)设置元素的固有属性

2.设置或获取自定义属性attr()

1. element.attr(“属性”)获取元素的自定义属性
2. element.attr(“属性”，“属性值”)设置元素的自定义属性

3.数据缓存data()

这里面的数据是存在元素的内存里面的，获取data-index，h5自定义属性时
（1）不用写data-
（2）返回的是数字型

五、jQuery内容文本框

主要是针对元素的内容和表单的值的操作

1. 普通元素的内容html（），相当于原生innerHTML（获取过来的带元素标签）

1. element.html() 获取元素的内容
2. element.html(“”) 设置元素的内容

2. 普通元素的文本内容text(),相当于原生innerText（不带标签元素）

1. element.text() 获取元素文本的内容
2. element.text(“”) 设置元素文本的内容

3. 表单的值val()

1. element.val() 获取表单的内容
2. element.val(“”) 设置表单的内容

六、jQuery元素操作

1.遍历each()

1. 给同一类元素做不同的操作

1. $("").each(function(index,domEle){xxx;})
2. domEle是DOM元素对象，不是jQuery对象
3. 如果想使用jQuery方法，要给DOM元素转化为jQuery对象$(domEle)

2. 给不同一类元素做不同的操作

1. $.each(object,function(index,element){});
2. 主要用于数组、对象处理
3. object表示的是遍历对象，element表示遍历内容（属性值）

2.创建元素

创建li元素

 $("<li>xxx</li>");

3.添加元素

只创建元素是不行的，还要把刚创建的元素添加到想要的位置

（1）内部添加 （父子关系）

1. element.append（元素）；
   这是把元素添加到element里面的最后一个元素
2. element.prepend（元素）；
   这是把元素添加到element里面的最前面的位置

（2）外部添加（兄弟关系）

1. element.after(“xx")把xx放在element后边
2. element.before(“xx") 把xx放在element前边

4.删除元素

1. element.remove()删除element元素本身
2. element.empty()删除element元素集合中的所有子节点
3. element.html("") 清空匹配的元素内容

七、jQuery事件

1.事件注册

单个事件注册

element.事件(function(){});

2.事件处理on()绑定事件

1. on()绑定事件可以绑定一个或多个事件的处理函数
2. element.on(events,[selector],fn);
3. events是事件类型，例如：click
4. [selector]是元素的子元素的选择器
5. 优势： 可以实现事件委托；可以给未来动态创建的元素添加事件

3.事件解绑off()

1. $(“p”).off()解除p元素身上的所有事件
2. $(“p”).off(“click”)解除p元素身上的点击事件
3. $(“ul”).off(“click”,“li”)解除ul元素身上的li的点击事件

4.自动触发事件trigger()

1. 元素.事件()
2. 元素.trigger(“事件”)
3. 元素.triggerHandler(“事件”)不会触发元素的默认行为