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程序设计有所帮助。
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短