2020-08-22

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

js框架发展：

第一代: 增强原有对象的功能为目标。

第二代：jQuery

第三代：vuejs、react、angularjs

jQuery的版本

jq的版本分为1系列、2系列、3系列。

1系列jq，关注与兼容性，集合可以在所有浏览器中执行，文件体积较大，运行效率低。

2系列jq，放弃了ie6、7、8支持，文件体积小，运行效率高。

3系列jq，添加了es6及之后的一些语法，更适用于移动端。

jq每次更新语法变动都比较大，我们基于哪个版本开发的系统，不建议更新jq版本，原则是够用就行，不要追新。

jQuery的语法特点

jQuery引入jq元素集合的概念，可以对集合整体进行操作。

jQuery编程思路是链式操作，jq的每一个方法执行完成后都会返回当前的jq元素集合，供下一个方法继续使用。

jq元素集合与原生js的dom对象的相互转化

dom转集合

​ $(dom)

集合转dom

​ 多对多 集合.toArray()

​ 多对一 集合.get(index) 简写成 集合[index]

关于文档就绪

外部的js文件有时会因为引入的位置靠前而不能正确执行，因此需要使用文档就绪事件。

js的文档就绪：

window.onload = function(){
  document.getElementById('aa').style.backgroundColor = 'yellow';
};

简写成：

onload = function(){
  document.getElementById('aa').style.backgroundColor = 'yellow';
};

为了保证代码正常执行，又不影响其他事件，写成如下方式：

window.addEventListener('load',function () {
  document.getElementById('aa').style.backgroundColor = 'yellow';
});

jQuery的文档就绪：

$(window).ready(function () {

});

简写为：

$(function () {

})

原生js和jq的文档就绪的区别：

1. 原生js的文档就绪，是文档的代码及外部资源全部加载完成。
2. jq的文档就绪，只看文档的代码是否加载完成，不关心外部资源的。
3. 当两个文档就绪都存在时，jq的先执行。

jq选择器

不考虑dom结构	:first	:last	:gt(index) :lt(index) :eq(index) :even ;odd
考虑dom结构	:first-child	:last-child	:nth-child(arg) :nth-last-child(arg)
考虑dom也考虑元素类型	:first-of-type	:last-of-type	:nth-of-type(arg) :nth-last-of-type(arg)

arg参数可以是位置值从1开始，也可以是odd、even，还可以是 an+b形式，每a个分为一组，每组选择第b个元素，可以跨组选择，可以虚拟出后续的组，但不会虚拟出1之前的组。

:only-child 选择是独生子的元素（没有其他同胞元素）

:only-of-type 选择的每个家庭中同类型元素中唯一的。

p+p 选择p元素，但要求p元素的同胞元素中，排在被选元素之前（紧邻）的仍然是p元素。

p~p 选择p元素，但要求p元素的同胞元素中，排在被选元素之前（可以是非紧邻）的仍然是p元素。

:not(selector) 除了selector选择的元素之外的其他所有元素。

:header 相当于h1,h2,…h6，选择所有的标题元素。

:animated 选择的是，正在进行jq动画的元素。

:focus 选择的是当前获得焦点的元素。

:contains(字符串) 选择所有包含字符串的元素。

:has(selector) 选择所有包含selector选择元素的元素。

:empty 选择所有的空元素（太监元素）。

:parent 选择所有的非空元素。

:hidden 选择所有隐藏的元素

:visible 选择所有可见的元素

:root 选择根元素，在html文档中，相当于选择html元素。

一堆属性选择器自行研究，不作为重点。

:input 选择所有的表单元素，包括非input。

一堆表单元素选择器（不包含隐藏域）

:enabled 所有非禁用的表单元素。

:disabled 所有禁用的表单元素。

:selected 选择默认选中的option元素。

:checked 选择默认选中的单选或复选元素。

基本选择器 、 层次选择器 、 过滤选择器 、表单选择器

jq的方法

进一步选择（筛选）

first() 将jq元素集合选择其中的第一个元素。

last() 选择集合中的最后一个元素。

eq(index) 选择集合中指定索引的元素。

filter(selector) 按选择器的要求，进一步选择集合中的元素。

not(selector) 按选择器的要求，剔除集合中符合条件的元素。

add(selector) 向集合中新增元素。

slice() 截取集合中的一部分。

end() 取消之前的一次对集合本身所做的改变。

元素的操作

创建元素

创建元素，只需要用$()包裹html代码就可以；

$('<li><h1>新的</h1></li>');

插入元素

将新的元素插入到子元素的最后	父元素.append(新的)	新的.appendTo(父元素)
将新的元素插入到子元素的最前	父元素.prepend(新的)	新的.prependTo(父元素)
将新元素插入到同胞之前	同袍.before(新的)	新的.insertBefore(同胞)
将新元素插入到同胞元素之后	同袍.after(新的)	新的.insertAfter(同胞)

谁发起，后续的操作就针对谁。

替换元素

旧的.replaceWith(新的)

新的.replaceAll(旧的)

克隆元素

元素.clone(bool)

js	jq
必然会克隆的是元素自身及属性，参数控制子孙节点是否被克隆，事件不会被克隆	必然被克隆的是元素自身、属性及子孙节点。参数控制的是由jq附加的事件是否被克隆，原生js的事件不会被克隆。

移除元素

元素.remove()

节点的遍历

向上遍历

parent() 选择父元素

parents() 选择祖先元素们

parentsUntil(arg) 选择祖先元素，到arg为止（不包括arg）

closest(selector) 选择自身和祖先元素中，符合selector条件的，距离自身最近的一个元素

同胞遍历

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

siblings() 除了自身之外的所有同胞元素

向下遍历

children() 返回所有子元素

find(selector) 查找所有符合选择器要求的子孙节点（没参数则一个都不选择）

元素的属性操作

通用的属性操作

设置时： attr(name,value);

读取时： attr(name);

移除时： removeAttr(name);

系统认可的属性

jq没有对系统认可的属性做优化，因此，只能用attr方法来操作。

class属性的操作

addClass() 添加class

removeClass() 移除class

hasClass() 返回布尔值，判断元素有没有xx属性

toggleClass() 用来切换class

style属性的操作

css() 在设置时，可以使用 css(name,value),也可以使用css(object)

h1.css({
  name:value
})

name 可以是如下三种形式：

h1.css({
  backgroundColor:value,
  'backgroundColor':value,
  'background-color':value
})

value的值是单一值时，可以用数字的形式赋值，同时支持+=、-=的形式（必须是字符串）

h1.css({
  height:'100px',
  height:100,
  height:'+=100px',
  height:'-=100px',
})

读取时，css(name) 不是读取元素style属性的值，而是读取元素真实的渲染值。

表单属性的操作

对于表单元素，**attr()**只能设置默认值

要设置真实值，需要用到**prop()**方法

对于经常需要操作的value提交值，jq提供了 val() 方法

data绑定数据的操作

在jq中，可以为一个元素单独提供一个对应的数据空间，这个空间中的数据，只能使用jq操作，相当于不可见的属性。

data() 用来设置和读取data

removeData() 用来移除data

元素尺寸的获取和设置

读取元素的尺寸：

width() height() 返回的是元素自身的尺寸

innerWidth() innerHeight() 返回的是元素自身+内边距

outerWidth() outerHeight() 返回的是元素自身+内边距+边框

outerWidth(true) outerHeight(true) 返回的是元素自身+内边距+边框+外边距

设置时，jq会自动计算，以行内样式的方式来改变尺寸，通过调整元素自身尺寸来达到目的

width(num) height(num) 设置元素自身的尺寸

innerWidth(num) innerHeight(num) 设置元素自身+内边距的尺寸

outerWidth(num) outerHeight(num) 设置元素自身+内边距+边框的尺寸

outerWidth(num,true) outerHeight(num,true) 设置元素自身+内边距+边框+外边距的尺寸

元素的位置的获取和设置

相对于文档左上角的偏移值：

读取时：

​ 元素.offset() 这个方法返回一个对象{left:xx,top:xxx}

设置时：

​ 元素.offset(参数)

​ 参数可以是对象{left:xx,top:xxx}

​ 也可以是函数：

$('#box').offset(function (index,old) {
  return {
    left:old.left+100
  }
})

相对定位参照元素的偏移值

相对于：距离自身最近的、具有定位状态的、祖先元素来定位。如果没有符合条件的元素，则相对于整个文档定位。

元素.position() 这个方法返回一个对象{left:xx,top:xxx}

这个方法只能读取，无法像offset() 一样设置。

使用：

元素.offsetParent() 返回元素的position()方法的计算参照元素。

元素的事件操作

标准事件操作：

元素.on(事件名称,cb) 为当前元素附加事件

已存在的祖先元素.on(事件名称,选择器,cb) 为符合选择器条件的元素（包括未来添加的）附加事件

元素.one(事件名称,cb) 为当前元素附加只执行一次的事件（触发后就移除自身）

已存在的祖先元素.one(事件名称,选择器,cb) 为符合选择器条件的元素（包括未来添加的）附加只执行一次的事件（所有元素公用一次机会）。

清除当前元素的事件：

元素.on(事件名称,cb) 元素.off(事件名称,cb)

off方法没有参数时，是清除所有事件。

清除未来元素的事件：

已存在的祖先元素.on(事件名称,选择器,cb)

已存在的祖先元素.off(事件名称,选择器,cb)

给谁附加的事件，清除时也找谁

$('li').on('click',function () {

})
$('li').click(function () {

})

简写和正规写法没有任何执行上的区别。

jq对事件的增强

获得焦点和失去焦点，

原有的 focus 、blur是没有事件冒泡的，jq新增了focusIn、focusOut有事件冒泡的。

jq封装了hover方法，整合了mouseenter、mouseleave连个事件。

trigger() 类似于js的 方法名称()的触发方式，真实触发事件，执行与事件关联的默认动作。

triggerHandler() 类似于js on事件名称()，不是真实触发，只执行与事件绑定的函数。

jq动画

内置动画

名称	方法	说明
显示、隐藏	show()、hide()、toggle()	默认的执行时间是0
卷动	slideDown()、slideUp()、slideToggle()	默认的执行时间是400
淡入淡出	fadeIn()、fadeOut()、fadeToggle()、fadeTo(3000,0.5)	默认的执行时间是400 fadeTo方法会改变fade系列方法 的透明度变化上限

内置动画在隐藏式完成时都会自动加入 display:none