首頁 > 開發者 > JavaScript
JQuery魔力(一）$("tagName")
DOM 中的 getElementsByTagName()方法在JQuery中的表現就是$("tagName")這麼簡單！
匿名函數來解決 window.onload 事件
對頁面上的所有"div"標記下手，定義統一的外觀
對"body"標記定義外觀
動態添加一個"span"標記將其放置在"body"裡
複製代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery 測試</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>
第一個div</div>
<div>
第二個div</div>
<div>
第三個div</div>
</body>
</html>
JQuery魔力（二） selector
tag標籤（可以是：p、div、button …）標籤本身具有ID、Class等屬性
複製代碼 代碼如下:
$("tag") //取得頁面中的某種標籤的集合 同 document.getElementsByTagName("tag")
$("#id") //據id取得頁面中的元素 同 document.getElementById("id")
$("tag#id") //據id取得標籤為tag元素集合
$(".class") //據class取得元素集合 同 document.getElementsByClassName("class")
$("tag.class") //據class取得標籤為tag的元素集合
$("tag1 tag2") //取得tag1內的tag2類型元素 同
$("tag1 > tag2")
$("tag1:has(tag2)") //取得包含tag2的tag1類型的元素集合
上面的selector充分體現了JQuery存在的價值,就是文法簡潔且語義容易理解。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
