一些实用的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学习上和大家分享!