一、 jquery内容过滤选择器
二、jquery可见度过滤选择器
用法: $(”tr:hidden”) 返回值 集合元素
用法: $(”tr:visible”) 返回值 集合元素
三、jquery属性过滤选择器
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>内容选择器学习</title>
- <script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
- //增加id为btn1按钮的事件
- $("#btn1").click(function (){
- //选取内容包含two的div
- $("div:contains('two')").css("background","green");
- });
- //<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
- $("#btn2").click(function (){
- //选取内容包含two的div
- $("div:empty").css("background","green");
- });
- //<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
- $("#btn3").click(function (){
- //选取内容包含two的div
- $("div:has(span)").css("background","green");
- });
- //<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
- $("#btn4").click(function (){
- //选取内容包含two的div
- $("div:parent").css("background","green");
- });
- //<input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" />
- $("#btn5").click(function (){
- //选取内容包含two的div
- $("div:not(:contains('two'))").css("background","green");
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div class="d2">class=d2</div>
- <div class="d2"></div>
- <div class="d2"><span></span></div>
- <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
- <input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
- <input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
- <input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
- <input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" />
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>内容选择器学习</title> <script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script> <style> div{ width:150px; height:150px; border:1px dashed #00F; background-color:#CCC; margin:5px; float:left;} .one-1{ width:80px; margin:30px; height:80px; border:1px dashed #00F; background-color: #FFC; } </style> <script language="javascript" type="text/javascript"> //使用jquery加载事件 $(document).ready(function (){ //<input id="btn0" type="button" value="清空样式" /> $("#btn0").click(function (){ //当点击按钮后,设置id=two的div的背景颜色是绿色 $("*").removeAttr("style"); }); //<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" /> //增加id为btn1按钮的事件 $("#btn1").click(function (){ //选取内容包含two的div $("div:contains('two')").css("background","green"); }); //<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" /> $("#btn2").click(function (){ //选取内容包含two的div $("div:empty").css("background","green"); }); //<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" /> $("#btn3").click(function (){ //选取内容包含two的div $("div:has(span)").css("background","green"); }); //<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" /> $("#btn4").click(function (){ //选取内容包含two的div $("div:parent").css("background","green"); }); //<input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" /> $("#btn5").click(function (){ //选取内容包含two的div $("div:not(:contains('two'))").css("background","green"); }); }); </script> </head> <body> <div id="one">id=one <div class="one-1">class=one-1</div> </div> <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div> <div id="three">id=three<br><span>id=three,span的内容</span></div> <div class="d2">class=d2</div> <div class="d2"></div> <div class="d2"><span></span></div> <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p> <div style="clear:both;"> <input id="btn0" type="button" value="清空样式" /> <input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" /> <input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" /> <input id="btn3" type="button" value="选中包含span的div $(div:has(span))" /> <input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" /> <input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" /> </div> </body> </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>属性选择器学习</title>
- <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />
- $("#btn1").click(function (){
- $("div[id]").css("background","green");
- });
- //<input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" />
- $("#btn2").click(function (){
- $("div[class=d2]").css("background","green");
- });
- //<input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" />
- $("#btn3").click(function (){
- $("div[class!=d2]").css("background","green");
- });
- //<input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" />
- $("#btn4").click(function (){
- $("div[class=abcd2][id=five]").css("background","green");
- });
- //<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" />
- $("#btn5").click(function (){
- $("div[class^=a]").css("background","green");
- });
- //<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" />
- $("#btn6").click(function (){
- $("div[class$=2]").css("background","green");
- });
- //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div $('div[class*=a]')" />
- $("#btn7").click(function (){
- $("div[class*=b]").css("background","green");
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div id="four" class="abcd2">id=four,class=abcd2</div>
- <div id="five" class="abcd2">id=five,class=abcd2</div>
- <div class="a3b5"></div>
- <div class="d2"><span></span></div>
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />
- <input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" />
- <input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" />
- <input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" />
- <input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" />
- <input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" />
- <input id="btn7" type="button" value="选中有class属性属性值包含'b'的div $('div[class*=b]')" />
- </div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>属性选择器学习</title> <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script> <style> div{ width:150px; height:150px; border:1px dashed #00F; background-color:#CCC; margin:5px; float:left;} .one-1{ width:80px; margin:30px; height:80px; border:1px dashed #00F; background-color: #FFC; } </style> <script language="javascript" type="text/javascript"> //使用jquery加载事件 $(document).ready(function (){ //<input id="btn0" type="button" value="清空样式" /> $("#btn0").click(function (){ //当点击按钮后,设置id=two的div的背景颜色是绿色 $("*").removeAttr("style"); }); //<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" /> $("#btn1").click(function (){ $("div[id]").css("background","green"); }); //<input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" /> $("#btn2").click(function (){ $("div[class=d2]").css("background","green"); }); //<input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" /> $("#btn3").click(function (){ $("div[class!=d2]").css("background","green"); }); //<input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" /> $("#btn4").click(function (){ $("div[class=abcd2][id=five]").css("background","green"); }); //<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" /> $("#btn5").click(function (){ $("div[class^=a]").css("background","green"); }); //<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" /> $("#btn6").click(function (){ $("div[class$=2]").css("background","green"); }); //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div $('div[class*=a]')" /> $("#btn7").click(function (){ $("div[class*=b]").css("background","green"); }); }); </script> </head> <body> <div id="one">id=one <div class="one-1">class=one-1</div> </div> <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div> <div id="three">id=three<br><span>id=three,span的内容</span></div> <div id="four" class="abcd2">id=four,class=abcd2</div> <div id="five" class="abcd2">id=five,class=abcd2</div> <div class="a3b5"></div> <div class="d2"><span></span></div> <div style="clear:both;"> <input id="btn0" type="button" value="清空样式" /> <input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" /> <input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" /> <input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" /> <input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" /> <input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" /> <input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" /> <input id="btn7" type="button" value="选中有class属性属性值包含'b'的div $('div[class*=b]')" /> </div> </body> </html>
下面是可见度过滤选择器的例子
- <span style="color:#000000;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>可见度过滤选择器学习</title>
- <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- .hide{
- display:none;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
- //增加id为btn1按钮的事件
- $("#btn1").click(function (){
- //选取可见元素
- $("div:visible").css("background","green");
- });
- //<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />
- $("#btn2").click(function (){
- //选取隐藏元素
- $("div:hidden").show().css("background","green");
- });
- //<input id="btn3" type="button" value="获取隐藏的文本域的值 $(input:hidden)" />
- $("#btn3").click(function (){
- //匹配所有隐藏的文本域
- //-----------------第一种方法-----------
- /* $("input:hidden").each(function (i){
- //this是dom元素,使用dom方式获取值
- //alert(this.value);
- //用jquery的方式获取 $(this)相当于是将dom转换为jquery对象
- //alert($(this).val());
- });*/
- //-----------------第二种方法-----------
- // 索引值 dom元素
- /*$("input:hidden").each(function (index,domEle){
- //使用dom的方式
- //alert(domEle.value);
- //使用jquery的方式
- alert($(domEle).val());
- });*/
- //-----------------第三种方法-------------
- var input=$("input");
- $.each(input,function (index,domEle){
- //使用dom的方式
- //alert(domEle.value);
- //使用jquery的方式
- alert($(domEle).val());
- });
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div class="d2">class=d2</div>
- <div class="hide"></div>
- <div class="d2"><span></span></div>
- <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>
- <input type="hidden" value="hidden_1" />
- <input type="hidden" value="hidden_2" />
- <input type="hidden" value="hidden_3" />
- <input type="hidden" value="hidden_4" />
- <input type="hidden" value="hidden_5" />
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
- <input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />
- <input id="btn3" type="button" value="获取隐藏的文本域的值 $(input:hidden)" />
- </div>
- </body>
- </html>
- </span>