Jquery下的26个实用小技巧(jQuery tips, tricks solutions)

2020-05-18 08:42:52易采站长站整理

alert(‘The element that you have clicked is over 1000 pixels wide’);
});
});

21 统计元素个数

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

22 使用自己的 Bullets

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

23 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.

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

24. 禁用Jquery(动画)效果

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

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

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

26. Load() 函数的运用(页面载入提示):
> 首先写好 CSS,绝对定位到页面右上角。

#loading {
    position:absolute;    z-index:900;text-align:center;
    background-color:#eef2fa;border:1px solid #d8e3e8;
    color:#000;font-size:12px;padding:3px;width:80px;
    right:0;top:0;
}

> 然后用 jQuery 然后在所有图片载入完成之后,隐藏 Loading DIV。
> 别忘记载入 jQuery 库哈,刚才测试代码的时候地址写错了,差点疯掉。

<script>
jQuery(document).ready(function($){
$(‘img’).load(function(){
        $(‘#loading’).css(“display”,”none”);
});
});
</script>

> 随便某处插入一个 DIV 即可,O(∩_∩)O 哈哈。