jquery实用代码片段集合


Posted in Javascript onAugust 12, 2010

加载google的jquery库

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

有利于加快加载速度(已经得到验证)。

修改图片src更新图片

$(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.random() );

这是很实用的技巧,曾经有人问明河,为什么他已经修改了图片的src,但图片没变化呢?原因在于缓存,给图片路径后加个随机数参数即可。

加载多张图片,判断加载完成状态

var totalimages = 10;
var loadedimages = 0;
$("<img/>").load(function() {
++loadedimages;
if(loadedimages == totalimages){
//全部图片加载完成时…..
 }
 });

双击不选中文本

var clearSelection = function () {
if(document.selection && document.selection.empty) {
 document.selection.empty();
 } else if(window.getSelection) {
var sel = window.getSelection();
 sel.removeAllRanges();
 }
 }

 $(element).bind('dblclick',function(event){
 clearSelection();
 });

对一个列表进行排序

<ul>
<li>cloud</li>
 <li>sun</li>
 <li>rain</li>
 <li>snow</li>
 </ul

var items = $('.to_order li').get();

 items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
 });
var ul = $('.to_order');
 $.each(items, function(i, li){
 ul.append(li);
 });

(中文无效)
绑定右击事件

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
return false;
 });
 });

 扩展jquery的对象选择器

$.extend($.expr[':'], {
//选择器名
 moreThanAThousand : function (a){
return parseInt($(a).html()) > 1000;
 }
 });
 $(document).ready(function() {
 $('td:moreThanAThousand').css('background-color', '#ff0000′);
 });

 检查对象是否存在

if ($("#elementid").length) {
//……
}

取消一个ajax请求

var req = $.ajax({
type: "POST",
url: "someurl",
data: "id=1″,
success: function(){

}
});
//取消ajax请求
req.abort()

检查cookies是否可用

$(document).ready(function() {
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled){
//cookies不能用……..
}
});

获取当前元素在元素集内的索引值

$("ul > li").click(function () {
var index = $(this).prevAll().length;
 });
//如果用的是jquery1.4,明河推荐使用以下方法:
 $("ul > li").click(function () {
var index = $(this).index();
 });

 让一个元素相对于屏幕居中

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;
}
$(element).center();

这个方法非常实用,明河严重推荐收藏
获取当前页面的URL

$(document).ready(function() {
var pathname = window.location.pathname;
});

  

如何隐藏除了特定选择器下的全部对象

$('#target div:not(#exclude)').hide();
//或者
 $('#target').children().filter(':not(#exclude)').hide();

filter()起到过滤的作用。

寻找带有指定字符串的元素

var foundin = $('*:contains(" 明河")');

获取垂直滚动距离

alert($(document).scrollTop());

scrollTop()非常实用的一个方法。
向表格追加一行数据

$('#myTable tr:last').after('<tr>…</tr>');

超过一个属性时的过滤

var elements = $('#someid input[type=sometype][value=somevalue]').get();

让cookies在X分钟后过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

选择从第一个到第X个的元素

//从第一个到第10个
$('a').slice(0,10);
//或者
$('a:lt(10)');

获取客户端的IP

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
 alert( "你的IP:" + data.ip);
 });

这是利用了jsonip.appspot.com提供的取IP服务。
解析XML数据源

<?xml version="1.0″ ?>
<result>
<item>
<id>1</id>
<title>title1</title>
<description>desc1</description>
</item>
<item>
<id>2</id>
<title>title2</title>
<description>desc2</description>
</item>
<!? … ?>
</result>

$.get('file.xml',{},function(data){
$('item',data).each(function(){
var $this       = $(this);
var id             = $this.find('id').text();
var title         = $this.find('title').text();
var description = $this.find('description').text();
//do something …
});
});

获取在id中的数字

<div id="sites">
<a id="site_1″ href="http://siteA.com">siteA</a>
<a id="site_2″ href="http://siteB.com">siteB</a>
<a id="site_3″ href="http://siteB.com">siteC</a>
…
</div>

$("#sites a").click(function(){
var $this     = $(this);
var nmb     = $this.attr('id').match(/site_(\d+)/)[1];
…
});

将类似12343778 转成 12.343.778的形式

var delimiter = '.';
 $('#result').html()
 .toString()
 .replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1″ + delimiter)
 .replace(/(\d{3})(?=\d)/g,"$1″ + delimiter);

这个正则值得收藏,颇为经典。
向firebug的控制面板发送消息

jQuery.fn.log = function (msg) {
 console.log("%s: %o", msg, this);
return this;
 };
 $('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

获取图片的宽高

var img = $('#imageid');
var theImage = new Image();
theImage.src = img.attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

Javascript 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
详解Vue之计算属性
Jun 20 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 #Javascript
javascript最常用与实用的创建类的代码
Aug 12 #Javascript
javascript中最常用的继承模式 组合继承
Aug 12 #Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 #Javascript
Javascript倒计时代码
Aug 12 #Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 #Javascript
JavaScript 通过模式匹配实现重载
Aug 12 #Javascript
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python之re操作方法(详解)
2017/06/14 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python程序 创建多线程过程详解
2019/09/23 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
绩效工资分配方案
2014/01/18 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
企业活动策划方案
2014/06/02 职场文书
安全目标责任书
2014/07/22 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
难以忽视的真相观后感
2015/06/05 职场文书