jQuery代码开发技巧收集,jquery常用的开发代码

今天分享一个jquery常用的开发代码，大部分是网友总结的，总共60条。后期我也会陆续完善！ 把我在开发中常用的写在这里，希望持续关注~~

1. 使用siblings()来处理同类元素

// Rather than doing this
$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});
// Do this instead
$('#nav li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

2. 选择或者不选页面上全部复选框

var tog = false; // or true if they are checked on load
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

3. 基于输入文字过滤页面元素

//If the value of the element matches that of the entered text
//it will be returned
$('.gbin1Class').filter(function() {
    return $(this).attr('value') == $('input#gbin1Id').val() ;
 })

4. 取得鼠标的X和Y坐标

$(document).mousemove(function(e){
$(document).ready(function() {
$().mousemove(function(e){
$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
});
});

5. 使得整个列表元素(LI)可点击

$("ul li").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});
<UL>
<LI><A href="#">GBin1 Link 1</A></LI>
<LI><A href="#">GBin1 Link 2</A></LI>
<LI><A href="#">GBin1 Link 3</A></LI>
<LI><A href="#">GBin1 Link 4</A></LI>
</UL>

6. 使用jQuery来解析XML

function parseXml(xml) {
  //find every Tutorial and print the author
  $(xml).find("Tutorial").each(function()
  {
  $("#output").append($(this).attr("author") + "");
  });
}

7. 判断一个图片是否加载完全

$('#theGBin1Image').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});

8. 使用jQuery命名事件

//Events can be namespaced like this
$('input').bind('blur.validation', function(e){
    // ...
});
//The data method also accept namespaces
$('input').data('validation.isValid', true);

9. 判断cookie是否激活或者关闭

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 have not been enabled
}

10.强制过期cookie

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

11. 使用一个可点击的链接替换页面中所有URL

$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<A href="$1">$1</A>')
            );
        });
        return $(this);
    }
//usage
$('#GBin1div').replaceUrl(); 

12. 在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助：

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

引子

在做关于钱的项目的时候，特别是钱很多的时候，经常要对货币进行格式化。如下图：

画红圈的货币，是三位一隔，对货币数字进行了拆分，那么这个是如何做到的呢？下面分享一下货币格式化的函数。

JS对货币格式化函数

引子

如何对拿到的json数据进行搜索和查询呢？前面我的一篇博客中已经提到了JsonSQL，请看 http://www.haorooms.com/post/jquery_ajax_wg 这几天用了一下，说说方法和感受吧~~

json数据查询的方法

网上看到有一篇帖子，有8种json数据查询的方法，大家可以研究一下，我现在分享一下！

JsonSQL

JsonSQL实现了使用SQL select语句在json数据结构中查询的功能。

例子：

$.getJSON("testjson.js", function(a){
    console.dir(jsonsql.query("select * from json.channel.items order by title desc,json",a));
});

项目背景

递归函数通常在后端用的比较多。对于后端开发人员来说，递归应该是小菜一碟，很简单的事情，但是很多前端确对这个不是很了解。其实，前端中也是经常用递归的，最简单的例子，我之前的一篇博客，讲过setTimeout(),http://www.haorooms.com/post/js_setTimeout 其中，setTimeout中让一个数没个一秒增加1，不断重复执行，就是一个简单的递归！ 说白了，递归就是函数自己调用自己。很简单，没有那么可怕！js的另外一个难点就是闭包，闭包和递归，很多前端望而生畏，关于闭包，您可以看http://www.haorooms.com/post/js_bb

js递归调用

// 一个简单的阶乘函数  
var f = function (x) {  
    if (x === 1) {  
        return 1;  
    } else {  
        return x * f(x - 1);  
    }  
};  

Javascript中函数的巨大灵活性，导致在递归时使用函数名遇到困难，对于上面的变量式声明，f是一个变量，所以它的值很容易被替换：

var fn = f;  
f = function () {};  

函数是个值，它被赋给fn，我们期待使用fn(5)可以计算出一个数值，但是由于函数内部依然引用的是变量f，于是它不能正常工作了。

所以，一旦我们定义了一个递归函数，便须注意不要轻易改变变量的名字。

上面谈论的都是函数式调用，函数还有其它调用方式，比如当作对象方法调用。

我们常常这样声明对象：

var obj1 = {  
    num ： 5，  
    fac ： function (x) {  
        // function body  
    }  
};  

声明一个匿名函数并把它赋值给对象的属性（fac）。

如果我们想要在这里写一个递归，就要引用属性本身：

var obj1 = {  
    num : 5,  
    fac : function (x) {  
        if (x === 1) {  
            return 1;  
        } else {  
            return x * obj1.fac(x - 1);  
        }  
    }  
}; 

当然，它也会遭遇和函数调用方式一样的问题：

var obj2 = {fac: obj1.fac};  
obj1 = {};  
obj2.fac(5); // Sadness  

方法被赋值给obj2的fac属性后，内部依然要引用obj1.fac，于是…失败了。