jQuery 实用代码片段集合

实用jquery代码片段集合[上] 加载google的jquery库 1. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”>

有利于加快加载速度（已经得到验证）。

修改图片src更新图片 1. $(imageobj).attr(‘src’, $(imageobj).attr(‘src’) + ‘?’ + Math.random() ); （这是很实用的技巧，曾经有人问明河，为什么他已经修改了图片的src，但图片没变化呢？原因在于缓存，给图片路径后加个随机数参数即可。

加载多张图片，判断加载完成状态 1. var totalimages = 10; 2. var loadedimages = 0; 3. $(“”).load(function() { 4. ++loadedimages; 5. if(loadedimages == totalimages){ 6. //全部图片加载完成时„.. 7. } 8. });

双击不选中文本 1. var clearSelection = function () { 2. if(document.selection && document.selection.empty) { 3. document.selection.empty(); 4. } else if(window.getSelection) { 5. var sel = window.getSelection(); 6. sel.removeAllRanges(); 7. } 8. } 9. 10. $(element).bind(‘dblclick’,function(event){ 11. clearSelection(); 12. });

对一个列表进行排序 1.

1. var items = $(‘.to_order li’).get(); 2. 3. items.sort(function(a,b){ 4. var keyA = $(a).text(); 5. var keyB = $(b).text(); 6. if (keyA < keyB) return -1; 7. if (keyA > keyB) return 1; 8. return 0; 9. }); 10. var ul = $(‘.to_order’); 11. $.each(items, function(i, li){ 12. ul.append(li); 13. });

（中文无效）

绑定右击事件 1. $(document).ready(function(){ 2. $(document).bind(“contextmenu”,function(e){ 3. return false; 4. }); 5. });

扩展jquery的对象选择器 1. $.extend($.expr[':'], { 2. //选择器名 3. moreThanAThousand : function (a){ 4. return parseInt($(a).html()) > 1000; 5. } 6. }); 7. $(document).ready(function() { 8. $(‘td:moreThanAThousand’).css(‘background-color’, ‘#ff0000′); 9. });

检查对象是否存在 1. if ($(“#elementid”).length) { 2. //„„ 3. }

取消一个ajax请求 1. var req = $.ajax({ 2. type: “POST”, 3. url: “someurl”, 4. data: “id=1″, 5. success: function(){ 6. 7. } 8. }); 9. //取消ajax请求 10. req.abort()

检查cookies是否可用 1. $(document).ready(function() { 2. var dt = new Date(); 3. dt.setSeconds(dt.getSeconds() + 60); 4. document.cookie = “cookietest=1; expires=” + dt.toGMTString(); 5. var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1; 6. if(!cookiesEnabled){ 7. //cookies不能用„„.. 8. } 9. });

获取当前元素在元素集内的索引值 1. $(“ul > li”).click(function () { 2. var index = $(this).prevAll().length; 3. }); 如果你用的是jquery1.4，明河推荐使用以下方法： 1. $(“ul > li”).click(function () { 2. var index = $(this).index(); 3. });

让一个元素相对于屏幕居中 1. jQuery.fn.center = function () { 2. this.css(“position”,”absolute”); 3. this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”); 4. this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”); 5. return this; 6. } 7. $(element).center();

这个方法非常实用，明河严重推荐收藏

获取当前页面的URL 1. $(document).ready(function() { 2. var pathname = window.location.pathname; 3. });

实用jquery代码片段集合[下] 如何隐藏除了特定选择器下的全部对象 1. $(‘#target div:not(#exclude)’).hide(); 2. //或者 3. $(‘#target’).children().filter(‘:not(#exclude)’).hide(); filter()起到过滤的作用。 寻找带有指定字符串的元素 1. var foundin = $(‘*:contains(” 明河”)’); 获取垂直滚动距离 1. alert($(document).scrollTop()); scrollTop()非常实用的一个方法。

向表格追加一行数据 1. $(‘#myTable tr:last’).after(‘„’); 超过一个属性时的过滤 1. var elements = $(‘#someid input[type=sometype][value=somevalue]‘).get(); 让cookies在X分钟后过期 1. var date = new Date(); 2. date.setTime(date.getTime() + (x * 60 * 1000)); 3. $.cookie(‘example’, ‘foo’, { expires: date });

选择从第一个到第X个的元素 1. //从第一个到第10个 2. $(‘a’).slice(0,10); 3. //或者 4. $(‘a:lt(10)’);

获取客户端的IP 1. $.getJSON(“http://jsonip.appspot.com?callback=?”,function(data){ 2. alert( “你的IP：” + data.ip); 3. }); 这是利用了jsonip.appspot.com提供的取IP服务。 解析XML数据源 1. 2. 3. 4. 1 5. title1 6. desc1 7. 8. 9. 2 10. title2 11. desc2 12. 13. 14.

1. $.get(‘file.xml’,{},function(data){ 2. $(‘item’,data).each(function(){ 3. var $this       = $(this); 4. var id             = $this.find(‘id’).text(); 5. var title         = $this.find(‘title’).text(); 6. var description = $this.find(‘description’).text(); 7. //do something „ 8. }); 9. });

获取在id中的数字 1.

1. $(“#sites a”).click(function(){ 2. var $this     = $(this); 3. var nmb     = $this.attr(‘id’).match(/site_(\d+)/)[1]; 4. „