jquery常用代码片段

简介: 1)判断一个元素是否存在 使用jQuery判断元素是否存在,非常的简单。对于一个jQuery对象,我们只需要用length属性即可判断元素是否存在,如果存在肯定是大于0,示例代码: 判断这个图片是否存在,如果存在在把这个图片替换 $(document).

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

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

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

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

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

    </script>



2)获得文本框焦点,主要使用focus 获得焦点

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

$('#txtUser').bind("focus",function(){
					$(this).animate({ width: "500px" }, 1000);
					})
				$('#txtUser').bind("blur",function(){
					$(this).height("120px");
					})
        });


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

<img src="mooncake1.jpg" alt="mooncake" />
<p>中秋节我们吃月饼</p>

$(document).ready(function() {
    $("img").error(function() {
        $(this).remove();   //1.remove the image
        $(this).attr("src", "no-image.jpg");    //2.replace the image
    });
});


4)

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

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

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("神马");
    }
});





目录
相关文章
|
6月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
79 7
jQuery幸运大转盘抽奖活动代码
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
59 0
|
JavaScript 开发者
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
110 0
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
42 1
|
14天前
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
23 2
|
6月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
110 1
|
5月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
35 0
|
6月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)