jQUery的基本操作总结

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>title>
 6     script src="js/jquery-1.12.4.js">script>
 7     script>
 8         // 1.第一种写法
 9         $(document).ready(function () {
10             // alert("hello lnj");
11         });
12 
13         // 2.第二种写法
14         jQuery(document).ready(function () {
15             // alert("hello lnj");
16         });
17 
18         // 3.第三种写法(推荐)
19         $(function () {
20             // alert("hello lnj");
21         });
22 
23         // 4.第四种写法
24         jQuery(function () {
25             alert("hello lnj");
26         });
27     script>
28 head>
29 body>
30 
31 body>
32 html>

 1 DOCTYPE html>
 2 html lang="en">
 3   head>
 4     meta charset="UTF-8" />
 5     title>title>
 6     script src="js/jquery-1.12.4.js">script>
 7     script>
 8       // 1.释放$的使用权
 9       // 注意点: 释放操作必须在编写其它jQuery代码之前编写
10       //         释放之后就不能再使用$,改为使用jQuery
11       // jQuery原理.noConflict();
12       // 2.自定义一个访问符号
13       var nj = jQuery.noConflict();
14       nj(function() {
15         alert("hello lnj");
16       });
17     script>
18   head>
19   body>body>
20 html>

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>title>
 6     script src="js/jquery-1.12.4.js">script>
 7     script>
 8         // $();/jQuery原理();就代表调用jQuery的核心函数
 9 
10         // 1.接收一个函数
11         $(function () {
12             alert("hello lnj");
13             // 2.接收一个字符串
14             // 2.1接收一个字符串选择器
15             // 返回一个jQuery对象, 对象中保存了找到的DOM元素
16             var $box1 = $(".box1");
17             var $box2 = $("#box2");
18             console.log($box1);
19             console.log($box2);
20             // 2.2接收一个字符串代码片段
21             // 返回一个jQuery对象, 对象中保存了创建的DOM元素
22             var $p = $("
我是段落");
23             console.log($p);
24             $box1.append($p);
25             // 3.接收一个DOM元素
26             // 会被包装成一个jQuery对象返回给我们
27             var span = document.getElementsByTagName("span")[0];
28             console.log(span);
29             var $span = $(span);
30             console.log($span);
31         });
32     script>
33 head>
34 body>
35 div class="box1">div>
36 div id="box2">div>
37 span>我是spanspan>
38 body>
39 html>

 1 DOCTYPE html>
 2 html lang="en">
 3   head>
 4     meta charset="UTF-8" />
 5     title>title>
 6     script src="js/jquery-1.12.4.js">script>
 7     script>
 8       $(function() {
 9         /*
10          * 1.什么是jQuery对象
11          * jQuery对象是一个伪数组
12          *
13          * 2.什么是伪数组?
14          * 有0到length-1的属性, 并且有length属性,其实就是一个对象
15          */
16         var $div = $("div");
17         console.log($div);
18         console.log($div[0].innerText);
19 
20         var arr = [1, 3, 5];
21         console.log(arr);
22       });
23     script>
24   head>
25   body>
26     div>div1div>
27     div>div2div>
28     div>div3div>
29   body>
30 html>

 1 DOCTYPE html>
 2 html lang="en">
 3   head>
 4     meta charset="UTF-8" />
 5     title>title>
 6     script>
 7       // 1.定义一个类
 8       function AClass() {}
 9       // 2.给这个类添加一个静态方法
10       // 直接添加给类的就是静态方法
11       AClass.staticMethod = function() {
12         alert("staticMethod");
13       };
14       // 静态方法通过类名调用
15       AClass.staticMethod();
16 
17       // 3.给这个类添加一个实例方法
18       AClass.prototype.instanceMethod = function() {
19         alert("instanceMethod");
20       };
21       // 实例方法通过类的实例调用
22       // 创建一个实例(创建一个对象)
23       var a = new AClass();
24       // 通过实例调用实例方法
25       a.instanceMethod();
26       a.staticMethod(); //报错，静态方法不能通过实例方法调用
27     script>
28   head>
29   body>body>
30 html>