JavaScript -- 12. jQuery

最新推荐文章于 2024-02-13 08:00:47 发布

Hydrion-Qlz

最新推荐文章于 2024-02-13 08:00:47 发布

阅读量549

点赞数

分类专栏： # JavaScript 前端文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_46311811/article/details/128244688

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

26 篇文章 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，不仅可以减轻我们服务器的压力，也可以利用浏览器的缓存，减少加载速度

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./scripts/jquery-3.6.1.js"></script> -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>

</head>
<body>
    <script>
        console.log($)

    </script>
</body>
</html>

3 jQuery的核心函数

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

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

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

作为工具类使用
作为函数使用

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对象命名时，会使用$开头，加以区分

<button id="btn">按钮</button>

<script>
    $("#btn").click(function (event) {
        console.log("点击了按钮")
        console.log(event)
    })
</script>

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>我是h1标题</h1>")

4 jQuery对象

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

4.1 获取DOM对象

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="scripts/jquery-3.6.1.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        var $lis = $("li")
        console.log($lis) 	// jquery对象
        console.log($lis[0])// DOM对象
    </script>
</body>
</html>

4.2 隐式迭代

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="scripts/jquery-3.6.1.js"></script>
</head>
<body>
    <ul>
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
    </ul>

    <script>
        var $lis = $("li")
        console.log($lis.attr("id"))// 读取属性，只会读取第一个
        console.log($lis.text())    // 读取内容
        $lis.text("hhaha")          // 修改内容
    </script>
</body>
</html>

4.3 链式调用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="scripts/jquery-3.6.1.js"></script>
</head>
<body>
    <ul>
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
    </ul>

    <script>
        var $lis = $("li")
        $lis.text("新的内容").css("color", "red") // 链式调用
    </script>
</body>
</html>

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为深拷贝，复制事件

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function(){

                $("#list li:nth-child(1)").click(function(){
                    alert("孙悟空")
                })
                /* 
                    clone() 用来复制jQuery对象
                */
                var $swk = $("#list li:nth-child(1)").clone(true)
                var $list2 = $("#list2")

                $("#btn").click(function(){
                    $list2.append($swk)
                })
            })

        </script>
    </head>
    <body>

        <button id="btn">点我</button>

        <hr>

        <ul id="list">
            <li>孙悟空</li>
            <li>猪八戒</li>
        </ul>

        <ul id="list2">
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>
    </body>
</html>

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(父元素)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script src="./scripts/jquery-3.6.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("#box1").append("<div id='box2'/>")
                // 等价于下面的方法
                // $("<div id='box2'/>").appendTo("#box1")
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr/>

    <div id="box1">
        <div id="box3"></div>
    </div>
</body>
</html>

prepend()和prependTo()

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script src="./scripts/jquery-3.6.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("#box1").prepend("<div id='box2'/>")
                // 等价于下面的方法
                // $("<div id='box2'/>").prependTo("#box1")
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr/>
    <div id="box1">
        <div id="box3"></div>
    </div>
</body>
</html>

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对象使用

取消默认行为和冒泡：

在函数中return false
使用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来删除委托的事件

Hydrion-Qlz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript -- 12. jQuery

jQuery1 jQuery简介2 使用jQuery2.1 下载jQuery2.2 引用jQuery3 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 事件的
复制链接

扫一扫