jquery筛选,jquery筛选子元素

如何在jQuery查找元素父节点？

jquery获取父元素比如;parent()，parents，closest()，这些都可以查找父元素或节点，具体步骤如下：

创新互联公司专注于孙吴网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供孙吴营销型网站建设，孙吴网站制作、孙吴网页设计、孙吴网站官网定制、微信小程序开发服务，打造孙吴网络公司原创品牌,更为您提供孙吴网站排名全网营销落地服务。

一.parent([expr])

用一个包含着所有匹配元素的唯一父元素的元素集合。

你用可选的表达式来筛选。

如下：

1.$('#item1').parent().parent；

二.parent

得到含有子元素或者文本的元素

如下：

1.$('li:parent');

2.parents([expr])

得到一个包含着所有匹配元素的祖先元素的元素集合。可以通过一个可选的表达式进行筛选。

如下：

1.$('#items').parents('.parent1');

三.closest([expr])

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

jquery的筛选有哪些

jQuery提供了强大的选择器让我们获取对象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象

1.选择对象

1).基本

·#id 根据给定的ID匹配一个元素。例如：$("#id")

·element 根据给定的元素名匹配所有元素。例如：$("div")

·.class 根据给定的类匹配元素。例如：$(".style1");

·* 匹配所有元素。例如：$("*")

·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")

2).表单

·:button 匹配所有按钮。例如：$(":button")

·:checkbox 匹配所有复选框。例如：$(":checkbox")

·:file 匹配所有文件域。例如：$(":File")

·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden")

·:image 匹配所有图像域。例如：$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")

·:password 匹配所有密码框。例如：$(":password")

·:radio 匹配所有单选按钮。例如：$(":radio")

·:reset 匹配所有重置按钮。例如：$(":reset")

·:submit 匹配所有提交按钮。例如：$(":submit")

·:text 匹配所有的单行文本框。例如：$(":text")

·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE");

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'")

·[attribute!=value] 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man');

·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']")

·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']");

·[attribute] 匹配包含给定属性的元素。例如：$("div[id]")

·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']")

·[selector1][selector2][selectorN] 同时满足多个条件。例如：$("input[id][name$='man']")

·:hidden 匹配所有的不可见元素。例如：$("tr:hidden")

·:visible 匹配所有的可见元素。例如：$("tr:visible")

·:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked")

·:disabled 匹配所有不可用元素。例如：$("input:disabled")

·:enabled 匹配所有可用元素。例如：$("input:enabled")

·:selected 匹配所有选中的option元素。例如：$("select option:selected")

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如：$("div:contains('John')")

·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")

·:has(selector) 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)");

·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如：$("form input")

·parent child 在给定的父元素下匹配所有的子元素。例如：$("form input")

·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如：$("label + input")

·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")

·:first-child 匹配第一个子元素。例如：$("ul li:first-child")

·:last-child 匹配最后一个子元素。例如：$("ul li:last-child")

·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)")

·:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$("ul li:only-child")

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如：$("div:animated");

·:eq(index) 匹配一个给定索引值的元素。例如：$("tr:eq(1)")

·:even 匹配所有索引值为偶数的元素，从 0 开始计数。例如：$("tr:even")

·:first 匹配找到的第一个元素。例如：$("tr:first")

·:gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)")

·:last 匹配找到的最后一个元素。例如：$("tr:last")

·:lt(index) 匹配所有小于给定索引值的元素。例如：$("tr:lt(2)")

·:not(selector) 去除所有与给定选择器匹配的元素。例如：$("input:not(:checked)")

·:odd 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")

jquery如何实现一个表格的筛选,也就是按条件查找筛选

使用jquery的each()方法遍历单元格，如果满足条件则进行相应的操作

$(selector).each(function(index,element))

实例演示：在表格中按姓名查找记录，找到则突出显示，否则给出提示

创建Html元素

div class="box"

span实例演示：在表格中按姓名查找记录/spanbr

div class="content"

姓名:nbsp;input type="text" name="name"nbsp;input type="button" value="查找"

table

trtd张三/tdtd175/tdtd140/td/tr

trtd李四/tdtd170/tdtd120/td/tr

trtd王五/tdtd185/tdtd160/td/tr

/table

/div

/div

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

.selected{font-weight:bold !important; background: #ff99cc !important;color:#fff;}

编写jquery代码

$(function(){ 

$(":button").click(function() {

$("table tr").removeClass('selected');   // 还原样式

name = $("input[name='name']").val();    // 要查找的名字

flag = true;                             // 表示未查到目标

$("table tr").find("td:first").each(function() {

if($(this).html()==name){            // 如果找到了

$(this).parent("tr").addClass('selected');    // 为整行设置样式

flag = false;                    // 将未找到标记设为false

return false;                    // 提前终止循环

}

});

if(flag)                                 // 如果没找到就给出提示

alert("查无此人");  

});

});

观察效果

如果表中有相应记录

如果表中并无相应记录

jquery多种条件筛选

script src="jquery-1.10.2.js"/script

script

$(function(){

$("#tj1 span,#tj2 span,#gd1 span,#gd2 span,#gd3 span").click(function(){

$(this).clone(true).appendTo("#yxtj")

});

})

/script

style

span{

margin-left:10px;

}

#gd1 span,#gd2 span,#gd3 span{

display:none;

}

/style

body

div style="background:#aaa; color:#fff;width:60%"已选条件：

div id="yxtj"/div

/div

div id="tj1"

条件1：span class="tj1"条件11/spanspan class="tj1"条件12/spanspan class="tj1"条件13/span

/div

div id="tj2"

条件2：span class="tj2"条件21/spanspan class="tj2"条件22/spanspan class="tj2"条件13/span

/div

div id="gd"

更多：span class="gd" id="gdtj1"更多1/spanspan class="gd" id="gdtj2"更多2/spanspan class="gd" id="gdtj3"更多3/span

/div

div

div id="gd1"

span id="gd11"更多11/spanspan id="gd12"更多12/spanspan id="gd13"更多13/span

/div

div id="gd2"

span id="gd21"更多21/spanspan id="gd22"更多22/spanspan id="gd23"更多23/span

/div

div id="gd3"

span id="gd31"更多11/spanspan id="gd32"更多32/spanspan id="gd33"更多33/span

/div

/div

/body

时间仓促，仅供参考，还有许多需要完善的地方

Jquery实战

Jquery实战

基本的CSS选择器

熟悉web开发的人员一定对css的选择功能相当的了解，通过css选择功能，我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制，使jQuery的元素选择能力易常强大。

a——选择所有元素

#specialID——选择匹配id为specialID的元素

.specialClass——选择匹配拥有css类sepcialClass的元素

a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素

p a.specialClass——匹配拥有css类specialClass、在

元素内的元素

除了支持传统的css选择器，Jquery还支持CSS3选择功能。

子节点选择器

$("p a") 选择元素

的直接子节点的元素，非直接子节点的元素将不会被选择到

特性选择器

特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素

如我们需要做如下的'选择：匹配所有指向本网站之外地址的链接，我们可以这样选择

$("a[href^=http://") 该选择器选择具有href属性，且href属性值以http://开始的链接元素

特性选择的语法是：

选择具有某特性(属性)的元素

form[method]

选择具有某特性，且属性值为指定值的元素

input[type=text]

选择匹配特性以特定字符开头的元素

div[title^=my] ——选择匹配title特性值已my开头的所有div元素

选择匹配特性以特定字符结束的元素

a[href$=.pdf] ——选择引用了pdf文件的所有链接元素

其他

a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符

通过过滤符选择器可以在已选择的元素中过滤出需要的元素，上面的特性选择器也属于过滤符，另外还有“:”字符

如：

li:has(a)—— 选择匹配包含元素的所有

元素

1. 基础过滤符：

:first：匹配多个对象中的第一个对象

:last：匹配多个对象中的最后一个对象

:not(selector)：匹配去除了not后面选择符中内容的项，not中的selector只能是过滤选择器，不能是查找选择器

:even：匹配所有对象中的第偶数个

:odd：匹配所有对象中的第奇数个

:eq(index)：匹配某一下表的单独某元素

:gt(index)：匹配大于某一下标的所有元素

:lt(index)：匹配小于某一下标的所有元素

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

:animated：匹配所有有动画效果的元素

2. 内容过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

:empty：匹配所有没有子元素的对象

:has(selector)：匹配所有至少含有一个子选择符的对象

:parent：匹配元素，这些元素包含子元素（包括文本元素）

3. 可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型

:visible：匹配所有可见的对象

4. 子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征 nth-child过滤器，从1开始计数，这主要是与css标准兼容。

:first-child：匹配第一个子元素

:last-child：匹配最后一个子元素

这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

5. 表单过滤符

:input ：匹配表单内input元素

:text ：匹配表单内input type为text的元素

:password ：匹配表单内input type为password的元素

:radio ：匹配表单内input type为radio的元素

:checkbox ：匹配表单内input type为checkbox的元素

:submit ：匹配表单内input type为submit的元素

:image ：匹配表单内image的元素

:reset ：匹配表单内input type为reset的元素

:button ：匹配表单内input type为button的元素

:file ：匹配表单内input type为file的元素.

:hidden ：匹配表单内input type为hidden的元素或者hidden区域

:enabled ：匹配所有启用元素

:disabled ：匹配所有非启用元素

:checked ：匹配所有选中元素

:selected ：匹配所有下拉列表选中元素

查找选择器和筛选选择器的概念区别

为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器，通过对元素应用更高的选择标准（如过滤特性或或其他相关值），缩小正在匹配的元素的集合；查找选择器，比如后代选择器（空格）、子节点选择器（）以及兄弟节点选择器（+）等，则查找与已选择元素具有某种关系的其他元素，而不是通过把标准应用于已匹配元素来限制匹配范围。 ;

如何实现jQuery多条件筛选

$(document).ready(function() { $("#select1 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); } else { var copyThisA = $(this).clone(); if ($("#selectA").length 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } } }); $("#select2 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectB").remove(); } else { var copyThisB = $(this).clone(); if ($("#selectB").length 0) { $("#selectB a").html($(this).text()); } else { $(".select-result dl").append(copyThisB.attr("id", "selectB")); } } }); $("#selectA").live("click", function() { $(this).remove(); $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); }); $("#selectB").live("click", function() { $(this).remove(); $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); }); $(".select dd").live("click", function() { if ($(".select-result dd").length 1) { $(".select-no").hide(); } else { $(".select-no").show(); } });});