jQuery之筛选文档处理
2024-06-22 02:51:00
目录
回顾上一节:
??? $工具的类方法（类似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|isFunctionjQuery控制属性设置以及css样式设置
Attribute()
attr removeAttr
addClass removeClass
prop
html|text|valcss();
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"> >> </button><button id="btn-sel-none"> << </button><button id="btn-sel"> ></button><button id="btn-back"> < </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>
jQuery之筛选文档处理相关推荐
- jQuery的筛选和文档处理
jQuery的筛选和文档处理 今天带大家来学习一下jQuery的筛选和文档处理,还有一个侧边菜单的简易案例,都在下面了,拿走请留个赞吧! 目录 jQuery的筛选和文档处理 一,过滤 二,查找 三,文 ...
- jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 关于Jquery导出word文档
通常情况下,我们在开发过程中会遇到,导出网页上的内容保存至word文档中,类似这样的需求.前人早已为我们中下树,我们只需要乘凉即可.百度 Jquery 导出文档插件!我们会看到好多 资源,随便找一个引 ...
- jQuery (筛选文档处理)
大家好,我是小陽,我又来了,今天我给大家带来的是jQuery的筛选and文档处理,希望能给大家带来一些知识上的帮助! 目录 一.思维导图 二.jQuery的筛选 三.jQuery的文档处理 一.思维导 ...
- jQuery筛选-文档处理
1.过滤案例 过滤:在jQuery对象数组中,过滤出一部分元素 : // 1).首先获取ul中所有的li子元素,即会产生一个li数组uls.然后://空格选择器 在后台里面查找//>:在所有子标 ...
- jQuery学习之八---文档处理
Hi~ o(￣▽￣)ブ,大家好,好久不见啊,萍子近两个星期专心做了一个前后台合作的电商网站的项目,好累啊,但是又有点想念CSDN上的你们了,所以萍子马上马立刻立的就过来了,嘿嘿~有没有一点小感动啊. ...
- Jquery对象的文档处理，CSS和事件
文档处理 append:向每个匹配的元素内部追加内容.这个操作与对指定的元素执行appendchild方法,将它们添加到文档中的情况类似 <p>i would like to say< ...
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度.因为浏览器的兼容问题,如果使用javascript获取这些数值是 ...
最新文章
- android 多线程下载，断点续传，线程池
- python3读取excel数据-【Python3学习系列】——Python读取Excel
- SAP UI5 Web Component的React表格控件用法
- eclipse工程导入Android Studio
- python web py官网_python web.py
- C语言辅导试题答案,C语言试题含答案).doc
- STAR直接就可以输出readsCount，为什么还需要featurecounts？
- pta c语言 凯撒密码
- centos7.9使用rpm安装Jenkins_亲测成功---持续集成部署Jenkins工作笔记0022
- go详解strings包
- php赋值一个数组,PHP入门教程之数组的定义和赋值
- 计算机网络第8版课后习题答案整理
- 远程计算机ip记录怎么删除吗,远程桌面连接清除登陆过的IP地址
- win7图片查看器无法显示图片，内存不足解决方法
- Office2003打开或关闭word Excel文档出现发送错误报告
- Jenkins配置slaver节点
- 【图像分类】实战——使用ResNet实现猫狗分类（pytorch）
- AES128位数据加密算法【直接拷贝可用】
- Linux下GPT分区,gdisk修复损坏的分区表
- Jetpack Compose for Desktop: 里程碑1发布