jQuery入门（3） Selectors

jQuery入门（3） Selectors2013-05-22 引路蜂移动软件 jQuery Selector 是jQuery库中非常重要的一个组成部分。

jQuery Selector 用来选择某个 HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有jQuery selector 都是以$（）开始。

选择HTML标记

选择某个HTML元素的方法是直接使用该元素的标记名称，比如选择所有 <p>元素

$（"p"）

下面的例子当用户点击一个按钮时，隐藏所有的<p>元素

$（document）.ready（function（）{$（"button"）.click（function（）{$（"p"）.hide（）;}）;}）;

#id 选择

jQuery #id 选择器用来选择定义了id 属性的元素，网页上元素的id应保证是唯一的，你可以使用id来选择单个唯一的元素。

比如下面的例子，当点击按钮时，只会隐藏id为test 的元素。

<！DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $（document）.ready（function（）{ $（"button"）.click（function（）{ $（"#test"）.hide（）; }）; }）; </script> </head><body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body></html>

.class 选择器

jQuery .class 选择器选择所有定义了class属性为制定值的所有元素，比如下面的例子隐藏所有类名称为test的元素：

<！DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $（document）.ready（function（）{ $（"button"）.click（function（）{ $（".test"）.hide（）; }）; }）; </script> </head> <body><h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>