- 浏览: 183965 次
- 性别:
- 来自: 深圳
文章分类
最新评论
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学习上和大家分享!
发表评论
文章已被作者锁定,不允许评论。
-
使用SignalR构建一个最基本的web聊天室
2015-01-06 15:09 733使用SignalR,可以使用服务器消息推送到客户端,件demo ... -
lazyload异步加载图片
2014-12-24 15:18 494如果一个网页很长并且有很多图片的话,下载图片就需要很多时间 ... -
checbox,redio超强样式运用
2013-06-04 16:49 759<html xmlns="http://ww ... -
一个避免用户重复点击按钮造成重复数据的小技巧
2013-01-13 16:13 1179<script> //启用 ... -
.net 用JQuery+ajax实现批量上传图片
2012-08-07 23:15 1468先看效果图 点击增加按钮,会增加一个选择框, ... -
类似QQ选择组
2012-04-11 19:07 719<style>td {font:12px;}.ti ... -
javascript弹出窗口大全
2011-09-21 20:27 662关键字: 弹出窗口 如何利用网页弹出各种形式的窗口,我想大家大 ... -
合并单元格
2011-07-21 17:33 847<html ><head><me ... -
10大Ajax开发守则
2011-06-08 14:14 7461.前、端后都要做好安全的把关工作不能单靠前端做安全验证工作, ... -
Asp.net前台调后台方法
2011-05-30 16:51 1493 这个当然不用说大家都知道的一种就是ajax ... -
jQuery中常用的函数方法汇总
2011-05-23 00:16 754事件处理 ready(fn) 代 ... -
jquery选择器,过滤器介绍
2011-05-19 19:20 855一、JQuery与JavaScript 1.Jav ... -
jquery常用过滤选择器
2011-05-19 19:18 706过滤选择器主要 ... -
jquery函数
2011-05-18 23:25 662函数:after(content)功能:在每个匹配的元素后面添 ...
相关推荐
50个jquery代码片段50个jquery代码片段
60个实用的jQuery代码片段.pdf
45个jquery代码片段,希望这些代码能够给你的javascript项目提供帮助。。
10 个很棒的 jQuery 代码片段 - 代码分享
高效Web开发的10个jQuery代码片段_.docx
本文主要介绍了常用的几个JQuery代码片段。具有很好的参考价值。下面跟着小编一起来看下吧
10个超实用的jQuery代码片段 jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
49个jQuery代码经典片段,可直接使用
jQuery选择器大全(48个代码片段 21幅图演示)
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2 才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。
下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享。下边就让我们看看这些有代码片段。 1.jQuery得到用户IP: 代码如下: $.getJSON(...
NULL 博文链接:https://dodomail.iteye.com/blog/1906673
主要介绍了12个实用的jQuery代码片段,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下
主要介绍了12个超实用的JQuery代码片段,代码简洁,具有实用价值,感兴趣的小伙伴们可以参考一下
Jquery必备 必学的7个代码片段 帮助 教程 教材
本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。 1. 导航菜单背景切换效果 在项目的前端页面里,相...
本文实例总结了jQuery实用代码片段。分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this...