jQuery系列03
一、内容过滤器
1.:contains(text)
选择所有包含该文本的元素
注意：text用来查找一个文本字符串。严格区分大小写，匹配的文本可以直接出现在所选的元素中，也可以出现在该元素的后代中。或者两者兼有。
2.:empty
选择所有没有子元素的元素。
3.:has(select)
选择元素的后代包含select给定的元素。
4.:parent()
选择所有包含子元素(可以是文本)的父级元素。
二、表单过滤器
1.:button
选择所有按钮元素和类型为按钮的元素
2.:checkbox
选择所有类型为复选框的元素
3.:checked
匹配所有勾选的元素
4.:disabled
选择所有被禁用的元素
5.:enabled
选择素有可用的(未被禁用的元素)元素。
6.:file
选择所有类型为文件(file)的元素
7.:focus
选择当前获取焦点的元素
8.:image
选择所有图像类型的元素
9.:input
选择所有input、textarea、select和button元素
10.:password
选择所有类型为密码的元素
11.:radio
选择所有类型为单选框的元素
12.:submit
选择所有类型为提交的元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style type="text/css"> textarea { height: 35px; } div { color:red; } fieldset { margin:0; padding:0; border-width:0; } .marked { background-color: yellow; border:3px solid #ccc; } </style> </head> <body> <form> <!--对表单进行分组--> <fieldset> <input type="button" value="input button"/> <input type="checkbox" name="" id=""/> <input type="file" name="" id=""/> <input type="hidden" name=""/> <input type="image" src="" alt=""/> <input type="password" name="" id=""/> <input type="radio" name="" id=""/> <input type="reset" value="reset"/> <input type="submit" value="submit"/> <input type="text" name="" id=""/> <select> <option value="">Option</option> </select> <textarea name="" id="" cols="30" rows="10"></textarea> <button>Button</button> </fieldset> <fieldset> <input type="text" disabled/> <input type="text"/> </fieldset> </form> <div></div> </body> <script type="text/javascript"> $(function(){ $(":button").addClass("marked"); $(":disabled").val("disabled"); $("input[type|='text']:enabled").val("enabled"); }) </script> </html>
三、层级选择器
1.直接子元素选择器
parent>child选择当前父元素的直接子元素
2.后代选择器
parent child选择当前父元素的素有后代元素
3.相邻兄弟选择器
ele1 + ele2选择当前元素的下一个兄弟元素。
4.兄弟选择器
ele1 ~ele2选择当前元素之后的所有兄弟元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style type="text/css"> .mark { border:1px solid #ccc; } </style> </head> <body> <ul class="parent"> <li class="li1">li1</li> <li> li2 <ul> <li>Ili1</li> <li>Ili2</li> <li>Ili3</li> </ul> </li> <li>li3</li> <li>li4</li> </ul> </body> <script type="text/javascript"> $(function(){ $("ul.parent>li").addClass("mark"); $(".li1+li").css("border"," 1px solid red"); $(".li1~li").css("border"," 1px solid red"); }) </script> </html>
四、可见性过滤
1.:hidden
选择所有隐藏的元素，元素被认为是隐藏的几种情况：
(1)他们的cssdisplay值是none
(2)他们的type值是hidden
(3)他们的宽的和高度是0
(4)他们的父元素是隐藏的
2.:visible
选择所有可见的元素，如果元素在网页中占有一定的空间也被视为可见的，例如visible的值为hidden或者opacity的值为0。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style> .out { width: 200px; height: 200px; background-color: #00ffff; } .in { width: 50px; height: 50px; background-color: red; display: none; } </style> </head> <body> <div class="out"> <div class="in">this is hidden</div> </div> </body> <script> $(function(){ $(".out .in:hidden").css("display","block"); }) </script> </html>
在这里设置了两个div，将内部div的display的值设置为none，当检测到隐藏元素的时候，将display的值改为block。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style> .out { width: 200px; height: 200px; background-color: #00ffff; } .in { width: 50px; height: 50px; background-color: red; //display: none; opacity:0;//将不透明度设置为0，虽然div被隐藏，但是所占的物理空间还在。 } </style> </head> <body> <div class="out"> <div class="in">this is hidden</div> </div> </body> <script> $(function(){ // $(".out .in:hidden").css("display","block"); //将不透明度为0的div视为可见的元素。 $(".out .in:visible").css("opacity","1"); }) </script> </html>
这里将内部div的opacity（不透明度）设置为0，虽然div被隐藏，但是所占空间还在，当使用:visible进行检测的时候，将该元素视为可见元素，并将不透明度改为1.
浙公网安备 33010602011771号