jquery中添加元素,删除元素，筛选元素，获取子集，转换元素,遍历元素用法

最新推荐文章于 2023-05-24 13:28:12 发布
最新推荐文章于 2023-05-24 13:28:12 发布
阅读量676 收藏
点赞数
分类专栏： jquery爬坑中 文章标签： jquery 入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40842539/article/details/87004901
版权

添加元素
语法:.
$(selector)add(selector)
$(selector).add(html)
$(selector).add(jQueryObject)
$(selector).add(selector, context)
$(selector).add(element)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                <p id="info">sadadasssasd</p>
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6</li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {
        // 添加元素
        console.log($('.item-1,.item-2'));
        console.log($('.item-2').add('.item-3'));
        
        // add()可以添加多个
       console.log($('.item-4').add('.item-5').add('.item-6'));

		 // 删除元素
        // 删除选择器元素
        console.log($('li').not('.item-4'));
        // 留下选择器元素
        console.log($('li').filter('.item-4'));


		
    })

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




第二种删除元素的写法

		console.log($('li').not(function (index) {
        //    $(this)会返回每一次Jquery对象
            return $(this).hasClass('item-4')
        }));

        console.log($('li').filter(function (index) {
        //    $(this)会返回每一次Jquery对象 hasClass:判断
            return $(this).hasClass('item-4');
        }));




筛选方法：has() 方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                <p id="info">sadadasssasd</p>
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p></li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {


        	// 筛选元素:判断p在li中哪里，有就打印出来
            console.log($('li').has('p'));
            
    })
    </script>
</body>
</html>




slice()方法:slice() 把匹配元素集合缩减为指定的指数范围的子集。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                <p id="info">sadadasssasd</p>
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p></li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {
    		//未指定结尾，会全部打印下去
            console.log($('li').slice(0));
             // 从第三个元素后，一直打印下去
      	    console.log($('li').slice(3));
      	    // 打印4，5 左闭右开的区间，(3,5]
       	    console.log($('li').slice(3,5));
      	    
    })
    </script>
</body>
</html>

转换元素
map(callback):转换成另一个jquery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p></li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {
        // 转换成另一个Jquery对象
        console.log($('div').map(function (index,domElement) {
            // return this.id;
                return domElement.id;
        }))
    })
    </script>
</body>
</html>




遍历元素
each(iterator)：each() 方法规定为每个匹配元素规定运行的函数。
提示：返回 false 可用于及早停止循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p></li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {
        // 遍历元素
        console.log($('li').each(function (index,domElement) {
            // 增加title属性，给title遍历li里的文本
            this.title = this.innerText;

        }))

    })
    </script>
</body>
</html>




each()终止循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p></li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
    $(function () {
        // 遍历元素
        console.log($('div').each(function (index,domElement) {
            if (this.id === 'box2') {
                return false;
            }
            // 增加title属性，给title遍历li里的文本
            this.title = this.id;

        }))

    })
    </script>
</body>
</html>
an_learn +1
关注
专栏目录
Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery - AJAX 简介
qq_44791674的博客
10-05 525
Jquery中获取内容和属性 Jquery拥有可操作HTML元素和属性的强大方法。 常用的方法有： text()/设置或返沪所选元素的文本内容 html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） val()/返回表单字段的值（理解为value的简写） attr()/设置或返回所选属性的值 text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） <!DOMTYPE> <ht
jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
weixin_57218747的博客
05-12 1363
jQuery 一 jQuery 的基础 1.1 jQuery 的版本 不同的开发版本 jquery.js 开发版（不压缩） jquery.min.js 产品版（压缩过） jquery.slim.js 简化版（去掉了动画功能和ajax功能） https://www.bootcdn.cn/ 版本号 1.x.x 兼容IE6~IE8 2.x.x 和 3.x.x 需要 IE9 以上浏览器支持 1.2 如何使用 jQuery 需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery
jq 获取含类的子集_Jquery获取子元素
weixin_28787115的博客
12-24 1610
Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。children()方法：获取该元素下的直接子集元素find()方法：获取该元素下的所有子集元素分别以以下HTML代码为例：list1list1-1list1-2list2list2-1list2-2list3list3-1list3-2children()方法获取...
jquery 查找子集
weixin_30488085的博客
05-24 1355
Jquery获取子元素的方法有2种，分别是children()方法和find()方法。 1.children()方法：获取该元素下的直接子集元素 2.find()方法：获取该元素下的所有子集元素 3.children()方法获取ul下面直接子集元素li：$("ul").children("li") 4.find()方法获取ul下所有元素li：$("ul").find("li") 5....
jquery 同级元素下的子元素_jQuery获取所有父级元素及同级元素及子元素实例详解...
weixin_39798943的博客
12-20 325
本文主要介绍了jQuery获取所有父级元素及同级元素及子元素的方法，本文给大家介绍的非常详细，具有参考借鉴价值 ,需要的朋友可以参考下，希望能帮助到大家。1.获取父级元素$("#id").parent()获取其父级元素$("#id").parents()获取其所有的祖先元素$("#id").closest()获取其最近的祖先元素，依次上溯------------------------------...
jQuery获取,遍历和操作表单元素Select,checkbox,radio
fyqcdbdx的专栏
10-12 1478
jQuery获取Select选择的Text和Value: 语法解释： Java代码   1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发   2
遍历DO元素
03-24
本篇将详细探讨如何在jQuery中遍历和筛选DOM元素。 首先，我们来看3.1.1章节关于按索引筛选元素的方法： 1. `.eq(index)`：这个方法用于获取匹配元素集合中指定索引位置的单个元素。索引是从0开始的，所以`.eq(0)`...
RIA应用开发：3-遍历DOM元素.ppt
06-23
`.first()`和`.last()`方法则分别用于获取集合中的第一个和最后一个元素，而`.slice(start, [end])`可以选取一个匹配元素的子集，`start`和`end`参数定义了选取的范围。 对于更复杂的筛选需求，`.filter(expr | fn)...
10-jQuery-遍历children、parent、for、each、for...of等
最新发布
记录java学习日常~
05-24 963
上述代码表示：通过 $ 函数选择 container 元素，并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素，并打印出它们的文本内容。需要注意的是，for...of 循环中的 element 变量是 DOM 元素，需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。上述代码表示：使用 $ 函数选择所有 li 元素，并使用 each() 方法遍历它们。在示例代码中，使用 console.log() 打印每个 li 元素的索引和文本内容。
jquery删除数组中重复元素
10-20
本文主要讲解jquery删除数组中重复元素的具体思路与示例代码，有助于理解与学习，希望对大家有所帮助
前端---jQuery对HTML的增加,删除,遍历操作
Nagile-zhou博客
10-10 977
jQuery对HTML的操作 jQuery的基础语法我们在这里不做过多介绍,如果这方面有什么不懂可以去参考我另一篇博客 https://blog.csdn.net/weixin_42504145/article/details/83003023 在这篇博客对jQuery的基本知识有详细的介绍. 一.jQuery - 设置内容和属性 1.设置内容 - text()、html() 以及 va...
select(下拉列表框)动态添加子集
weixin_33696106的博客
10-27 267
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery元素遍历，创建，添加，删除操作
DangR_Jisoo的博客
12-05 624
jQuery元素遍历，创建，添加，删除操作 元素遍历 语法一：$('div').each(function(index,ele){ }) (主要用于遍历元素) //html代码 <div>1</div> <div>2</div> <div>3</div> //jQuery代码(记得引入jQuery文件) $('div').each(function(index,ele){
jQuery遍历-过滤
c__dreamer的博客
07-29 533
 我个人感觉jQuery中最大的好处就是选择Dom元素方面了。选择Dom中除了选择器、过滤，当然还有遍历了。 总结一下遍历中的过滤 目录 eq() filter() first() last() has() is() not() map() slice() eq() 描述：减少匹配元素的集合为指定的索引的哪一个元素 索引值可以是负值，也可以是正值， &lt;p&gt...
jq 获取含类的子集_Jquery实现获取子元素的方法分析
weixin_34380085的博客
02-26 869
本文实例讲述了Jquery实现获取子元素的方法。分享给大家供大家参考，具体如下：Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。1.children()方法：获取该元素下的直接子集元素2.find()方法：获取该元素下的所有子集元素分别以以下HTML代码为例：list1list1-1list1-2list2lis...
jquery获取子元素的一些方法
热门推荐
LPLIFE的博客
06-06 3万+
强制打酱油,不学习会使人落后jquery获取子元素的一些方法1.通过id,class等选择器2.通过父元素进行find查找3.通过父元素的children进行查找注意:find和children的区别,代码已给出详细解释,想要真正理解,还是得靠代码.光看不练那都是纸上谈兵&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt...
jquery中添加元素的四种方法
业余前端的职业经历
03-30 3022
jquery添加dom元素的四种方式 可以分为俩类 1.相对于父元素插入位置 1.1父元素的第一孩子元素 $('parent').prepend('child') // parent和child分别代表父元素和要插入子元素 1.1父元素的最后一孩子元素 $('parent').append('child') // parent和child分别代表父元素和要插入子元...
事件处理技巧：事件冒泡、事件委托、jQuery元素节点操作详解
jQuery元素节点操作提供了多种方法来操作元素节点，例如创建节点、插入节点、删除节点等。创建节点可以使用$("<元素>")的方式，例如$("<p>Hello World!</p>")。插入节点可以使用append()、prepend()、after()、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值