jQuery - 工具函数
jQuery 提供了几种以 $(namespace) 格式的工具函数。这些方法有助于完成编程任务。以下是一些工具函数示例。
$.trim()
$.trim() 用于移除字符串首尾的空白字符。
$.trim( " lots of extra whitespace " );
$.each()
$.each() 用于遍历数组和对象。
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
console.log( k + " : " + v );
});
.each() 可以对选择器调用，用于遍历选择器中包含的元素。对于选择器中的元素遍历，应使用 .each() 而非 $.each()。
$.inArray()
$.inArray() 用于返回数组中指定值的索引，如果值不在数组中则返回 -1。
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}
$.extend()
$.extend() 用于使用后续对象的属性来更改第一个对象的属性。
var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );
$.proxy()
$.proxy() 用于返回一个始终在指定作用域中运行的函数，即将传入函数内部的 this 设置为第二个参数。
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();
$.browser
$.browser 用于提供浏览器信息。
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});
$.contains()
$.contains() 用于检查第二个参数提供的 DOM 元素是否是第一个参数提供的 DOM 元素的后代（无论是直接子元素还是更深层的嵌套）。
$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );
$.data()
$.data() 用于提供数据信息。
<html lang = "en">
<head>
<title>jQuery.data demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {
first: 25,
last: "tutorials"
});
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );
</script>
</body>
</html>
输出结果如下：
The values stored were 25 and tutorials
$.fn.extend()
$.fn.extend() 用于扩展 jQuery 原型
<html lang = "en">
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<label><input type = "checkbox" name = "android">
Android</label>
<label><input type = "checkbox" name = "ios"> IOS</label>
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// 使用新创建的 .check() 方法
$( "input[type = 'checkbox']" ).check();
</script>
</body>
</html>
输出结果如下所示 −
$.isWindow()
$.isWindow() 用于识别 window 对象
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.isWindow demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
</body>
</html>
输出结果如下所示 −
$.now()
它返回一个表示当前时间的数字
(new Date).getTime()
$.isXMLDoc()
$.isXMLDoc() 用于检查一个文件是否为 XML
jQuery.isXMLDoc( document ) jQuery.isXMLDoc( document.body )
$.globalEval()
$.globalEval() 用于全局执行 JavaScript 代码
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();
$.dequeue()
$.dequeue() 用于执行队列中的下一个函数
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.dequeue demo</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: green;
border-radius: 50px;
}
div.red {
background-color: blue;
}
</style>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" )
.animate({ left: '+ = 400px' }, 2000 )
.animate({ top: '0px' }, 600 )
.queue(function() {
$( this ).toggleClass( "red" );
$.dequeue( this );
})
.animate({ left:'10px', top:'30px' }, 700 );
});
</script>
</body>
</html>
输出结果如下所示 −