jQuery 4.21

jQuery

---

1.概述

1.1JS库

即liabrary，封装好的特定的集合

1.2入口函数

等页面加载完毕后执行代码

• $（document）.ready（function）{}
• $（function（）{}）

1.3顶级对象$

$是jQuery的别称，相当于window

1.4jQuery对象和DOM对象

• 用原生JS获取的对象是DOM对象
• 用jQuery方法获取的对象是jQuery对象
  jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
• jQuery对象只能使用jQuery方法，DOM对象只能使用JS方法

jQuery对象和DOM对象转换

• DOM对象转换jQuery对象：$（DOM对象）
• jQuery对象转换DOM对象：$（‘div’）[index] 或 $（‘div’）.get（index）

2.常用API

2.1jQuery选择器

• $（“选择器”）
  后代选择器 $(“ul li”）获取ul下所有的li
• 设置样式：$ （‘div’）.css（‘属性’，‘值’）
  隐式迭代：遍历内部DOM元素（伪数组）的过程
• 筛选选择器：
  
• 筛选方法：
  
  parent（）只返回最近一级的父元素
  prevAll（）
  parents（）返回指定的祖先元素

2.2排他思想

隐式迭代全部绑定事件，当前元素变化，其他兄弟去掉变化

2.3链式编程

$(this).css('color','red').sibling().css('color','');

2.4jQuery样式操作

2.4.1修改css样式

• 参数只写属性名，则返回属性值
• 参数使用（属性名，属性值）设置属性值，属性必须加引号，值如果是数字可以不加单位和引号
• 参数使用对象形式，设置多组样式，属性名和属性值用冒号隔开，属性之间用逗号隔开，属性可以不加引号

2.4.2设置类的样式

• 添加类：$("div").addClass("类名"); 类名不要加点
• 删除类：$("div").removeClass("类名")
• 切换类：$("div").toggleClass("类名") 有就去掉，没有加上
  类操作与className的区别：className会覆盖原先的类名，jQuery里面类操作不影响原来的类名

2.5jQuery效果

2.5.1显示隐藏

show([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

hide([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

toggle([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

2.5.2滑动

slideDown([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

slideUp([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

slideToggle([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

2.5.3事件切换

hover([over,]out)

• over：鼠标经过元素触发
• out：鼠标移开元素触发
• 如果只写一个函数，经过和离开都会触发

2.5.4动画队列及停止排队

动画或效果一旦触发就会执行，若多次触发则会排队执行

停止排队

stop（）写在动画或效果的前面，相当于停止上一次的动画

2.5.5淡入淡出

fadeOut([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

fadeIn([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

fadeToggle([speed,[easing],[fn]])

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

fadeTo([speed,opacity，[easing],[fn]])   //修改透明度

参数都可以省略，直接显示

• speed：slow；normal；fast或者毫秒数，必须写
• opacity：0~1
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

2.5.6自定义动画

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

• params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，复合属性采取驼峰命名法
• speed：slow；normal；fast或者毫秒数
• easing：切换效果，默认为swing，可用linear匀速
• fn：回调函数

2.6jQuery属性操作

2.6.1设置或获取元素固有属性prop（）

• 获取：prop（“属性名”）
• 设置：prop（“属性名”，“属性值”）

2.6.2设置或获取元素固有属性attr（）

• 获取：attr（“属性名”）
• 设置：attr（“属性名”，“属性值”）

2.6.3数据缓存data（）

在指定元素上存取数据，并不会修改DOM结构，页面刷新，数据移除
data（“属性名”，“属性值”）
data（“属性名”）

2.6.4全选案例

：checked选中的复选框
：checked.length选中的个数

2.7jQuery内容文本值

2.7.1普通元素内容html（）

获取：html（）
设置：html（“内容”）

2.7.2普通元素文本内容text（）

获取：text（）
设置：text（“内容”）

2.7.3表单的值val（）

获取：val（）
设置：val（“内容”）

保留两位小数 toFixed（2）

2.8jQuery元素操作

2.8.1遍历

隐式迭代是对同一类元素做相同的操作，遍历是对其做不同的操作

• $("div").each(function(index,domEle){})
  index：元素索引号
  demEle：每个DOM对象
• $.each(object，function(index,domEle){})处理数据比较方便

2.8.2创建、添加、删除元素

• 创建

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

• 添加
  内部添加：放到最后面

element.append("内容")

放到最前面

element.prepend("内容")

外部添加：

element.after("内容")

element.before("内容")

• 删除
  删除元素本身

element.remove()

删除元素集合中所有子节点

element.empty()

清空元素内容

element.html("")

2.9jQuery尺寸、位置操作

2.9.1尺寸

参数为数字则是修改数值，不用写单位

2.9.2位置

• offset()设置或获取元素偏移
  相对于文档的坐标，与父亲无关
  设置时直接写对象{
  left:200;
  top:200;}
• position()获取元素偏移
  相对于带有定位的父级坐标，只能获取，不能设置
• scrollTop() / scrollLeft()被卷去头部和左侧的位置

3.jQuery事件

3.1事件注册

单个事件注册：

element.事件(function(){})

$("div").事件(function(){事件处理程序})

3.2事件处理

on()绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件
selector:元素的子元素选择器
fn:回调函数

• 优势1：可以事件委派操作，把原来加给子元素身上的事件绑定在父元素身上

$('ul').on(event,'li',fn)

事件绑定在ul身上，触发对象是li

• 优势2：给未来动态创建的元素绑定事件

3.3事件解绑off()

解除所有事件

$("div").off();     //解除所有事件

解除特定事件

$("div").off("事件");     //解除特定事件

解除事件委托

$("div").off("事件"，"li");     //解除事件委托

若事件只想触发一次，可以使用one（）绑定事件

3.4自动触发事件trigger()

element.click()

element.trigger("事件")

不会触发元素的默认行为：

element.triggerHandler("事件")

3.5事件对象

element.on(events,[selector],function(event){})

4.jQuery其他方法

4.1对象拷贝

$.extend([deep],target,object,[objectN])

deep:true为深拷贝，默认false，浅拷贝只拷贝复杂数据类型的地址，修改target的值会影响原来的值；深拷贝拷贝的是对象，修改不会影响原来的对象
target:拷贝目标对象
object1:待拷贝到第一个对象的对象
会覆盖target里原来的数据

4.2jQuery多库共存

解决方案：

• 把$符号统一改成jQuery
• 规定新名称：$.noConflict() var ** = $.noConflict()

4.3jQuery插件

jQuery插件库
jQuery之家

图片懒加载插件

页面滑动到可视区域，再显示图片

全屏滚动插件

bootstrap框架也依赖jQuery