快捷導(dǎo)航

JQuery魔力之$("tagName")與selector

更新時(shí)間：2012年03月05日 17:26:14 作者：

DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡(jiǎn)單！tag標(biāo)簽（可以是：p、div、button …）標(biāo)簽本身具有ID、Class等屬性

JQuery魔力(一）$("tagName")

DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$("tagName")這么簡(jiǎn)單！

匿名函數(shù)來(lái)解決 window.onload 事件

對(duì)頁(yè)面上的所有"div"標(biāo)記下手，定義統(tǒng)一的外觀

對(duì)"body"標(biāo)記定義外觀

動(dòng)態(tài)添加一個(gè)"span"標(biāo)記將其放置在"body"里

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JQuery 測(cè)試</title> 
<script src="js/jquery-1.7.1.min.js" type="text/javascript"> 
</script> 
<script type='text/javascript'> 
$(function () { 
$("div").width(100) 
.css("color", "red") 
.css("margin", "20px") 
.css("border", "dotted 1px green"); 
$(document.body).css("background-color", "#cccccc"); 
$("<span>Four</span>").appendTo("body"); 
}); 
</script> 
<script type="text/javascript"> 
$(function () { 
var v = $("div"); 
alert(v.length); 
for (var i = 0; i < v.length; i++) { 
alert(v[i].innerHTML); 
} 
}); 
</script> 
</head> 
<body> 
<div> 
第一個(gè)div</div> 
<div> 
第二個(gè)div</div> 
<div> 
第三個(gè)div</div> 
</body> 
</html> 

JQuery魔力（二） selector
tag標(biāo)簽（可以是：p、div、button …）標(biāo)簽本身具有ID、Class等屬性

復(fù)制代碼代碼如下:

 
$("tag") //取得頁(yè)面中的某種標(biāo)簽的集合 同 document.getElementsByTagName("tag") 
$("#id") //據(jù)id取得頁(yè)面中的元素 同 document.getElementById("id") 
$("tag#id") //據(jù)id取得標(biāo)簽為tag元素集合 
$(".class") //據(jù)class取得元素集合 同 document.getElementsByClassName("class") 
$("tag.class") //據(jù)class取得標(biāo)簽為tag的元素集合 
$("tag1 tag2") //取得tag1內(nèi)的tag2類型元素 同 
$("tag1 > tag2") 
$("tag1:has(tag2)") //取得包含tag2的tag1類型的元素集合 

上面的selector充分體現(xiàn)了JQuery存在的價(jià)值,就是語(yǔ)法簡(jiǎn)潔且語(yǔ)義容易理解。

您可能感興趣的文章: