搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

分享一些实用的jQuery的交互代码

作者：前端菜鸟2018.01.03来源：Web前端之家浏览：10689评论:0
关键词：JQueryJS

下边这些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 
    } 
    }); 
});
6.jQuery 滚动到顶部/底部
关于jQuery滚动，本站在之前已经发过类似文章，如：jQuery 回到顶部，下边将它们再次整理一下： 

//滚动到顶部 
$("html, body").Animate({ scrollTop: "0px" }, 1000); 
//滚动到底部 
//$("#container"):要滚动的元素 
$("HTML, body").animate({ 
scrollTop: $("#container").height() 
}, 1000);
7.jQuery 判断元素是否存在
怎么使用 jQuery 判断元素是否存在，相信不少 jQuery 学习者都会问这个问题，方法很简单，如下： 

if ($(" #elementid").length) { 
//元素存在 
}
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 禁用鼠标右键 

$(document).ready(function() { 
$(document).bind("contextmenu", function() { 
return false; 
}); 
});
10.向由setTimeout()调用的方法中传参 

$(document).ready(function() { 
timeout = settimeout(function() { 
showMess("succeed") 
}, 2000); 
}); 
function showMess(m) { 
alert(m); 
}
11.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); 
});

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("神马"); 
} 
});
13.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(); 
});
14.jQuery 判断图像是否被完全加载进来 

$("#demoImg").attr("src", "demo.jpg").load(function() { 
alert("图片加载完成"); 
});

如果你有什么实用的 jQuery 代码片段，欢迎在 jQuery学习上和大家分享！

赏您的支持是我们创作的动力！
温馨提示：本文作者系 ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://www.jiangweishan.com/article/svg1488124800544.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章