jQuery 入门教程(3): Selectors
jQuery Selector 是jQuery库中非常重要的一个组成部分。
jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始。
选择HTML标记
选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有
元素
[javascript] view plain copy print ?
- $(“p”)
$(“p”)
下面的例子当用户点击一个按钮时,隐藏所有的
元素
[javascript] view plain copy print ?
- $(document).ready(function(){
- $(“button”).click(function(){
- $(“p”).hide();
- });
- });
$(document).ready(function(){
$(“button”).click(function(){$("p").hide();
});
});
#id 选择
jQuery #id 选择器用来选择定义了id 属性的元素,网页上元素的id应保证是唯一的,你可以使用id来选择单个唯一的元素。
比如下面的例子,当点击按钮时,只会隐藏id为test 的元素。
[html] view plain copy print ?
- <!DOCTYPE html>
- $(document).ready(function(){
- $(“button”).click(function(){
- $(“#test”).hide();
- });
- });
This is a heading
This is a paragraph.
This is another paragraph.
<!DOCTYPE html>
This is a heading
This is a paragraph.
This is another paragraph.
.class 选择器
jQuery .class 选择器选择所有定义了class属性为制定值的所有元素,比如下面的例子 隐藏所有类名称为test的元素:
[html] view plain copy print ?
- <!DOCTYPE html>
- $(document).ready(function(){
- $(“button”).click(function(){
- $(“.test”).hide();
- });
- });
This is a heading
This is a paragraph.
This is another paragraph.
<!DOCTYPE html>
This is a heading
This is a paragraph.
This is another paragraph.
更多的例子
语法 | 说明 |
$(“*”) | 选择所以元素 |
$(this) | 选择当前元素 |
$(“p.intro”) | 选项所有class=intro的p元素 |
$(“p:first”) | 选择第一个p元素 |
$(“ul li:first”) | 选择第一个<ul>元素的第一个<li>元素 |
$(“ul li:first-child”) | 选择每个<ul>的第一个 元素 |
$(“[href]“) | 选择所有带href的元素 |
$(“a[target=’_blank’]“) | 选择所有target=_blank的a元素 |
$(“a[target!=’_blank’]“) | 选择所有target!=_blank的a元素 |
$(“:button”) | 选择所有button元素及input类型为button的元素 |
$(“tr:even”) | 选择所有偶数行<tr>元素 |
$(“tr:odd”) | 选择所有单数行<tr>元素 |
还没有评论,来说两句吧...