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>
更多的例子
语法 |
说明 |
$(“*”) |
选择所以元素 |
$(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>元素 |
分享到:
相关推荐
jqueryselectors. 基础入门
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
我的学习方法:先入门,后进阶!本系列文章分为:基本篇、...jQuery-Selectors .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-botto
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
入门在js / selectors.js中,编写必要的代码以从index.html页中选择5个不同的元素。 利用记录CSS选择器。 作为连接实例的一些东西,你可以用这些方法做,你可以使用记录的addClass()方法,或包裹()方法记录CSS类...
python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
入门 在js / selectors.js中,编写必要的代码以从index.html页中选择5个不同的元素。 利用记录CSS选择器。 作为连接实例的一些东西,你可以用这些方法做,你可以使用记录的addClass()方法,或包裹()方法记录CSS...
contactCollector ... ##入门只需在HTML页面中包含jQuery和contactCollector.js并初始化插件即可。 var selectors = [ 'input[type="text"]' , 'textarea' ] ; var settings = { Cookie_Expiry : '364' ,