JQuery学习笔记（一）

选择符——取得你想要的一切

工厂函数$()

在JQuery中，无论我们使用哪种类型的选择符（不管是CSS、XPath，还是自定义的选择符），都要从一个美元符号和一对圆括号开始：$()。
$()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jquery对象中。可以在$()函数的圆括号中使用的参数几乎没有什么限制。比较常用的一些例子：

标签名：$('p')会取得文档中所有的段落。
ID：$('#some-id')会取得文档中具有对应的some-id ID的一个元素。
类：$('.some-class')会取得文档中带有some-class 类的所有元素。

CSS选择符

以下的例子是一个嵌套无序列表

<ul id='select-plays'>
    <li>Comedies
        <ul>
            <li><a href='http://www.mysite.com/asypulikeit/'>As You Like It</a></li>
            <li>All's Well That Ends Well</li>
            <li>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:[e-mail]'>email</a>)
                <ul>
                    <li>Part I</li>
                    <li>Part II</li>
                </ul>
            <li><a href='http://www.shakespeare.co.uk/henryv.htm'>Henry V</a></li>
            <li>Richard II</li>
        </ul>
    </li>
</ul>

我们注意到，其中第一个<ul具有一个值为selected-plays的ID，但<li>标签则全都没有与之关联的类。在没有应用任何样式的情况下，这个列表的外观如下图所示。
下图中的嵌套列表按照我们期望的方式显示—一组带符号的列表项垂直排列，并且每个列表都按照各自的级别进行了缩进。

基于列表项的级别添加样式

假设我们想让*的项，而且只有*的项水平排列。可以定义一个horizontal类。

.horizontal{
    float:left;
    list-style:none;
    margin:10px;
}

这个horizontal类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么会移除其项目符号，最后，再为该元素的每一边各添加10像素的外边距。
这里，没有直接在Html中添加horizontal类，而只是将它动态的添加给位于*的列表项Comedies、Tragedies和Histroies，以便示范jquery中选择符的用法。

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal');
});

在jquery代码中使用$(document).ready()结构时，位于其中的所有代码都会在DOM加载后立即执行。
第2行代码使用了子元素组合符(>)将horizontal类只添加到位于*的项中。实际上，位于$()函数中的选择符的含义是，查找ID为selected-plays的元素（#selected-plays）的子元素（>）中所有的列表项（li）。
应用后，现在的嵌套列表如下图

要为其他项（非*的项）添加样式，有很多中方式。因为*项添加了horizontal类，所以取得全部非*项的一种方式，就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal');
    $('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

这一次取得每个列表项（li）。
1)是ID为selected-plays的元素（#selected-plays）的后代元素。
2)没有horizontal类（:not(.horizontal)）。
在为这些列表项添加了sub-level类之后，它们取得了在样式表规则.sub-level{background-color:#ffc;}中定义的浅黄的背景颜色。此时嵌套列表如下图。

XPath选择符

XPath（XML Path Language，XML路径语言）是在XML文档中识别不同元素或元素值的一种语言，与CSS在Html文档中识别元素的方式类似。jquery库支持一组基本的XPath选择符，如果愿意也可以将它们与CSS选择符一同使用。而且，jquery中，无论对什么类型的文档都可以使用XPath和CSS选择符。

为链接添加样式

属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且，也可以使用星号(*)表示字符串中的任意位置。
假设想以不同的文本颜色来显示不同类型的链接。那么，首先要在样式表中定义如下样式

a {
    color:#00f;/*普通链接显示为蓝色 */
}
a.mailto {
    color:#f00;/*电子邮件链接显示为红色*/
}
a.pdflink {
    color:#090;/*指向PDF文件的链接显示为绿色*/
}
a.mysite {
    text-decoration:none;/*移除内部链接的下划线*/
    border-bottom: 1px dotted #00f;
}

然后，可以使用jquery为符合条件的链接添加3个类：mailto、pdflink和mysite。
要取得所有电子邮件链接，需要构造一个选择符，用来寻找所有带href属性（[href]）且以mailto开头（^=”mailto:”）的锚元素(a)。结果如下

$(document).ready(function(){
    $('a[href^="mailto:"]').addClass('mailto');
});

要取得所有指向PDF文件的链接，需要使用美元符号($)而不是(^)，来取得所有带href属性并以.pdf结尾的链接，相应的代码如下所示：

$(document).ready(function(){
    $('a[href^="mailto:"]').addClass('mailto');
    $('a[href$=".pdf"]').addClass('pdflink');
});

最后，要取得所有内部链接，即到mysite.com中其他页面的链接，则需要使用星号：

$(document).ready(function(){
    $('a[href^="mailto:"]').addClass('mailto');
    $('a[href$=".pdf"]').addClass('pdflink');
    $('a[href*="mysite.com"]').addClass('mysite');
});

这里，mysite.com可以出现在href属性值中的任何位置上。如果也想选择指向mysite.com内部所有子域名的链接，使用这个选择符特别关键（这里指的应该是使用*域名mysite.com，而不是使用具体的子域名www.mysite.com。否则，会将排除www之外的任何子域名，如blog.mysite.com等。）
应用后，看到下面的样式。
- 带点划线的蓝色文本：<a href='http://www.mysite.com/asypulikeit/'>As You Like It</a>
- 绿色文本：<a href='hamlet.pdf'>Hamlet</a>
- 红色文本：<a href='mailto:[e-mail]'>email</a>

自定义选择符

除了CSS和XPath选择符之外，jquery还添加了独有的完全不同的自定义选择符。jquery中的多数自定义选择符都可以基于某个标准选出特定的元素。自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以一个冒号(:)开头。例如：从匹配的带有horizontal类的div集合中，选择第2个项，那么应该使用$('div.horizontal:eq(1)')注意，因为javascript数组采用从0开始的编号方式，所以eq(1)取的是集合中的第2个元素。而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div。

交替地为表格行添加样式

jquery库中的两个十分有用的自定义选择符是：odd和：even。

<table>
    <tr>
        <td>As You Like It</td>
        <td>Comedy</td>
    </tr>
    <tr>
        <td>All's Well that Ends Well</td>
        <td>Comedy</td>
    </tr>
    <tr>
        <td>Hamlet</td>
        <td>Tragedy</td>
    </tr>
    <tr>
        <td>Macbeth</td>
        <td>Tragedy</td>
    </tr>
    <tr>
        <td>Romeo and Juliet</td>
        <td>Tragedy</td>
    </tr>
    <tr>
        <td>Henry IV,Part I</td>
        <td>History</td>
    </tr>
    <tr>
        <td>Henry V</td>
        <td>History</td>
    </tr>
</table>

向样式表中添加两个类，一个用于为奇数行添加样式，另一个用于为偶数行添加样式。

.odd{background-color:#ffc;/*奇数行的背景色为浅黄*/}
.even{background-color:#cef;/*偶数行的背景色为浅蓝*/}

最后编写jquery，将这两个类添加到表格行(<tr>标签)中：

$(document).ready(function(){
    $('tr:odd').addClass('odd');
    $('tr:even').addClass('even');
});

效果如下：

乍一看，表格行的背景颜色似乎与意图相反。原因是与：eq()选择符一样，：odd()和：even()选择符使用的都是javascript本身的从0开始的编号方式。表格的第1行编号为0（偶数），而表格的第2行编号是1（奇数），然后依次类推。
不过，要注意的是，如果一个页面上存在多个表格，我们则真有可能看到意料之外的结果。例如这个表格最后一行是浅蓝色背景色，所以下一个表格的第一行就会带有浅黄色背景色。
假设想突出显示Henry游戏所有表格单元。

.highlight{font-weight:bold;color:#f00;}

$('td:contains("Henry")').addClass('highlight');

效果如下

不使用jquery也可以通过其他方式实现突显效果，然而，jquery+css，在内容由程序动态生成，而我们又无权改变html和服务器端代码的情况下，这种对样式化操作提供了优秀的替换方案。