您的位置：首页 > Web前端 > JQuery

JavaScript（15）jQuery 选择器

2014-05-21 13:13 267 查看
jQuery 选择器

选择器允许对元素组或单个元素进行操作。

jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。

在 HTML DOM 术语中：选择器允许对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有 href 属性的值等于 "#" 的元素。

$("[href!='#']") 选取所有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");


上面的看完了我也不知道选择器是什么。。。来点自己的理解和总结。。。

选择器语法：$("......")

也可以这样分类：

① 选取所有元素：$("*")（注意里面是”星号“）

② 选取class：$(".class名") （注意前面有个”点“）

③ 选取id：$("#id名")

④ 选取元素：$("标签名")

⑤ 选取属性：$("[属性名]")

⑥ 根据特征来选取元素：$(":特征")（注意前面有个”冒号“）

这六种选择器还可以组合一下，产生更多的选择器。

比如：④②、④⑥

还可以是：④④⑥、④③②（同类型之间要用“空格”隔开，如：$("ul li:first")、$("div#intro .head")）

选取当前 HTML 元素：$(this)

嵌套选择器

如：选取指定标签中的其它标签中的元素：$(标签名 *)

（注意指定的标签中一定要有其它标签，否则没有效果。道理就是我为我家狗狗取名叫小狗，但实际是我家根本没有狗狗。。。）

如果要进一步选择css属性：$("......").css("......")

$("[属性名='#']") 选取所有属性的值等于 "#" 的元素。

$("[属性名!='#']") 选取所有属性的值不等于 "#" 的元素。

$("[属性名$='.jpg']") 选取所有属性的值以 ".jpg" 结尾的元素。

提示：

根据实践，某些浏览器使用 * 的处理速度缓慢。

不要使用数字开头的 ID 名称！在某些浏览器中可能出问题。

不要使用数字开头的类名！在某些浏览器中可能出问题。

具体使用时，可以参考“jQuery 选择器参考手册”，看看有哪些选择器。

这篇写得比较短，但其实花费的时间比较多，看了很多例子。觉得现在还是不要每个都看一遍，以后用到的话边用边学，然后可以在这里补充。

最后还是贴段代码吧，好像代码生动形象直观了当。。。（太懒了，我只想贴一份大杂烩代码（涉及到覆盖）。。。）

<html>

<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(":header").css("background-color","grey");

$("div *").css("background-color","blue");
$("p *").css("background-color","purple");

$("p").css("background-color","yellow");

$("ul li:first").css("background-color","pink");
$("div#choose .introtoo").css("background-color","green");
});

</script>
</head>

<body>

<html>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>

<div id="choose">
<p class="introtoo">My name is Donald, too</p>
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>

</body>
</html>

</body>

</html>


结果：

Welcome to My Homepage

My name is Donald
I live in Duckburg
My best friend is Mickey

My name is Donald, too
Who is your favourite:

Goofy
Mickey
Pluto
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航