jQuery - 工具集合

jQuery - 工具集合 首页 / jQuery入门教程 / 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()用于返回将始终在提供的范围内运行的函数,即,将传递的函数内部的含义设置为第二个参数

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()

如果第二个参数提供的DOM元素是第一个参数提供的DOM元素的子元素(无论是直接子元素还是嵌套得更深),则$.contains()用于返回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>

它提供如下所示的输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-utilities.html

来源:LearnFk无涯教程网

$.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>

它提供如下所示的输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-utilities.html

来源:LearnFk无涯教程网

$.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>

它提供如下所示的输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-utilities.html

来源:LearnFk无涯教程网

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入浅出gRPC -〔李林锋〕

Linux实战技能100讲 -〔尹会生〕

架构实战案例解析 -〔王庆友〕

Service Mesh实战 -〔马若飞〕

Linux内核技术实战课 -〔邵亚方〕

技术管理案例课 -〔许健〕

徐昊 · TDD项目实战70讲 -〔徐昊〕

说透元宇宙 -〔方军〕

超级访谈:对话毕玄 -〔毕玄〕

好记忆不如烂笔头。留下您的足迹吧 :)