jQuery最全应用笔记(附带常见函数操作举例)

原创已于 2022-04-01 19:45:36 修改 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaWeb #jquery

于 2022-03-30 01:00:58 首次发布

JavaWeb 专栏收录该内容

25 篇文章

订阅专栏

本文介绍jQuery这一流行的JavaScript库，包括其设计理念、基本用法及核心功能。涵盖选择器、DOM操作、事件处理等内容。

jQuery

一、理解

jQuery 是 js 的一个轻量级框架

jQuery 就是将 js 常用的功能封装成了函数（函数库）

jQuery 写了少量的代码实现的更多功能

jQuery 拥有便捷的扩展机制和丰富的插件

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二、使用

1、下载函数库 https://jquery.com/ jquery.js文件

2、将js文件引入项目中

3、引入函数库到页面

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<body>
    <h2 id="h2">
        内容
    </h2>
    <script>
        // js获取
        var h2  = document.getElementById("h2");
        console.log(h2.innerHTML);

        // jq获取
        console.log($("#h2").html());
    </script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4rzvJ8d-1648570620628)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220325235234956.png)]$

三、核心语法

API文档：https://jquery.cuishifeng.cn/

1、$( ) jquery的核心函数根据任意选择器获取对应的标签

2、原生的js的window.onload = function ( ){ } 封装成了 $(function( ){ })

1、js中的window.onload只能出现一次否则就会覆盖

2、封装后的$(function( ){ }) 可以出现多次并且一次执行

3、原生js对象和jquery对象

1、原生js对象只能调用自己的函数和属性 jquery只能调用自己的函数和属性

2、原生js对象和jquery对象的相互转换

1、js对象转换成jquery对象 $(原生的js对象) 返回一个jquery对象

2、jquery对象转换成js对象

jquery对象[0] 或者 jquery对象.get(0)

特点：【jQuery本质上是一组js对象】

<body>
    <h3 id="h3">命运</h3>
    <h3 id="h4">生存</h3> 
    <script>
        // 【window.onload只能出现一次、后出现的会把之前的覆盖掉】
        // window.onload = function(){
        //     var  h3 = document.getElementById("h3");
        //     console.log(h3);
        // }

        // jq封装后的函数，可以出现多次
        $(function(){
            // 原生获取标签 【原生的js对象只能调取js的属性和函数】
            var  h3 = document.getElementById("h3");
            console.log(h3.innerHTML);

            // 将原生js转换成jq对象
            console.log($(h3).html());


            // jq获取标签   【jq对象只能调用 jq对象】
            console.log($("#h3").html());

            // 将jq对象装换成js对象
            console.log($("#h3")[0].innerHTML);
            console.log($("#h3").get(0).innerHTML);

            // 总结：【jq对象 就是 一组 js对象--jq对象是js对象的数组】
            
        })

        $(function(){
            var  h4 = document.getElementById("h4");
            console.log(h4);
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xl0QmxkK-1648570620630)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220325235456862.png)]$

四、常见函数

4.1、选择器

定位到具体的标签在css选择器的基础上丰富了一系列的选择器更加方便简洁的获取标签

分类：基本选择器、层级选择器、基本筛选器、属性选择器、其他选择器

4.1.1、基本选择器

<body>
    <p id="p1">命运呐</p>
    <p class="p2">生存呐</p>
    <p>信仰呐</p>
    <p>生活呐</p>
    <h2>李白</h2>

    <script>
         // 整个页面加载完毕之后执行 该函数
         $(function(){
            //1、 基本：id选择器 【#id值】
            console.log($("#p1").html());

            //2、 基本：类选择器 【.（class值）】
            console.log($(".p2").html());

            //3、 基本：标签名
            console.log($("h2").html());

            // 4、基本：组合
            $("h2,#p1,.p2").css("color","pink");
         })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ebP8YDC-1648570620631)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326000434035.png)]$

4.1.2、层级选择器

<body>
    <ul>
        <li>仙儿</li>
        <li>命运</li>
        <li>玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
	<li>斑马</li>
    <li>再见</li>
    <p>我不是兄弟标签</p>
    <script>
         // 整个页面加载完毕之后执行 该函数
         $(function(){
                // 【操作1】ul li 空格指ul中所有的后代li
                $("ul li").css("color","red");

                // 【操作2】ul > li 指匹配ul中的第一代子标签
                $("ul > li").css("color","blue");

                // 【操作3】ul + li 匹配ul后面【紧挨着的第一个兄弟标签li】
                $("ul + li").css("color","green");

                // 【操作4】ul ~ li 匹配ul后面【所有的兄弟标签li】
                $("ul ~ li").css("color","yellow");
         })
    </script>
</body>

在这里插入图片描述

4.1.2、基本筛选器

<script>
			// :first 匹配第一个元素 
            $("ul li:first").css("color","red");
            // :last 匹配最后一个元素
            $("ul li:last").css("color","pink");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4MefgFO-1648570620635)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326002403629.png)]$

<script>
  			// :odd 只匹配奇数索引，从0索引开始
            $("ul li:odd").css("color","pink");
            // ：even 匹配偶数索引，从0索引开始
            $("ul li:even").css("color","blue");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kr8aosTJ-1648570620636)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326002655419.png)]$

<script>
  			 // :eq(index) 匹配索引值为index的元素
            $("ul li:eq(2)").css("color","red");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-naufNLBa-1648570620638)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326002813140.png)]$

<script>		
            // lt(index) 匹配索引值小于index的元素
            $("ul li:lt(2)").css("color","pink");
            // gt(index) 匹配索引值大于index的元素
            $("ul li:gt(2)").css("color","yellow");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCVGIbKk-1648570620639)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326003046220.png)]$

<body>
     <table border="2" cellspacing="0" width="400px" height="50px" align="center">
        <caption>学生表</caption>
        <tr align="center">
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tr align="center">
            <td>1000</td>
            <td>王五</td>
            <td colspan="2">男</td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>1001</td>
            <td>张三</td>
            <td>男</td>
            <td rowspan="2">打篮球</td>
        </tr>
        <tr align="center">
            <td>1002</td>
            <td>李四</td>
            <td>女</td>
            <!-- <td>跑步</td> -->
        </tr> 
    </table>
    
</body>
<script>		
			 //隔行换算
            $("table tr:gt(0):odd").css("background-color","red");
            $("table tr:gt(0):even").css("background-color","red");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqlWCOPe-1648570620640)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326003428858.png)]$

4.1.3、属性选择器

<body>
    <ul>
        <li class="li1">仙儿</li>
        <li>命运</li>
        <li class="li3">玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
</body>
<script>		
			 //[sttribute] 匹配包含某个属性的元素
            $("ul li[class]").css("color","red");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X1fFeOQR-1648570620641)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326003943798.png)]$

<body>
    <ul>
        <li class="li1">仙儿</li>
        <li>命运</li>
        <li class="li3">玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
</body>
<script>		
 			//[sttribute=value] 匹配【包含】某个属性和属性值的元素
            $("ul li[class=li1]").css("color","red");

            //[sttribute!=value] 匹配【除了】某个属性和属性值的元素
            $("ul li[class!=li1]").css("color","yellow");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t4VHbrsp-1648570620642)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326004300239.png)]$

<body>
    <ul>
        <li class="li1">仙儿</li>
        <li>命运</li>
        <li class="li3">玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
</body>
<script>		
 			//[sttribute^=value] 匹配某个属性和属性值【开头】的元素
            $("ul li[class^=l]").css("color","red");

            //[sttribute$=value] 匹配某个属性和属性值【结尾】的元素
            $("ul li[class$=3]").css("color","blue");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MohZ7CSW-1648570620643)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326004616598.png)]$

<body>
    <ul>
        <li class="li1">仙儿</li>
        <li>命运</li>
        <li class="li3">玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
</body>
<script>		
 			//[sttribute*=value] 匹配【包含】某个属性和属性值的元素
            $("ul li[class*=i]").css("color","yellow");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M0fJJDYQ-1648570620644)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326004728582.png)]$

<body>
    <ul>
        <li class="li1">仙儿</li>
        <li>命运</li>
        <li class="li3">玫瑰</li>
        <li>鸽子</li>
        <b>
            <li>安河桥</li>
        </b>
    </ul>
</body>
<script>		
//=====================子元素===============================
    
 				//匹配到ul下第一个元素
                $("ul li:first-child").css("color","yellow");
                //匹配到ul下最后一个元素
                $("ul li:last-child").css("color","yellow");
                
                // 匹配到ul下指定元素
                 $("ul li:nth-child(3)").css("color","blue");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IISQGDA7-1648570620645)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326171047497.png)]$

4.1.4、其他选择器

API：https://jquery.cuishifeng.cn/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yP4WcRa2-1648570620646)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326005458407.png)]$

4.2、操作函数

4.2.1、属性操作 attr

attr 和 prop

1：attr(参数) 获取元素的属性值

2：attr(参数1，参数2) 设置元素属性值

3：attr({ }) 设置多个属性值

attr 和 prop 的区别

1、设置属性值 prop不写单位

2、prop获取checked属性返回的是true或者false 而 attr返回的是checked或者undefined，因此prop方便做判断处理

<body>

    <div id="d1" name="xx">
        <p> 莎士比亚</p>
       
    </div>
    <input type="radio" name="sex" value="男" id="">

    <script>
        $(function(){
// ===============  attr  ===================================

            // 1、设置属性

            // 【操作1】attr()   一个参数：获取属性值
            console.log($("#d1").attr("id"));  

            // 【操作2】2、attr()   两个参数：设置属性值
            $("#d1").attr("class","xxx") ;

            // 【操作3】3、attr()   多个参数：设置多个属性
            $("#d1").attr({"width":"200px","height":"100px"}) ;
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcMLMB43-1648570620648)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326172056788.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EypD4ryz-1648570620649)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326172206359.png)]$
在这里插入图片描述

4.2.1、属性操作 prop

prop() 一个参数：获取有意义的属性值

prop() 两个参数：设置属性值

<body>

    <div id="d1" name="xx">
        <p> 莎士比亚</p>
       
    </div>
    <input type="radio" name="sex" value="男" id="">

    <script>
        $(function(){
// ===============  prop  ===================================

            // 【操作1】1、prop()   一个参数：获取有意义的属性值
            console.log($("#d1").prop("name"));
            //复选框没选中返回false  选中了是true
            console.log($("input").prop("checked"));

            // 【操作2】2、prop()   两个参数：设置属性值
            $("#d1").prop("class","dd");
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyUwFSyo-1648570620650)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326172721086.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E6zf72XL-1648570620651)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326173113234.png)]$

4.2.3、内容操作：

html(参数) 如果无参就是获取双边标签的内容，如果有参设置标签内容

text(参数) 如果无参就是获取双边标签的文本内容如果有参设置标签内容

val(参数) 如果无参就是获取input的内容如果有参设置标签内容

<body>
    <div id="d1" name="xx">
        <p> 莎士比亚</p>    
    </div>
    <input type="radio" checked name="sex" value="男" id="">

    <script>
        $(function(){
// ===============    内容操作    =======================================

            console.log($("#d1").html());       //相当于innerHTML
            console.log($("#d1").text());       //相当于innerText

             console.log($("input").val());       //相当于value
             console.log($("input").val("aaa"));       //也可以设置value
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etUu4tWi-1648570620652)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326173652326.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-it2iSHOm-1648570620652)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220326173824475.png)]$

4.2.4、样式操作：

css(参数) 获取标签元素的样式值

css(样式名，样式值) 设置标签的一个样式

css({样式名：样式值，样式名：样式值……}) 设置表的多个样式

<body>
    <div id="d1">
        哎呀我说命运呐
    </div>
    <script>
        $(function(){
            // 1、获取标签  设置标签

            // css("样式名", "样式值");  设置一个样式
            $("#d1").css("color","red");

            //css("样式名"); 获取样式的值
            console.log($("#d1").css("color","width")
) 
            // css({"样式名": "样式值", "样式名": "样式值"...}); 设置多个样式
            $("#d1").css({"width":"200px","height":"200px","border":"1px solid red"})
        })
    </script>
</body>

在这里插入图片描述

将js的事件名除去 on 封装成一时间名为函数名的函数

<body>
    <button id="btn" onclick="">
        点击
    </button>
    <script>
        $(function(){
            // 原生js
            // document.getElementById("btn").onclick = function(){
            //     alert("原生js事件")
            // }
            // jq
            // $("#btn").click(function(){
            //     alert("jq事件")
            // })

            $("#btn").dblclick(function(){
                alert("jq双击事件")
            })
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dCi88PE3-1648570620654)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220328162846233.png)]$

4.2.6、文档处理

内部追加：一般是往子标签同级插入

append prepend

appendTo prependTo

原图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2rtlqkH0-1648570620655)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329110812426.png)]$

<body>
    <p>包裹1</p>
    <p id="p2">包裹2</p>

    <h3>喜欢的游戏：</h3>
    <ul>
        <li>LOL</li>
        <li id="cs">csgo</li>
        <li>吃鸡</li>
        <li id="xxx">插入元素</li>
    </ul>
    <li id="xx">李白</li>

<script>
       // 1.1 内部追加--在后面追加（后面匹配的追加到前面匹配的）
       $("ul").append("<li>追加到后面</li>");
       // 1.2 prepend 追加到内部的前面
      $("ul").prepend("<li>追加到前面</li>")  
</script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGeqK246-1648570620657)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220328165136277.png)]$ 在这里插入图片描述

<body>
    <p>包裹1</p>
    <p id="p2">包裹2</p>

    <h3>喜欢的游戏：</h3>
    <ul>
        <li>LOL</li>
        <li id="cs">csgo</li>
        <li>吃鸡</li>
        <li id="xxx">插入元素</li>
    </ul>
    <li id="xx">李白</li>

<script>
    // 1.3 前面匹配的元素追加到后面匹配的元素中【追加到后面内部的后面】
            $("ul").appendTo($("#xx"));  
    // 1.4 前面匹配的元素追加到后面匹配的元素中【追加到后面内部的前面】
            $("ul").prependTo($("#xx"));  
</script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NJXy0qKo-1648570620658)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329104014655.png)]$
在这里插入图片描述

外部插入：

1、after 将【后面】匹配到的元素放到前面匹配的元素【后面】

2、before 将【后面】匹配到的元素放到前面匹配的元素【前面】

3、insertAfter 将【前面】匹配到的元素放到后面匹配的元素【后面】

4、insertBefore 将【前面】匹配到的元素放到后面匹配的元素【前面】

<script>
		// 1.after 将【后面】匹配到的元素 放到 前面匹配的元素 【后面】
           $("ul #cs").after($("#xx"));
</script>

在这里插入图片描述

<script>
		// 2.before 将【后面】匹配到的元素 放到 前面匹配的元素 【前面】
           $("ul #cs").before($("#xx"));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrulFhJc-1648570620661)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329111704220.png)]$

<script>
		// 3.insertAfter 将【前面】匹配到的元素 放到 后面匹配的元素 【后面】
           $("ul #cs").insertAfter($("#xx"));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WM8Wj31K-1648570620662)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329111840824.png)]$

<script>
		// 4.insertBefore 将【前面】匹配到的元素 放到 后面匹配的元素 【前面】
           $("ul #cs").insertBefore($("#xx"));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J59ZsV1s-1648570620663)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329111926198.png)]$

包裹：

1、wrap 【后面匹配的元素】包裹【前面】匹配到的元素

2、wrapAll 【后面匹配的元素】包裹【前面】匹配到的元素放到一起

<script>
		//  1、wrap  将【前面】匹配到的元素 外边包裹 【后面匹配的元素】
            $("p").wrap("<b></b>");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCnnFF3W-1648570620664)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329112150432.png)]$

<script>
		//  2、wrapAll  将【前面】匹配到的元素放到一起 然后外边包裹【后面匹配的元素】
            $("p").wrapAll("<b></b>");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XhtVkl1M-1648570620665)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329112326548.png)]$

<script>
		// 3、wrapInner 将【前面】匹配到的元素  【内部】包裹后面匹配的元素
            $("p").wrapInner("<b></b>");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly9HgWKj-1648570620666)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329112639814.png)]$

替换

.replaceWith ：【后面】匹配的替换前面的

.replaceAll：【后面】匹配的替换前面的

<script>
		//  1、【后面】匹配的 替换 前面的
            $("ul").replaceWith("<b></b>");
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyvW0Lke-1648570620666)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329113359076.png)]$

<script>
		//  2、【前面】匹配的 替换 后面的
            $("<b></b>").replaceAll($("p"));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9bSqCr9-1648570620668)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329113523251.png)]$

删除和复制

1、empty ：清空标签后的内容

2、remove ：删除该标签

3、clone ：克隆该标签

<script>
		//  1、empty 清空标签后的内容
             $("#cs").empty();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HiG5iFjK-1648570620669)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329113654499.png)]$

<script>
		//  2、remove 删除该标签
            $("#xx").remove();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ybl5mBiN-1648570620670)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329114200615.png)]$

<script>
		//  1、clone 克隆该标签
            $("#p2").clone().insertAfter($("#p2"));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTUILq58-1648570620671)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329114326476.png)]$

4.2.7、jQuery的遍历

格式：

$.each(要遍历的jquery对象).function(每一个索引，每一个js对象) { } )

要遍历的jquery对象.each(function(每一个索引，每一个js对象) { } )

<body>
    <h2>内容1</h2>
    <h2>内容2</h2>
    <h2>内容3</h2>

    <script>
        $(function(){
            // 1、获取标签中的内容
           // console.log($("h2").html());

            // 遍历 jq对象 .each(function(index,ele))
            $("h2").each(function(index,ele){
                console.log(index,ele.innerHTML);
            })

            console.log("=============================")

            // $.each函数
            $.each($("h2"),function(index,ele){
                console.log(index,ele.innerHTML);
            });
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6AxJVC8-1648570620672)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329115218992.png)]$