jQuery 基础 1

打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行。

$(document).ready(function() {
    console.log('ready!');
});

此外,它还有一个简写方式

$(function() {
    console.log('ready!');
});

$(document).ready() 中并非只能执行匿名方法,执行一个已命名的方法也是可以的:

function readyFn() {
    // code to run when the document is ready
}


$(document).ready(readyFn);

选择元素

jQuery 最基本的概念就是“选择一些元素,然后对它们做一些事情”。jQuery 支持大多数的 CSS3 选择器,另外还有一些非标准的选择器,详情见 http://api.jquery.com/category/selectors/,下面是一些常见选择器的用法:

$('#myId');                  // 此 ID 在页面中必须唯一
$('div.myClass');            // 如果指定了元素类型,那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢,尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');         // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');              // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');           // 所有正在执行动画的 DIV

需要注意的地方

当使用 :visible:hidden 这种伪选择器的时候,jQuery 实际上是去检测他们在页面中是否可见,还不是它们 css 中的 display 的值。也就是说,当一个元素在页面正的物理宽度和高度都大于 0,那么它就是可见的。但是 <tr> 例外,jQuery 会根据 <tr> 元素的 CSS 中 display 属性去判断元素是否可见。

jQuery 的具体实现方式可以参考一下代码:

jQuery.expr.filters.hidden = function( elem ) {
    var width = elem.offsetWidth, height = elem.offsetHeight,
        skip = elem.nodeName.toLowerCase() === "tr";

    // does the element have 0 height, 0 width,
    // and it's not a <tr>?
    return width === 0 && height === 0 && !skip ?

        // then it must be hidden
        true :

        // but if it has width and height
        // and it's not a <tr>
        width > 0 && height > 0 && !skip ?

            // then it must be visible
            false :

            // if we get here, the element has width
            // and height, but it's also a <tr>,
            // so check its display property to
            // decide whether it's hidden
            jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};

选择器结果集中是否包含有元素

执行了一个选择器之后,如何判断选择器是否选择到了元素,可能会想当然的写下:

if ($('div.foo')) { ... }

其实这样写是不对的,因为不管选择器是否选择到元素,它都会返回一个对象,对象的布尔值肯定为 true,所以,所以此方法是行不通的。其实选择器返回对象中有一个 length 属性,通过这个属性,可以确定选择器中到底有几个元素,如果里面一个元素都没选择到,那么返回 0-false,如果选择到了元素,返回元素的实际数目-true

if ($('div.foo').length) { ... }

给选择器做个缓存

每做一次选择器,jQuery 都要执行很多代码,如果你需要多次使用相同的一个选择器,最好给选择器做个缓存,以避免重复执行选择器。

var $divs = $('div');

注意,此段代码中用作缓存变量的变量名以 $ 开头,这个美元符号在 JavaScript 中仅仅是一个普通的字符,没有其它特殊意义,这里使用 $ 开头,也仅仅是一个约定俗成的习惯,并非强制要求。

一旦选择器被缓存到变量中,就可以在变量中调用 jQuery 的方法了,跟调用选择器没什么两样。

另外还需要注意的是,选择器只能选择页面当前中的元素,如果在执行了选择器后又往页面中添加元素,那么后天加的元素并没有包含在之前的选择器中,除非往页面中添加元素后再次执行选择器。

带有过滤功能的选择器

有时候执行一个选择器之后,并非结果集中的所有元素都是我们想要的,那么就需要对结果集再进行一次过滤:

$('div.foo').has('p');          //  所有包含有 <p> 的 div.foo
$('h1').not('.bar');            // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current');  // 带有类 current 的无序列表
$('ul li').first();             // 无序列表中的第一个元素
$('ul li').eq(5);               // 第六个

选择表单元素

jQuery 提供了一些伪选择器来选择表单元素,非常有用。

:button 选择按钮
:checkbox 选择多选框
:checked 选择被选中的表单元素
:disabled 选择被禁用的表单元素
:enabled 选择被启用的表单元素
:file 选择 type="file" 的表单元素
:image 选择 type="image" 的表单元素
…… ……

$('#myForm :input'); // 选择所有可输入的表单元素

如何使用选择器

执行了选择器之后,就可以调用选择器中的方法了。这些方法分为两类:getter 和 setter,getter 返回结果集中第一个元素的属性,setter 可以设置结果集中所有元素的属性。

链式操作

jQuery 选择器中的大多数方法都会返回的都是 jQuery 对象本身,所以在调用一个方法后,可以继续在这个方法上继续调用其它方法,犹如连招一般:

$('#content').find('h3').eq(2).html('new text for the third h3!');

对于链式操作而言,保持代码的可读性很重要:

$('#content')
    .find('h3')
    .eq(2)
    .html('new text for the third h3!');

如果再链式操作中,选择器中的元素有所变化,那么可以用 $.fn.end 方法返回到最初的结果集:

$('#content')
    .find('h3')
    .eq(2)
        .html('new text for the third h3!')
    .end() // 返回最初的结果集
    .eq(0)
        .html('new text for the first h3!');

链式操作非常好用,以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用,过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

via http://jqfundamentals.com

Posted on 2012-03-06

No Comments

Leave a Comment