jQuery 实战01

jQuery是一个快速、简洁的JavaScript框架，由John Resig开发，遵循"write Less, Do More"的设计理念。文章介绍了jQuery的基本概念、选择器和过滤器。选择器包括基础选择器（id、元素、类等）和层次选择器（后代、子选择器等）；过滤器分为基本过滤器（如:first、:not）、内容过滤器（如:contains）和可见过滤器（如:hidden

冉冉柟

310人浏览 · 2025-11-05 13:14:19

冉冉柟 · 2025-11-05 13:14:19 发布

一、jQuery框架简介

1.1、jQuery简介

jQuery是一个快速、简洁的JavaScript框架。

jQuery是一个JavaScript库
jQuery具备简洁的语法和跨平台的兼容性
简化了JavaScript的操作，为开发者提供了极大的便利。

1.2、jQuery宗旨

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.3、jQuery创始人

John Resig, jQuery的创始人和技术领袖，目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等经典JavaScript书籍。

在其25岁时候，就已经完成了JQuery框架的开发。

1.4、jQuery 下载

jQuery官方网站（http://jquery.com）。

二、jQuery元素操作

2.1、jQuery选择器

在这里插入图片描述

2.1-1 基础选择器

在这里插入图片描述

名称	说明	举例
id选择器（#号）	根据元素Id选择	$(“#divId") 选择ID为divId的元素
元素选择器（元素名）	根据元素的名称选择	$(“a”) 选择所有元素
类选择器（符号.）	根据元素的css类选择	$(“.bgRed”) 选择所有CSS类为bgRed的元素
统配选择器（*号）	选择所有元素	$(“*”) 选择页面所有元素
组选择器（逗号）	可以将几个选择器用“,”分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.	$(“#divId, a, .bgRed”) 选择页面所有ID为divId的元素、所有元素和所有CSS类为bgRed的元素

2.1-2 层次选择器

在这里插入图片描述

名称	举例	说明
后代选择器（用空格隔开）	$(“.bgRed div”)	选择CSS类为bgRed的元素中的所有元素。
子选择器（大于号）	$(“.myList>li”)	选择CSS类为myList元素中的直接子节点对象。仅选择下一级元素
临近选择器（加号）	$(“#hibiscus+img”)	选在id为hibiscus元素后面的一个img对象。
兄弟选择器（波浪）	$(“#someDiv~[title]”)	选择id为someDiv的对象后面所有带有title属性的元素。注:siblings是过滤器。

2.2、jQuery过滤器

2.2-1 基本过滤器

名称	说明	举例
:first	匹配找到的第一个元素	$(“tr:first”) 查找表格的第一行
:last	匹配找到的最后一个元素	$(“tr:last”) 查找表格的最后一行
:not(selector)	去除所有与给定选择器属性匹配的元素	$(“h1:not(.add)”) 选择h1标签中class不为add的元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数	$(“tr:even”) 查找表格的1、3、5…行
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	$(“tr:odd”) 查找表格的2、4、6行

名称	说明	举例
:eq(index)	匹配一个给定索引值的元素注:index从 0 开始计数	$(“tr:eq(1)”) 查找第二行
:gt(index)	匹配所有大于给定索引值的元素注:index从 0 开始计数	$(“tr:gt(0)”) 查找第二第三行，即索引值是1和2，也就是比0大
:lt(index)	选择结果集中索引小于 N 的 elements 注:index从 0 开始计数	$(“tr:lt(2)”) 查找第一第二行，即索引值是0和1，也就是比2小
:focus	匹配当前获取焦点的元素	$(“input:focus”) 匹配当前获取焦点的元素
:animate	匹配所有正在执行动画效果的元素	$(“div”).animate({ width: ‘+=100px’ }); 对div元素执行一个动画特效
:target	选择器选择由文档URI的格式化识别码表示的目标元素。	例如，给定的URI http://example.com/#foo 则$( “p:target” )，将选择元素

2.2-2 内容过滤器（Content Filters）

名称	说明	举例
:contains(text)	匹配包含给定文本的元素	$(“div:contains(‘John’)”) 查找所有包含 “John” 的 div 元素
:has(selector)	匹配含有指定选择器的元素	$(“div:has§”).addClass(“test”) 给所有包含 p 元素的 div 元素添加一个 text 类
:empty	匹配所有不包含标签素或者文本的空元素	$(“td:empty”) 查找所有不包含子元素或者文本的空元素
:parent	匹配含有子标签或者文本的元素	$(“td:parent”) 查找所有含有子元素或者文本的 td 元素

2.2-3 可见过滤器（Visibility Filters）

名称	说明	举例
:hidden	匹配所有的隐藏元素	$(“tr:hidden”) 查找所有不可见的 tr 元素
:visible	匹配所有的可见元素	$(“tr:visible”) 查找所有可见的 tr 元素

2.2-4 属性过滤器(Attribute Filters)

名称	说明	举例
[attribute]	匹配包含给定属性的元素	$(“div[id]”) 查找所有含有 id 属性的 div 元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$(“input[name=‘newsletter’]”).attr(“checked”, true); 查找所有 name 属性是 newsletter 的 input 元素:
[attribute!=value]	匹配给定的属性是不包含某个特定值的元素	$(“input[name!=‘newsletter’]”).attr(“checked”, true); 查找所有 name 属性不是 newsletter 的 input 元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素	$(“input[name^=‘news’]”) 查找所有name属性包含news开头的input元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	$(“input[name=‘letter’]”) 查找所有 name 以 ‘letter’ 结尾的 input 元素

名称	说明	举例
*[attribute=value]**	匹配给定的属性是以包含某些值的元素	$(“input[name*=‘man’]”) 查找所有 name 包含 ‘man’ 的 input 元素
[attribute~=value]	匹配给定的属性包含一个value，已空格分隔	$(“input[name*=‘man’]”) 查找所有 name 包含 ‘man’ 的 input 元素
[attributeFilter1] [attributeFilter2] [attributeFilterN]	复合属性选择器，需要同时满足多个条件时使用。	$(" in p u t [i d] [nam e$ =‘man’]“)”) 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

2.2-5 子元素过滤器

名称	功能描述
:nth-child(index/even/odd/公式)	索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素
:first-child	获取第一个子元素
:last-child	获取最后一个子元素
:only-child	如果当前元素是唯一的子元素，则匹配
:nth-last-child(index/even/odd/公式)	选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个

选择器	功能描述
:nth-of-type(index/even/odd/公式))	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素
:first-of-type	选择所有相同的元素名称的第一个子元素
:last-of-type	选择所有相同的元素名称的最后一个子元素
:only-of-type	选择所有没有兄弟元素，且具有相同的元素名称的元素
:nth-last-of-type(index/even/odd/公式)	选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个

2.3、jQuery表单

2.3-1 表单选择器

名称	说明	举例
:input	匹配所有input、textarea、select元素	$(“:input")
:text	匹配所有的文本框	$(“:text")
:password	匹配所有的密码框	$(“:password")
:radio	匹配所有的单选按钮	$(“:radio")
:checkbox	匹配所有的复选框	$(“:checkbox")
:submit	匹配所有的提交按钮	$(“:submit")
:reset	匹配所有的重置按钮	$(“:reset")
:button	匹配所有的按钮	$(“:button")
:image	匹配所有的图片	$(“:image")
:file	匹配所有的文件域	$(“:file")

2.3-2 表单过滤器

名称	说明	举例
:enabled	匹配所有可用元素	$(“:enabled")
:disabled	匹配所有不可用元素	$(“:disabled")
:checked	匹配所有选中的元素（主要针对单选、复选）	$(“:checked")
:selected	匹配所有的选中的option元素（主要针对下拉框）	$(“:selected")

2.4、元素遍历

2.4-1 each()

each():方法主要用于遍历jquery对象

$(":checked").each(function (index,ele) {
      console.log(index+"-"+$(ele).val());
})

2.4-2 map()

map():方法主要用于遍历操作数组和对象，返回一个新的数组

var maplist = $(":checked").map(function (index,ele) {
	return $(ele).val();
}).get().join(",");

2.5、元素样式

语法	说明
css(name)	获取第一个匹配元素的样式
css(properties)	将一个键值对形式的对象设置为所有匹配元素的样式
css(name, value)	为所有匹配的元素设置样式
width()	获取第一个匹配元素的当前宽度值（返回数值型结果）
width(value)	为所有匹配的元素设置宽度样式（可以是字符串或数字）
height()	获取第一个匹配元素的当前高度值（返回数值型结果）
height(value)	为所有匹配的元素设置高度样式（可以是字符串或数字）
offset()	获取元素的位置，返回的是一个对象，包含left和top属性
offset(properties)	利用对象设置元素的位置，必须包含left和top属性

2.6、元素筛选

2.6-1 元素筛选查找

语法	说明
find(expr)	搜索所有与指定表达式匹配的元素
parents([expr])	取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素）
parent([expr])	取得一个包含所有匹配元素的唯一父元素的元素集合
siblings([expr])	获取所有同级元素（不分上下）
next([expr])	匹配紧邻的同级的下一个元素
prev([expr])	匹配紧邻的同级的上一个元素

2.6-2 元素筛选过滤

语法	说明
eq(index)	获取第N个元素
filter(expr\|obj\|ele\|fn)	使用选择器、对象、元素或函数完成指定元素的筛选
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true
is(expr)	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
has(expr)	保留包含特定后代的元素，去掉那些不含有指定后代的元素

2.7、元素属性

在获取或设置属性时，建议操作元素的状态，如checked、selected或disabled时使用prop()方法，其他的情况使用attr()方法。

语法	说明
attr(name)	取得第一个匹配元素的属性值，否则返回undefined
attr(properties)	将一个键值对形式的对象设置为所有匹配元素的属性
attr(name, value)	为所有匹配的元素设置一个属性值
attr(name, function)	将函数的返回值作为所有匹配的元素的name属性值
prop(name)	取得第一个匹配元素的属性值，否则返回undefined
prop(properties)	将一个键值对形式的对象设置为所有匹配元素的属性
prop(name, value)	为所有匹配的元素设置一个属性值
prop(name, function)	将函数的返回值作为所有匹配的元素的name属性值
removeAttr(name)	从每一个匹配的元素中删除一个属性

语法	作用	说明
addClass(class)	追加样式	为每个匹配的元素追加指定的类名
removeClass(class)	移除样式	从所有匹配的元素中删除全部或者指定的类
toggleClass(class)	切换样式	判断指定类是否存在，存在则删除，不存在则添加
hasClass(class)	判断样式	判断元素是否具有class样式

三、jQuery操作DOM

*回顾什么是DOM

DOM（Document Object Model）是文档对象模型，是一种与浏览器、平台、语言无关的接口。

3.1、掌握jQuery插入元素

3.1-1 内部插入

内部插入是指向某个元素内部加入新的元素，形成父子关系。

append、 appendTo （内部插入,内容后）
prepend、prependTo（内部插入,内容前）

名称	说明	举例
append	在元素内部后面追加内容（文本或标签）	Hello： $(“p”).append(“Lisa");
appendTo	将内容追加至元素内部后（只能是标签）	Hello： $(“peter”).appendTo(“p”);
prepend	在元素内部前插入内容（文本或标签）	Hello： $(“p”).prepend(“张三");
prependTo	将内容追加至元素内部前（只能是标签）	Hello： $(“李四”).prependTo(“p”);

3.1-1.1 （内部插入,元素后） append() 、appendTo() 示例:

//在每个 p 元素结尾追加内容：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#append").click(function () {
                    $("p").append("<b>lisa,</b>");      	//在元素后追加内容，可加标签或文本
                    $("<b>peter，</b>").appendTo("p");    	//将内容追加至元素后，只能加标签
                })
            });
        </script>
    </head>
    <body>
        <p>Hello ： </p>
        <input type="button" value="内部元素后追加内容" id="append" /> 
    </body>
</html>

3.1-1.2 （内部插入,元素前） prepend()、prependTo()示例:

//在每个 p 元素开头插入内容：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ 
                $("#prepend").click(function () {
                    $("p").prepend("<b>张三，</b> ");          //在元素前插入内容，可加标签或文本
                    $("<b>李四，</b> ").prependTo("p");      //将内容插入至元素前，只能加标签
                })
            });
        </script>
    </head>
    <body>
      <p>Hello ： </p>
      <input type="button" value="内部元素前追加内容" id="prepend" /> 
    </body>
</html>

3.1-2 外部插入

外部插入主要是在元素之前或者之后加入新的元素，新元素加入之后，和原来的元素是同胞关系或者说是同级关系。

after、insertAfter（元素后插入）
before、insertBefore（元素前插入）

名称	说明	举例
after	在元素之后追加内容。（文本或标签）	Hello： $(“p”).after(“Lisa");
insertAfter	将内容追加到元素之后（只能是标签）	Hello： $(“peter”).insertAfter(“p”);
before	在元素之前插入内容（文本或标签）	Hello： $(“p”).before(“张三");
insertBefore	将内容插入到元素之前（只能是标签）	Hello： $(“李四”).insertBefore(“p”);

3.1-2.1 （外部插入,元素后）after()、insertAfter() 示例:

//在每个 p 元素之后追加内容：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#after").click(function () {
                    $("p").after("<b>lisa，</b>");      	//在元素后追加内容，可加标签或文本
                    $("<b>peter，</b>").insertAfter("p");         //将内容追加至元素后，只能加标签
                })      
            });
        </script>
    </head>
    <body>
        <p>Hello ： </p>
        <input type="button" value="元素后追加内容" id="after" />
    </body>
</html>

3.1-2.2 （外部插入,元素后）before()、insertBefore() 示例:

//在每个 p 元素之前插入内容：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#before").click(function () {
                    $("p").before("<b>张三，</b>");        	//在元素内部前插入内容，可加标签或文本
                    $("<b>李四，</b>").insertBefore("p");        //将内容插入至元素内部前，只能加标签
                })
            });
        </script>
    </head>
<body>
    <p>Hello ： </p>
    <input type="button" value="内部元素后追加内容" id="append" /> </body>
</html>

3.2、掌握jQuery复制元素

复制的方法是clone()

名称	说明	举例
clone(true\|false)	复制元素	Hello , how are you? $(“b”).clone().appendTo(“p”); 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

3.2-1 复制-clone()

//复制每个p元素，然后追加到 body 元素：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("p").click(function () {
                    alert("p");
                })
                $(“#clone").click(function(){
                    $("#clone").before($("p").clone());
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <input type="button" value="复制" id="clone" />
    </body>
</html>

3.3、掌握jQuery删除元素

删除的方法主要是删除文档中的一些元素

名称	说明	举例
remove()	从DOM中删除所有匹配的元素。（不保留标签）	, how are you? $(“p”).remove();
detach()	从DOM中删除所有匹配的元素，保留事件。（不保留标签）	, how are you? $(“p”). remove();
empty()	删除匹配的元素集合中所有的子节点。（保留标签）	, how are you? $(“p”).empty();

3.3-1 删除-remove()

//移除所有 <p> 元素，不保留标签
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                        $("p").remove();
                });
            });
        </script>
    </head>
    <body>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>删除所有 p 元素</button>
    </body>
</html>

3.3-2 删除-detach()

//移除所有 <p> 元素，移除的元素重新追加后保留事件：
<body>
    <h3>商品分类：</h3>
    <ul>
        <li>零食</li>
        <li>饮料</li>
        <li>蔬菜</li>
        <li>水果</li>
    </ul>
    <input type="button" value="追加" id="append" />
    <input type="button" value="remove删除" id="remove" />
    <input type="button" value="detach删除" id="detach" />
</body>

$(function () {
    var $li;
    $("li").click(function () {
        alert($(this).text());
    })
    $("#remove").click(function () {
        $li = $("li:eq(0)");
        $("li:eq(0)").remove();
    })
    $("#detach").click(function () {
        $li = $("li:eq(0)");
        $("li:eq(0)").detach();
    })
    $("#append").click(function () {
        $("ul").append($li);
    })
})

3.3-3 删除-empty()

//清空p元素的内容，保留标签、事件：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                            $("p").empty();
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <button>删除 p 元素</button>
    </body>
</html>

3.4、掌握jQuery替换元素

替换类方法主要用来替换选中的元素，包括replaceWith和replaceAll方法。

名称	说明	举例
replaceWith()	把元素替换成新元素（文本或标签）	$(“p”).replaceWith(“Paragraph. ”);
replaceAll()	将新元素替换匹配到的元素。（只能是标签）	$(“Paragraph. ”).replaceAll(“p”);

3.4-1 替换-replaceWith()

//把p标签替换为新的元素：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(". with ").click(function(){
                     $("p").replaceWith("<b>替换with</b>");
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <input type="button" value="替换with" id="with" />
    </body>
</html>

3.4-2 替换-replaceAll()

//将新的元素替换至p标签：
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(“all").click(function(){
                    $("<b>替换all</b>").replaceAll("p");
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <input type="button" value="替换all" id="all" />
    </body>
</html>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

AI Agent记忆系统，从入门到精通！一文讲透分类、可靠性，收藏这篇就够了！

2048 AI社区

吴恩达《Agentic AI》课程深度解析：AI新范式Agentic Workflows，开启与AI共事的新时代！

2048 AI社区

构建一个自主深度思考的RAG管道以解决复杂查询--通过网络搜索扩充知识(6)

然后，它使用专门的提示来指导我们强大的推理大语言模型将这些信息综合成一个全面的、多段落的答案，其中包括引用，从而成功地完成我们的研究过程。要解决我们的查询难题，我们的智能体需要查找有关AMD AI芯片战略的最新新闻（文件提交后，2024年发布的）。让我们从检索节点开始，该节点用于搜索我们内部的10-K文档。它唯一的任务是调用我们的planner_agent，并填充我们plan字段中的RAGStat

2048 AI社区

所有评论(0)

查看更多评论

冉冉柟

@2401_87254006

已为社区贡献1条内容

jQuery 实战01

冉冉柟

一、jQuery框架简介

1.1、jQuery简介

1.2、jQuery宗旨

1.3、jQuery创始人

1.4、jQuery 下载

二、jQuery元素操作

2.1、jQuery选择器

2.1-1 基础选择器

2.1-2 层次选择器

2.2、jQuery过滤器

2.2-1 基本过滤器

2.2-2 内容过滤器（Content Filters）

2.2-3 可见过滤器（Visibility Filters）

2.2-4 属性过滤器(Attribute Filters)

2.2-5 子元素过滤器

2.3、jQuery表单

2.3-1 表单选择器

2.3-2 表单过滤器

2.4、元素遍历

2.4-1 each()

2.4-2 map()

2.5、元素样式

2.6、元素筛选

2.6-1 元素筛选 查找

2.6-2 元素筛选 过滤

2.7、元素属性

三、jQuery操作DOM

*回顾什么是DOM

3.1、掌握jQuery插入元素

3.1-1 内部插入

3.1-1.1 （内部插入,元素后） append() 、appendTo() 示例:

3.1-1.2 （内部插入,元素前） prepend()、prependTo()示例:

3.1-2 外部插入

3.1-2.1 （外部插入,元素后）after()、insertAfter() 示例:

3.1-2.2 （外部插入,元素后）before()、insertBefore() 示例:

3.2、掌握jQuery复制元素

3.2-1 复制-clone()

3.3、掌握jQuery删除元素

3.3-1 删除-remove()

3.3-2 删除-detach()

3.3-3 删除-empty()

3.4、掌握jQuery替换元素

3.4-1 替换-replaceWith()

3.4-2 替换-replaceAll()

所有评论(0)

冉冉柟

2.6-1 元素筛选查找

2.6-2 元素筛选过滤