一些实用的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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 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
我的群发邮件程序
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python实例一个类背后发生了什么
2016/02/09 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
党校培训自我鉴定
2014/02/01 职场文书
双创工作实施方案
2014/03/26 职场文书
《称象》教学反思
2014/04/25 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
妇联主席先进事迹
2014/05/18 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
红旗渠导游词
2015/02/09 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
运动会主持人开幕词
2016/03/04 职场文书