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"里
<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等屬性
$("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ǔ)義容易理解。
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ǔ)義容易理解。
相關(guān)文章
jQuery圓形統(tǒng)計(jì)圖開(kāi)發(fā)實(shí)例
這篇文章主要介紹了jQuery圓形統(tǒng)計(jì)圖開(kāi)發(fā)的方法,實(shí)例分析了circliful插件的用法與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對(duì)象
本文主要介紹jQuery中g(shù)rep、each、inArray、map的用法，并附實(shí)例講解，非常實(shí)用，有需要的朋友可以參考一下。2016-06-06
jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的驗(yàn)證碼功能
今天給大家分享一個(gè)基于jquery實(shí)現(xiàn)的簡(jiǎn)單驗(yàn)證碼功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
這篇文章主要介紹了Jquery中Event對(duì)象屬性的操作方法的總結(jié)，非常的詳細(xì)，是篇十分不錯(cuò)的文章，這里推薦給大家。2015-02-02
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-04-04
本文給大家分享的是小編jQuery、zepto、js常用小技巧的心得，非常實(shí)用，有需要的小伙伴可以參考下2017-02-02
jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)插件zTree針對(duì)節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
JQuery和html+css實(shí)現(xiàn)帶小圓點(diǎn)和左右按鈕的輪播圖實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery和html+css實(shí)現(xiàn)帶小圓點(diǎn)和左右按鈕的輪播圖實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
jquery兩種導(dǎo)入方式之本地導(dǎo)入和線上導(dǎo)入
這篇文章主要給大家介紹了關(guān)于jquery兩種導(dǎo)入方式之本地導(dǎo)入和線上導(dǎo)入的相關(guān)資料,jQuery是一款JavaScript庫(kù),封裝了JavaScript相關(guān)方法調(diào)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西2012-07-07