首页 > 代码库 > jQuery 核心01
jQuery 核心01
jQuery.contains( container,contained )
检查一个DOM元素是否为另一个元素的后代。只要是后代$.contains()就返回 true ,负责返回 false 。
$.contains( document.documentElement, document.body ); // true $.contains( document.body, document.documentElement ); // false
jQuery.each( collection,callback(indexInArray,ValueOfElement))
通过长度属性来迭代数字索引,从0到length-1。
$.each()不同于$(element).each() 。$.each()用于迭代任何集合,无论是“名/值”对象或数组;$(element).each()专门用来遍历jQuery对象。
// 迭代一个数组,并同时访问迭代元素及它的索引 $.each( [‘a‘,‘b‘,‘c‘], function(i, l){ alert( "Index #" + i + ": " + l ); });
// 迭代一个对象,并同时访问它的键和值 $.each( { name: "John", lang: "JS" }, function(k, v){ alert( "Key: " + k + ", Value: " + v ); });
jQuery.extend( target[,object1 ][,objectN])
将两个或更多对象内容合并成为一个对象。
// 这样的合并方式object1将被修改 var object = $.extend(object1, object2);
// 这样的操作不影响object1 var object = $.extend({}, object1, object2);
jQuery.fn.extend( object )
将一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.fn.extend demo</title> <style> label { display: block; margin: .5em; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <label><input type="checkbox" name="foo"> Foo</label> <label><input type="checkbox" name="bar"> Bar</label> <script> jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); // 选中状态 }, uncheck: function() { return this.each(function() { this.checked = false; }); // 没有选中 } }); $( "input[type=‘checkbox‘]" ).check(); </script> </body> </html>
jQuery.globalEval( code )
在全局上下文执行JavaScript代码。
此方法不同于JavaScript evel() ,因为他在全局上下文执行。(这对加载外部动态脚本很重要)
jQuery.grep( array,function( elementOfArray,indexInArray )[,invert] )
$.grep() 函数使用指定的函数过滤数组中的元素,并返回过滤后的数组;原始数组不受影响。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div></div> <p></p> <span></span> <script> var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; $("div").text(arr.join(", ")); // 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 4); }); $("p").text(arr.join(", ")); //1, 9, 4, 7, 3, 8, 6, 9, 1 arr = jQuery.grep(arr, function (a) { return a != 9; }); $("span").text(arr.join(", ")); // 1, 4, 7, 3, 8, 6, 1 </script> </body> </html>
jQuery.inArray( value,array[,fromIdex] )
在数组中查找指定值并返回它的索引(如果没有找到,返回 -1)。
value:要查找的值。
array:数组。
fromIndex:数组索引值,表示在哪里开始查找,默认值为0,查找整个数组。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> div { color: blue; } span { color: red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>"John" found at <span></span></div> <div>4 found at <span></span></div> <div>"Karl" not found, so <span></span></div> <div>"Pete" is in the array, but not at or after index 2, so <span></span></div> <script> var arr = [4, "Pete", 8, "John"]; var $spans = $("span"); $spans.eq(0).text(jQuery.inArray("John", arr)); // "John" found at 3 $spans.eq(1).text(jQuery.inArray(4, arr)); // 4 found at 0 $spans.eq(2).text(jQuery.inArray("Karl", arr)); //"Karl" 没有找到 -1 $spans.eq(3).text(jQuery.inArray("Pete", arr, 2)); //"Pete"在数组里,但索引2不是它 -1 </script> </body> </html>
jQuery.isArray( obj )
用来检测一个对象是否是一个JavaScript数组。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>[]是数组吗? <b></b></p> // 页面显示: []是数组吗? true <script> $("b").append("" + $.isArray([])); </script> </body> </html>
jQuery.isEmptyObject( obj )
检查一个对象是否为空(不包含任何属性)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script> $(function () { function fun( html ){ document.body.innerHTML += "<p>" + html; } fun($.isEmptyObject({})); // true fun($.isEmptyObject({ foo: "bar" })); // false }) </script> </body> </html>
jQuery.isFunction( obj )
确定参数是否为函数:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> div { color:blue; margin:2px; font-size:14px; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>jQuery.isFunction(objs[0]) = <span></span></div> // true <div>jQuery.isFunction(objs[1]) = <span></span></div> // false <div>jQuery.isFunction(objs[2]) = <span></span></div> // false <div>jQuery.isFunction(objs[3]) = <span></span></div> // true <div>jQuery.isFunction(objs[4]) = <span></span></div> // false <script> function stub() {} var objs = [ function() {}, { x: 15, y: 20 }, null, stub, "function" ]; jQuery.each(objs, function(i) { var isFunc = jQuery.isFunction(objs[i]); $("span").eq(i).text(isFunc); }); </script> </body> </html>
jQuery.isNumeric( value )
确定它的参数是否是一个数字,如果是返回 true,否则返回 false。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script> $(function() { function fun(html) { document.body.innerHTML += "<br>" + html; } // true fun($.isNumeric("-10")); fun($.isNumeric("0")); fun($.isNumeric(0xFF)); fun($.isNumeric("0xFF")); fun($.isNumeric("8e5")); fun($.isNumeric("3.1415")); fun($.isNumeric(+10)); fun($.isNumeric(0144)); //false fun($.isNumeric("-0x42")); fun($.isNumeric("7.2acdgs")); fun($.isNumeric("")); fun($.isNumeric({})); fun($.isNumeric(NaN)); fun($.isNumeric(null)); fun($.isNumeric(true)); fun($.isNumeric(Infinity)); fun($.isNumeric(undefined)); }) </script> </body> </html>
jQuery.isPlainObject( obj )
测试一个对象是否为一个纯碎的对象。
jQuery.isPlainObject({}) // true jQuery.isPlainObject("test") // false
jQuery.isWindow( obj )
确定参数是否为一个window对象。
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>我是一个窗口对象吗? <b></b></p> //我是一个窗口对象吗? true <script> $("b").append( "" + $.isWindow(window) ); </script> </body> </html>
jQuery.isXMLDoc( obj )
检查一个DOM节点是否在XML文档中。
jQuery.isXMLDoc(document) // false jQuery.isXMLDoc(document.body) // false
jQuery.makeArray( obj )
转化一个类似数组的对象成为一个真正的数组。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <style> div { color: red; } </style> </head> <body> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> <script> var elems = document.getElementsByTagName("div"); var arr = jQuery.makeArray(elems); arr.reverse(); console.log(arr.reverse()); // [div, div, div, div] $(arr).appendTo(document.body); </script> </body> </html>
jQuery.map( array,callback( elementOfArray,indexInArray ) )
将一个数组中的所有元素转化到另一个数组中。
array:数组。
callback(elementOfArray, indexInArray):第一个参数是数组元素,第二个参数是该元素的索引。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div></div> <p></p> <span></span> <script> var arr = ["a", "b", "c", "d", "e"]; $("div").text(arr.join(", ")); // a, b, c, d, e arr = jQuery.map(arr, function(n, i) { return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); // A0, B1, C2, D3, E4 arr = jQuery.map(arr, function(a) { return a + a; }); $("span").text(arr.join(", ")); //A0A0, B1B1, C2C2, D3D3, E4E4 </script> </body> </html>
jQuery 核心01