jQuery之筛选&文档处理

已于 2022-03-18 19:56:07 修改
阅读量931 收藏
点赞数
分类专栏： jQuery JS html 文章标签： jquery 前端 javascript html css
于 2022-03-18 18:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62881798/article/details/123581640
版权
JS 同时被 3 个专栏收录
31 篇文章 1 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏
jQuery
6 篇文章 0 订阅
订阅专栏

目录

回顾上一节:

     $工具的类方法（类似java中的静态方法）

                jQuery控制属性设置以及css样式设置

  用jQuery实现全选框与复选框的事件：

本节内容：

在jQuery对象数组中，筛选出一部分元素：

过滤：first()：获取匹配的第一个元素

last()：获得匹配的最后一个元素

eq(N)：获取匹配的第N或-N个元素

filter(selector)：筛选出与指定表达式匹配的元素集合

has(selector)：筛选出包含特定特点的元素的集合

not(selector)：筛选出不包含特定特点的元素的集合

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签 

查找：

children()：子标签中找

find()：后代标签中找

parent()：父标签

prevAll()：前面所有的兄弟标签

nextAll()：后面所有的兄弟标签

siblings()：前后所有的兄弟标签

文档处理的增删改查

增(内、外部两种类型)：

内部插入（前后两种类型插入方式）

内部插入（在元素之前或者之后两种类型插入方式）：

删（两种方法）：

改（replaceWith）与克隆（clone）：

城市选择案例：

效果图：

代码如下 ：

本节全部代码和内容图：

回顾上一节:

     $工具的类方法（类似java中的静态方法）

                    each()
                    parseJSON()
                    trim()|type()|isArray|isFunction

                jQuery控制属性设置以及css样式设置

                Attribute()
                    attr     removeAttr
                    addClass  removeClass
                    prop
                    html|text|val
                
                css();
                offset();
                positio();
                scrollTop();


  用jQuery实现全选框与复选框的事件：

 <script type="text/javascript">
                    // 实现全选|全不选
                    $("input:checkbox:first").click(function() {
                        // console.log(this.checked);//原生调法
                        // 留下全选框的状态
                        var flag = $(this).prop('checked');
                        $("input:checkbox:gt(0)").each(function() {
                            // console.log(this)
                            // console.log($(this));
                            // 将全选框的状态值赋值给其他所有的复选框 prop
                            // $(this) 子复选框
                            $(this).prop("checked", flag);
                        });
                    });
                    // 完善全选  
                    $("input:checkbox:gt(0)").click(function() {
                        var flag = true; //假设所有子复选框全部为true
                        // 验证  遍历
                        $("input:checkbox:gt(0)").each(function() {
                            // 在得到所有复选框时，一个一个判断，只要有一个取消  全选就取消
                            if (!$(this).prop("checked")) {
                                flag = false;
                            }
                        });
                        // flag赋值给全选框
                        $("input:checkbox:first").prop("checked", flag);
                    });
                </script>

本节内容：

在jQuery对象数组中，筛选出一部分元素：

过滤：
first()：获取匹配的第一个元素

// 获取ul中所有的li元素，然后找到第一个元素
				// $("ul>li").first().css("background","red");
				// $("ul>li:first").css("background","yellow");
				// $("ul>li:eq(0)").css("background","yellow");
				// $("ul>li:lt(1)").css("background","yellow");

last()：获得匹配的最后一个元素

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

eq(N)：获取匹配的第N或-N个元素

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

filter(selector)：筛选出与指定表达式匹配的元素集合

//--过滤出指定表达式匹配的元素集合
				// 1.找到属性title为a的元素
				// $("ul>li").filter("[title=a]").css("background","green")
				// 2.筛选除有title属性或者title属性不等于b的元素集合
				// $("ul>li").filter("[title][title=a]").css("background","orange");
				// 3.筛选出有title属性的元素集合
				// $("ul>li").filter("[title]").css("background","green");

has(selector)：筛选出包含特定特点的元素的集合

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

not(selector)：筛选出不包含特定特点的元素的集合

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

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签 

查找：

children()：子标签中找

// 1.查找ul的所有子标签
				// $("ul").children().css("color","red");
				// 2.查找ul的第一个子标签,并且指定为li子标签
				// $("ul").children("li").first().css("color","red");
				// 3.查找ul的第四个子标签,并且指定为li子标签
				// $("ul").children("li").eq(3).css("color","red");
				// 4.通过下标 返回的是js对象
				// console.log($("ul").children("li")[2])
				// $($("ul").children("li")[2]).css("background","red")

find()：后代标签中找

// 查找ul下面所有的span标签
				// $("ul").find("span").css("background","red")

parent()：父标签

// 查找b标签的父元素标签
				// $("b").parent().parent().CSS("border", "1px solid red");
				// 所有所有的父节点  直到根节点找到后结束
				// console.log($("b").parents());

prevAll()：前面所有的兄弟标签

// 查找第三个li标签前面所有的兄弟标签
				// $("ul").children("li").eq(2).prevAll("li").css("background","red");

nextAll()：后面所有的兄弟标签

// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				// $("ul").children("li").eq(2).nextAll("li").css("background","red");

siblings()：前后所有的兄弟标签

// 查找第三个li标签前面所有的兄弟标签
				// $("ul").children("li").eq(2).siblings('li').css("background","red");

文档处理的增删改查

增(内、外部两种类型)：

内部插入（前后两种类型插入方式）

// append()：将内容添加到指定的元素后面
				// 例子：
				// 插入到最后面(给ul中最后一个li中插入一个a标签)
				// $(".oBox>ul").children("li").last().append($("<a href = '#'>百度一下</a>"))
				// appendTo()：将内容添加到指定的元素前面
				// 例子：
				// 插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("<a href = '#'>百度一下</a>").appendTo($(".oBox>ul").children("li").last())

				// 插入到最前面(给ul中第3个li中插入一个按钮)
				// 例子：
				// $(".oBox>ul").children().eq(2).prepend($("<button>按钮</button>"))
				// $("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(2))

内部插入（在元素之前或者之后两种类型插入方式）：

// 在属性title为b的li前面插入一个a标签
				// $(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>")

				// 在属性title为b的li后面插入一个a标签
				// $(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>")

删（两种方法）：

// empty  remove
				//清空ul中所有li的内容
				// $(".oBox>ul").children('li').empty()
				//移除ul中所有的li（但不删除其中的文档内容）
				// $(".oBox>ul").children('li').remove()

改（replaceWith）与克隆（clone）：

//把li下面所有的span标签替换为<a>标签
				// $(".oBox>ul").find("span").replaceWith("<a href = '#'>呵呵</a>")
				
				// 克隆（clone）：   
				// 复制ul中的第一个子节点  追加到末尾
				// $(".oBox>ul").append($(".oBox>ul").children().first().clone(false))

城市选择案例：

效果图：

代码如下 ：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt; </button>
    <button id="btn-sel-none"> &lt;&lt; </button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //1.全部到右边
    $('#btn-sel-all').click(function () {
      //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
      $('#src-city>option').appendTo($('#tar-city'));
    });

    //2.全部到左边
    $('#btn-sel-none').click(function () {
      //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
      $('#tar-city>option').appendTo($('#src-city'));
    });

    //3.选中的到右边.
    $('#btn-sel').click(function () {
      //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
      $('#src-city>option:selected').appendTo($('#tar-city'));
    });

    //4.选中的到左边.
    $('#btn-back').click(function () {
      //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
      $('#tar-city>option:selected').appendTo($('#src-city'));
    });

  });
</script>

本节全部代码和内容图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 导入JQuery script -->
		<link rel="stylesheet" type="text/css" href="" />
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<!-- 引入外部 -->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 一、 在jQuery对象数组中，筛选出一部分元素 
				//1.1 过滤
				// first()：获取匹配的第一个元素
				// 例子：
				// 获取ul中所有的li元素，然后找到第一个元素
				// $("ul>li").first().css("background","red");
				// $("ul>li:first").css("background","yellow");
				// $("ul>li:eq(0)").css("background","yellow");
				// $("ul>li:lt(1)").css("background","yellow");

				// last()：获得匹配的最后一个元素
				// 例子：
				// 找到最后一个元素
				// $("ul>li").last().css("background","red");

				// eq(N)：获取匹配的第N或-N个元素
				// 例子：
				// 找到指定的某一个元素，例如第3个
				// $("ul>li").eq(2).css("background","pink")

				// filter(selector)：筛选出与指定表达式匹配的元素集合
				// 例子：
				//--过滤出指定表达式匹配的元素集合
				// 1.找到属性title为a的元素
				// $("ul>li").filter("[title=a]").css("background","green")
				// 2.筛选除有title属性或者title属性不等于b的元素集合
				// $("ul>li").filter("[title][title=a]").css("background","orange");
				// 3.筛选出有title属性的元素集合
				// $("ul>li").filter("[title]").css("background","green");

				// has(selector)：筛选出包含特定特点的元素的集合
				// 例子：
				// 筛选出有<span>标签的元素集合  has
				// $("ul>li").has("span").css("background","pink")

				// not(selector)：筛选出不包含特定特点的元素的集合
				// 例子：
				// 筛选出没有title属性的元素集合
				// $("ul>li").not("[title]").css("background","black");

				// 二、 在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签
				//1.2 查找
				// children()：子标签中找
				// 例子：
				// 1.查找ul的所有子标签
				// $("ul").children().css("color","red");
				// 2.查找ul的第一个子标签,并且指定为li子标签
				// $("ul").children("li").first().css("color","red");
				// 3.查找ul的第四个子标签,并且指定为li子标签
				// $("ul").children("li").eq(3).css("color","red");
				// 4.通过下标 返回的是js对象
				// console.log($("ul").children("li")[2])
				// $($("ul").children("li")[2]).css("background","red")

				// find()：后代标签中找
				// 例子：
				// 查找ul下面所有的span标签
				// $("ul").find("span").css("background","red")

				// parent()：父标签
				// 例子：
				// 查找b标签的父元素标签
				// $("b").parent().parent().CSS("border", "1px solid red");
				// 所有所有的父节点  直到根节点找到后结束
				// console.log($("b").parents());

				// prevAll()：前面所有的兄弟标签
				// 例子：
				// 查找第三个li标签前面所有的兄弟标签
				// $("ul").children("li").eq(2).prevAll("li").css("background","red");

				// nextAll()：后面所有的兄弟标签
				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				// $("ul").children("li").eq(2).nextAll("li").css("background","red");

				// siblings()：前后所有的兄弟标签
				// 查找第三个li标签前面所有的兄弟标签
				// $("ul").children("li").eq(2).siblings('li').css("background","red");

				// 三、文档处理的增删改查
				// 增(内、外部两种类型)：
				// 内部插入（前后两种类型插入方式）：
				// append()：将内容添加到指定的元素后面
				// 例子：
				// 插入到最后面(给ul中最后一个li中插入一个a标签)
				// $(".oBox>ul").children("li").last().append($("<a href = '#'>百度一下</a>"))
				// appendTo()：将内容添加到指定的元素前面
				// 例子：
				// 插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("<a href = '#'>百度一下</a>").appendTo($(".oBox>ul").children("li").last())

				// 插入到最前面(给ul中第3个li中插入一个按钮)
				// 例子：
				// $(".oBox>ul").children().eq(2).prepend($("<button>按钮</button>"))
				// $("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(2))

				// 内部插入（在元素之前或者之后两种类型插入方式）：
				// 在属性title为b的li前面插入一个a标签
				// $(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>")

				// 在属性title为b的li后面插入一个a标签
				// $(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>")
				// 删（两种方法）：
				// empty  remove
				//清空ul中所有li的内容
				// $(".oBox>ul").children('li').empty()
				//移除ul中所有的li（但不删除其中的文档内容）
				// $(".oBox>ul").children('li').remove()

				// 改：
				//把li下面所有的span标签替换为<a>标签
				// $(".oBox>ul").find("span").replaceWith("<a href = '#'>呵呵</a>")

				// 克隆（clone）：   
				// 复制ul中的第一个子节点  追加到末尾
				// $(".oBox>ul").append($(".oBox>ul").children().first().clone(false))
			})
		</script>
	</head>
	<body>
		<h2>jQuery03：筛选、文档处理</h2>
		<!-- 筛选和查找案例 -->
		<ul>
			<li title>1</li>
			<p>sb</p>
			<p>nb</p>
			<li title="a">2</li>
			<li title="b">3</li>
			<li>ssss</li>
			<li title="a"><span><b>4sunzi</b></span></li>
			<li title="b"><span>54sunzi</span></li>
			<li>43534</li>
			<p>sb</p>
			<ol>
				<li>6</li>
				<li>7</li>
			</ol>
			<span>8erzi</span>
		</ul>
		<hr>
		<h3>文档处理（CURD）</h3>
		<div class="oBox" style="border: 1px solid red;height: 400px;">
			<ul>
				<li>item1</li>

				<li title="b">item2</li>
				<ol>
					<li><span></span></li>
					<li><span></span></li>
					<li><span></span></li>
				</ol>
				<li>item3 <span>asdsa</span></li>
				<li>item4</li>
				<li>item5 <span>ashdkjas</span></li>
			</ul>
		</div>
	</body>
</html>

Naraseny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery离线文档.rar
07-04
该文件为jQuery离线技术文档，里面主要包含：JQ核心、选择器、属性&lsquo;筛选、文档处理、CSS、事件、效果、Ajax、工具等常用知识以及函数用法。
jQuery筛选排序插件listnav
04-07
jQuery listnav将添加一个筛选的导航栏，为你快速过滤该列表，来显示匹配的信息。
筛选-文档处理
long_2004的博客
04-21 253
筛选-文档处理1.过滤2.查找3.文档处理 1.过滤 (1).过滤：在jQuery对象数组中，过滤出一部分元素 ： // 1)、首先获取ul中所有的li子元素，即会产生一个li数组uls。然后： // var asd = $("ul&gt;li"); // 2)、first()：获取数组uls中的第一个元素，即第一个li标签. // asd.first().css({"background":"yellow"}); // 3)、last()：获取数组uls中的最后
jQuery筛选中方法
weixin_52629158的博客
05-14 305
筛选中方法他们的功能 与 过滤选择器有的类似，用法不一样，筛选中主要是方法。
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
weixin_33782386的博客
10-27 274
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解一、Jquery遍历筛选数组1、jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){...
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解以及数组中查询某值是否存在
muzidigbig的博客
11-23 1478
1.jquery grep()筛选遍历数组(可以得到反转的数组) // 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) =&amp;gt; { return curre...
jQuery中的筛选&文档处理——案例
m0_62019369的博客
03-31 1768
过滤 顾名思义，过滤是什么？在已有的一部分标签中再找出符合要求的标签。我们先来看一下我们准备好的网页素材。 &lt;body&gt; &lt;!-- 筛选和查找案例 --&gt; &lt;ul&gt; &lt;li&gt;1&lt;/li&gt; &lt;li title="a"&gt;2&lt;/li&gt; &lt;li title="b"&gt;3&lt;/li&gt; &lt;li title="a"&gt;&lt;span&gt;&lt;b&gt;4&lt;/b&gt;&l..
Jquery 1.9.1源码分析系列（十二）之筛选操作
11-24
分两种情况处理: 　第一种，如果传入的参数是非字符串，则先通过jQuery选择器将selector查找出来，然后过滤出包含于当前jQuery对象所匹配的元素的节点。 if ( typeof selector !== &quot;string&quot; ) { self = this; ...
jquery的1.11.3版api帮助文档
04-19
1.11.3版的jquery的开发api帮助文档。 如： 选择器： 基本选择器（ #id element .class * selector1,selector2,selectorN ） 层级选择器{ ancestor descendant parent &gt; child prev + next prev ~ siblings} 基本...
jquery常见的选择器、筛选器、事件.docx
03-07
文档总结了几乎所有的jQuery的常用操作； 常见的选择器；常见的筛选器；常用的事件； 此文档对于当接触jQuery的开发者或者自学者都是很有裨益的； 当然作为复习文档也是很ok的
jquery遍历数组与筛选数组的方法
10-26
在jquery是遍历筛选数组有多种方法与函数了，包括有:grep、each、inArray、map同时也要以遍历json对象哦，下面给各位同学介绍一下具体的操作方法
jquery数组过滤筛选方法grep()简介
10-25
主要介绍了jquery数组过滤筛选方法grep()简介,需要的朋友可以参考下
jQuery 筛选查找
vvvac1314的专栏
10-23 1071
children([expr]) 概述 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。 参数 expr (可选)String 用以过滤子元素的表达式 示例 描述: 查找DIV中的每个子元
jQuery过滤器：筛选jquery对象数组中的DOM对象
m0_53881899的博客
09-02 579
jQuery过滤器：筛选jquery对象数组中的DOM对象
jQuery之元素筛选
ajwqb06628的专栏
12-09 173
jQuery之元素筛选 1、eq()　　 筛选指定索引号的元素2、first()　　筛选出第一个匹配的元素3、last()　　 筛选出最后一个匹配的元素4、hasClass()　　检查匹配的元素是否含有指定的类5、filter()　　筛选出与指定表达式匹配的元素集...
jQuery核心对象——筛选
mantou_riji的博客
05-01 477
文章目录过滤查找串联练习：爱好选择器 过滤：过滤的结果是原集合的子集 查找：查找，查找的是子孙、后代、兄弟。 过滤 eq(index|-index) ：获取第N个元素,(获取的元素仍然是jQuery对象) first()：获取第一个元素 last()：获取最后个元素 hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。 filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 is(expr
Jquery操作数组元素(二)筛选数组元素
太阳雨
12-01 2355
问题描述：     假设一个数组包含了一些名字，只需看到长度大于4 的或者以字母A到D任何字符打头的名字。 解决方法： 删选数组元素，只显示所需的数据 $(function () { var members1 = ["John", "Steve", "ben", "Damon", "Lan"];
jquery 遍历筛选数组有多种方法与函数
Howst的专栏
06-19 1103
grep grep()方法用于数组元素过滤筛选 grep(array,callback,invert) array：待过滤数组; callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？）
jQuery基础——使用过滤器—1过滤
weixin_57575133的博客
11-04 2740
jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单、实用的jQuery对象方法，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为。
jquery 按照元素类筛选
最新发布
06-01
你可以使用 jQuery 中的 `.class` 选择器来按照元素类进行筛选。例如，如果你想选择所有类名为 `my-class` 的元素，可以使用以下代码： ```javascript ...你可以查看 jQuery 的文档以了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值