AJax技术

jQuery中的100个技巧(2)

字号+ 作者:H5之家 来源:H5之家 2017-02-24 10:01 我要评论( )

script // Prevent right clicking on this page $(function(){$(document).on( ,function(e){e.preventDefault();});}); /script 11.一些站点可能会使你的网页在一个bar下面,即我们所看到在下面的网页是iframe标

<script> // Prevent right clicking on this page $(function(){ $(document).on(,function(e){ e.preventDefault(); }); }); </script>

 

11.一些站点可能会使你的网页在一个bar下面,即我们所看到在下面的网页是iframe标签中的,我们可以这样解决。

(window != window.top){ window.top.location = window.location; } else{ alert(); }

 

 

12.你的内联样式表并不是被设置为不可改变的,如下:

// Make the stylesheet visible and editable $().css({:, :}) .attr(,true);

这样即可改变内联样式了。

 

13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情,我们可以这么做:

<p >In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.</p> <script> // Prevent text from being selected $(function(){ $().attr(, ) .css(, ) .on(, false); }); </script>

这样,内容就不能被选择啦。

 

14.从CDN中引入jQuery,这样的方法可以提高我们网站的性能,并且引入最新的版本也是一个不错的主意。

下面会介绍四种不同的方法。

<!-- Case 1 - requesting jQuery from the official CDN --> <script src=></script> <!-- Case 2 - requesting jQuery from Google's CDN (notice the protocol) --> <!-- <script src=></script> --> <!-- Case 3 - requesting the latest minor 1.8.x version (only cached for an hour) --> <!-- <script src=></script> --> <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --> <!-- <script src=></script> -->

 

 

15.保证最小的DOM操作。

  我们知道js操作DOM是非常浪费资源的,我们可以看看下面的例子。

CODE // Bad //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('<li>element '+i+'</li>'); //} elem = $(), arr = []; for(var i = 0; i < 100; i++){ arr.push(+i+); } elem.append(arr.join(''));

 

 

16.更方便的分解URL。

也许你会使用正则表达式来解析URL,但这绝对不是一种好的方法,我们可以借用a标签来实现它。

url = ; a = $(,{ href: url }); log(+ a.prop()); log(+ a.prop()); log(+ a.prop()); log(+ a.prop()); log(+ a.prop());

 

17.不要害怕使用vanilla.js。

  jQuery背负的太多,这便是原因,你可以用一般的js。

// Print the IDs of all LI items $().each(function(){ // Access the ID directly, instead // of using jQuery's $(this).attr('id') log(this.id); });

 

18.最优化你的选择器

iterations = 10000, i; timer(); for(i=0; i < iterations; i++){ // This falls back to a SLOW JavaScript dom traversal $(); } timer_result(); timer(); for(i=0; i < iterations; i++){ // Better, but still slow $(); } timer_result(); timer(); for(i=0; i < iterations; i++){ // Some browsers are a bit faster on this one $()

 

 

19.缓存你的selector。

// Bad: // $('#pancakes li').eq(0).remove(); // $('#pancakes li').eq(1).remove(); // $('#pancakes li').eq(2).remove(); pancakes = $(); pancakes.eq(0).remove(); pancakes.eq(1).remove(); pancakes.eq(2).remove(); // Alternatively: // pancakes.eq(0).remove().end() // .eq(1).remove().end() // .eq(2).remove().end();

 

20.对于重复的函数只定义一次

  如果你追求代码的更高性能,那么当你设置事件监听程序时必须小心,只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用AJAX返回HTML片段中的JavaScript脚本

    用AJAX返回HTML片段中的JavaScript脚本

    2017-02-23 08:00

  • jQuery $.ajax .abort() 大猫 (Madao)

    jQuery $.ajax .abort() 大猫 (Madao)

    2017-02-20 09:00

  • FileUpload using Jquery Ajax and Generic Handler

    FileUpload using Jquery Ajax and Generic Handler

    2017-02-20 08:03

  • MagicSuggest dynamic ajax source

    MagicSuggest dynamic ajax source

    2017-02-19 16:00

网友点评