Python全栈-JavaScript】jQuery工具

jQuery工具

一、jQuery.browser.version

显示当前 IE 浏览器版本号。

if ( $.browser.msie )
 alert( $.browser.version );

二、jQuery.each(object, [callback])

通用遍历方法，可用于遍历对象和数组。

不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象。

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

区别 jquery $().each和$.each() 不同用法：

$().each 在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数，i就为遍历的索引。

遍历数组通常用$.each()来处理 例如：

var aa = [{name: "limeng", email: "xfjylimeng"}, {name: "hehe", email: "xfjylimeng"}]
        $.each(aa, function (i, n) {
            console.log("索引:" + i + "对应值为：" + n.name);
        });

参数i为遍历索引值，n为当前的遍历对象.
输出：
        索引:0对应值为：limeng
        索引:1对应值为：hehe    

var arr1 = ["one", "two", "three", "four", "five"];
        $.each(arr1, function () {
            console.log(this);
        });

输出：String {"one"}，String {"two"}，String {"three"}，String {"four"}，String {"five"}

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
        $.each(arr2, function (i, items) {
            $.each(items,function (j,v) {
                console.log(v);
            })
        })

输出：1,2,3,4,5,6,7,8,9

var obj = {one: 1, two: 2, three: 3, four: 4, five: 5};
        $.each(obj, function (key, val) {
            console.log(key+'===='+val);
        });

输出：one====1，two====2，three====3，four====4，five====5

三、理解jquery的$.extend()、$.fn和$.fn.extend()

原文链接：http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

Objectj Query.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options); 

结果：settings == { validate: true, limit: 5, name: "bar" }

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

结果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend(object);

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为： 当前点击对象内容

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。·

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的，在jQuery.js中到处体现这一点

四、jQuery.grep(array, callback, [invert])

使用过滤函数过滤数组元素。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

jQuery.grep(array, callback, [invert])

array:待过滤数组。

callback:此函数将处理数组每个元素。第一个参数为当前元素，第二个参数而元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。

invert:（默认为false）如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

示例：

　　过滤数组中小于 0 的元素。

$.grep( [0,1,2], function(n,i){
  return n > 0;
});

结果：[1, 2]

　　排除数组中大于 0 的元素，使用第三个参数进行排除

$(document).ready(function () {
        var gp = $.grep([0, 3, 6], function (n, i) {
            console.log('n=', n, ' i=',i);
            return n > 0;
        }, true)
        console.log(gp)

结果：n= 0  i= 0 , n= 3  i= 1 , n= 6  i= 2
         [0]