jQueryinAction学习笔记——01

一、文档就绪处理程序

先来看看下列代码

window.onload = function(){
$("table tr:nth-child(even)").addClass("even");
};

还有第二个

$(document).ready(function(){
$("table tr:nth-child(even)").addClass("even");
});

那么他们的细微差别在那里那?

第一段代码是浏览器延迟执行onload代码，不仅是在构建DOM树之后，也是在所有图像和其他外部资源完整的家在并且页面在浏览器窗口显示完毕之后。假如你够倒霉的话，某个图像或其他资源要花好长一段时间去加载，访问者在页面丰富的行为变得可用之前，就不得不等待图像加载完毕。

当然更好的解决方法是有的，我们只要等到文档被完整地解析，同时浏览器已经把HTML转换成DOM树形式的时候，就立刻执行脚本使其丰富的行为生效。这就是我们看到的第二段代码。

当然我们可以简写做

$(function(){
$("table tr:nth-child(even)").addClass("even");
});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

二、消除与其它库的冲突

导致冲突的库被加载之后的任何时刻，都可以调用：

jQuery.noConflict();

把$还原为非jQuery库所定义的含义。

三、扩展jQuery

jQuery虽然提供了大量的有用函数，但是设计者不可能预料所有人的需求。因此jQuery库的作者认识到了这一点，因此提供了jQuery扩展。

那么为什么我们不是自己编写代码去填写所有的空白，而是去扩展jQuery哪？因为扩展jQuery更简单，通过扩展jQuery，可以利用它提供的强大功能，特别是在元素选择方面。

下面看一个书上给的例子：jQuery没有提供用于禁用一组表单元素的函数。如果我们在Web应用中大量的使用表单，就会发现利用以下语法非常的方便：

$("form#myForm input.special").disable();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }下面请看扩展jQuery的基本惯用语法：

$.fn.disable = function () {
return this.each(function () {
if (typeof(this.disabled) != "undifined") {
this.disabled = true;
}
});
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }这样我们就可以像许多jQuery原生方法那样编写代码了：

$("form#myForm input.special").disabled().addClass("moreSpecial");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

四、细节区别

li:has(a)选择器匹配的是包含<a>元素的所有<li>元素

li a选择器匹配的是<li>中的所有<a>元素

 

:nth-child(n) n是从1开始的

:eq(n) n是从0开始的