jQuery-筛选

过滤

eq(index -index)  获取当前链式操作中第N个jQuery对象,返回jQuery对象

注:index为正数为正序获取,index为负数则反之,0为第一个元素,-1为最后一个元素

first()  获取元素集合中第一个元素

last()  获取元素集合中最后一个元素

filter(str obj elem fn(index, elem))  筛选出与指定表达式匹配的元素集合(逗号分隔多个表达式)

has(str elem)  匹配包含特定后代的元素

not(str elem fn(index, elem))   从匹配元素的集合中删除与指定表达式匹配的元素

is(str elem obj fn(index, elem))  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合

slice(start, end)  截取元素集合中的元素

  1、1代表从第2个位置截取所有以下元素

  2、1, 2代表截取第二个元素,1,3代表截取第2-3个元素

  3、-1代表截取最后一个元素,-2代表截取倒数第1-2个元素

  4、1, -1代表从第二个元素开始截取到倒数第一个元素

map(fn(index, elem))  将一组元素转换成其他数组

each(fn(index, elem))  以每一个匹配的元素作为上下文来执行一个函数

区别:map()用于获取元素集合的属性保存在新数组,each()等同于for循环,map()对内存消耗比较大少用

查找

find(str elem obj)  搜索所有与指定表达式匹配的元素

children(str)  查找匹配元素下的子元素

closest(str elem obj)  从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素

  从当前元素开始查找

  沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止

  返回包含零个或一个元素的 jQuery 对象

 1 // 使用clostest来完成事件委托
 2 <ul>
 3     <li>click me!</li>
 4     <li>you can also <span>click me!</span></li>
 5 </ul>
 6
 7 $(function () {
 8     $(document).on("click", function (e) {
 9         $(e.target).closest("li").toggleClass("highLight");
10     });
11 });

parent(str)  查找匹配元素的父元素

parents(str)  取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)

  从父元素开始查找

  沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选

  返回包含零个、一个或多个元素的 jQuery 对象

parentsUntil(str|elem, filter)  查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止

  1、不带参数等同于parents()

  2、第一个值为不包括的元素,第二值为选中的元素

  3、只有一个参数返回除参数下的所有元素(不包括自身)

offsetParent()

siblings(str)

prev()

prevAll()

prevUntil()

next()

nextAll()

nextUntil()

串联

add()

addBack()

contents()

end()

时间: 2024-10-25 21:13:07

jQuery-筛选的相关文章

jQuery筛选器及对DOM修改(学习笔记)

1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; char

bobo jquery筛选数组之grep、each、inArray、map的用法及遍历json对象 [转]

纯粹记录下几种用法: jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

jquery筛选元素函数

1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css("color","red"); });匹配第一个li元素: $("button").click(function(){ $("li").first().css("color","red"); });匹配最后一个元素: $(&qu

jquery 筛选元素(1)

.eq() 减少匹配元素的集合为指定的索引的那一个元素. .eq(index) index一个整数,指示元素的位置,以0为基数. $("li").eq(2).css('background-color', 'red') //选择第三个元素将其 将其背景变成红色. .eq(-index) -index 一个整数,指示元素的位置,从集合中的最后一个元素开始倒数. $("li").eq(-2).css('background-color', 'red') //选择倒数第二

jQuery筛选器

一.jQuery常用筛选器有以下几种: 1.下一个标签 $(document).next() 2.上一个标签 $(document).prev() 3.父亲标签 $(document).parent() 4.孩子标签 $(document).children() 5.兄弟标签 $(document).siblings() 6.子孙中查找 $(document).find('.i1') /*在子孙中查找class属性为i1的标签*/ 二.具体应用 实现点击菜单栏出现当前菜单下的内容,并隐藏其它菜单

js day44 Jquery(筛选,事件,效果,Ajax,javascript跨域)

1     筛选[掌握]     筛选与之前"选择器"雷同,筛选提供函数 1.1   过滤 eq(index|-index),获取第N个元素 ?index:一个整数,指示元素基于0的位置,这个元素的位置是从0算起. ?-index:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) first(),获取第一个元素 last(),获取最后个元素 hasClass(class),检查当前的元素是否含有某个特定的类,如果有,则返回true. filter(exp

jquery筛选条件eq,find,paren,prev,end

eq(index|-index) 概述 获取第N个元素 参数 index 一个整数,指示元素基于0的位置,这个元素的位置是从0算起. 获取匹配的第二个元素 -index 一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) HTML 代码: <p> This is just a test.</p> <p> So is this</p> jQuery 代码: $("p").eq(1) 结果: [ <p> So i

JQuery筛选器的使用 (转)

jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象. 1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1"); ·* 匹配所有元素.例如:$("*") ·selecto

使用jQuery筛选排除元素以修改指定标签的属性

简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td都会执行"你的逻辑". =======================转载======================= 1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有