文章目录

• jQuery
• • 1 jQuery简介
  • 2 使用jQuery
  • • 2.1 下载jQuery
    • 2.2 引用jQuery
  • 3 jQuery的核心函数
  • • 3.1 作为工具类使用
    • 3.2 作为函数使用
    • • 3.2.1 将一个函数作为$的参数
      • 3.2.2 将选择器字符串作为参数
      • 3.2.3 将DOM对象作为参数
      • 3.2.4 将html代码作为参数
  • 4 jQuery对象
  • • 4.1 获取DOM对象
    • 4.2 隐式迭代
    • 4.3 链式调用
  • 5 jQuery常用方法
  • • 5.1 jQuery对象复制
    • 5.2 添加容器
    • 5.3 添加子元素
  • 6 事件的处理
  • • 6.1 绑定事件
    • 6.2 冒泡和默认事件
    • 6.3 事件委派

jQuery

jQuery官网

1 jQuery简介

jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿"是jQuery一直坚信的开发理念。

所有的库都是为了解决我们开发时的痛点而存在的。jQuery解决的问题主要有两个：简化DOM操作、解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angulari这些大型框架的出现，在实际项目中使用iQuery的机会可以说是少之又少。所以现在jQuery并无学习的必要

为什么还要学习jQuery？

• jQuey比较简单，学习不费很多时间
• jQuery是从原生JS到JS库的一个过渡，可以帮助我们理解其他库
• 技多不压身

2 使用jQuery

2.1 下载jQuery

下载网址：

• 压缩版本：https://code.jquery.com/jquery-3.6.1.min.js
• 原始版本：https://code.jquery.com/jquery-3.6.1.js

常用版本：

2.x使用不多

不同版本主要是对浏览器的兼容不同

• 1.x：兼容IE6,7,8，功能少一些，性能也比较差
• 3.x：兼容IE9+浏览器

2.2 引用jQuery

可以从本地引用或者是从公共cdn服务器引用，都是通过script 标签引用

在本地版本有两种，一种是压缩过的jquery-3.6.1.min.js，这个里面去掉了所有的空格和换行，并且变量也都换成了单个字母，另一种是原版的jquery-3.6.1.js，一般我们在开发环境使用没有压缩的版本，在上线之后使用压缩过的版本，这样加载速度更快

除此之外，我们还可以使用在公共服务器上的jQuery，例如字节的cdn，不仅可以减轻我们服务器的压力，也可以利用浏览器的缓存，减少加载速度

3 jQuery的核心函数

引入jQuery库，其实就是向网页中添加了一个新的函数$(或者jQuery)

$ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的

核心函数的功能，有两种作用

1. 作为工具类使用
2. 作为函数使用

3.1 作为工具类使用

在核心函数中jQuery为我们提供了多个工具方法

• jQuery.contains()
• jQuery.isArray()
• jQuery.isFunction()
• jQuery.isNumeric()
• …

3.2 作为函数使用

3.2.1 将一个函数作为$的参数

• 这个函数会在文档加载完毕之后执行
• 相当于：document.addEventListener("DOMContentLoaded", function(){})

$(function () {console.log("$里面")
})
console.log("$外面")

结果

$外面
$里面

3.2.2 将选择器字符串作为参数

• jQuery自动去网页中查找元素，作用类似于 document.querySelectorAll("...")
• 注意：
  • 通过jQuery核心函数查询到的结果并不是原生的DOM对象，而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQuery对象
  • jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作，但是jQuery对象不能直接调用原生DOM对象的方法
  • 通过我们为jQuery对象命名时，会使用$开头，加以区分

按钮

3.2.3 将DOM对象作为参数

可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法

使用$(domELe)可以将原生DOM对象转化为jQuery对象

var $btn = $("#btn") 
var btn = document.querySelector("#btn")alert($btn) // [object Object]
alert(btn) // [object HTMLButtonElement]var new$btn = $(btn) 
alert(new$btn) // [object Object]

3.2.4 将html代码作为参数

会根据html代码来创建元素（jQuery对象）

var $h1 = $("
我是h1标题
")

4 jQuery对象

• 通过jQuery核心函数获取到的对象就是jQuery对象
• jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版，在jQuery对象中为我们提供了很多简单易用的方法，来帮助我们简化DOM操作

4.1 获取DOM对象

• jQuery对象本质上是一个DOM对象的数组（类数组），可以通过索引获取jQuery对象中的DOM对象

  • 通过索引取出来之后得到的就是DOM对象

    
    
    
    
    1
    2
    3
    4
    
    
    

    

4.2 隐式迭代

当我们修改jQuery对象时，它会自动修改jQuery中的所有元素，这一特点称为jQuery的隐式迭代

1
2
3
4

4.3 链式调用

• 通常情况下，jQuery对象方法的返回值依然是一个jQuery对象，所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法，这一特性，称为jQuery对象的 链式调用
• 但是链也不要太长，可读性比较差

1
2
3
4

5 jQuery常用方法

api文档：jQuery API Documentation

中文文档：https://www.jquery123.com/

• 操作class方法
  • addClass()：为jQuery对象添加一个或多个class
  • hasClass()：检查jQuery对象是否含有某个class
  • removeClass()：删除jQuery对象的指定class
  • toggleClass()：切换jQuery对象的指定class
• 元素复制
  • clone()：复制jQuery元素
• 元素包裹
  • unwrap()：去除父元素
  • wrap()：添加父元素
  • wrapAll()：添加父元素
  • wrapInner()：在元素内部增加一层
• 元素内部添加
  • append()：添加子元素
  • appendTo()：添加到父元素
  • prepend()：向前添加子元素
  • prependTo()：添加到父元素前
  • html()：读取或设置html代码
  • text()：读取或设置文本内容
• 元素外部添加
  • after()：向后边添加元素
  • insertAfter()：将元素添加到某元素的后边
  • before()：向前边添加元素
  • insertBefore()：将元素添加到某元素的前边
• 删除元素
  • detach()：删除元素（保留元素上的事件）
  • empty()：删除所有子元素
  • remove()：删除元素，同时也会把绑定的时间移除
• 替换元素
  • replaceAll()：替换某个元素
  • replaceWith()：被某个元素替换
• 元素属性操作
  • attr()：设置/获取元素的指定属性，对于布尔值属性会返回实际值
  • prop()：设置/获取元素的指定属性，对于布尔值属性会返回布尔值
  • removeAttr()：移除属性
  • removeProp()：移除属性
  • val()：设置/获取元素的value属性
• 样式操作
  • css()：读取/设置元素的css样式
  • height()：读取/设置元素的高度
  • width()：读取/设置元素的宽度
  • innerHeight()：读取/设置元素的内部高度
  • innerWidth()：读取/设置元素的内部宽度
  • outerHeight()：读取/设置元素可见框的高度
  • outerWidth()：读取/设置元素可见框的宽度
  • offset()：读取/设置元素的偏移量
  • position()：读取元素相当于包含块的偏移量
  • scrollLeft()：读取/设置元素水平滚动条的位置
  • scrollTop()：读取/设置元素垂直滚动条的位置
• 过滤
  • eq()：获取指定索引的元素
  • even()：获取索引为偶数的元素
  • odd()：获取索引为奇数的元素
  • filter()：筛选元素
  • first()：获取第一个元素
  • last()：获取最后一个元素
  • has()：获取含有指定后代的元素
  • is()：检查是否含有某元素
  • map()：获取对象中的指定数据
  • slice()：截取元素（切片）
• 其他遍历
  • add()：创建包含当前元素的新的jQuery对象
  • addBack()：将之前操作的集合中的元素添加到当前集合中
  • contents()：获取当前jQuery对象的所有子节点（包括文本节点）
  • end()：将筛选过的列表恢复到之前的状态
  • not()：从列表中去除符合条件的元素
• 树遍历
  • children()：获取子元素
  • closest()：获取离当前元素最近的指定元素
  • find()：查询指定的后代元素
  • next()：获取后一个兄弟元素
  • nextAll()：获取后边所有的兄弟元素
  • nextUntil()：获取后边指定位置的兄弟元素
  • offsetParent()：获取定位父元素
  • parent()：获取父元素
  • parents()：获取所有的祖先元素
  • parensUntil()：获取指定的祖先元素
  • prev()：获取前边的兄弟元素
  • prevAll()：获取前边所有的兄弟元素
  • prevUntil()：获取指定的兄弟元素
  • siblings()：获取所有的兄弟元素

5.1 jQuery对象复制

使用clone()完成对象复制

• 参数设置为true为深拷贝，复制事件

点我
孙悟空
猪八戒
沙和尚
唐僧

5.2 添加容器

• unwrap() 删除外层父元素
  • 传入参数为需要删除的元素，例如unwrap("div")如果外层是div则删除，如果不是则不删除
• wrap() 为当前元素添加一个容器
  • wrap("div")每个元素外面都包一个div
• wrapAll() 为当前的所有元素统一添加容器
  • wrapAll("div)所有元素都包在同一个div下面
• wrapInner() 为当前元素添加一个内部容器
  • wrapInner("div")将内部元素包在div下面

5.3 添加子元素

• append()：在当前元素内部最后添加一个元素
• appendTo()：将子元素添加到父元素后边
• prepend()：在当前元素内部最前面添加一个元素
• prependTo()：向父元素的前边添加子元素
• text()：获取/设置元素的文本内容，不传参数就是读，传参数就是改
• html()：获取/设置元素的html代码

append()和appendTo()

• 父元素.append(子元素)
• 子元素.appendTo(父元素)

点我

prepend()和prependTo()

• 父元素.prepend(子元素)
• 子元素.prependTo(父元素)

点我

6 事件的处理

事件 - jQuery API 中文文档 | jQuery 中文网 (jquery123.com)

6.1 绑定事件

例如：

• 方式一：直接绑定，类似ele.onclock = function(){}

  • $().click(function(){})：单击事件
  • $().dbclick(function(){})：双击事件
  • $().mousemove(function(){})：鼠标移动事件

• 方式二：通过on绑定事件，类似于addEventListener()

  • $().on("click", function(){})

• 方式三：通过one绑定事件，类似于on的使用方式，但是只能触发一次

  • $().on("click", function(){})

• 取消绑定事件

  • $().off("click", function(){})

  • 在off的时候默认去取消掉所有绑定的事件

  • 可以使用命名空间解决

    $("#btn01").on("click.a", function(){alert("通过on绑定的事件！")
    })$("#btn01").on("click.b", function(){alert("通过on绑定的事件！2")
    })$("#btn02").on("click", function(){// 只删除第一个绑定的事件$("#btn01").off("click.a")
    })
    

6.2 冒泡和默认事件

在jQuery中绑定的事件可以正常的冒泡和取消冒泡

在jQuery的事件响应函数中，同样有事件对象，但是这个对象是经过jQuery包装过的新的对象，包装该对象主要是为了解决兼容性的问题，可以当成普通的event对象使用

取消默认行为和冒泡：

1. 在函数中return false
2. 使用event.stopPropogation()

$("a").click(function(event){// 方法一event.stopPropagation()event.preventDefault()alert(123)// 方法二// 在jQuery的事件回调函数中，可以通过return false来取消默认行为和冒泡// return false
})

6.3 事件委派

jQuery委托事件比原生的简单很多，通过on绑定事件的时候添加要触发的选择器即可

$(document).on("click",".box1", function(event){alert("哈哈")
})

可以使用off来删除委托的事件