jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)
一、 jquery内容过滤选择器
根据内容进行选择（根据节点的内容）
实现了对基本内容的过滤
用途：
1）可以实现内容的过滤
2）判断选择指定元素内的元素
3）判断特殊需求的元素（空、拥有等）
改变所有可见的div元素的背景色为 #0000FF
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
选取所有的文本隐藏域, 并打印它们的值
$(“div:contains(‘您好’)”)
选出包含有文本“您好”的"two" >id=two
id=two,span的内容1111111111
元素 $(“div:empty”) 选取不包含子元素（包括文本节点）的
元素
$(“div:has(p)”) 或者$(“div:has(.classss)”)
选取包含有
元素的
元素
$(“div:parent”) 选取拥有子元素（包括文本元素）的
$(“div:not(:contains(‘aa’))”)选择不包含内容有“aa“的div
二、jquery可见度过滤选择器
可见度过滤选择器是
根据元素的可见和不可见状态来选择相应的元素
1、:hidden
用法: $(”tr:hidden”) 返回值 集合元素
用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible
用法: $(”tr:visible”) 返回值 集合元素
用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
三、jquery属性过滤选择器
jQuery属性过滤选择器
$(“div[id]”)：选取拥有属性id的div元素
$(“div[title= str]”) 选取拥有title等于str值的div元素
$(“div[title!= str]”) 选取title不等于str的div元素
组合使用$(“div[id][title!= str]”)
$(“div[title^= str]”) 选取拥有属性title,并且title属性值以str开头的div元素
$(“div[title$= str]”) 选取拥有属性title,并且title属性值以str结尾的div元素
$(“div[title*= str]”) 选取拥有属性title,并且title属性值含有str的div元素
$(“div[title*= str][class]”) 选取拥有属性title,并且title属性值含有str，并且有class属性的div元素
下面是内容过滤选择器的例子
- "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
内容选择器学习 - //使用jquery加载事件
- $(document).ready(function (){
- //
- $("#btn0").click(function (){
- //当点击按钮后，设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //
- //增加id为btn1按钮的事件
- $("#btn1").click(function (){
- //选取内容包含two的div
- $("div:contains('two')").css("background","green");
- });
- //
- $("#btn2").click(function (){
- //选取内容包含two的div
- $("div:empty").css("background","green");
- });
- //
- $("#btn3").click(function (){
- //选取内容包含two的div
- $("div:has(span)").css("background","green");
- });
- //
- $("#btn4").click(function (){
- //选取内容包含two的div
- $("div:parent").css("background","green");
- });
- //
- $("#btn5").click(function (){
- //选取内容包含two的div
- $("div:not(:contains('two'))").css("background","green");
- });
- });
-
id=two,span的内容1111111111
id=three,span的内容
pi里还有span