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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
vue中注册自定义的全局js方法
Nov 15 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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
layui使用label标签的方法
2019/09/14 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python发送邮件实例分享
2017/07/28 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python中退出多层循环的方法
2018/11/27 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python模拟斗地主发牌
2020/04/22 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
房展策划方案
2014/06/07 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书