DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 一些實用的jQuery代碼片段收集
一些實用的jQuery代碼片段收集
編輯:JQuery特效代碼     
下邊這些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學習上和大家分享!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved