- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - 实用程序
Jquery 以 $(name space) 的形式提供了一些实用程序。这些方法有助于完成编程任务。一些实用方法如下所示。
$.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 用于提供有关浏览器的信息
jQuery.each( jQuery.browser, function( i, val ) { $( "<div>" + i + " : <span>" + val + "</span>" ) .appendTo( document.body ); });
$.contains()
$.contains() 用于在第二个参数提供的 DOM 元素是第一个参数提供的 DOM 元素的后代时返回 true,无论它是直接子元素还是嵌套得更深。
$.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; }); } }); // Use the newly created .check() method $( "input[type = 'checkbox']" ).check(); </script> </body> </html>
它提供的输出如下所示 -
$.isWindow()
$.isWindow() 用于识别窗口
<!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() 用于执行队列中的下一个函数
<!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>
它提供的输出如下所示 -