下边这些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滚动,本站在之前已经发过类似文章,如:jQuery 回到顶部,下边将它们再次整理一下:
//滚动到顶部 $("html, body").animate({ scrollTop: "0px" }, 1000); //滚动到底部 //$("#container"):要滚动的元素 $("html, body").animate({ scrollTop: $("#container").height() }, 1000);
怎么使用 jQuery 判断元素是否存在,相信不少 jQuery 学习者都会问这个问题,方法很简单,如下:
8.使用 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 。
9.jQuery 禁用鼠标右键10.向由setTimeout()调用的方法中传参
$(document).ready(function() { timeout = setTimeout(function() { showMess("succeed") }, 2000); }); function showMess(m) { alert(m); }
$(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); });
12.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("神马"); } });
关于元素居中你可以先参考下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(); });
网友评论文明上网理性发言 已有0人参与
发表评论: