Jquery中基本选择器用法实例详解
本文实例讲述了Jquery中基本选择器用法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Jquery基本选择器</title>
<styletype="text/css">
.myDiv{width:100px;background-color:Blue;}
</style>
<scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
//JQuery选择器用于查找满足条件的元素。
//基本选择器是JQuery中最常用的选择器,也是最简单的选择器,
//它通过元素id,class和tagName来查找dom元素
//1.$("#id"):id选择器,document.getElementById("id");
//2.$("div"):元素选择器document.getElementByTagName("div");
//3.$(".myClass"):类选择器,返回所有class="myClass"的元素
//4.$("*"):返回所有元素,多用于结合上下文搜索
//5.$("div,span,p.myClass"):多条件选择器,返回所有查到的元素
$(function(){
//-----1.id选择器
//var$divMain=$("#main");
//alert($divMain.get(0));
//-----2.元素选择器
//var$divs=$("div");
//for(vari=0;i<$divs.length;i++){
//alert($divs.get(i).innerHTML);
//}
//-----3.类选择器
//var$divs=$(".myDiv");
//for(vari=0;i<$divs.length;i++){
//alert($divs.get(i).innerHTML);
//}
//-----4.返回所有元素
//var$Elements=$("*");
//for(vari=0;i<$Elements.length;i++){
//alert($Elements.get(i).innerHTML);
//}
//-----5.多条件选择器
var$MyObjs=$("div,input,span");
for(vari=0;i<$MyObjs.length;i++){
alert($MyObjs.get(i).id);
}
});
</script>
</head>
<body>
<inputid="button1"type="button"value="我是button1"/>
<divid="main">
<divid="div1"class="myDiv">我是div1
<spanid="span1">我是span1</span>
</div>
<divid="div2"class="myDiv">我是div2
<spanid="span2">我是span2</span>
</div>
</div>
<inputid="button2"type="button"value="我是button2"/>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。