前端知识点总结——jQuery（上）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.什么是jQuery

jQuery: 第三方的极简化的DOM操作的函数库
第三方: 下载
极简化: 是DOM操作的终极简化:

1. DOM: 增删改查 2. 事件绑定: 3. 动画效果: 4. Ajax

DOM操作: 学习jQuery还是在学DOM，只不过API简化了
函数库: jQuery中都是函数，用函数来解决一切问题

为什么使用:

1.DOM操作的终极简化

2.解决了大部分浏览器兼容性问题

凡是jQuery让用的，都没有兼容性问题

2.如何使用

下载: 版本:
1.x: 兼容旧浏览器 IE8

1.x.js 未压缩版优点: 包含完备的注释，格式，变量名，可读性好缺点: 体积大，不便于传输何时: 学习和开发阶段1.x.min.js 压缩版优点: 体积小，便于传输缺点: 去掉注释，格式，极简化了变量名可读性差何时: 生产环境

2.x: 不再兼容旧浏览器
3.x: 不再兼容旧浏览器，提供了更多新特性:
鄙视: 3.x的新特性:

1. 所有代码运行在严格模式下 2. 用for...of代替了forEach $.each 3. 新动画API: requestAnimationFrame() 4. 支持promise 5. ajax的API防备跨站点脚本(XSS)攻击

引入网页:

1. 引入服务器本地的js文件: <script src="js/jquery-1.x.js"

2.引入CDN网络中共享的js文件:

原理: 引入jquery-1.x.js其实是在全局添加了一种新类型jQuery
包括:
构造函数jQuery: 用于创建jQuery类型的子对象
原型对象jQuery.fn: 用于保存只有jQuery类型的子对象才能访问的共有方法

如何使用jQuery简化版API:
问题: DOM元素无法使用jQuery简化版API
解决: 要想使用jQuery简化版API，必须先创建jQuery类型的子对象:

如何创建jQuery类型的子对象:

1. 通过查找DOM元素，将DOM元素保存到新创建的jQuery对象中:

var $jq=$("selector")

什么是jQuery对象: 包含找到的DOM元素的类数组对象

2. 将已经获得的DOM元素直接保存进新创建的jQuery对象中

jQuery API的通用特点:

1.自带遍历: 对jQuery对象整体调用一次API，等效于对内部每个元素都调用一次API

2. 一个函数两用: 给新值，就修改；没给新值，就读取原值

3. 每个函数都返回正在操作的jq对象: 链式操作!

3.查找: 选择器

基本选择器: 同CSS
id class element * ,
层次选择器: 同CSS
空格 > + ~
子元素过滤选择器: 同CSS
在各自父元素内，分别排序，从1开始
:first-child :last-child :only-child
:nth-child(2n/2n+1/odd/even/i)
基本过滤选择器(位置过滤选择器): jQuery新增
将所有符合条件的元素，保存在一个统一的集合中，在集合内统一编号。从0开始
:first/last :gt/lt/eq(i) :even/odd
属性过滤选择器: 同CSS

内容过滤: jQuery新增4种:

1. 以内容中的文本作为条件查询父元素
:contains(text) 内容包含指定文字的元素

2. 以子元素的特征作为查询条件，查询父元素
:has(selector) 包含符合selector要求的子元素的父元素

3. 空元素/非空元素:
:parent
:empty

可见性过滤: jQuery新增
:hidden 只能选择两种隐藏的元素

type="hidden" display:none

:visible
状态过滤: 同CSS 四大状态:
:enabled :disabled :checked :selected
表单元素过滤:
:input 选择所有表单元素: input select textarea button
:[type] 每种type都对应一种选择器

:text :password :file :button :submit ....

4.修改

内容:
html代码片段: $(...).html([新内容]) .innerHTML
纯文本内容: $(...).text([新内容]) .textContent
表单元素的值: $(...).val([新值]) .value
清空内容: $(...).empty();

属性:
HTML标准属性: $(...).attr("属性名"[,"值"])

问题: 一次只能修改一个属性的值: 解决: 同时修改多个属性的值: $(...).attr({ 属性名:值, 属性名:值, ... : ... })

状态属性: $(...).prop("属性名"[,bool])
自定义扩展属性: $(...).data("属性名"[,"值"])

样式:
修改: 内联样式:
获取: 计算后的样式:
都用.css: $(...).css("css属性名"[,值])
问题: 单独修改每个css属性，代码繁琐
解决: 用class批量修改样式:
$(...).addClass("class ... ")
$(...).removeClass("class ...")
$(...).hasClass("class ...")

$(...).toggleClass("class ...")

1.按节点间关系查找: 2大类

a .父子:

$(...).parent()
$(...).children(["selector"])
问题: 只能获得直接子元素
解决: 在所有后代中查找
$(...).find("selector")
$(...).children().first();
$(...).children().last();

b. 兄弟:

$(...).prev/next()
$(...).prevAll/nextAll(["selector"])
$(...).siblings(["selector"])

2.添加,删除,替换,克隆:
添加: 2步:

a. 创建新元素: var $elem=$("html代码片段")

b .将新元素添加到DOM树:
末尾追加: $parent.append($elem) //return $parent

$elem.appendTo($parent) //return $elem

开头插入: $parent.prepend($elem) //return $parent

$elem.prependTo($parent) //return $elem

指定元素前插入: $child.before($elem)
指定元素后插入: $child.after($elem)

可简化为1步:
$("html代码片段").appendTo($parent)
$parent.append("html代码片段")

移除: $(...).remove()
替换: $(...).replaceWith(); //右替换左 //return 左

$(...).replaceAll(...); //左替换右 //return 左

克隆: $(...).clone();
浅克隆: 仅复制内容和样式，不复制行为

.clone() 默认是浅克隆

深克隆: 即复制内容和样式，又复制行为

.clone(true)

5.事件

jq中有几种事件绑定方式，分别是什么:

.bind("事件名",handler)
.unbind("事件名",handler)
3个重载:

.unbind("事件名",handler) 移除指定事件上的一个处理函数
.unbind("事件名") 移除指定事件上的所有处理函数
.unbind() 移除所有事件上的所有处理函数
.one("事件名",handler)
只能触发一次，触发后，自动解绑
.delegate("selector","事件名",handler)
其实就是利用冒泡的简化版：

将利用冒泡中的目标元素判断提升到第一个参数，用选择器作为判断条件
将this重新指回了目标元素

鄙视: .delegate vs .bind

绑定位置不同:
.bind() 直接绑在目标元素(子元素)上
.delegate() 绑在父元素上
事件监听的个数不同:
.bind() 导致事件监听个数增多
.delegate() 始终只有一个监听
.bind() 无法让动态生成的新元素自动获得事件处理函数
.delegate() 即使后来动态生成的新元素也可自动获得父元素上的事件处理函数

解绑: .undelegate()

.live/die() 废弃
.on: 统一bind和delegate的用法

a. 代替bind: .on("事件名",handler)

b. 代替delegate: .on("事件名","选择器",handler)

解绑: .off()

终极简化: .事件名(handler)

6.页面加载后执行

DOMContentLoaded:
DOM内容(html,js)加载完成,就提前触发
何时: 操作不需要等待css和图片时，首选DOMContentLoaded
jQuery: $(document).ready(function(){ ... })
简化: $().ready(function(){...})
更简化: $(function(){...})

ES6: $(()=>{ ... })

window.onload=function(){
//等待页面所有内容(html,css,js,图片)都加载完才能执行
}
何时: 如果必须等待css和图片加载完，才能执行的操作，必须放在window.onload中

鄙视: jQuery中$的原理:

如果传入选择器字符串，则查找并创建jq对象
优化: speed up
如果选择器只是一个id，则调用getElementById
如果选择器只是一个标签，则调用getElementsByTagName
如果选择器只是一个class，则调用getElementsByClassName
如果选择器复杂，才调querySelectorAll
如果传入DOM元素对象，则封装现有DOM元素为jq对象
如果传入html代码片段，就创建新元素:
如果传入函数，就绑定DOM内容加载后执行