jQuery选择器（一）

来源：互联网发布：网络与新媒体就业方向编辑：程序博客网时间：2024/06/01 19:14

一、选择器——jQuery的根基

1、CSS选择器

标签选择器：以文档元素作为选择符。

E {    CSS规则}

ID选择器：以文档元素的唯一标识符ID作为选择符。

#ID {    CSS规则}

类选择器：以文档元素的class作为选择符。

E.className {    CSS规则}

群组选择器：多个选择符应用同样的样式规则。

E1,E2,E3 {    CSS规则}

后代选择器：元素E的任意后代元素F。

E F {    CSS规则}

通配选择器：以文档的所有元素作为选择符。

* {    CSS规则}

2、jQuery选择器

继承了CSS的风格，写法与CSS选择器相似。
CSS选择器找到元素后是添加样式，jQuery选择器找到元素后是添加行为。
jQuery中射击涉及操作CSS样式的部分比单纯的CSS功能更为强大。
拥有跨浏览器的兼容性。

二、jQuery选择器的优势

简洁的写法
支持CSS1到CSS3选择器
完善的处理机制，可以避免某些错误

三、jQuery选择器

1、基本选择器

通过元素id、class和标签名等来查找DOM元素。

#id：根据给定的id匹配一个元素。
.class：根据给定的类名匹配元素。
element：根据给定的元素名匹配元素。
*：匹配所有元素。
selector1,selector2,…,selectorN：将每一个选择器匹配到的元素合并后一起返回。

下面举个例子简单说明。
先简单设计一个页面，包含一些<div>和<spam>元素，HTML代码如下：

<div id="one">id为one的div块</div><div class="two">class为two的div块</div><div class="three">class为three的span</div><span>span元素</span>

再添加一些简单的CSS样式，CSS代码如下：

div, span{    height: 100px;    width: 100px;    border: 1px solid #000;    margin: 5px;    float: left;        }

页面效果如下：
使用基本选择器之前的页面

再使用选择器来匹配元素并调整它们的样式，代码如下：

//改变id为one的所有元素的背景色$("#one").css("background","green");//改变class为two的所有元素的背景色$(".two").css("background","blue");//改变元素名为<span>的所有元素的背景色$("span").css("background","yellow");//改变所有元素的字体$("*").css("font-size","20px");//改变所有<span>元素和id为three的元素的高度$("span,#three").css("height","150px");

使用基本选择器调整后的页面

2、层次选择器

通过DOM元素之间的层次关系来获取特定元素，比如后代元素、子元素、相邻元素和同辈元素等。

$(“ancestor descendant”)：后代选择器，选取ancestor元素里的所有descendant（后代）元素。
$(“parent > child”)：子选择器选取parent元素下的child（子）元素。
$(“prev + next”)：相邻兄弟选择器，选择紧接在prev元素后的next元素。可以使用next()方法代替。
$(“prev ~ siblings”)：一般兄弟选择器选取prev元素之后的所有siblings元素。可以使用nextAll()方法代替。

再举一个例子。
先给出HTML代码，如下：

<div id="one" class="one">    id为one，class为one的div    <div class="mini">class为mini的div</div>    <p>p元素</p></div><div id="two" class="two">    id为two，class为two的div    <div class="mini" title="1">class为mini，title为1的div</div>    <div class="mini" title="2">class为mini，title为2的div</div>    <p>p元素</p></div><div id="three" class="three">    id为three，class为three的div    <div class="mini">class为mini的div</div></div><span>    span元素    <p>p元素</p></span><div id="four" class="four">    id为four，class为four的div    <p>p元素</p></div><span id="mover">正在执行动画的span元素</span>

再给出CSS样式，如下：

div, span, .mini, p{    margin: 5px;    border: 1px solid #000;    float: left;}div, span{    height: 200px;    width: 200px;}.mini{    height: 80px;    width: 80px;    }p{    height: 60px;    width: 60px;}

为<span>元素添加动画效果：

function animateIt() {    $("#mover").slideToggle("slow", animateIt);}animateIt();

使用层次选择器之前的页面

再使用选择器，代码如下：

//改变<div>内所有<p>的背景色$("div p").css('background', '#BBFFAA');//改变<body>内子<span>元素的背景色$("body span").css('background', '#AABBCC');//改变class为one的下一个<div>同辈元素的背景色$(".one + div").css('background', '#777777');//改变id为two的元素后面的所有<div>同辈元素的背景色$("#two ~ div").css('background', 'yellow');

使用层次选择器之后的页面

阅读全文

0 0