jQuery03筛选&文档处理

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量191 收藏
点赞数
分类专栏： jQuery 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68265336/article/details/123617465
版权

一.jQuery的筛选

                1.1  过滤

first()获取匹配的第一个元素
last()获取匹配的最后一个元素
eq(N)获取匹配的第N或N个元素
filter()筛选出与指定表达式匹配的元素集合
has()筛选出包含特定特点的元素集合
not()

筛选出不包含特定特点的元素集合  

        过滤的使用（代码仅供参考）

                //--过滤出指定表达式匹配的元素
                // 获取ul中所有的li元素，然后找到第一个元素
                $("ul>li:first").css("backgroud", "pinl");
                $("ul>li").first().css("background", "pink");

                // 找到最后一个元素
                $("ul>li").first().css("background", "pink");


                // 找到指定的某一个元素，例如第3个
                $("ul>li").eq(2).css("background", "pink");
                $("ul>li:eq(-2)").css("background", "pink");

                //--过滤出指定表达式匹配的元素集合
                // 找到属性title为a的元素
                $("ul>li").filter("[title][title=a]").css("background", "pink");

                // 筛选出有title属性的元素集合
                $("ul>li").filter("[title]").css("background", "pink");

                // 筛选出有<span>标签的元素集合
                $("ul>li").has("span").css("background", "pink");

                // 筛选出没有title属性的元素集合
                $("ul>li").not("[title]").css("background", "pink");

                     

           <body>
        <h2>补充知识点：位置</h2>
        <div id="aa">
            <div id="bb"></div>
        </div>
        <h2>jQuery03：筛选、文档处理</h2>
        <!-- 筛选和查找案例 -->
        <ul>
            <li>1</li>
            <li title="a">2</li>
            <li title="b">3</li>
            <li title="a"><span><b>4</b></span></li>
            <li title="b"><span>5</span></li>
            <ol>
                <li>6</li>
                <li>7</li>
            </ol>
            <span>8</span>
        </ul>
    </body>

                       1.2  查找

      

children()查找子标签
find()查找后代
parent()父标签
prevAll()前面所有的兄弟
nextAll()后面所有的兄弟
siblings()前后面所有的兄弟

                      查找的使用  (代码展示仅供参考)

                 // 查找ul的所有子标签,并且指定为li子标签
                $("ul").children("li").css("background", "pink");
                // 查找ul下面所有的span标签
                $("ul span").css("background", "pink");
                $("ul").find("span").css("background", "pink");
                // 查找b标签的父元素标签
                $("b").parent().css("background", "pink");
                // 查找第三个li标签前面所有的兄弟标签    
                $("ul>li").eq(2).prevAll().css("background", "pink");
                // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
                $("ul>li").eq(2).nextAll().css("background", "pink");
                // 查找第三个li标签所有的兄弟标签
                $("ul>li").eq(2).siblings().css("background", "pink");               

                        

   <body>
        <div id="aa">
            <div id="bb"></div>
        </div>
        <h2>jQuery03：筛选、文档处理</h2>
        <!-- 筛选和查找案例 -->
        <ul>
            <li>1</li>
            <li title="a">2</li>
            <li title="b">3</li>
            <li title="a"><span><b>4</b></span></li>
            <li title="b"><span>5</span></li>
            <ol>
                <li>6</li>
                <li>7</li>
            </ol>
            <span>8</span>
        </ul>
    </body>

二.文档处理

                 2.  内部插入&外部插入&删除&修改

append()将内容添加到指定的元素后面
appendTo()和append()颠倒
prepend()将内容添加到指定的元素前面
prependTo()和prepend()颠倒
after()在匹配元素之后插入内容
before()在匹配元素之前插入内容
empty()

删除匹配元素集合中所有的子节点（不包含匹配元素)

remove()

删除匹配元素集合中所有的子节点（包含匹配元素）

replaceWith()将所有匹配的元素替换成指定的内容

                //--内部插入(前面和后面)
                //   插入到最后面(给ul中最后一个li中插入一个a标签)
                $("ul>li:last").append("<a href='#'>大炮</a>")
                $("<a href='#'>大炮</a>").appendTo();
                //   插入到最前面(给ul中第一个li中插入一个a标签)
                $("ul>li:last").prepend("<a href='#'>大炮</a>")
                $("<a href='#'>大炮</a>").prependTo();

                //--外部插入(之前和之后)
                //   在属性title为b的li前面插入一个a标签
                $("ul>li").filter("[title=b]").before("<a href='#'>大炮</a>");
                //   在属性title为b的li后面插入一个a标签
                $("ul>li").filter("[title=b]").after("<a href='#'>大炮</a>");

                //2.2 改                
                //把li下面所有的span标签替换为<a>标签
                $("li span").replaceWith("<a href='#'>大炮</a>");
                //2.3 删                
                //清空ul中所有li的内容
                $("ul li").empty();
                //移除ul中所有的li
                $("ul li").remove();

 <body>
        <div id="aa">
            <div id="bb"></div>
        </div>
        <h2>jQuery03：筛选、文档处理</h2>
        <!-- 筛选和查找案例 -->
        <ul>
            <li>1</li>
            <li title="a">2</li>
            <li title="b">3</li>
            <li title="a"><span><b>4</b></span></li>
            <li title="b"><span>5</span></li>
            <ol>
                <li>6</li>
                <li>7</li>
            </ol>
            <span>8</span>
        </ul>
    </body>

补充知识点:位置

（代码块展示）

<style type="text/css">
			#aa {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50px;
				left: 50px;
			}

			#bb {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				top: 50px;
				left: 50px;
			}
		</style>

        <script>
                var a = $("#aa").offset();
				console.info(a.top, a.left);
				var b = $("#aa").position();
				console.info(b.top, b.left);
        </script>
        <body>
		<h2>补充知识点：位置</h2>
		<div id="aa">
			<div id="bb"></div>
		</div>
	    </body>

阳zm__
关注
专栏目录
css 定义最后一个孩子,正确：最后一个孩子的CSS3语法为ul> li> ul> li结构的最后一个(Correct :last-child CSS3 syntax for last li of u...
weixin_39589511的博客
08-04 919
正确：最后一个孩子的CSS3语法为ul> li> ul> li结构的最后一个(Correct :last-child CSS3 syntax for last li of ul>li>ul>li structure)我需要通过display:none;隐藏第二级和最后一级display:none; 命令。 但是，我无法通过以下试验获得：我的ul li结构dyna...
jQuery之筛选&文档处理
hh20040224的博客
03-21 98
目录 在jQuery对象数组中，筛选出一部分元素： 过滤：first()：获取匹配的第一个元素 last()：获得匹配的最后一个元素 eq(N)：获取匹配的第N或-N个元素 filter(selector)：筛选出与指定表达式匹配的元素集合 has(selector)：筛选出包含特定特点的元素的集合 not(selector)：筛选出不包含特定特点的元素的集合 在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签 查找： children()：子标签中找 find()：后.
【css】:last-child 选择器
羽裳醉月的博客
03-18 5634
CSS3 :last-child 选择器 :last-child 选择器用来匹配父元素中最后一个子元素。 eg:指定父元素 ul 中最后一个 li 元素，并设置背景颜色： li:last-child { background-color: #ff0000; }
JQuery中的基本过滤选择器
m0_58986621的博客
06-17 2820
first：获取第一个元素 语法：$(" li:first")选取所有<li>元素中的第一个<li>元素
li元素的常见伪类：ul列表第一个li和最后一个li的样式解决办法
白日梦技术博客
12-04 3760
在网站开发中，尤其是对资讯网站中，通常需要做出热门文章的列表，排名等等样式，里面就会应用到排序的从0-10等等数值，数值中，我们通常会对前三或是前五进行特别的样式调整。比如我们需要把第一个改成红色的背景，把最后一个样式下面加一个更多的按钮 ，这样我们都可以使用li伪类来对前端的样式进行调整。 尤其是在wordpress主题的开发中，在前端应用很广泛li的第一个及最后一个都可以进行单独的设置，甚至是li的奇偶数的，或是特定的某个位置都可以使用伪类来进行设置，相当于li的一个小跟班，只对某个li起作用。 第
jQuery03 筛选&文档处理
weixin_67450855的博客
03-18 517
案例：<h2>jQuery03：筛选、文档处理</h2> <!-- 筛选和查找案例 --> <ul> <li>1</li> <li title="a">2</li> <li title="b">3</li> <li title="a"><spa...
jQuery_03 筛选&文档处理
qq_61313896的博客
03-11 1768
一：筛选中的过滤方法有哪些？ first() 获取匹配的第一个元素 <style> .cc { box-shadow: 0px 0px 50px yellow; } </style> <script> $(function() { //first() 获取匹配的第一个元素 console.log($("img").first()); //添加样式 console.log(..
jQuery03(筛选&文档处理)
weixin_64313980的博客
03-19 1097
各位猿友们晚上好！今天任然是努力秃头的一天q_q，今天咱们学习的是jQuery里的筛选&文档处理，今日的内容相对简单一点，所以小刘感觉自己掌握的还算可以哈 其中包括筛选的过滤方法与查找方法以及文档处理的增删改，语法还是很简单的，那咱们开始吧！ 首先咱们来看看今日总的思维导图 1. ...
jQuery03: 筛选&文档处理
weixin_65423584的博客
03-21 2685
Hello!大家好a~ 今天的内容分享开始了哦，准备好接收了嘛 首先给大家罗列一下语法，就直接上思维导图啦，清晰明了： 接下来是相应方法的案例啦 一、筛选 前面三个之前就有所了解了吧，直接上代码展示 //--过滤出指定表达式匹配的元素 // 获取ul中所有的li元素，然后找到第一个元素 $("ul>li:first").css("background","pink"); $("ul>.
jQuery筛选&文档处理
qq_63492318的博客
03-18 961
本章学习目标： 1.掌握基本jQuery过滤元素的语法运用； 2.掌握基本的jQuery查找元素的语法运用； 3.掌握jQuery文档的基本增删改语法运用； 一、jQuery筛选 1、过滤 基本语法： first()：获取匹配的第一个元素 last()：获得匹配的最后一个元素 eq(N)：获取匹配的第N或-N个元素 filter(selector)：筛选出与指定表达式匹配的元素集合 h...
gt()和:not(:last)来控制<li>元素显示的内容
gududeyaoshi的博客
01-04 1881
test $(function(){ //选择大于4并且不包括最后一个 var $hideLis = $("li:gt(4):not(:last)"); //选择大于4并且不包含第一个 $("li:gt(4):not(:first) ") //选择小于4并且不包含第一个 $("li:lt(4):not(:first)"
ul列表第一个li和最后一个li的如何选中
weixin_44647098的博客
06-12 1万+
第一个li的样式：li:first-child { background:#f00; } 最后一个li的样式：li:last-child { background:#000; } 第n个li的样式：li:nth-child(n) { background:#000; } 倒数第二个li的样式：nth-last-of-type(2){ background:#000; } 奇数列表：li:nth-child(odd) { background:#f00; } 偶数列表：li:nth-chi
：last选择器（jQuery）
牛栏山矿泉水
08-09 109
1、：last：获取匹配的最后个元素 2、示例 （1）源码 last.html: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://ww...
js实现删除div下所有子节点
热门推荐
MoonX的专栏
10-07 6万+
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <br />  <br /><html xmlns="http://www.w3.org/1999/xhtml">  <br /><head><br />    <meta http-equiv="Content-Type" content="text/
06_实现watch
qq_53109172的博客
10-16 734
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
web扩展
x737510的博客
10-10 605
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 151
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值