返回小栈
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>
复制代码
0
0