前端知识点总结——JQ

2024年2月19日 175次阅读 来源: 楷楷

前端知识点总结——JQ

1.什么是jQuery:

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

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)攻击

引入网页: 2种:

  1. 引入服务器本地的js文件: <script src=”js/jquery-1.x.js”
  2. 引入CDN网络中共享的js文件:

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js”

原理:
引入jquery-1.x.js其实是在全局添加了一种新类型jQuery
包括:
构造函数jQuery: 用于创建jQuery类型的子对象
原型对象jQuery.fn: 用于保存只有jQuery类型的子对象才能访问的共有方法
如何使用jQuery简化版API:
问题: DOM元素无法使用jQuery简化版API
解决: 要想使用jQuery简化版API，必须先创建jQuery类型的子对象:
如何创建jQuery类型的子对象: 2种:

  1. 通过查找DOM元素，将DOM元素保存到新创建的jQuery对象中:
    var $jq=$(“selector”)
    什么是jQuery对象: 包含找到的DOM元素的类数组对象
  2. 将已经获得的DOM元素直接保存进新创建的jQuery对象中

jQuery API的通用特点: 3个

  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.修改:

内容: 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 …”)

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

    1. 父子:
      $(…).parent()
      $(…).children([“selector”])
      问题: 只能获得直接子元素
      解决: 在所有后代中查找
      $(…).find(“selector”)
      $(…).children().first();
      $(…).children().last();
    2. 兄弟:
      $(…).prev/next()
      $(…).prevAll/nextAll([“selector”])
      $(…).siblings([“selector”])

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

    1. 创建新元素: var $elem=$(“html代码片段”)

    2. 将新元素添加到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中有几种事件绑定方式，分别是什么:

  1. .bind(“事件名”,handler)
    .unbind(“事件名”,handler)
    3个重载:

     .unbind("事件名",handler) 移除指定事件上的一个处理函数
 .unbind("事件名")  移除指定事件上的所有处理函数
 .unbind() 移除所有事件上的所有处理函数
  2. .one(“事件名”,handler)
    只能触发一次，触发后，自动解绑

  3. .delegate(“selector”,”事件名”,handler)
    其实就是利用冒泡的简化版：

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

鄙视: .delegate vs .bind

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

解绑: .undelegate()

  1. .live/die() 废弃

  2. .on: 统一bind和delegate的用法

    1. 代替bind: .on(“事件名”,handler)
    2. 代替delegate: .on(“事件名”,”选择器”,handler)

解绑: .off()

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

6.页面加载后执行: 2种:

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

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

鄙视: jQuery中$的原理: 4种重载

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

7.鼠标事件:

DOM: mouseover mouseout
进出子元素，也会反复触发父元素上的事件
jq: mouseenter mouseleave
进出子元素，不再触发父元素上的事件
简化: 如果同时绑定mouseenter和mouseleave

可简化为.hover(enterHandler, leaveHandler)
 如果enterHandler和leaveHandler可统一为一个处理函数: .hover(handler)

模拟触发:
$(…).trigger(“事件名”) => $(…).事件名()

8.动画:

简单动画: 3种:

  1. 显示隐藏: .show(ms) .hide(ms) .toggle(ms)
    不带参数，默认: 瞬间显示隐藏，不带动画

     原理: display属性实现的，不支持动画

    带毫秒数参数: 会有动画效果

  2. 上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)
  3. 淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

问题: 1. 效果是固定的，不便于维护

  2. 用程序的定时器实现的动效，效率不如transition

万能动画:
$(…).animate({
css属性:目标值,
css属性:目标值,
},ms)
问题: 只支持单个数值的css属性

不支持颜色和CSS3变换

动画播放后自动执行: 动画API的最后一个参数都是一个回调函数，在动画播放完成后自动执行!
回调函数中的this，指正在播放动画的当前DOM元素

9.排队和并发:

  1. 并发: 多个css属性同时变化
    放在一个animate函数内的多个css属性默认并发变化
  2. 排队: 多个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添加自定义方法:

  1. 添加在jQuery.fn中
    强调: jQuery.fn.自定义方法=function(){

         //this->将来调用该方法的jq对象
   }
  2. 调用时: $(…).自定义方法()

12.插件: 为标准函数库或框架添加功能的第三方库

  1. 官方插件jQuery UI:
    使用jQueryUi:
    先引入jquery.js，因为jQuery UI是基于jQuery开发的
    再引入jquery-ui.js
    再编写自定义脚本
    包括:
    交互: 自学
    效果:

    1. 重写了三类简单动画API，添加了新的动效
    2. 为addClass/removeClass/toggleClass，也添加了动效
    3. 重写了animate方法，支持颜色动画

部件:
什么是部件: 具有完整样式和行为的小功能
如何使用: 4步:

1. 引入: jquery-ui.css
2. 按照部件约定，编写html内容结构
3. 引入jquery.js和jquery-ui.js
4. 在自定义脚本中，找到插件的父元素，调用插件API

原理:

侵入性: 在开发者不知情的情况下，自动添加class和行为
优: 简单!
缺: 不可维护!

jQuery UI vs bootstrap
jQuery UI 傻瓜式，侵入式
优: 简单 缺: 不可维护
bootstrap 少量手动添加样式和行为(自定义扩展属性)
缺: 相比jQuery UI，稍微麻烦
优: 可定制!

13.第三方插件:

文件上传:
富文本编辑器:
masonry: 彩砖墙/瀑布流

14.自定义插件:

何时: 只要希望复用一块功能和样式时，都要封装为插件
如何:
前提: 必须已经用原生的html,css,jss实现了插件的功能
2种封装插件的风格:
jQuery侵入式:

  1. 将插件所需的css提取出来，保存在单独的css文件中

  2. 定义插件的js文件:
    先检查是否提前引入了jQuery
    定义插件函数，保存在jQuery的原型对象jQuery.fn中

    侵入: 根据插件需要，为子元素自动添加class
      为子元素绑定事件处理函数
  3. 使用插件:
    引入插件的css文件
    在body中按插件的规定，编写html内容
    引入jquery.js和插件的js文件
    在自定义脚本中，查找要应用插件的父元素，调用插件函数

Bootstrap DIY式:

  1. 将css拷贝到独立的css文件中
  2. 编写js:
    先验证是否提前加载了jQuery
    查找自定义扩展属性，为其绑定事件
  3. 使用插件:
    引入插件的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=>{ … })
简写:

  1. 专门发送get请求

$.get(url,data,dataType).then(data=>{ … })

  1. 专门发送get请求，接收JSON响应，并自动转为js对象

$.getJSON(url,data).then(data=>{ … })

  1. 专门发送get请求，接收js语句响应，并执行

$.getScript(url,data)

  1. 专门发送get请求，获取一段html代码片段的响应，并自动填充到前面的父元素中

$(父元素).load(“xx.php/xx.html”)
强调: 不支持then!

专门简化post请求的:
$.post(url,data,dataType).then(data=>{ … })

16.跨域请求:

跨域:
从http://store.company.com/dir/…

允许跨域请求: link, img, script
不允许跨域: xhr对象 (ajax请求)
变通: script 需要服务器返回一段可执行的js语句

 服务器应该返回包含数据的一条可执行的js语句

如何实现:
客户端实现: JSONP (填充式json)

  1. 在客户端定义处理函数
  2. 在按钮单击事件中，动态创建script元素，src设置为服务端地址，并携带请求参数callback=函数名
  3. 在服务器端，接收请求参数中的函数名，将函数名和要返回的数据，拼接为一条可执行的js语句
  4. 客户端script，请求服务端php，获得可执行语句，自动调用提前定义好的函数处理数据
  5. 在客户端处理函数结尾，要动态删除script

起始jQuery的ajax api都可用, 只不过，dataType必须都写成jsonp，原理同上。

服务端: header(“Access-Control-Allow-Origin:*”);
允许客户端使用xhr对象跨域请求！

结语：觉得总结的还可以的话，点下赞咯，你们的鼓励是我前进的动力，谢谢各位老铁们！

    原文作者：楷楷
    原文地址: https://segmentfault.com/a/1190000013476906
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞