jquery常用代码片段

1）判断一个元素是否存在

使用jQuery判断元素是否存在，非常的简单。对于一个jQuery对象，我们只需要用length属性即可判断元素是否存在，如果存在肯定是大于0，示例代码：

判断这个图片是否存在，如果存在在把这个图片替换

view plain

1. <img src="http://www.jquery001.com/images/demo/2010/anyixuan.jpg" style="  float:right" id='uu2'>  

view plain

1. <script type="text/javascript">  
2.        $(document).ready(function() {  
3.     if($('#uu2').length>0){  
4.     $('#uu2').attr("src", "http://www.blogkid.cn/wp-content/uploads/2008/04/memcached_shell_2.JPG");  
5.                 }  
6.        });  
7.   
8.    </script>  

2）获得文本框焦点，主要使用focus 获得焦点

view plain

1. <input type="text" id="txtUser" style="width:200px; " />  

view plain

1. $('#txtUser').bind("focus",function(){  
2.                     $(this).animate({ width: "500px" }, 1000);  
3.                     })  
4.                 $('#txtUser').bind("blur",function(){  
5.                     $(this).height("120px");  
6.                     })  
7.         });  

3）对失效的图片的处理  主要使用error 方法，注意在ie下不兼容性，当图片失效的时候，我们可以直接移除该图片，也可以替换该图片

view plain

1. <img src="mooncake1.jpg" alt="mooncake" />  
2. <p>中秋节我们吃月饼</p>  
3.   
4. $(document).ready(function() {  
5.     $("img").error(function() {  
6.         $(this).remove();   //1.remove the image  
7.         $(this).attr("src", "no-image.jpg");    //2.replace the image  
8.     });  
9. });  

4）

jQuery 判断图像是否被完全加载进来

view plain

1. $("#demoImg").attr("src", "demo.jpg").load(function() {    
2.     alert("图片加载完成");    
3. });   

5）

jQuery 判断浏览器类型及版本号

var browserName = navigator.userAgent.toLowerCase();
mybrowser = {
 version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
 safari: /webkit/i.test(browserName) && !this.chrome,
 opera: /opera/i.test(browserName),
 firefox: /firefox/i.test(browserName),
 msie: /msie/i.test(browserName) && !/opera/.test(browserName),
 mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,
 chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
$(document).ready(function () {
if (mybrowser.msie) {
 alert("浏览器为：Internet Explorer 版本号为：" + $.browser.version);
}
else if (mybrowser.mozilla) {
 alert("浏览器为：Firefox 版本号为：" + $.browser.version);
}
else if (mybrowser.opera) {
 alert("浏览器为：Opera 版本号为：" + $.browser.version);
}
else if (mybrowser.safari) {
 alert("浏览器为：Safari 版本号为：" + $.browser.version);
}
else if (mybrowser.chrome) {
 alert("浏览器为：Chrome 版本号为：" + mybrowser.version);
}
else {
 alert("神马");
}
});