不学习不行啊，我擦，努力吧少年。
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>
假设我们想让最顶层的列表项水平排列，而不是垂直排列，我们定义一个水平样式表类：
- .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');
- });
属性选择器，例如选择带有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) |
