jquery学习手记（1）

2020-01-07 18:06:55

1.$ vs $()

$()方法中的参数是jQuery选择器并调用该选择器的方法，格式如下所示： $.fn,例子：$("h1").remove();自动接收和返回该选择器的动作。
$ 方法通常是工具类方法,不和选择器一起使用; 它们不会自动传递任何参数, 并且它们的返回值是样式多样的

2.$( document ).ready() vs $( window ).load(function(){ ... })

$( document ).ready() 方法当页面的 DOM (Document Object Model) 加载完成时就可以执行。

$( window ).load(function(){ ... }) 方法当整个页面（图片和子帧）都完全加载后，不只是DOM加载完成，才能运行。

示例代码如下：

1 // A $( document ).ready() block
2 $( document ).ready(function() {
3   console.log("ready!");
4 });

或者更简洁的方法：

1 // Shorthand for $( document ).ready()
2 $(function() {
3   console.log("ready!");
4 });

传递一个自定义的function到ready（）而不是匿名function.

1 // Passing a named function instead of an anonymous function
2  
3 function readyFn( jQuery ) {
4   // code to run when the document is ready
5 }
6  
7 $( document ).ready( readyFn );
8 // OR
9 $( window ).load( readyFn );

一个完整的实例如下：

 1 <html>
 2   <head>
 3     <script src="https://image.z.itpub.net/zitpub.net/JPG/2020-01-07/444D9DD0F480A71C3773B1E860348949.jpg"></script>
 4     <script>
 5       $( document ).ready(function() {
 6         console.log("document loaded");
 7       });
 8  
 9       $( window ).load(function() {
10         console.log("window loaded");
11       });
12     </script>
13     </head>
14     <body>
15       <iframe src="https://image.z.itpub.net/zitpub.net/JPG/2020-01-07/C1FE6C2964FCB0BAF2583172F0D6338D.jpg"></iframe>
16     </body>
17 </html>