了解jQuery技巧来提高你的代码

2020-05-24 21:18:57易采站长站整理

7.尽可能使用ID选择器

在使用jQuery之后,你会发现利用class属性来选择DOM元素变得相当简单。尽管如此,还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为 DOM本身就有”天然的”getElementById这个方法,而class并没有。所以如果使用class选择器的话,浏览器会遍历整个DOM,如果你的网页DOM结构足够复杂,这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

<div id=”main”>
    <form method=”post” action=”/”>
        <h2>
            Selectors in jQuery
        </h2>
        … …
        <input class=”button” id=”main_button” type=”submit” value=”Submit” />
    </form>
</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多

var main_button = $(‘#main .button’);
var main_button = $(‘#main_button’);
8.善于利用jQuery链

jQuery链不但允许以简洁的方式写出强大的操作,而且提高了开发效率,因为它能够把多个命令应用到包装集,而不必重新计算包装集。从而你不用再这样写了:

<li>Description: <input type=”text” name=”description” value=”” /></li>

$(‘#shopping_cart_items input.text’).css(‘border’, ‘3px dashed yellow’);
$(‘#shopping_cart_items input.text’).css(‘background-color’, ‘red’);
$(‘#shopping_cart_items input.text’).val(“text updated”);

取而代之你可以使用jQuery链来完成简便的操作:


var input_text = $(‘#shopping_cart_items input.text’);
input_text.css(‘border’, ‘3px dashed yellow’);
input_text.css(‘background-color’, ‘red’);
input_text.val(“text updated”);
// same with chaining: