一、在jQuery对象数组中,筛选出一部分元素
$(function() {
//1.1 过滤
//--过滤出指定表达式匹配的元素
// 获取ul中所有的li元素,然后找到第一个元素
//$("ul>li").first().css("background","pink"); // 找到最后一个元素
//$("ul>li").last().css("background","pink"); // 找到指定的某一个元素,例如第3个
//$("ul>li:eq(2)").css("background","pink");
//$("ul>li").eq(-1).css("background","pink");//倒数 //--过滤出指定表达式匹配的元素集合
// 找到属性title为a的元素
//$("ul>li").filter("[title=a]").css("background","pink"); //找到属性title不为a的元素
//$("ul>li").filter("[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"); //1.2 查找
// 查找ul的所有子标签,并且指定为li子标签
//$("ul>li").css("background","pink");
//$("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(0).css("background","pink"); // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
//$("ul>li").eq(2).nextAll("li").css("background","pink"); // 查找第三个li标签所有的兄弟标签
//$("ul>li").eq(2).siblings().css("background","pink"); /* 二、 文档处理 */
//2.1 增
//--内部插入(前面和后面)
// 插入到最后面(给ul中最后一个li中插入一个a标签)
//$("ul>li").last().append("<a href='#'>嗨害嗨</a>");
//$("<a href='#'>嗨害嗨</a>").appendTo($("ul>li").last()); // 插入到最前面(给ul中第一个li中插入一个a标签)
//$("ul>li").first().prepend("<a href='#'>嗨害嗨</a>"); //--外部插入(之前和之后)
// 在属性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(); //补充知识点:位置
//1.富容器和大容器的区别
// var a = $("#aa").offset();//大容器
// console.info(a.top,a.left);
// var b = $("#aa").position();//父容器
// console.info(b.top,b.left);// var a = $("#bb").offset(); //大容器
// console.info(a.top, a.left);
// var b = $("#bb").position(); //父容器
// console.info(b.top, b.left);
//2.获取顶部距离=返回顶部
$("#btn").click(function(){
//拿值
/* var a = $("body,html").scrollTop();
alert (a);*/
//赋值
$("body,html").scrollTop(0);
})})
知识归纳:
过滤:
1.1.first():获取匹配的第一个元素
1.2.last():获取匹配的最后一个元素
1.3.eq(N):获取匹配的第N个或者-N个元素
1.4.filter():筛选出预指定表达式匹配的元素集合
1.5.has():筛选出包含特定特点的元素的集合
1.6.not():筛选出不包含特定特点的元素的集合文档处理:
①增:
外部插入
1.2.1after():在匹配元素之后插入内容
1.2.2before():在匹配元素之前插入内容
内部插入
1.1.1append():将内容添加到指定的元素后面(appendTo())
1.1.2prepend():将内容添加到指定元素前面(prependTo())
②删:
empty():清空内容
remove():移除
③:改
replaceWith():将所有匹配的元素换成指定的内容
JQueryMobile实现表格的条件筛选 jquery 筛选
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
谷歌地球引擎:导入、筛选、显示栅格遥感影像数据
本文介绍谷歌地球引擎GEE自带的各类遥感、高程等栅格数据导入,并进行可视化显示的方法。本文是谷歌地球引擎(Google Earth Engine,GEE)系列教学文章的第二篇~
GEE 谷歌地球引擎 Earth Engine 遥感影像 GIS数据 -
jQuery实现多条件筛选
我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用
javascript 前端 json ViewUI css -
jQuery多项条件筛选代码 筛选参数特效
html结构: jquery代码: $(this).addClass("selected").siblings().removeClass("s...
javascript jquery jquery代码 -
通过平移使两条曲线吻合 java
1.1 六瓣花平移变换 平移变换是指图形从一个位置到另一个位置所作的直线移动。如果要把一个位于P(x,y)的点移到新位置P’(x’,y’),如图1,则只要在原坐标上加上平移距离Tx和Ty即可。 即 x’=x+Tx &nbs
通过平移使两条曲线吻合 java Math html HTML