jQuery 核心01
阿新 • • 發佈：2017-07-21
undefine name rep ever ring 在哪裏 john emp array
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() ，因為他在全局上下文執行。（這對加載外部動態腳本很重要）
var name = "全局變量"; $(function () { function test(){ var name = "局部變量"; alert(name); // 局部變量 eval( "alert(name);" ); // 局部變量 $.globalEval( "alert(name);" ); // 全局變量 } test(); })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