jQuery Selector 之基本類教學
#id
element
.class
*
selector1,selector2,selectorN
一、
#id
根據給定的ID匹配一個元素。
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之基本類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//1-1 取id用法
//alert 是跳出訊息框
//$("#myDiv").text() 的text() 是 取得div元素的内容。
alert($("#myDiv").text());
// 取id用法 之 查找含有特殊字符的元素
alert(
$("#foo\\:bar").text() +" -- "+
$("#foo\\[bar\\]").text() +" -- "+
$("#foo\\.bar").text()
);
//1-1 取id用法
});
</script>
</head>
<body>
<!-- 取id用法 -->
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<!-- 取id用法 之 查找含有特殊字符的元素 -->
<div id="myDiv2">
<span id="foo:bar">"foo:bar"</span>
<span id="foo[bar]">"foo[bar]"</span>
<span id="foo.bar">"foo.bar"</span>
</div>
</body>
</html>
結果顯示：
二、
element
根據給定的元素名匹配所有元素
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之基本類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//element 根據給定的元素名匹配所有元素
alert($("div").text());
});
</script>
</head>
<body>
<!-- element 根據給定的元素名匹配所有元素 用法 -->
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
</body>
</html>
結果顯示：
三、
.class
根據給定的類匹配元素。
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之基本類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//.class 根據給定的類匹配元素。
alert($(".myClass").text());
});
</script>
</head>
<body>
<!-- .class 根據給定的類匹配元素。 用法 -->
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
</html>
結果顯示：
四、
*
匹配所有元素
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之基本類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//* 匹配所有元素
alert($("body *").text());
});
</script>
</head>
<body>
<!-- * 匹配所有元素。 用法 -->
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>
結果顯示：
五、
selector1,selector2,selectorN
將每一個選擇器匹配到的元素合併後一起返回。
Description：
selector1Selector
一個有效的選擇器
selector2Selector
另一個有效的選擇器
selectorN Selector
任意多個有效選擇器
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之基本類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//selector1,selector2,selectorN 將每一個選擇器匹配到的元素合併後一起返回。
alert($("div,span,p.myClass").text());
});
</script>
</head>
<body>
<!-- selector1,selector2,selectorN 將每一個選擇器匹配到的元素合併後一起返回。 用法 -->
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
</body>
</html>
結果顯示：
留言列表
ZK (1)
