jQuery 選擇器
jQuery選擇器是什麼？
jQuery選擇器是jQuery函式庫中非常重要的部分之一。它支援網頁開發者所熟知的CSS語法快速輕鬆地對頁面進行設定。了解jQuery選擇器是開啟高效率開發jQuery之門的鑰匙。一個典型的jQuery選擇器句法形式：
$(selector).methodName();
selector是一個字串表達示，用於識別DOM中的元素，然後使用jQuery提供的方法集合加以設定。
大多數情況下jQuery支援這樣的操作：
$(selector).method1().method2().method3();
這個實例表示隱含DOM中id =”goAway”的元素，然後為其新增一個class=”incognito”屬性。
$('#goAway').hide().addClass('incognito');
提示：當選擇器表達顯示匹配多個元素時，可以像JavaScritp數組操作一樣，方便靈活地利用數組指針進行選取。這是例子：
var element = $('img')[0];
匹配表達示的元素中，第一個元素物件將賦給變數element。
基本選擇器
1.元素選擇器
jQuery 元素選擇器是基於元素名選取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落。</p>
<p>另一个段落。</p>
<button>点击隐藏P标签内容</button>
</body>
</html>2. #id 選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<p>段落</p>
<p id="test">另一个段落</p>
<button>点击隐藏id</button>
</body>
</html>3.class選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">标题</h2>
<p class="test">段落。</p>
<button>点击隐藏所有class</button>
</body>
</html> 4.element選擇器
#
將p元素的文字大小設為12px:
$(document).ready(function () {
$('p').css('font-size' , '12px');
});
#5. * 選擇器
#$(document ).ready(function () {
// 遍歷form下的所有元素，並將字體顏色設為紅色
$('form *').css('color', '#FF0000');
});
6. 並列選擇器
$(document).ready(function () {
// 將p元素與div元素的margin設為0
$('p, div').css('margin', '0');
});
其他的層級選擇器，過濾選擇器將會在以後的章節中逐步介紹。
獨立檔案中使用jQuery 函數
如果您的網站包含許多頁面，並且您希望您的jQuery 函數易於維護，那麼請將您的jQuery 函數放到獨立的.js 檔案中。
當我們在教程中示範 jQuery 時，會將函數直接加入 <head> 部分。不過，把它們放到一個單獨的檔案中會更好，就像這樣（透過 src 屬性來引用檔案）：
<head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="my_jquery_functions.js"></script> </head>
