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

所属分类: 网络编程 / JavaScript 阅读数: 1380
收藏 0 赞 0 分享
下边这些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学习上和大家分享!
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多