jQuery03--筛选&文档处理

于 2022-03-18 19:09:11 发布
阅读量62 收藏
点赞数 2
分类专栏： 软件开发jQuery入门 jQuery 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63531917/article/details/123581513
版权

一.筛选（过滤&查找）

过滤方法

first()

获取匹配的第一个元素

last()

获得匹配的最后一个元素

eq(N)

获取匹配的第N或-N个元素

filter(selector)

筛选出与指定表达式匹配的元素集合

has(selector)

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

not(selector)

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

查找方法

children()

子标签中找

find()

后代标签中找

parent()

父标签

prevAll()

前面所有的兄弟标签

nextAll()

后面所有的兄弟标签

siblings()

前后所有的兄弟标签

HTML源代码

	<body>
		<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>
		<button id="aaa" type="button">返回顶部</button>
	</body>

过滤使用方法

  • first()

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

  • last()

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

  • eq(N)

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

  • filter(selector)

    找到属性title为a的元素
$("ul>li").filter("[title=a]").css("background","yellow");


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

  • has(selector)

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

  • not(selector)

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

 

       查找使用方法

  • children()

    查找ul的所有子标签,并且指定为li子标签
$("ul").children("li").css("background","yellow");

  • find()

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

  • parent()

    查找b标签的父元素标签
$("b").parent().css("background","yellow");

  • prevAll()

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

  • nextAll()

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

  • siblings()

    查找第三个li标签所有的兄弟标签
$("ul>li:eq(2)").siblings().css("background","yellow");

二.文档处理（增&删&改）

增（内部插入）

append()

将内容添加到指定的元素后面

appendTo()

和append()颠倒

prepend()

将内容添加到指定元素前面

prependTo()

和prepend()颠倒

增（外部插入）

after()

在匹配元素之后插入内容

before()

在匹配元素之前插入内容

删

empty()

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

remove()

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

改

replaceWith()

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

HTML源代码

<body>
		<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>

jQuery增加方法

  • append()&appendTo

    插入到最后面(给ul中最后一个li中插入一个a标签)  append():将其内容加到指定的元素后面
$("ul>li").last().append("<a href='#'>Hellow,小宝</a>");
appendTo():和append颠倒
$("<a href='#'>Hellow,小宝</a>").appendTo($("ul>li").last());

  • prepend()&prependTo

    插入到最前面(给ul中第一个li中插入一个a标签)  prepend():将内容添加到指定元素前面
$("ul>li").first().prepend("<a href='#'>Hellow,小宝</a>");

prependTo():prepend颠倒
$("<a href='#'>Hellow,小宝</a>").prependTo($("ul>li").first());

  • after()

    在属性title为b的li后面插入一个a标签 after():在匹配元素之后插入内容
$("ul>li").filter("[title=b]").after("<a href='#'>Hellow,小宝</a>");

  • before()

    在属性title为b的li前面插入一个a标签 before():在匹配元素之前插入内容
$("ul>li").filter("[title=b]").before("<a href='#'>Hellow,小宝</a>");

jQuery删除方法

  • empty()

    清空ul中所有li的内容
$("ul li").empty();

  • remove()

    移除ul中所有的li  remove():删除匹配元素集合中所有的字节点(包含匹配的元素)
$("ul li").remove();

jQuery修改方法

  • replaceWith()

    把li下面所有的span标签替换为<a>标签
$("li span").replaceWith("<a href='#'>Hellow,小宝</a>")

xxie编程
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery_学习笔记，家中常备
Chill Lyn
11-28 196
最最最基本的使用 获得/更改双标记标签中的内容 $("span").text(); $("span").text("abc"); 获得/更改单标记标签中内容 $("input").val(); $("input").val("abc"); 数组的each遍历 var arr=$(...); arr.each(function(){ //each one does something... }...
jquery-1.8.3chm中文手册下载
11-28
包含jquery1.7.x与jquery1.8.x版本的chm中文手册。 目录： 核心 选择器 属性 筛选 文档处理 CSS 事件 效果 Ajax 工具
jQuery筛选以及文档处理
m0_67768699的博客
03-11 883
一、过滤（筛选） 1.first()： 获取匹配的第一个元素 2.last()： 获得匹配的最后一个元素 3.eq(N)： 获取匹配的第N或-N个元素 4.filter(selector)： 筛选出与指定表达式匹配的元素集合 5.has(selector)： 筛选出包含特定特点的元素的集合 6.not(select...
jQuery选择器
KaisonYi的博客
05-01 323
JQuery jquery.com 什么是jQuery jQuery是一个快速，小巧，功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。 通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。 为什么要使用jQuery DOM API 难用 存在兼容性问题 功能太少，不...
HTML+JS+CSS自定义树形菜单
weixin_39214481的博客
06-19 780
小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。下面开始...应用到技术：JavaScript/Css/HTMLIDA：VS 2010 首先构造一下思路，需要哪些文件1、js文件2、Css文件3、Html文件4、图标5、Juuery文件6、后台查询数据文件 创建项目 在...
parent()父级 , prev()同辈 , children()子级 关系查找演示
Byte_Dance的博客
02-16 3675
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;关系查找演示&lt;/title&gt; &lt;!--百度在线压缩地址--&gt; &lt;script src=&q
jquery.filterizr支持多重筛选条件插件
06-10
简单好用的基于jQuery的一款搜索筛选插件 附件提供了6个筛选页面 每个页面提供了至少一种筛选案例 希望能够帮助到你 使用方法： 1、将CSS样式引入到网页中 2、将index.html中的代码部分拷贝到你的网页中
jQuery离线文档.rar
07-04
该文件为jQuery离线技术文档，里面主要包含：JQ核心、选择器、属性‘筛选、文档处理、CSS、事件、效果、Ajax、工具等常用知识以及函数用法。
jquery listnav插件--按字母顺序过滤列表
06-10
可以根据字数顺序或者阿拉伯数字筛选列表的jquery特效插件 使用方法简单： 1、在网页顶部加载css样式 2、将html文档复制到你需要的地方 3、在网页底部加载对应的js样式
prime-sifting:筛选素数
05-09
特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，包括但不限于使用，复制，修改，合并的权利，发布，分发，再许可和/或出售本软件的副本，并允许具备软件的人员这样做，但须...
问题寻找之表格内标签定位行数
农夫三拳
08-29 426
var index = $(this).parent().parent().prevAll().length + 1;核心
parent() next() prevAll() prev() find
weixin_30364325的博客
03-20 73
jQuery 参考手册 - 遍历 http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 转载于:https://www.cnblogs.com/yqskj/archive/2013/03/20/2971409.html
jquery 筛选文本内容获取元素
weixin_33704234的博客
03-14 442
为什么80%的码农都做不了架构师？>>> ...
jQuery选择器之内容筛选选择器
ljp1919的专栏
03-25 2624
背景：基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。 选择器 描述 $(“:contains(text)”) 选择所有包含指定文本的元素 $(“:parent”) 选择所有含有子元素或者文本的元素 $(“:empty”) 选择所有没有子元素的元素（包含文本节点
java children,原生JS之lastChild和lastElementChild、childNodes和children区别
weixin_39876856的博客
03-19 320
【前言】最近讲课讲到DOM操作和遍历，之前讲课只讲了普通获取节点方法，今天又讲了个升级版。这里备注下，以后再讲课强调下【主体】(1)原生JS遍历时操作如下childNodes获取所有子节点(包括包括文本节点、注释节点即回车、换行、空格、文本等等)firstChild获取第一个子节点(可以为注释节点)lastChild获取最后一个子节点(与firstChild类似)parentNode返回给定节点的...
firstChild,lastChild 获取第一个/最后一个元素节点
林飞的梦呓
12-10 5565
firstChild,lastChild<ul><li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul><script> var ul = document.getElementsByTagName('ul')[0]; ul.firstChild.style.background = '#ff0000';
js DOM 慎用firstChild和lastChild
王先森的博客
11-13 4564
在确定某个元素下的firstChild和lastChild元素类型时，不要根据我们的想法认为他是什么元素类型。 例： 1.<div id="div1"> <div id="div2"></div> </div> <script> var oDiv=document.getElementById("div1"); var oDiv2=document.getElementB
Cypress UI 自动化（9）- 巧用辅助定位函数.children()\.first()等
兔纸先森的后花园
08-05 1145
.children(selector) 定义：children() 方法返回被选元素的所有直接子元素。（嵌套包含） 参数 描述 selector 字符串值，包含匹配元素的选择器表达式。 示例： cy.$("div").children(".selected") .first() 定义：first() 将匹配元素集合缩减为集合中的第一个元素。 示例： cy.$("div").first() .last() 定义：first() 将匹配元素集合缩减为集合..
jquery 按照元素类筛选
最新发布
06-01
你可以使用 jQuery 中的 `.class` 选择器来按照元素类进行筛选。例如，如果你想选择所有类名为 `my-class` 的元素，可以使用以下代码： ```javascript $(".my-class") ``` 你还可以将类名与其他选择器组合使用，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值