jQuery 核心01
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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() ，因为他在全局上下文执行。（这对加载外部动态脚本很重要）
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的主要内容，如果未能解决你的问题，请参考以下文章