每个程序员都会的 35 个 jQuery 小技巧(3)

21. 验证元素是否为空

This will allow you to check if an element is empty. 
 
$(document).ready(function() { 
  if ($('#id').html()) { 
   // do something 
   } 
});

22. 替换元素

$(document).ready(function() { 
   $('#id').replaceWith(' 
<DIV>I have been replaced</DIV> 
 
'); 
});

23. jQuery延时加载功能

$(document).ready(function() { 
   window.setTimeout(function() { 
     // do something 
   }, 1000); 
});

24. 移除单词功能

$(document).ready(function() { 
   var el = $('#id'); 
   el.html(el.html().replace(/word/ig, "")); 
});

25. 验证元素是否存在于jquery对象集合中

$(document).ready(function() { 
   if ($('#id').length) { 
  // do something 
  } 
});

26. 使整个DIV可点击

$(document).ready(function() { 
    $("div").click(function(){ 
      //get the url from href attribute and launch the url 
      window.location=$(this).find("a").attr("href"); return false; 
    }); 
// how to use 
<DIV><A href="index.html">home</A></DIV> 
 
});

27. ID与Class之间转换

当改变Window大小时，在ID与Class之间切换

$(document).ready(function() { 
   function checkWindowSize() { 
    if ( $(window).width() > 1200 ) { 
        $('body').addClass('large'); 
    } 
    else { 
        $('body').removeClass('large'); 
    } 
   } 
$(window).resize(checkWindowSize); 
});

28. 克隆对象

$(document).ready(function() { 
   var cloned = $('#id').clone(); 
// how to use 
<DIV id=id></DIV> 
 
});

29. 使元素居屏幕中间位置

$(document).ready(function() { 
  jQuery.fn.center = function () { 
      this.css("position","absolute"); 
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
      return this; 
  } 
  $("#id").center(); 
});

30. 写自己的选择器

$(document).ready(function() { 
   $.extend($.expr[':'], { 
       moreThen1000px: function(a) { 
           return $(a).width() > 1000; 
      } 
   }); 
  $('.box:moreThen1000px').click(function() { 
      // creating a simple js alert box 
      alert('The element that you have clicked is over 1000 pixels wide'); 
  }); 
});

31. 统计元素个数

$(document).ready(function() { 
   $("p").size(); 
});

32. 使用自己的 Bullets

$(document).ready(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("? "); 
// how to use 
ul.Replaced { list-style : none; } 
});

33. 引用Google主机上的Jquery类库

//Example 1 
<SCRIPT src="//www.google.com/jsapi"></SCRIPT> 
<SCRIPT type=text/javascript> 
google.load("jquery", "1.2.6"); 
google.setOnLoadCallback(function() { 
    // do something 
}); 
</SCRIPT><SCRIPT type=text/javascript src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT> 
 
// Example 2:(the best and fastest way) 
<SCRIPT type=text/javascript src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. 禁用Jquery（动画）效果

$(document).ready(function() { 
    jQuery.fx.off = true; 
});

35. 与其他Javascript类库冲突解决方案

$(document).ready(function() { 
   var $jq = jQuery.noConflict(); 
   $jq('#id').show(); 
});

【编辑推荐】

<< 上一页 1 2 3查看全文

内容导航

第 1 页：程序员都会的 jQuery 小技巧（一）	第 2 页：程序员都会的 jQuery 小技巧（二）
第 3 页：程序员都会的 jQuery 小技巧（三）

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。