前端知识点总结 --JQ
1. 什么是 jQuery:
jQuery: 第三方的极简化的 DOM 操作的函数库
第三方: 下载
极简化: 是 DOM 操作的终极简化: 4 个方面:
\. DOM: 增删改查
\. 事件绑定:
\. 动画效果:
\. Ajax
DOM 操作: 学习 jQuery 还是在学 DOM, 只不过 API 简化了
函数库: jQuery 中都是函数, 用函数来解决一切问题
为什么使用:
DOM 操作的终极简化
解决了大部分浏览器兼容性问题
凡是 jQuery 让用的, 都没有兼容性问题
2. 如何使用:
下载: 版本:
1.x: 兼容旧浏览器 IE8
1.x.JS 未压缩版
优: 包含完备的注释, 格式, 变量名, 可读性好
缺: 体积大, 不便于传输
何时: 学习和开发阶段
1.x.min.JS 压缩版
优: 体积小, 便于传输
缺: 去掉注释, 格式, 极简化了变量名
可读性差
何时: 生产环境
2.x: 不再兼容旧浏览器
3.x: 不再兼容旧浏览器, 提供了更多新特性:?
鄙视: 3.x 的新特性:
\. 所有代码运行在严格模式下
\. 用 for...of 代替了 forEach $.each
\. 新动画 API: requestAnimationFrame()
\. 支持 promise
\. Ajax 的 API 防备跨站点脚本(XSS)***
引入网页: 2 种:
引入服务器本地的 JS 文件: <script src="js/jquery-1.x.js"
引入 CDN 网络中共享的 JS 文件:
<script src=""
原理:?
引入 jQuery-1.x.JS 其实是在全局添加了一种新类型 jQuery
包括:?
构造函数 jQuery: 用于创建 jQuery 类型的子对象
原型对象 jQuery.fn: 用于保存只有 jQuery 类型的子对象才能访问的共有方法
如何使用 jQuery 简化版 API:?
问题: DOM 元素无法使用 jQuery 简化版 API
解决: 要想使用 jQuery 简化版 API, 必须先创建 jQuery 类型的子对象:?
如何创建 jQuery 类型的子对象: 2 种:
通过查找 DOM 元素, 将 DOM 元素保存到新创建的 jQuery 对象中:?
var $jq=$("selector")
什么是 jQuery 对象: 包含找到的 DOM 元素的类数组对象
将已经获得的 DOM 元素直接保存进新创建的 jQuery 对象中
jQuery API 的通用特点: 3 个
自带遍历: 对 jQuery 对象整体调用一次 API, 等效于对内部每个元素都调用一次 API
一个函数两用: 给新值, 就修改; 没给新值, 就读取原值
每个函数都返回正在操作的 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 种:
以内容中的文本作为条件查询父元素
:contains(text) 内容包含指定文字的元素
以子元素的特征作为查询条件, 查询父元素
:has(selector) 包含符合 selector 要求的子元素的父元素
空元素 / 非空元素:?
: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. 修改:
内容: 3 种:
html 代码片段: $(...).HTML([新内容]) .innerHTML
纯文本内容: $(...).text([新内容]) .textContent
表单元素的值: $(...).val([新值]) .value
清空内容: $(...).empty();
属性: 3 种:?
HTML 标准属性: $(...).attr("属性名"[,"值"])
问题: 一次只能修改一个属性的值:
解决: 同时修改多个属性的值:
$(...).attr({
属性名: 值,
属性名: 值,
- ... : ...
- })
状态属性: $(...).prop("属性名"[,bool])
自定义扩展属性: $(...).data("属性名"[,"值"])
样式:
修改: 内联样式:?
获取: 计算后的样式:?
都用. CSS: $(...).CSS("css 属性名"[, 值])
问题: 单独修改每个 CSS 属性, 代码繁琐
解决: 用 class 批量修改样式:
- $(...).addClass("class ...")
- $(...).removeClass("class ...")
- $(...).hasClass("class ...")
- $(...).toggleClass("class ...")
按节点间关系查找:?
2 大类:
父子:
- $(...).parent()
- $(...).children(["selector"])
问题: 只能获得直接子元素
解决: 在所有后代中查找
- $(...).find("selector")
- $(...).children().first();
- $(...).children().last();
兄弟:?
- $(...).prev/next()
- $(...).prevAll/nextAll(["selector"])
- $(...).siblings(["selector"])
添加, 删除, 替换, 克隆:
添加: 2 步:
创建新元素: var $elem=$("html 代码片段")
将新元素添加到 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 的用法
代替 bind: .on("事件名",handler)
代替 delegate: .on("事件名","选择器",handler)
解绑: .off()
终极简化: . 事件名(handler)
6. 页面加载后执行: 2 种:
DOMContentLoaded:?
DOM 内容 (HTML,JS) 加载完成, 就提前触发
何时: 操作不需要等待 CSS 和图片时, 首选 DOMContentLoaded
jQuery: $(document).ready(function(){ ... })
简化: $().ready(function(){...})
更简化: $(function(){...})
- ES6: $(()=>{
- ...
- })
- Windows.onload=function(){
- // 等待页面所有内容 (HTML,CSS,JS, 图片) 都加载完才能执行
- }
何时: 如果必须等待 CSS 和图片加载完, 才能执行的操作, 必须放在 Windows.onload 中
鄙视: jQuery 中 $ 的原理: 4 种重载
如果传入选择器字符串, 则查找并创建 jq 对象
优化: speed up
如果选择器只是一个 id, 则调用 getElementById
如果选择器只是一个标签, 则调用 getElementsByTagName
如果选择器只是一个 class, 则调用 getElementsByClassName
如果选择器复杂, 才调 querySelectorAll
如果传入 DOM 元素对象, 则封装现有 DOM 元素为 jq 对象
如果传入 HTML 代码片段, 就创建新元素:
如果传入函数, 就绑定 DOM 内容加载后执行
7. 鼠标事件:
DOM: mouseover mouseout
进出子元素, 也会反复触发父元素上的事件
jq: mouseenter mouseleave
进出子元素, 不再触发父元素上的事件
简化: 如果同时绑定 mouseenter 和 mouseleave
可简化为. hover(enterHandler, leaveHandler)
如果 enterHandler 和 leaveHandler 可统一为一个处理函数: .hover(handler)
模拟触发:?
$(...).trigger("事件名") => $(...). 事件名()
8. 动画:
简单动画: 3 种:
显示隐藏: .show(ms) .hide(ms) .toggle(ms)
不带参数, 默认: 瞬间显示隐藏, 不带动画
原理: display 属性实现的, 不支持动画
带毫秒数参数: 会有动画效果
上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)
淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)
问题: 1. 效果是固定的, 不便于维护
2\. 用程序的定时器实现的动效, 效率不如 transition
万能动画:?
$(...).animate({
CSS 属性: 目标值,
CSS 属性: 目标值,
},ms)
问题: 只支持单个数值的 CSS 属性
不支持颜色和 CSS3 变换
动画播放后自动执行: 动画 API 的最后一个参数都是一个回调函数, 在动画播放完成后自动执行!
回调函数中的 this, 指正在播放动画的当前 DOM 元素
9. 排队和并发:
并发: 多个 CSS 属性同时变化
放在一个 animate 函数内的多个 CSS 属性默认并发变化
排队: 多个 CSS 属性先后变化
对同一个元素, 先后调用多个动画 API, 都是排队执行
原理: 所有动画 API 起始并不是立刻开始动画, 而仅是将当前动画函数加入元素的动画队列中等待执行.
停止动画: $(...).stop();
默认: 仅停止动画队列中, 当前正在播放的一个动画, 队列中后续动画, 依然执行!
如何停止动画, 并清空队列: .stop(true)
选择器: :animated 可选择或判断一个正在播放动画的元素
10. 类数组对象操作:
遍历:?
- $(...).each(function(i,elem){
- //this->当前 elem
- })
鄙视: $(...).each() vs $.each(数组 / 集合, fun)
查找:?
var i=$(...).index(要找的 DOM 元素 / jq 对象)
简化: 如果在一个父元素内查找子元素:
$(子元素).index();
11. 为 jQuery 添加自定义方法:
添加在 jQuery.fn 中
强调: jQuery.fn. 自定义方法 = function(){
- //this->将来调用该方法的 jq 对象
- }
调用时: $(...). 自定义方法()
12. 插件: 为标准函数库或框架添加功能的第三方库
官方插件 jQuery UI:?
使用 jQueryUi:
先引入 jQuery.JS, 因为 jQuery UI 是基于 jQuery 开发的
再引入 jQuery-ui.JS
再编写自定义脚本
包括:?
交互: 自学
效果:
重写了三类简单动画 API, 添加了新的动效
为 addClass/removeClass/toggleClass, 也添加了动效
重写了 animate 方法, 支持颜色动画
部件:?
什么是部件: 具有完整样式和行为的小功能
如何使用: 4 步:
\. 引入: jQuery-ui.CSS
\. 按照部件约定, 编写 HTML 内容结构
\. 引入 jQuery.JS 和 jQuery-ui.JS
\. 在自定义脚本中, 找到插件的父元素, 调用插件 API
原理:
侵入性: 在开发者不知情的情况下, 自动添加 class 和行为
优: 简单!
缺: 不可维护!
jQuery UI vs Bootstrap
jQuery UI 傻瓜式, 侵入式
优: 简单 缺: 不可维护
Bootstrap 少量手动添加样式和行为(自定义扩展属性)
缺: 相比 jQuery UI, 稍微麻烦
优: 可定制!
13. 第三方插件:
文件上传:
富文本编辑器:
masonry: 彩砖墙 / 瀑布流
14. 自定义插件:
何时: 只要希望复用一块功能和样式时, 都要封装为插件
如何:?
前提: 必须已经用原生的 HTML,CSS,jss 实现了插件的功能
2 种封装插件的风格:?
jQuery 侵入式:
将插件所需的 CSS 提取出来, 保存在单独的 CSS 文件中
定义插件的 JS 文件:?
先检查是否提前引入了 jQuery
定义插件函数, 保存在 jQuery 的原型对象 jQuery.fn 中
侵入: 根据插件需要, 为子元素自动添加 class
为子元素绑定事件处理函数
使用插件:?
引入插件的 CSS 文件
在 body 中按插件的规定, 编写 HTML 内容
引入 jQuery.JS 和插件的 JS 文件
在自定义脚本中, 查找要应用插件的父元素, 调用插件函数
Bootstrap DIY 式:
将 CSS 拷贝到独立的 CSS 文件中
编写 JS:
先验证是否提前加载了 jQuery
查找自定义扩展属性, 为其绑定事件
使用插件:
引入插件的 CSS
按照插件的 HTML 格式要求, 编写内容
为插件的 HTML 元素手动添加 class
为触发事件的元素添加指定的自定义扩展属性
15.jQuery 的 Ajax API
- $.Ajax({
- type:"get/post",
- url:"xxx",
data:"rawData"/{ 变量名: 值, ...}
- dataType:"json",
- beforeSend(){
- // 在发送之前触发
- }
- completed(){
- // 只要请求完成, 无论成功还是失败, 都触发
- }
- success(data){
- // 请求成功触发
- }
- error(){
- // 发生错误时触发
- }
- }).then(data=>{
- ... ...
- }).catch(err=>{
- ...
- })
简写:
专门发送 get 请求
$.get(url,data,dataType).then(data=>{ ... })
专门发送 get 请求, 接收 JSON 响应, 并自动转为 JS 对象
$.getJSON(url,data).then(data=>{ ... })
专门发送 get 请求, 接收 JS 语句响应, 并执行
$.getScript(url,data)
专门发送 get 请求, 获取一段 HTML 代码片段的响应, 并自动填充到前面的父元素中
$(父元素).load("xx.php/xx.html")
强调: 不支持 then!
专门简化 post 请求的:?
$.post(url,data,dataType).then(data=>{ ... })
16. 跨域请求:
跨域:?
从 http://store.company.com/dir/page.html http://store.company.com/dir/ ...
允许跨域请求: link, img, script
不允许跨域: xhr 对象 (Ajax 请求)
变通: script 需要服务器返回一段可执行的 JS 语句
服务器应该返回包含数据的一条可执行的 JS 语句
如何实现:
客户端实现: JSONP (填充式 JSON)
在客户端定义处理函数
在按钮单击事件中, 动态创建 script 元素, src 设置为服务端地址, 并携带请求参数 callback = 函数名
在服务器端, 接收请求参数中的函数名, 将函数名和要返回的数据, 拼接为一条可执行的 JS 语句
客户端 script, 请求服务端 PHP, 获得可执行语句, 自动调用提前定义好的函数处理数据
在客户端处理函数结尾, 要动态删除 script
起始 jQuery 的 Ajax API 都可用, 只不过, dataType 必须都写成 JSONP, 原理同上.
服务端: header("Access-Control-Allow-Origin:*");
允许客户端使用 xhr 对象跨域请求!
结语: 觉得总结的还可以的话, 点下赞咯, 你们的鼓励是我前进的动力, 谢谢各位老铁们!
来源: http://www.bubuko.com/infodetail-3099837.html