web前端|js教程
代码片段
web前端-js教程
下边这些jQuery片段只是很少的一部分，如果您在学习过程中也遇到过一些常用的jQuery代码，欢迎分享。下边就让我们看看这些有代码片段。
京东注册源码,vscode设置tab长度,ubuntu 汉语输入,tomcat变量配置vm,robots爬虫协议,php网盘解析,梧州市seo优化价格,免费文化传媒网站源码下载,php模板教程lzw
1.jQuery得到用户IP：
帝国免费源码,永久修改ubuntu地址,爬虫被限制ip,为自己的网站做php搜索引擎,Seo是韩语lzw
$.getJSON("?callback=?", function (data) {
alert("Your ip: " + data.ip);
});
2.jQuery查看图片的宽度和高度：
asp 源码加密软件,VScode变成蓝色,ubuntu怎么搜索命令,tomcat排除问题,sqlite可以存储什么,好看的tree插件,前端框架怎么学习测试,爬虫系统哪个最好,php判断对象,seo基础教程视频教程,小偷采集网站源码带后台,记账 网页模板,马克斯cms影视模板,html5 好看的提示页面,简单图书管理系统delphi,微信小程序全民经纪人lzw
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 = \;
}
count--;
}, 1000);
});
2.jQuery 判断浏览器类型及版本号
jQuery 判断浏览器类型及版本号非常简单，可以直接使用 $.browser 方法进行判断。但我自己试验时发现在判断 Chrome 浏览器时，返回的是 Safari，在网上找了下，于是有了下边的代码：
var browserName = navigator.userAgent.toLowerCase();
mybrowser = {
version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [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( op, ($(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学习上和大家分享！
