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 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php获取apk包信息的方法
2014/08/15 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
VueJS全面解析
2016/11/10 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
js new Date()实例测试
2019/10/31 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
教你安装python Django(图文)
2013/11/04 Python
python进阶教程之异常处理
2014/08/30 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python装饰器用法与知识点小结
2020/03/09 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
南京青奥会口号
2014/06/12 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
欠条样本
2015/07/03 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers