jQuery 实战开发中切身总结的一些用法,非常有用,留着慢慢改

1.静态方法,不需要实体
$.extend({

  add:function(a,b){return a+b;}

});
为实体添加方法
$.fn.extend({:});

2.闭包的基本写法:
(function(){do someting})();
//这个你就理解为定义一个匿名函数并立即执行
带参数的话就这样:
(function(形参){do someting})(实参);
另外
(function(){var upc="i am upc"})();
alert(upc);
会提示undefined。
因为闭包后,里面的变量就相当于局部了。

闭包的好处:
不增加额外的全局变量,
执行过程中所有变量都是在匿名函数内部。

寓尔看过几眼jQuery插件的代码,发现这样的代码很是希奇:
(function($){

   js code...

})(jQuery);

从未深究,今天突然想明白了。

实际上,上边的代码就是一个js函数调用。

以下这部份

(function($){

   js code...

})
相当于是函数;

(jQuery) 则是函数调用时的参数列表。

以上代码等价于如下代码:

function test($){

   js code...

}

test(jQuery);

3.jQuery对象转换dom对象,因为jQuery对象本身是一个集合 所以要取出一个
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;


4.如何获取jQuery集合的某一项
$("div").eq(2).html(); //调用jquery对象的方法    eq取得的是jQuery对象
$("div").get(2).innerHTML; //调用dom的方法属性    get取得的是dom对象


5.集合处理功能:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){.html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

6.扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
+",min="+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});

8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class


9、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

1.直接取id 是通过原生态的 getElementById() 比较快 var tt = $("#abc");
  从最近的id继承也比较快 var tt = $("#abc input");

2.class前紧挨着加标签名
    <input class="on" />
    var act = $("input.on");

3.将jquery对象缓存起来

新手
    $("#traffic_light input.on").bind("click", function(){  });
    $("#traffic_light input.on").css("border", "1px dashed yellow");
    $("#traffic_light input.on").css("background-color", "orange");
    $("#traffic_light input.on").fadeIn("slow");
应该写成
    var $active_light = $("#traffic_light input.on");
    $active_light.bind("click", function(){  });
    $active_light.css("border", "1px dashed yellow");
    $active_light.css("background-color", "orange");
    $active_light.fadeIn("slow");
可以进行链式操作
 var $active_light = $("#traffic_light input.on");
    $active_light.bind("click", function(){  })
                        .css("border", "1px dashed yellow")
                        .css("background-color", "orange")
                        .fadeIn("slow");

4,对直接的DOM操作进行限制
    var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
    for (var i=0, l=top_100_list.length; i<l; i++){
       top_100_li += "<li>" + top_100_list[i] + "</li>";
    }
    $mylist.html(top_100_li);

先缓存到变量里 集合在一起去放入dom节点


5 . 冒泡

   $("#entryform").bind("focus", function(e){
        var $cell = $(e.target); // e.target 捕捉到触发的目标元素
        $cell.addClass("selected");
    }).bind("blur", function(e){
        var $cell = $(e.target);
        $cell.removeClass("selected");
    });

6,推迟到 $(window).load
一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。

7,压缩JavaScript

8,给选择器一个上下文

1. 尽量使用最新版本的jQuery类库

2.过滤 $('a.button').filter(':animated');    // Uses it 只能用来显示filter方法是用来缩小collection。

3.如果性能是你关注的,那么使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

检查长度也是一个检查你的collection是否含有元素的方式。

4. 创建一个空的jQuery对象
创建一个新的jQuery空间能极大的减小开销。有时候,你可能需要创建一个空的对象,然后使用add()方法添加对象。
var container = $([]);
container.add(another_element);

5. 选择一个随机元素
(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');



6. 将你的代码转化成jQuery插件

如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:

(function($){
    $.fn.yourPluginName = function(){
        // Your code goes here
        return this;
    };
})(jQuery);

7.  设置全局AJAX为缺省

如果你开发ajax程序的话,你肯定需要有”加载中“之类的显示告知用户,ajax正在进行,我们可以使用如下代码统一管理,如下:

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url            : '/ajax/',
    dataType    : 'json'
});

$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});

$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});

/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

8. 在动画中使用delay()方法


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值