不学习不行啊,我擦,努力吧少年。
Chapter 2: Selecting Elements 选择元素
jQuery库驾驭了CSS选择器使得我们很容易访问DOM元素或者一组元素。
The Document Object Model
jQuery最强大的功能之一就是使得选择DOM元素变得容易。DOM是JS和web页面的接口,它将HTML抽象为一些对象的网络而不是普通文本。
这个网络就像一个家庭树,下面是一个简单的例子:
-
- the title
-
-
-
-
-
This is a paragraph.
-
This is another paragraph.
-
This is yet another paragraph.
-
需要指出的是,选择元素被包裹在jQuery object中,这不同于原始DOM元素。本章最后再看如何直接访问DOM元素。
The $() function
这个函数"$()"就是jQuery选择器,它接收一个参数,返回指向所选元素的jQuery对象。
三中基础的选择方法如下
1、Tag name, CSS: p{ }; jQuery:$('p');
2、ID, CSS: #some-id{ };jQuery:$('#some-id');
3、Class, CSS: .some-class{}; jQuery:$('.some-class');
看下面这个例子,一个常见的无序的list
- <ul id="selected-plays">
- <li>Comedies
- <ul>
- <li><a href="/asyoulikeit/">As You Like It</a></li>
- <li>All's Well That Ends Well
-
- A Midsummer Night's Dream</li>
- <li>Twelfth Night</li>
- </ul>
- </li>
-
- <li>Tragedies
- <ul>
- <li><a href="hamlet.pdf">Hamlet</a></li>
- <li>Macbeth</li>
- <li>Romeo and Juliet</li>
- </ul>
- </li>
-
- <li>Histories
- <ul>
- <li>Henry IV (<a href="mailto:henryiv@king.co.uk
- ">email</a>)
- <ul>
- <li>Part I</li>
- <li>Part II</li>
- </ul>
-
- <li><a href="">
- Henry V
- </a></li>
-
- <li>Richard II</li>
- </ul>
- </li>
- </ul>
不加任何style,看起来像这样:
- Comedies
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
- Tragedies
- Histories
(今天到这,明天继续)
继续:
先插一个基本的前端网站工程(第一章讲的内容),由index.html my.js my_style.css三个文件组成。index.html代码如下(这里我把jquery-1.8.3.js下载到了本地):
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>You like</title>
- <link rel="stylesheet" href="my_style.css">
- <script src="jquery-1.8.3.js"></script>
- <script src="my.js"></script>
- </head>
-
- <body>
-
- </body>
-
- </html>
Styling list-item levels假设我们想让最顶层的列表项水平排列,而不是垂直排列,我们定义一个水平样式表类:
- .horizontal {
- float: left;
- list-style: none;
- margin: 10px;
- }
这个水平样式表类让元素浮在左边,并且每一边有10px的空隙。
不是直接将horizontal类用到HTML上,我们用jQuery动态的实现:
- $(document).ready(function() {
- $('#selected-plays > li').addClass('horizontal');
- });
这里'>'是子连接器的意思,选择所有的li元素并且它们是#selected-plays的子一级。这样之后就是水平排列了。
选择不是最顶层的list项,可以用没有horizontal类的伪类,代码如下:
- $(document).ready(function() {
- $('#selected-plays > li').addClass('horizontal');
- $('#selected-plays li:not(.horizontal)').addClass('sub-level');
- });
Attribute selectors属性选择器,例如选择带有alt属性的images,可以如下
$('img[alt]')
可以用正则表达式来选择,举例如下:
- $('a[href^="mailto:"]').addClass('mailto');
- $('a[href$=".pdf"]').addClass('pdflink');
- $('a[href^="http"][href*="henry"]').addClass('henrylink');
第一个是
的属性href以"mailto:"字符串开头。
Custom seletors
定制的选择器
除了像上面的CSS选择器,jQuery有自己定制的选择器,一般推荐用CSS选择器。
一个例子,给交替的行上样式:
先给一个表,看起来像这样:
Shakespeare's Plays
As You Like It |
Comedy |
|
All's Well that Ends Well |
Comedy |
1601 |
Hamlet |
Tragedy |
1604 |
Macbeth |
Tragedy |
1606 |
Romeo and Juliet |
Tragedy |
1595 |
Henry IV, Part I |
History |
1596 |
Henry V |
History |
1599 |
Shakespeare's Sonnets
The Fair Youth |
1–126 |
The Dark Lady |
127–152 |
The Rival Poet |
78–86 |
下面往样式表里添加两个样式,奇数行用alt类:
- tr {
- background-color: #fff;
- }
- .alt {
- background-color: #ccc;
- }
用这个代码给奇数行添加样式:
$('tr:even').addClass('alt');
或者这样:
$('tr:nth-child(odd)').addClass('alt');
(上面那样选择相对于自己元素的奇数行,而不会是全局的奇数行)
Form selectors,表单选择器,像这样$('input[type="radio"]:checked')
一些其它的选择器(不作解释,列出来仅供参考):
$('tr').filter(':even').addClass('alt');
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
$('td:contains(Henry)').next().addClass('highlight');
$('td:contains(Henry)').nextAll().addClass('highlight');
$('td:contains(Henry)').nextAll().andSelf().addClass('highlight');
访问DOM元素
即由jQuery对象访问DOM对象。有get函数,填数组下标,像下面这样。
var myTag = $('#my-element').get(0).tagName;
总结
3中选择器:
CSS selectors, CSS选择器
attribute selectors, 属性选择器
custom, 定制选择器
结束语:
第二章的选择元素学习就到此结束了。
阅读(1015) | 评论(1) | 转发(0) |