JQuery的基本选择器使用总结以及过滤，文本，可见度的选择代码
选择器可以说是jquery的灵魂所在，因为有着强大的选择器，所以jquery才会几乎可以任意的取东西，在平时的开发中发现，不能仅仅的只会使用基本的选择器操作，把其它的选择器学习一下，有利于力高自己在开发效率和代码质量，减少代码量，下面是在测试学习过程中的代码总结（注：为了更加贴近实际开发，都采用了外部文件引入的方式）：
01.html
<!DOCTYPE html> <html> <head> <title>测试jquery</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="01.css"/> <script type="text/javascript" src="./JQuery/jquery.js"></script> <script type="text/javascript" src="01.js"></script> </head> <body> <h1>JQuery选择器测试</h1> <input type="button" id="test1" value="测试1"> <input type="button" id="test2" value="测试2"> <input type="button" id="test3" value="测试3"> <input type="button" id="test4" value="测试4"> <input type="button" id="test5" value="测试5"> <input type="button" id="test6" value="测试6"> <input type="button" id="test7" value="测试7"> <input type="button" id="test8" value="测试8"> <input type="button" id="test9" value="测试9"> <p id="a">abcdefg</p> <div id="div_1" class="div1"> div1 A1 <div id="div_2" class="div2"> div2 A2 <div id="div_3" class="div3"> div3 A3 <div id="div_4" class="div4"> div4 A4A <div id="div_5" class="div5"></div> </div> </div> </div> </div> <div id="div_2_1" class="div_2_1"> </div> </body> </html>01.css：
body{
background-color: #efefef;
}
.div1{
position: absolute;
margin-left: 350px;
margin-top: 80px;
width: 600px;
height: 600px;
background-color: red;
}
.div2{
position: absolute;
margin: 50px 0px 0px 50px;
width: 500px;
height: 500px;
background-color: green;
}
.div3{
position: absolute;
margin: 50px 0px 0px 50px;
width: 400px;
height: 400px;
background-color: blue;
}
.div4{
position: absolute;
margin: 50px 0px 0px 50px;
width: 300px;
height: 300px;
background-color: white;
}
.div5{
position: absolute;
margin: 50px 0px 0px 50px;
width: 200px;
height: 200px;
background-color: black;
}
.div6{
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
position: absolute;
background-color: yellow;
}
.div_2_1{
position: absolute;
margin: 50px 0px 0px 1000px;
width: 300px;
height: 300px;
background-color: yellow;
display: none;
}
.div_2_2{
position: absolute;
margin: 300px 0px 0px 1000px;
width: 300px;
height: 300px;
background-color: yellow;
}
01.js
body{
background-color: #efefef;
}
.div1{
position: absolute;
margin-left: 350px;
margin-top: 80px;
width: 600px;
height: 600px;
background-color: red;
}
.div2{
position: absolute;
margin: 50px 0px 0px 50px;
width: 500px;
height: 500px;
background-color: green;
}
.div3{
position: absolute;
margin: 50px 0px 0px 50px;
width: 400px;
height: 400px;
background-color: blue;
}
.div4{
position: absolute;
margin: 50px 0px 0px 50px;
width: 300px;
height: 300px;
background-color: white;
}
.div5{
position: absolute;
margin: 50px 0px 0px 50px;
width: 200px;
height: 200px;
background-color: black;
}
.div6{
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
position: absolute;
background-color: yellow;
}
.div_2_1{
position: absolute;
margin: 50px 0px 0px 1000px;
width: 300px;
height: 300px;
background-color: yellow;
display: none;
}
.div_2_2{
position: absolute;
margin: 300px 0px 0px 1000px;
width: 300px;
height: 300px;
background-color: yellow;
}
02.html
<!DOCTYPE html> <html> <head> <title>测试jquery</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="01.css"/> <script type="text/javascript" src="./JQuery/jquery.js"></script> <script type="text/javascript" src="02.js"></script> </head> <body> <h1>JQuery选择器测试</h1> <input type="button" id="test1" value="测试1"> <input type="button" id="test2" value="测试2"> <input type="button" id="test3" value="测试3"> <input type="button" id="test4" value="测试4"> <input type="button" id="test5" value="测试5"> <input type="button" id="test6" value="测试6"> <input type="button" id="test7" value="测试7"> <input type="button" id="test8" value="测试8"> <input type="button" id="test9" value="测试9"><br> <input type="hidden" value="文本隐藏域1"> <input type="hidden" value="文本隐藏域2"> <input type="hidden" value="文本隐藏域3"> <input type="hidden" value="文本隐藏域4"> <input type="hidden" value="文本隐藏域5"> <div id="div_1" class="div1"> div1 A1 <div id="div_2" class="div2"> div2 A2 <div id="div_3" class="div3"> div3 A3 <div id="div_4" class="div4"> div4 A4A <div id="div_5" class="div5"> <div id="div_6" class="div6"> This is div6 </div> </div> </div> </div> </div> </div> <div id="div_2_1" class="div_2_1"> 外部兄弟div1 </div> <div id="div_2_2" class="div_2_2"> 外部兄弟div2 </div> </body> </html>
02.js
$(document).ready(function(){
/*var myarray1 = [1,3,5,7,9];
$.each(myarray1,function(i,n){
alert(i+"---"+n);
});
*/
//可见度选择器,凡是可见的都被选中
$("#test1").click(function(){
$("div:visible").css("background-color","yellow");
});
// 类选择器
$("#test2").click(function(){
$("div.div6").css("background-color","red");
});
//显示隐藏元素
$("#test3").click(function(){
$("div:hidden").css("background-color","red");
$("div:hidden").show();
});
$("#test4").click(function(){
$MyInputHidden=$("input:hidden");
// window.alert($MyInputHidden.length);
// for(var i=0; i<$MyInputHidden.length; i++){
// var DomInputHidden=$MyInputHidden[i];
// window.alert(DomInputHidden.value);
// alert($MyInputHidden[i].val());
// }
// 这是jquery自己的方法遍历
/*$.each($MyInputHidden,function(i,obj){
window.alert($(obj).val());
});*/
//第二种方法
$.each($MyInputHidden,function(){
window.alert($(this).val());
});
});
});
关于选择器的使用规则如下：
1：使用什么选择器要根据需求来定
2：如果是针对文档内容，用内容选择器
3：如果是父子等关系，用层次选择器
4：如果是ID 类 等用基本选择器
5：如果是表单元素，用表单选择器或表单对象属性选择器
6：如果是可见或则不可见元素，用可见性选择器
7：如果选择某个元素里面的某个属性或则属性值，用属性选择器
8：如果要考虑元素，要用过滤选择器