這篇文章是我在學習黑馬課程做下的筆記，經常在忘記知識點的時候拿出來看看，基本包括了你需要了解的jQuery知識
1.jQuery入門
1.概述
倉庫:可以把很多東西放到這個倉庫裡面。找東西只需要到倉庫裡面查詢到就可以了。
JavaScript庫:即library，是一個封裝好的特定的集合（方法和函式)。從封裝一大堆函式的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函式在裡面，比如動畫animate、hide、show，比如獲取元素等。
簡單理解︰就是一個JS檔案，裡面對我們原生js程式碼進行了封裝，存放到裡面。這樣我們可以快速高效的使用這些封裝好的功能了。
比如jQuery，就是為了快速方便的操作DOM，裡面基本都是函式（方法）。
常見的JavaScript庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto。這些庫都是對原生JavaScript的封裝，內部都是用JavaScript實現的，我們主要學習的是jQuery。
優點：
- 輕量級。核心檔案才幾十kb，不會影響頁面載入速度
- 跨瀏覽器相容。基本相容了現在主流的瀏覽器
- 鏈式程式設計、隱式迭代
- 對事件、樣式、動畫支援，大大簡化了DOM操作
- 支援外掛擴充套件開發。有著豐富的第三方的外掛，例收∶樹形選單、日期控制元件、輪播圖等
- 免費、開源
2.基本使用
各個版本的下載:https://code.jquery.com/
開發版（保留了語法）和壓縮版
1.jQuery的入口函式
$(function(){
...//此處是頁面DOM載入完成的入口
});$(document).ready(function(){
...//此處是1頁面DOM載入完成的入口
})- 等著DOM結構渲染完畢即可執行內部程式碼，不必等到所有外部資源載入完成，jQuery幫我們完成了封裝。
- 相當於原生js 中的 DOMContentLoaded。
- 不同於原生js 中的 load事件是等頁面文件、外部的js檔案、css檔案、圖片載入完畢才執行內部程式碼。
2.jQuery的頂級物件$
- $是jQuery的別稱，在程式碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$。
- $是jQuery的頂級物件，相當於原生JavaScript中的window。把元素利用$包裝成Query物件，就可以呼叫iQuery的方法。
3.jQuery物件和DOM物件
- 用原生JS獲取來的物件就是 DOM物件
- jQuery方法獲取的元素就是jQuery物件。
- jQuery物件本質是∶利用$對DOM物件包裝後產生的物件（偽陣列形式儲存)。
// 1.DOM物件
var myDiv = document.querySelector('div');//myDiv就是DOM物件
// 2.jQuery物件
$('div');
// 3.jQuery物件只能用jQuery方法，DOM也只能用原生js的屬性方法DOM物件與jQuery物件之間是可以相互轉換的。
因為原生js 比jQuery更大，原生的一些屬性和方法jQuery沒有給我們封裝.要想使用這些屬性和萬法需要把jQuery物件轉換為DOM物件才能使用。
1.DOM轉為JQuery物件：$(DOM物件)
$('div')2.jQuery物件轉換為DOM物件（兩種方式）
$('div')[index] index是索引號
$('div').get(index) index是索引號<video src="mov.mp4" muted></video>
<script>
// 1. DOM物件轉換為 jQuery物件
// (1) 我們直接獲取影片，得到就是jQuery物件
// $('video');
// (2) 我們已經使用原生js 獲取過來 DOM物件
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery裡面沒有play 這個方法
// 2. jQuery物件轉換為DOM物件
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>2.常用API
1.jQuery選擇器
原生JS獲取元素方式很多，很雜，而且相容性情況不一致，因此jQuery給我們做了封裝，使獲取元素統一標準。
$("選擇器") //選擇器直接寫CSS選擇器即可| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $('#id') | 獲取指定ID元素 |
| 全選選擇器 | $('*') | 匹配所有元素 |
| 類選擇器 | $('class') | 獲取同一類class元素 |
| 標籤選擇器 | $('div') | 獲取同一類class的元素 |
| 並集選擇器 | $('div,p,li') | 選取多個元素 |
| 交集選擇器 | $('li.current') | 交集元素 |
| 子代選擇器 | $('ul>li') | 使用>號，獲取親兒子層級的元素，並不會獲取孫子層級的元素 |
| 後代選擇器 | $('ul li') | 使用空格，獲取ul下的所有li元素，包括孫子等 |
1.隱式迭代（重要）
遍歷內部 DOM元素（偽陣列形式儲存)的過程就叫做隱式迭代。
簡單理解∶給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們再進行迴圈，簡化我們的操作,方便我們呼叫。
<div>驚喜不，意外不</div>
<div>驚喜不，意外不</div>
<div>驚喜不，意外不</div>
<div>驚喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 獲取四個div元素
console.log($("div"));
// 2. 給四個div設定背景顏色為粉色 jquery物件不能使用style
$("div").css("background", "pink");
// 3. 隱式迭代就是把匹配的所有元素內部進行遍歷迴圈，給每一個元素新增css這個方法
$("ul li").css("color", "red");
</script>案例：下拉選單
2.jQuery篩選選擇器
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
<div class="yeye">
<div class="father">
<div class="son">兒子</div>
</div>
</div>
<div class="nav">
<p>我是屁</p>
<div>
<p>我是p</p>
</div>
</div>
<script>
// 注意一下都是方法 帶括號
$(function() {
// 1. 父 parent() 返回的是 最近一級的父級元素 親爸爸
console.log($(".son").parent());
//如果有多個父級可以用parents()
$("div").parents(".one");
// 2. 子
// (1) 親兒子 children() 類似子代選擇器 ul>li
$(".nav").children("p").css("color", "red");
// (2) 可以選裡面所有的孩子 包括兒子和孫子 find() 類似於後代選擇器
$(".nav").find("p").css("color", "red");
// 3. 兄
}); <ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li class="item">我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>
<script>
// 注意一下都是方法 帶括號
$(function() {
// 1. 兄弟元素siblings 除了自身元素之外的所有親兄弟
$("ol .item").siblings("li").css("color", "red");
// 2. 第n個元素
var index = 2;
// (1) 我們可以利用選擇器的方式選擇
$("ul li:eq(2)").css("color", "blue");
// $("ul li:eq(index)").css("color", "blue");
// (2) 我們可以利用選擇方法的方式選擇 更推薦這種寫法
$("ul li").eq(2).css("color", "blue");
//$("ul li").eq(index).css("color", "blue");
// 3. 判斷是否有某個類名
console.log($("div:first").hasClass("current"));//true
console.log($("div:last").hasClass("current"));//false
});
</script>
重點記住: parent() children() find() siblings() eq()
3.jQuery的排他思想
$(function() {
// 1. 隱式迭代 給所有的按鈕都繫結了點選事件
$("button").click(function() {
// 2. 當前的元素變化背景顏色
$(this).css("background", "pink");
// 3. 其餘的兄弟去掉背景顏色 隱式迭代
$(this).siblings("button").css("background", "");
});
})案例：淘寶服飾
4.jQuery的鏈式程式設計
鏈式程式設計是為了節省程式碼量，看起來更優雅
$(this).css("color","red").siblings().css("color","");//我的顏色是紅色，兄弟節點顏色為空
$(this).siblings().css("color","red");//兄弟變色，我不變
$(this).siblings().parent().css("color","blue");//兄弟的父親變色2.jQuery樣式操作
1.操作CSS方法
jQuery可以使用css方法來修改簡單元素樣式;也可以操作類，修改多個樣式。
1.引數只寫屬性名，則是返回屬性值
$(this).css("color");2.引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加媽號，值如果是數字可以不用跟單位和引號
$(this).css("color","red");3.引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號，
$(this).css({
"color":"white",
"font-size":"20px"
})// 操作樣式之css方法
$(function() {
console.log($("div").css("width"));
$("div").css("width", "300px");
$("div").css("width", 300);
$("div").css(height, "300px"); //屬性名一定要加引號
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是複合屬性則必須採取駝峰命名法，如果值不是數字，則需要加引號
})
})2.設定類樣式方法
作用等同於以前的classList，可以操作類樣式，注意操作類裡面的引數不要加點。
$("div").addClass("current"); //新增類
$("div").removeClass("current"); //刪除類
$("div").toggleClass("current");//切換類3.類操作和className的區別
原生S中className會覆蓋元素原先裡面的類名。
jQuery裡面類操作只是對指定類進行操作，不影響原先的類名。
// var one = document.querySelector(".one");
// one.className = "two"; 會覆蓋以前的類名
// $(".one").addClass("two"); 這個addClass相當於追加類名 不影響以前的類名
$(".one").removeClass("two");3.jQuery效果
jQuery給我們封裝了很多動畫效果，最為常見的如下:
1.顯示隱藏效果
show([speed],[easing],[fn]);
hide([speed],[easing],[fn]) ;
toggle([speed],[easing],[fn]) ;- 引數都可以省略，無動畫直接顯示。
- speed :三種預定速度之一的字串(“slow”,"normal",or “fast”)或表示動畫時長的毫秒數值(如:1000)。
- easing : (Optional)用來指定切換效果，預設是“swing”，可用引數“linear”(勻速)。
- fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。
一般不加引數，因為動畫醜
2.滑動效果
slideDown([speed],[easing],[fn]) ); //下滑
slideUp([speed],[easing],[fn]) ; //上滑
slideToggle([speed],[easing],[fn]) ;//切斷 //例子
$("button").eq(2).click(function() {
// 滑動切換 slideToggle()
$("div").slideToggle(500);
}); 3.事件切換
hover([over],out)over:滑鼠移到元素上要觸發的函式(相當於mouseenter)
out:滑鼠移出元素要觸發的函式（相當於mouseleave)
$(function() {
// 滑鼠經過
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當前元素 this不要加引號
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 滑鼠離開
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})4.動畫佇列及其停止排隊方法
1.動畫或者效果佇列
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
2.停止排隊
stop()- stop0方法用於停止動畫或效果。
- 注意: stop)寫到動畫或者效果的前面，相當於停止結束上一次的動畫。
$(".nav>li").hover(function() {
// stop 方法必須寫到動畫的前面
$(this).children("ul").stop().slideToggle();
});5.淡入淡出效果
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn]) 1.漸進方式調整到指定的不透明度
fadeTo([speed],opacity,[easing],[fn]) //修改不透明度
//opacity透明度必須寫，取值0~1之間。案例3：高亮顯示
6.自定義動畫animate
animate(params,[speed],[easing],[fn])params:想要更改的樣式屬性，以物件形式傳遞，必須寫。屬性名可以不用帶引號，如果是複合屬性則需要採取駝峰命名法borderLeft。其餘引數都可以省略。
案例：王者榮耀手風琴效果
4.jQuery屬性操作
1.設定或獲取元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如元素裡面的href，比如<input>元素裡面的type。
prop("屬性") //獲取屬性
prop("屬性","屬性值") //設定屬性2.設定獲取元素自定義屬性值 attr()
使用者自己給元素新增的屬性，我們稱為自定義屬性。比如給div新增index = “1”。
attr("屬性") //類似原生getAttribute()
attr("屬性","屬性值") //類似原生setAttribute()改方法也可以獲取H5自定義屬性
3.資料快取data()
data()方法可以在指定的元素上存取資料，並不會修改DOM元素結構。一旦頁面重新整理，之前存放的資料都將被移除。
data("name","value") //向被選元素附加資料
data("name") //向被選元素獲取資料同時，還可以讀取HTML5自定義屬性data-index，得到的是數字型
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("屬性名") 獲取元素固有的屬性值
console.log($("a").prop("href"));
$("a").prop("title", "我們都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定義屬性 我們透過 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 資料快取 data() 這個裡面的資料是存放在元素的記憶體裡面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且返回的是數字型
console.log($("div").data("index"));
})
</script>5.jQuery文字屬性值
主要針對元素的內容還有表單的值操作
1.普通元素內容htm() (相當於原生innerHTML)
html() //獲取元素內容
html("內容") //設定元素內容
2.普通元素文字內容text() (相當於原生innerText)
text()
text("內容")
3.表單的val() (相當於原生value)
val()
val("內容")toFixed(2):保留兩位小數
var price = (a*b).toFixed(2);6.jQuery元素操作
主要是遍歷、建立、新增、刪除元素操作。
1.遍歷元素
jQuery隱式迭代是對同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷。
$("div").each(function(index,doEle){xxx});1.each0方法遍歷匹配的每一個元素。主要用DOM處理。each每一個
2.裡面的回撥函式有2個引數:index是每個元素的索引號; demEle是每個DOM元素物件，不是jquery物件
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果針對於同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大）
var sum = 0;
// 1. each() 方法遍歷元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回撥函式第一個引數一定是索引號 可以自己指定索引號號名稱
// console.log(index);
// console.log(i);
// 回撥函式第二個引數一定是 dom元素物件 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom物件沒有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());//把字串轉成整數
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用於遍歷資料，處理資料
$.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
$.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 輸出的是 name age 屬性名
console.log(ele); // 輸出的是 andy 18 屬性值
})
})
</script>2.元素的生成
$("<li></li>"); //建立元素
<!--1.內部新增-->
element.append("內容") //內部新增，放入後面，類似appendChild
element.prepend("內容");//內部新增，放入前面
<!--2.外部新增-->
element.after("內容"); // 把內容放入目標元素前面
element.before("內容"); // 把內容放入目標元素後面
<!--3.刪除元素-->
element.remove() //刪除匹配的元素（本身）
element.empty() //刪除匹配的元素集合中所有的子節點
element.html("") //可以刪除匹配的元素集合中所有的子節點 清空匹配的內容內部新增元素，生成之後，它們是父子關係。
外部新增元素，生成之後，他們是兄弟關係。
7.jQuery事件操作
1.單個事件註冊
element.事件(function(){})
$("div").click(funciton(){事件處理程式}) 其他事件和原生基本一致
比如mouseover、mouseou、blur、focus、change、keydown、keyup、resize、scroll等
2.事件處理on()繫結事件
on()方法在匹配元素上繫結一個或多個事件的事件處理函式
element.on(events,[selector],fn)- events:—個或多個用空格分隔的事件型別，"click"或"keydown”
- selector:元素的子元素選擇器。
fn:回撥函式即繫結在元素身上的偵聽函式。
$("div").on({
mouseenter: function () {
$(this).css("backgroundColor", "blue");
},
click: function () {
$(this).css("backgroundColor", "pink");
},
mouseleave: function () {
$(this).css("backgroundColor", "green");
}
})
<!--第2種-->
$("div").on("mouseover mouseleave", function () {
$(this).toggleClass("current");
})on()方法優勢2∶
可以事件委派操作。事件委派的定義就是，把原來加給子元素身上的事件繫結在父元素身上，就是把事件委派給父元素。
$("div").on("mouseover mouseleave", function () {
$(this).toggleClass("current");
})
// ul有click事件，但是點的是li，會冒泡到父級ul，執行click事件
$("ul").on("click","li",function(){
alert('hello world');
});
// (3) on可以給未來動態建立的元素繫結事件
// $("ol li").click(function() {
// alert(11);
// })
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是後來建立的</li>");
$("ol").append(li);在此之前有bind), live( delegate()等方法來處理事件繫結或者事件委派，最新版本的請用on替代他們。
案例js程式碼：
$(function () {
// 1.點選發布按鈕， 動態建立一個小li，放入文字框的內容和刪除按鈕， 並且新增到ul 中
$(".btn").on("click", function () {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 刪除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.點選的刪除按鈕，可以刪除當前的微博留言li
// $("ul a").click(function() { // 此時的click不能給動態建立的a新增事件
// alert(11);
// })
// on可以給動態建立的元素繫結事件
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
})
})3.事件處理off()解綁事件
off(方法可以移除透過on()方法新增的事件處理程式。
$("p").off() //解綁p元素所在事件處理程式
$("p").off("click") //解綁p元素上的點選事件
$("ul").off("click","li"); //解綁事件委託<script>
$(function() {
$("div").on({
click: function() {
console.log("我點選了");
},
mouseover: function() {
console.log('我滑鼠經過了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解綁 off
// $("div").off(); // 這個是解除了div身上的所有事件
$("div").off("click"); // 這個是解除了div身上的點選事件
$("ul").off("click", "li");
// 2. one() 但是它只能觸發事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</head>
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是屁</p>
</body>4.自動觸發時間trigger()
有些事件希望自動觸發,比如輪播圖自動播放功能跟點選右側按鈕一致。可以利用定時器自動觸發右側按鈕點選事件，不必滑鼠點選觸發。
element.click() //第一種簡寫模式
element.trigger("type") //第二種自動觸發模式
$("p").on("click",function(){
alert("hi");
});
$("p").trigger("click"); //此時自動觸發點選事件，不需要滑鼠點選
element.triggerHander();
$("div").on("click", function () {
alert(11);
});
// 自動觸發事件
// 1. 元素.事件()
$("div").click();//會觸發元素的預設行為
// 2. 元素.trigger("事件")
$("div").trigger("click");//會觸發元素的預設行為
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會觸發元素的預設行為
$("div").triggerHandler("click");
$("input").on("focus", function () {
$(this).val("你好嗎");
});
$("input").triggerHandler("focus");5.jQurey事件物件
事件被觸發，就會有事件物件的產生
阻止預設行為:event.preventDefault或return false
阻止冒泡：event.stopPropagation
$(function() {
$(document).on("click", function() {
console.log("點選了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("點選了div");
event.stopPropagation();//阻止事件冒泡
})
})8.jQuery尺寸、位置操作
1.尺寸
- 以上引數為空，則是獲取相應值，返回的是數字型。
- 如果引數為數字，則是修改相應值。
- 引數可以不寫單位
2.位置
位置主要有三個:offset()、 position()、scrollTop()/scrollLeft()
==offset()==
- offset()方法設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係。
- 該方法有2個屬性left、top。offset().top用於獲取距離文件頂部的距離，offset().left用於獲取距離文件左側的距離。
- 可以設定元素的偏移:offset({ top: 10, left: 30 });
==positon()==
position(方法用於返回被選元素相對於帶有定位的父級偏移座標，如果父級都沒有定位，則以文件為準。
==scrollTop()/scrollLeft()==
設定或獲取元素被捲去的頭部和左側(document)
jQuery其他方法
1.jQuery複製物件
如果想要把某個物件複製（合併）給另外一個物件使用，此時可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])- deep:如果設為true為深複製，預設為false淺複製
- target:要複製的目標物件
- object1:待複製到第一個物件的物件。
- objectN:待複製到第N個物件的物件。
- 淺複製是把被複製的物件複雜資料型別中的地址複製給目標物件，修改目標物件會影響被複製物件。
- 深複製，前面加true，完全克隆(複製的物件,而不是地址)，修改目標物件不會影響被複製物件
// 1.使用方法
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj); //Objext(id:1,name:"andy")
// 2.如果targetObj有資料
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj); // 會覆蓋targetObj 裡面原來的資料Object(id:"1",name:"andy")
// 3.沒有的新增，有的覆蓋掉
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj); // 會覆蓋targetObj 裡面原來的資料
深複製和淺複製
淺複製只是複製了地址複製，如果修改targetObj的msg.name,obj的msg.name也會改變，因為他們對應同一個地址
$.extend(targetObj, obj);
深複製，前面加true，完全克隆(複製的物件,而不是地址)，修改目標物件不會影響被複製物件
$.extend(true, targetObj, obj);
2.多庫共存
jQuery使用$作為標示符，隨著jQuery的流行,其他js 庫也會用這$作為識別符號，這樣一起使用會引起衝突。
需要一個解決方案，讓jQuery和其他的js庫不存在衝突，可以同時存在，這就叫做多庫共存。
解決方案：
$(function() {
function $(ele) {
return document.querySelector(ele);
}
console.log($("div"));
// 1. 如果$ 符號衝突 我們就使用 jQuery
jQuery.each();
// 2. 讓jquery 釋放對$ 控制權 讓用自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();
})3.jQuery外掛
jQuery功能比較有限，想要更復雜的特效效果，可以藉助於jQuery外掛完成。
注意:這些外掛也是依賴於jQuery來完成的，所以必須要先引入jQuery檔案，因此也稱為JQuery外掛。jQuery外掛常用的網站︰
- jQuery外掛庫 http://www.jq22.com/
- jQuery之家 http://www.htmleaf.com/
jQuery外掛使用步驟:
1.引入相關檔案。(jQuery檔案和外掛檔案)
2.複製相關html、css、js(呼叫外掛)。
1.圖片懶載入
片懶載入（圖片使用延遲載入在可提高網頁下載速度。它也能幫助減輕伺服器負載)
當我們頁面滑動到可視區域,再顯示圖片。
我們使用jquery外掛庫EasyLazyload。注意，此時的js引入檔案和js呼叫必須寫到DOM元素(圖片）最後面
2.全屏滾動(fullpage.js)
gitHub : https://github.com/alvarotrig...
中文翻譯網站:http://www.dowebok.com/demo/2...
在dist資料夾有引入檔案
3.bootstrap JS外掛
bootstrap框架也是依賴於jQuery開發的，因此裡面的js外掛使用，也必須引入jQuery檔案。