[总结]高效的jQuery代码编写技巧

前端开发作者： 2024-08-20 19:15:01

缓存变量 DOM遍历是昂贵的，所以尽量将会重用的元素缓存。避免全局变量 jQuery与javascript一样，一般来说,最好确保你的变量在函数作用域内。使用匈牙利命名法在变量前加$前缀，便于识

// 糟糕

h = $('#element').height();
$('#element').css('height',h-20);

 建议

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

 建议

var $element = $('#element');
var h =
 糟糕

var first = $('#first'var second = $('#second'var value = $first.val();

 建议 - 在jQuery对象前加$前缀

var $first = $('#first'var $second = $('#second'),var value = $first.val();

var
  $first = $('#first'= $first.val(),k = 3,cookiestring = 'SOMECOOKIESPLEASE'

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover();
})

 建议
$first.on('click',);
})

$first.on('hover',1)">);
})

);
});


$first.on('click',1)">(){
    $first.css({
        'border':'1px solid red'
    });
});


$second.html(value);
$second.on('click',1)">(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
}).fadeIn('slow').animate({height:'120px'},500);

$second.html(value);
$second.on('click',1)">
$second.html(value);
$second
    .on('click',1)">function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

 initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

 initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

if(collection.length > 0){..}

if(collection.length){..}


    $container = $("#container"null;

$element = $containerLi.first();
... 许多复杂的操作

 better

 $containerLi.first().detach();
... 许多复杂的操作

$container.append($element);


$('#id').data(key,value);

 建议 (高效)

$.data('#id',key,value);


    $container = $('#container'= $('#container li span' 建议 (高效)


    $container = $('#container '= $containerLi.find('span');


$('.container > *'
$('.container').children();


$('.someclass :radio'
$('.someclass input:radio');


$('div#myid');
$('div#footer a.myLink' 建议
$('#myid');
$('#footer .myLink');


$('#outer #inner'
$('#inner');

 糟糕 - live 已经废弃

$('#stuff').live('click',1)">() {
  console.log('hooray' 建议
$('#stuff').on('click',1)">);
});
 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65675.html

相关资讯： [总结]高效的jQuery代码编写技巧

[总结]高效的jQuery代码编写技巧

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签