Jquery开发技巧（三）

硪硪

21. 验证元素是否为空

will allow you to check if an element is empty.

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

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

22. 替换元素
Want to replace a div, or something else?

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11

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

23. jQuery延时加载功能
Want to delay something?

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

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

24. 移除单词功能
Want to remove a certain word(s)?

[url=]复制代码[/url]

1 2 3 4 5 6 7

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

25. 验证元素是否存在于jquery对象集合中
Simply test with the .length property if the element exists.

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

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

26. 使整个DIV可点击
Want to make the complete div clickable?

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

$(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之间切换

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

28. 克隆对象
Clone a div or an other element.
[url=]复制代码[/url]

1 2 3

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

29. 使元素居屏幕中间位置
Center an element in the center of your screen.

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(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. 写自己的选择器
Write your own selectors.

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(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. 统计元素个数
Count an element.

[url=]复制代码[/url]

1 2 3 4 5

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

32. 使用自己的 Bullets
Want to use your own bullets instead of using the standard or images bullets?

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

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

33. 引用Google主机上的Jquery类库
Let Google host the jQuery script for you. This can be done in 2 ways.
[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//Example 1     <SCRIPT src="http://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="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>     // Example 2the best and fastest way)     <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. 禁用Jquery（动画）效果
Disable all jQuery effects

[url=]复制代码[/url]

1 2 3 4 5

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

35. 与其他Javascript类库冲突解决方案
To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

[url=]复制代码[/url]

1 2 3 4 5 6 7

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

秘法所

受教了！这个论坛果然很不错，适合学习