一些实用的jQuery代码片段收集


Posted in Javascript onJuly 12, 2011

下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享。下边就让我们看看这些有代码片段。

1.jQuery得到用户IP:

$.getJSON("http://jsonip.appspot.com?callback=?", function (data) { 
alert("Your ip: " + data.ip); 
});

2.jQuery查看图片的宽度和高度:
var theImage = new Image(); 
theImage.src = $('#imageid').attr("src"); 
alert("Width: " + theImage.width); 
alert("Height: " + theImage.height);

3.jQuery查找指定字符串:
var str = $('*:contains("the string")'); 
4.js 判断浏览器是否启用cookie: 
$(document).ready(function () { 
document.cookie = "cookieid=1; expires=60"; 
var result = document.cookie.indexOf("cookieid=") != -1; 
if (!result) { 
alert("浏览器未启用cookie"); 
} 
});

5.jQuery检测键盘按键:
$(document).ready(function () { 
$(this).keypress(function (e) { 
switch (e.which) { 
case 13: 
alert("您按下了回车键"); 
break; 
//more detect 
} 
}); 
});

好了,本篇就小结到这里,希望本篇jQuery代码片段文章能对大家起到帮助作用

1.jQuery 滚动到顶部/底部
关于jQuery滚动,本站在之前已经发过类似文章,如:jQuery 回到顶部,下边将它们再次整理一下:

//滚动到顶部 
$("html, body").animate({ scrollTop: "0px" }, 1000); 
//滚动到底部 
//$("#container"):要滚动的元素 
$("html, body").animate({ 
scrollTop: $("#container").height() 
}, 1000);

2.jQuery 判断元素是否存在
怎么使用 jQuery 判断元素是否存在,相信不少 jQuery 学习者都会问这个问题,方法很简单,如下:
if ($(" #elementid").length) { 
//元素存在 
}

3.使用 abort() 方法取消 Ajax 请求
使用 abort() 方法在执行 js 异步请求的时候可以取消上一次的请求,方法如下:
var req = $.ajax({ 
type: "post", 
url: "/article/form/comment.aspx", 
data: { "id": 1 }, 
success: function() { 
//handle 
} 
}); 
//取消 Ajax 请求 
if (req) { 
req.abort() 
}

jQuery Ajax 是使用 jQuery 比较重要的一块,如果你是 jQuery 初学者,可能会对上边的代码感觉到陌生,或许你可以看看 jQuery学习大总结(五)jQuery Ajax 。

4.jQuery 禁用鼠标右键

$(document).ready(function() { 
$(document).bind("contextmenu", function() { 
return false; 
}); 
});

5.向由setTimeout()调用的方法中传参
$(document).ready(function() { 
timeout = setTimeout(function() { 
showMess("succeed") 
}, 2000); 
}); 
function showMess(m) { 
alert(m); 
}

1.jQuery 倒计时
$(document).ready(function () { 
var count = 10; 
countdown = setInterval(function () { 
$("p.countdown").html(count + " 秒后将跳转!"); 
if (count == 0) { 
clearInterval(countdown) 
window.location = 'http://google.com'; 
} 
count--; 
}, 1000); 
});

2.jQuery 判断浏览器类型及版本号
jQuery 判断浏览器类型及版本号非常简单,可以直接使用 $.browser 方法进行判断。但我自己试验时发现在判断 Chrome 浏览器时,返回的是 Safari,在网上找了下,于是有了下边的代码:
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("神马"); 
} 
});

3.jQuery 元素居中显示
关于元素居中你可以先参考下css实现对象完全居中,了解下其中的原理,之后再看下边使用jQuery 实现元素居中就比较简单了。
//写成了插件形式 
(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; 
} 
})(jQuery); 
$(document).ready(function () { 
//调用 
$("#somediv").center(); 
});

4.jQuery 判断图像是否被完全加载进来
$("#demoImg").attr("src", "demo.jpg").load(function() { 
alert("图片加载完成"); 
});

如果你有什么实用的 jQuery 代码片段,欢迎在 jQuery学习上和大家分享!
Javascript 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
javascript实现Table排序的方法
May 15 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
深入分析javascript中console命令
Aug 14 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 #Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 #Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 #Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 #Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 #Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 #Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 #Javascript
You might like
国内php原创论坛
2006/10/09 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php简单压缩css样式示例
2016/09/22 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
js图片处理示例代码
2014/05/12 Javascript
js闭包的用途详解
2014/11/09 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python先序遍历二叉树问题
2017/11/10 Python
python:print格式化输出到文件的实例
2018/05/14 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
keras导入weights方式
2020/06/12 Python
常用的10个Python实用小技巧
2020/08/10 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
局域网标准
2016/09/10 面试题
项目经理的岗位职责
2013/11/23 职场文书
给校长的一封建议书
2014/03/12 职场文书
环保倡议书300字
2014/05/15 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫