一些實(shí)用的jQuery代碼片段收集
更新時(shí)間：2011年07月12日 23:52:45 作者：
今天總結(jié)一下學(xué)習(xí)jQuery時(shí)中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時(shí)候能起到幫助。
下邊這些jQuery片段只是很少的一部分，如果您在學(xué)習(xí)過(guò)程中也遇到過(guò)一些常用的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檢測(cè)鍵盤(pán)按鍵：
$(document).ready(function () {
$(this).keypress(function (e) {
switch (e.which) {
case 13:
alert("您按下了回車(chē)鍵");
break;
//more detect
}
});
});
好了，本篇就小結(jié)到這里，希望本篇jQuery代碼片段文章能對(duì)大家起到幫助作用
1.jQuery 滾動(dòng)到頂部/底部
關(guān)于jQuery滾動(dòng)，本站在之前已經(jīng)發(fā)過(guò)類(lèi)似文章，如：jQuery 回到頂部，下邊將它們?cè)俅握硪幌拢?
//滾動(dòng)到頂部
$("html, body").animate({ scrollTop: "0px" }, 1000);
//滾動(dòng)到底部
//$("#container"):要滾動(dòng)的元素
$("html, body").animate({
scrollTop: $("#container").height()
}, 1000);
2.jQuery 判斷元素是否存在
怎么使用 jQuery 判斷元素是否存在，相信不少 jQuery 學(xué)習(xí)者都會(huì)問(wèn)這個(gè)問(wèn)題，方法很簡(jiǎn)單，如下：
if ($(" #elementid").length) {
//元素存在
}
3.使用 abort() 方法取消 Ajax 請(qǐng)求
使用 abort() 方法在執(zhí)行 js 異步請(qǐng)求的時(shí)候可以取消上一次的請(qǐng)求，方法如下：
var req = $.ajax({
type: "post",
url: "/article/form/comment.aspx",
data: { "id": 1 },
success: function() {
//handle
}
});
//取消 Ajax 請(qǐng)求
if (req) {
req.abort()
}
jQuery Ajax 是使用 jQuery 比較重要的一塊，如果你是 jQuery 初學(xué)者，可能會(huì)對(duì)上邊的代碼感覺(jué)到陌生，或許你可以看看 jQuery學(xué)習(xí)大總結(jié)(五)jQuery Ajax 。
4.jQuery 禁用鼠標(biāo)右鍵
$(document).ready(function() {
$(document).bind("contextmenu", function() {
return false;
});
});
5.向由setTimeout()調(diào)用的方法中傳參
$(document).ready(function() {
timeout = setTimeout(function() {
showMess("succeed")
}, 2000);
});
function showMess(m) {
alert(m);
}
1.jQuery 倒計(jì)時(shí)
$(document).ready(function () {
var count = 10;
countdown = setInterval(function () {
$("p.countdown").html(count + " 秒后將跳轉(zhuǎn)！");
if (count == 0) {
clearInterval(countdown)
window.location = 'http://google.com';
}
count--;
}, 1000);
});
2.jQuery 判斷瀏覽器類(lèi)型及版本號(hào)
jQuery 判斷瀏覽器類(lèi)型及版本號(hào)非常簡(jiǎn)單，可以直接使用 $.browser 方法進(jìn)行判斷。但我自己試驗(yàn)時(shí)發(fā)現(xiàn)在判斷 Chrome 瀏覽器時(shí)，返回的是 Safari，在網(wǎng)上找了下，于是有了下邊的代碼：
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 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.mozilla) {
alert("瀏覽器為：Firefox 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.opera) {
alert("瀏覽器為：Opera 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.safari) {
alert("瀏覽器為：Safari 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.chrome) {
alert("瀏覽器為：Chrome 版本號(hào)為：" + mybrowser.version);
}
else {
alert("神馬");
}
});
3.jQuery 元素居中顯示
關(guān)于元素居中你可以先參考下css實(shí)現(xiàn)對(duì)象完全居中，了解下其中的原理，之后再看下邊使用jQuery 實(shí)現(xiàn)元素居中就比較簡(jiǎn)單了。
//寫(xiě)成了插件形式
(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 () {
//調(diào)用
$("#somediv").center();
});
4.jQuery 判斷圖像是否被完全加載進(jìn)來(lái)
$("#demoImg").attr("src", "demo.jpg").load(function() {
alert("圖片加載完成");
});
如果你有什么實(shí)用的 jQuery 代碼片段，歡迎在 jQuery學(xué)習(xí)上和大家分享！
1.jQuery得到用戶IP：
復(fù)制代碼 代碼如下:
$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {
alert("Your ip: " + data.ip);
});
2.jQuery查看圖片的寬度和高度：
復(fù)制代碼 代碼如下:
var theImage = new Image();
theImage.src = $('#imageid').attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);
3.jQuery查找指定字符串：
復(fù)制代碼 代碼如下:
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檢測(cè)鍵盤(pán)按鍵：
復(fù)制代碼 代碼如下:
$(document).ready(function () {
$(this).keypress(function (e) {
switch (e.which) {
case 13:
alert("您按下了回車(chē)鍵");
break;
//more detect
}
});
});
好了，本篇就小結(jié)到這里，希望本篇jQuery代碼片段文章能對(duì)大家起到幫助作用
1.jQuery 滾動(dòng)到頂部/底部
關(guān)于jQuery滾動(dòng)，本站在之前已經(jīng)發(fā)過(guò)類(lèi)似文章，如：jQuery 回到頂部，下邊將它們?cè)俅握硪幌拢?
復(fù)制代碼 代碼如下:
//滾動(dòng)到頂部
$("html, body").animate({ scrollTop: "0px" }, 1000);
//滾動(dòng)到底部
//$("#container"):要滾動(dòng)的元素
$("html, body").animate({
scrollTop: $("#container").height()
}, 1000);
2.jQuery 判斷元素是否存在
怎么使用 jQuery 判斷元素是否存在，相信不少 jQuery 學(xué)習(xí)者都會(huì)問(wèn)這個(gè)問(wèn)題，方法很簡(jiǎn)單，如下：
復(fù)制代碼 代碼如下:
if ($(" #elementid").length) {
//元素存在
}
3.使用 abort() 方法取消 Ajax 請(qǐng)求
使用 abort() 方法在執(zhí)行 js 異步請(qǐng)求的時(shí)候可以取消上一次的請(qǐng)求，方法如下：
復(fù)制代碼 代碼如下:
var req = $.ajax({
type: "post",
url: "/article/form/comment.aspx",
data: { "id": 1 },
success: function() {
//handle
}
});
//取消 Ajax 請(qǐng)求
if (req) {
req.abort()
}
jQuery Ajax 是使用 jQuery 比較重要的一塊，如果你是 jQuery 初學(xué)者，可能會(huì)對(duì)上邊的代碼感覺(jué)到陌生，或許你可以看看 jQuery學(xué)習(xí)大總結(jié)(五)jQuery Ajax 。
4.jQuery 禁用鼠標(biāo)右鍵
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$(document).bind("contextmenu", function() {
return false;
});
});
5.向由setTimeout()調(diào)用的方法中傳參
復(fù)制代碼 代碼如下:
$(document).ready(function() {
timeout = setTimeout(function() {
showMess("succeed")
}, 2000);
});
function showMess(m) {
alert(m);
}
1.jQuery 倒計(jì)時(shí)
復(fù)制代碼 代碼如下:
$(document).ready(function () {
var count = 10;
countdown = setInterval(function () {
$("p.countdown").html(count + " 秒后將跳轉(zhuǎn)！");
if (count == 0) {
clearInterval(countdown)
window.location = 'http://google.com';
}
count--;
}, 1000);
});
2.jQuery 判斷瀏覽器類(lèi)型及版本號(hào)
jQuery 判斷瀏覽器類(lèi)型及版本號(hào)非常簡(jiǎn)單，可以直接使用 $.browser 方法進(jìn)行判斷。但我自己試驗(yàn)時(shí)發(fā)現(xiàn)在判斷 Chrome 瀏覽器時(shí)，返回的是 Safari，在網(wǎng)上找了下，于是有了下邊的代碼：
復(fù)制代碼 代碼如下:
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 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.mozilla) {
alert("瀏覽器為：Firefox 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.opera) {
alert("瀏覽器為：Opera 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.safari) {
alert("瀏覽器為：Safari 版本號(hào)為：" + $.browser.version);
}
else if (mybrowser.chrome) {
alert("瀏覽器為：Chrome 版本號(hào)為：" + mybrowser.version);
}
else {
alert("神馬");
}
});
3.jQuery 元素居中顯示
關(guān)于元素居中你可以先參考下css實(shí)現(xiàn)對(duì)象完全居中，了解下其中的原理，之后再看下邊使用jQuery 實(shí)現(xiàn)元素居中就比較簡(jiǎn)單了。
復(fù)制代碼 代碼如下:
//寫(xiě)成了插件形式
(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 () {
//調(diào)用
$("#somediv").center();
});
4.jQuery 判斷圖像是否被完全加載進(jìn)來(lái)
復(fù)制代碼 代碼如下:
$("#demoImg").attr("src", "demo.jpg").load(function() {
alert("圖片加載完成");
});
如果你有什么實(shí)用的 jQuery 代碼片段，歡迎在 jQuery學(xué)習(xí)上和大家分享！
您可能感興趣的文章:
- 50個(gè)比較實(shí)用jQuery代碼段
- JQuery select標(biāo)簽操作代碼段
- 分享javascript、jquery實(shí)用代碼段
- 利用Jquery實(shí)現(xiàn)幾款漂亮實(shí)用的時(shí)間軸(附示例代碼)
- jQuery+ajax實(shí)現(xiàn)實(shí)用的點(diǎn)贊插件代碼
- 分享12個(gè)實(shí)用的jQuery代碼片段
- 基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
- 8個(gè)超實(shí)用的jQuery功能代碼分享
- 60個(gè)很實(shí)用的jQuery代碼開(kāi)發(fā)技巧收集
- jquery實(shí)用代碼片段集合
- 非常實(shí)用的jQuery代碼段集錦【檢測(cè)瀏覽器、滾動(dòng)、復(fù)制、淡入淡出等】
相關(guān)文章
簡(jiǎn)單分析javascript面向?qū)ο笈c原型
為了說(shuō)明 JavaScript 是一門(mén)徹底的面向?qū)ο蟮恼Z(yǔ)言，首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€(gè)概念：1.一切事物皆對(duì)象，2.對(duì)象具有封裝和繼承特性，3.對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱藏2015-05-05
Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
Jquery AJAX實(shí)現(xiàn)頁(yè)面的統(tǒng)計(jì)代碼，后臺(tái)用的是php,這篇文章主要是學(xué)習(xí)jquery下ajax的簡(jiǎn)單實(shí)現(xiàn)。2010-06-06
這篇文章主要介紹了jQuery使用height()獲取高度需要注意的地方,對(duì)于display:none或者隱藏的部分無(wú)法獲取到其高度,這是使用jQuery的height方法需要注意的地方,需要的朋友可以參考下2014-12-12
jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果
這篇文章主要介紹了jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果,涉及jQuery擴(kuò)展的使用與時(shí)間操作的相關(guān)技巧,需要的朋友可以參考下2016-05-05
解決ajax不能訪問(wèn)本地文件問(wèn)題（利用js跨域原理）
本篇文章主要介紹了解決ajax不能訪問(wèn)本地文件問(wèn)題（利用js跨域原理），具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對(duì)文件的上傳的方法和實(shí)例，非常的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的輪播圖相關(guān)功能實(shí)現(xiàn)、樣式設(shè)置與注意事項(xiàng),需要的朋友可以參考下2023-05-05
對(duì)于想學(xué)習(xí)制作jquery 插件的朋友需要用的到。2008-12-12
jquery之基本選擇器practice(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jquery之基本選擇器practice(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jQuery插件實(shí)現(xiàn)文件上傳功能（支持拖拽）
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)文件上傳功能，可支持拖拽文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06