jQuery的優缺點與版本，和引入方法：
* jQuery
* 用原生js封裝的插件庫
*
* 優點：
* 1.開發效率大大的提高。
* 2.擷取節點變得非常的便捷
* 3.某些版本把IE678的相容都做好了
* 4.做動畫的時候，有很多API提供給使用者
*
* 缺點：
* 1.隻使用少部分功能的時候，也必須把整個庫引入進來，
* 2.速度慢，沒有原生的快。
*
* 版本：
* 1.x.x 相容IE678
* 2.x.x 采用了大部分的css3的新屬性，放棄了IE678的相容
* 3.x.x 實在2的基礎上，來完善或者優化性能。3是2的更新版，也就是說如果不考慮相容IE678的問題，那麼就采用最新版
1 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
2 <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>--> 基本用法：
$():括号内有三種内容，而後可通過點進行屬性和方法的操作
string 選擇器 / 标簽結構（建立你寫的結構的标簽）
object DOM節點
function DOM結構加載完成後執行的回調函數 這個函數可以接受一個形參，這個形參代表了 $ 在這個函數内部的表現形式
1 var box = document.querySelectorAll("#box p");
2
3 $("<div><span>hello</span></div>").appendTo(document.body)
4
5
6 //$(box).appendTo(document.body) eq（）方法的使用
1 <body>
2 <p></p>
3 <p></p>
4 <p></p>
5 <script>
6 /*
7 * eq()
8 * 接收一個數字（序号），傳回一個獨立的jq對象
9 *
10 * */
11 $("p").eq(1).html(123)
12
13
14
15 </script>
16 </body> js對象和jq對象的互相轉換
* jq對象轉js對象
* .get（傳序号）
* [下标]
*
* js對象轉jq對象
* $(DOM節點)
var box = document.getElementById("box");
//$("#box").get(0).innerHTML = 123;jq轉換為js
//$("#box")[0].innerHTML= "456"
//$(box).html(789) js轉換為jq jq的牛逼之處：自帶周遊
1 <body>
2 <p>001</p>
3 <p>002</p>
4 <p>003</p><p>001</p>
5 <p>002</p>
6 <p>003</p><p>001</p>
7 <p>002</p>
8 <p>003</p><p>001</p>
9 <p>002</p>
10 <p>003</p>
11 <script>
12
13 $("p").css("color" , "red");
14
15
16
17
18 </script>
19 </body> jq的周遊：
each（）接收一個函數
* 這個函數裡的this指向目前序号對應的對象, 這個this是一個js對象
* 函數可以設定一個形參，代表目前對象的序号
ps：jq的代碼不能跟js的代碼混合使用？
* 錯，邏輯錯誤。因為jq就是用原生js封裝的。是以jq的代碼也是js的代碼。
* 如果說需要使用jq來寫，那麼請盡量使用jq的文法來寫，除了非必須情況，請不要混着寫。
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
/*
* each（）接收一個函數
* 這個函數裡的this指向目前序号對應的對象, 這個this是一個js對象
* 函數可以設定一個形參，代表目前對象的序号
*
* jq的代碼不能跟js的代碼混合使用？
* 錯，邏輯錯誤。因為jq就是用原生js封裝的。是以jq的代碼也是js的代碼。
* 如果說需要使用jq來寫，那麼請盡量使用jq的文法來寫，除了非必須情況，請不要混着寫。
*
* */
$("p").each(function (i) {
//this.innerHTML = i;
$(this).html(i)
});
</script>
</body> length是屬性，index（）是方法傳回索引
$的一些API：
1.屬性API：
1 <body>
2 <div id="box" class="on wrap"></div>
3 <input type="text" value="123456798">
4
5 <script>
6 /*
7 * attr 操作自定義标簽屬性
8 * prop 操作合法的标簽屬性
9 *
10 * 删除屬性
11 * removeAttr
12 * removeProp
13 *
14 *
15 * jq方法的傳回值
16 * 要看最後一個方法時什麼性質的；
17 * 假如是 擷取/讀取 性質的。那麼一般傳回擷取到的内容（一般是string類型）
18 * 假如說是 設定 性質的，那麼一般會把對用這個方法的對象傳回。
19 *
20 *
21 * */
22 /*var a = $("input").prop("checked");
23 alert(a)*/
24
25 //$("#box").attr("goudan","456").removeAttr("id");
26
27
28 /*
29 *
30 * addClass 添加類名
31 * removeClass 删除類名
32 * toggleClass 如果有就删除，如果沒有就添加
33 *
34 * */
35
36 //$("#box").prop("class" , "");
37
38
39 /*
40 * html() === innerHTML
41 * text() === innerText
42 * val() === value
43 *
44 *
45 *
46 * */
49 //$("#box").text(123)
50 alert($("input[type=text]").val())
51
52 </script>
53 </body> 2.文檔出來API：
1 <body>
2 <div class="box"></div>
3 <script>
4 /*
5 * append
6 * appendTo
7 *
8 *
9 * prepend
10 * prependTo
11 *
12 * */
13
14 //var $div = $("<div></div>");
15
16 //$div.html(123)
17 //$("#box").append($div.html(123))
18 //$div.html(123).appendTo($("#box"))
19 //$("#box").prepend($div.html(123))
20
21 /*
22 * after 添加到誰後面(成為弟弟元素)
23 * before 添加到誰前面(成為哥哥元素)
24 *
25 *
26 * */
27
28 //$("#box").before($div)
29
30 /*
31 * wrap 給比對的對象加一個父級
32 * unwrap 把父級元素幹掉
33 * wrapAll
34 * wrapInner
35 *
36 *
37 * */
38
39
40 //$("#box2").wrap("<span></span>");
41 //var a = $("span").unwrap(); //傳回前面的對象
42
43 //console.log(a)
44
45
46 //$("div").wrapAll("<div></div>");
47
48 //$("div").wrapInner("<span></span>");
49
50
51 //$("p").wrap("<div></div>")
52
53 /*
54 * replaceWith
55 * replaceAll
56 * 了解一下就行
57 *
58 *
59 *
60 * */
61
62 //$("p").replaceWith("<div></div>")
63 //$("<span>123</span>").replaceAll($("#p2"))
64
65
66
67 /*
68 * empty 清空子節點 傳回調用此方法的對象
69 * remove 删除自己（自殺） 不會保留事件 傳回被删除對象（後期可以添加回去）
70 * detach 删除自己（自殺） 會保留事件 傳回被删除對象（後期可以添加回去）
71 * clone 克隆對象 傳回克隆對象
72 *
73 *
74 *
75 * */
76
77 //var a = $("#box").empty(); //
78 //console.log(a)
79
80
81
82
83 /*var a = $("#box").remove();
84 $(document.body).append(a)*/
85 /*var a= $("#box").detach();
86 $(document.body).append(a)*/
87
88 var a = $(".box").clone();
89
90 $(document.body).append(a);
91
92 $(".box").click(function () {
93 alert($(".box").length)
94 });
95
96
97 </script>
98 </body> 3.cssAPI：
1 <body style="height:2000px">
2 <div id="box">
3 <div id="box2"></div>
4 </div>
5 <script>
6 /*
7 * css()
8 *
9 * */
10
11 //alert($("#box").css("color"))
12
13
14 /*
15 * offset 到文檔 設定的時候會進行計算，實際我們設定的值是到文檔的距離
16 *
17 * position 到定位父級 隻能擷取 不能設定
18 *
19 *
20 * */
21
22 /*var a = $("#box").offset().top;
23
24 console.log(a)*/
25
26 /*var a = $("#box2").position().top;
27 console.log(a)*/
28
29 /*var a = $("#box2").position();
30
31 console.log(a)*/
32
33
34
35 /*
36 * scrollTop
37 * scrollLeft
38 * 設定/擷取 滾動高度/寬度
39 *
40 * */
41
42 /*$(document).click(function () {
43 alert($(this).scrollTop())
44 })*/
45 /*$(document).click(function () {
46 $(this).scrollTop(1500);
47 })
48 */
49
50
51 /*
52 *
53 * height
54 * width
55 * 擷取/設定 樣式寬高
56 *
57 * innerWidth
58 * innerHeight
59 * 擷取/設定 padding+樣式寬高
60 *
61 * outerWidth
62 * outerHeight
63 * 擷取/設定 border+padding+樣式寬高
64 *
65 *
66 *
67 *
68 * */
69
70 $("#box").outerWidth(500);
71
72 </script>
73 </body> 轉載于:https://www.cnblogs.com/letgo-doo/p/8795635.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)