十九、jQuery
19.1 jQuery概述
19.1.1 JavaScript库
19.1.2 jQuery概念
19.2 jQuery的基本使用
19.2.1 入口函数
正常来说script写在div下面,如果想写在上面需要上方两种入口函数
19.2.2 jQuery顶级对象 $
19.2.3 jQuery对象和DOM对象
- DOM对象:用原生js获取来的对象就是DOM对象
- jQuery对象:用jQuery获取来的对象就是jQuery·对象,以伪数组形式存储
- jQuery对象只能使用jQuery方法,DOM对象只能使用原生js属性和方法
19.2.4 jQuery对象和DOM对象
jQuery对象和DOM对象是可以互相转化的,因为原生js比jQuery更大,还有一些原生属性和方法jQuery没有给我们封装,要使用这些属性和方法需要把jQuery对象转化为DOM对象才能使用
- DOM对象转化为jquery对象(两种情况)
- jQuery对象转换为DOM对象
若只有一个div,index索引号为0,因为jQuery对象是伪数组形式
二十、jQuery常用API
20.1 jQuery选择器
20.1.1 基础选择器
20.1.2 层级选择器
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫隐式迭代,就是给匹配到的所有元素进行遍历循环操作并给每个元素都修改样式,这样就不用for循环
例如
20.1.3 筛选选择器
20.1.4 jQuery筛选方法(重点)
其他筛选方法
item为其中 一个li
选取某元素第n个li有两个方法,推荐第二个
20.1.4 jQuery的排他思想
- 显示元素show()
- 隐藏元素hide()
20.1.5 链式编程
例如之前的排他思想案例中的让当前元素变色其他元素不变色两句可以合为一句话来写像链子一样
20.2 jQuery样式操作
20.2.1 操作css方法
20.2.2 设置类样式方法
就是在css中添加一个类名并加上样式,直接给元素添加或者删除类名来获得类名的样式
类操作样式与className区别
jQuery里面类操作只是对指定类进行操作,不影响原来的类名,后者回一下
20.3 jQuery效果
20.3.1 显示隐藏效果
注意:jQuery中样式参数比较多,可以通过jQuery中文手册查找(素材中有手册)
20.3.2 滑动效果
滑动案例
jQuery停止动画排队
像导航栏,如果多次快速移动的话就会出现多个导航栏依次下滑的过程即使停止滑动也要等到滑动次数结束才停止,为了解决这一问题,在动画方法前面添加一个stop(),即在执行这一下滑的时候停止之前所有的滑动
20.3.3 淡入淡出效果
案例
20.3.4 自定义动画animate(重)
例如
20.4 jQuery属性操作
20.4.1 获取固有属性
只能获取固定属性获取不了自定义属性
20.4.2 获取自定义属性
20.4.3 数据缓存
20.5 jQuery内容文本值
20.6 jQuery元素操作(遍历、创建、添加、删除元素)
20.6.1 遍历元素
隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
此方法遍历对象时,index表示属性名,element表示属性值
20.6.2 创建、添加元素
先创建,后添加
添加要把标签完整地写出来(双)以及内容
注意:element要把它改成jQuery对象
20.6.3 删除元素
empty和html都是清除元素里面所有的子元素,但是这个元素还存在,但是html要在括号内加双引号
20.7 jQuery尺寸、位置操作
20.7.1 尺寸操作
width/height括号中添加数字是修改样式宽度/高度,没有数字就是获取元素高与宽
20.7.2 位置操作
注意position只能获取位置不能设置位置
此方法可以在括号内设置被卷去元素的头部的像素
案例:带有动画的返回顶部
animate前面必须是元素不能是document
二十一、jQuery事件
21.1 jQuery事件注册
- 单个事件注册
21.2事件处理
21.2.1 事件on()绑定事件
点击ul中的任意一个小li都会触发click事件
这样新创建的li也绑定了这个事件,以前的创建元素不能绑定这个事件
21.2.2 事件处理off()解绑事件
off()方法可以解除通过on()方法添加的事件处理程序
one事件使用方法与on一致
21.2.3 自动触发事件trigger()
trigger事件不需要点击等事件触发,设置定时器自动触发
21.3 jQuery事件对象
只要有事件触发,就会有事件对象的产生
二十二、jQuery其他方法
22.1 jquery对象拷贝(重点)
如果想要把某个对象拷贝(合并给另一个对象使用),可以使用$.extend()方法
target本来为空输出后target有了obj内容,如果target本来有个id拷贝后obj的id会附带原来target的id
深拷贝与浅拷贝
浅拷贝修改原来target的拷贝对象也会影响原来被拷贝对象的内容,浅拷贝只是把复杂数据类型地址拷贝过去,target与obj的复杂数据类型(对象)都指向一个地方内容,里面如果有属性名一样的会覆盖,例如下面只会保留msg中的age=18
深拷贝是完全拷贝克隆给目标对象,不会影响袁拷贝对象的内容,而是新开放一个空间存放target的对象内容,且如果对象里面属性不冲突会保留,深拷贝会将msg中的sex和name同时保留
22.2 多库共存
需要一个解决方案,让jQuery和其他js库不存在冲突,可以同时存在,这就叫多库共存
jQuery解决方案
如果自己的函数名有
而
j
q
u
e
r
y
也
有
而jquery也有
而jquery也有这样就会冲突,就可以把jquery的$符号改掉
22.3 jQuery插件
22.3.1插件查找
下载插件后将css与js文件复制到需要用这些样式的页面文件中将插件的图片等改为自己需要的即可
22.3.2 bootstrap插件
引入完整方式
引入bootstrap的js文件后可以完整使用bootstrap