jquery基礎知識基本使用概述（1）

 

jQuery基本介紹

爲何要學jQuery

【01-讓div顯示與設置內容.html】

使用JS操做DOM的時候，會遇到如下的一些缺點：

//1. 獲取元素的方法太少且長，麻煩。
//2. 遍歷僞數組很麻煩，一般要嵌套一大堆的for循環。
//3. 註冊的事件會覆蓋。
//4. 有兼容性問題。
//5. 實現動畫很麻煩

初體驗

【02-讓div顯示與設置內容.html】

$(document).ready(function () {
    $("#btn1").click(function () {
      //隱式迭代：偷偷的遍歷，在jQuery中，不須要手動寫for循環了，會自動進行遍歷。
        $("div").show(200);
   });
    $("#btn2").click(function () {
        $("div").text("我是內容");
   });
});

使用jQuery的優勢

//1. 獲取元素的方式很是的簡單，並且很是的豐富
//2. jQuery的隱式迭代特性，再也不須要書寫for循環語句。
//3. 使用jQuery徹底不用考慮兼容性問題。
//4. jQuery提供了一系列動畫相關的函數，使用很是方便。
//5. 代碼簡單、粗暴。

沒有對比，就沒有傷害，有了對比，到處戳中要害。

什麼是jQuery?

jQuery是一個快速的、輕量的、功能豐富的js庫。

jQuery的官網 http://jquery.com/

jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。

js庫：把一些經常使用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就能夠了。（animate.js、common.js）

 

使用步驟

引包（引入js文件）

<script src="jquery-1.11.1.js"></script>

入口函數

$(document).ready(function () {
});
​
$(function(){
    
});

功能實現

$("#btnShowDiv").click(function () {
 $("div").show(1000);
});

版本介紹

官網下載地址：http://jquery.com/download/

jQuery版本有不少，分爲1.x 2.x 3.x

 

大版本分類：

1.x版本：可以兼容IE678瀏覽器（最終版本1.12.4）
2.x版本：不兼容IE678瀏覽器（最終版本2.2.4）
​
//jQuery目前正在更新的版本
3.x版本：不兼容IE678，更加的精簡（在國內不流行，由於國內使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原來的基礎上增長了一些新的特性。

關於壓縮版和未壓縮版

jquery-1.12.4.min.js:壓縮版本，適用於生產環境，由於文件比較小，去除了註釋、換行、空格等東西，可是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。

入口函數

入口函數的好處：

1. 等待文檔加載完成，保證可以獲取到元素
2. 造成了一個沙箱，防止全局變量污染。

兩種寫法：

//第一種寫法
$(document).ready(function() {
 
});
//第二種寫法
$(function() {
 
});

jQuery入口函數與js入口函數的對比

1. JavaScript的入口函數要等到頁面中全部資源（包括圖片、文件）加載完成纔開始執行。
2. jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。

jQuery對象與DOM對象(重點)

基本概念：

1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（僞數組））

jQuery對象與DOM對象的區別：

1. DOM對象與jQuery對象的方法不能混用。
2. DOM對象能夠和jQuery對象相互轉化

DOM對象轉換成jQuery對象：【聯想記憶：花錢】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象

jQuery對象轉換成DOM對象：

var $li = $(「li」);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)

選擇器

什麼是jQuery選擇器

jQuery選擇器是jQuery爲咱們提供的一組方法，讓咱們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。

jQuery選擇器有不少，基本兼容了CSS1到CSS3全部的選擇器，而且jQuery還添加了不少更加複雜的選擇器。【查看jQuery文檔】

jQuery選擇器雖然不少，可是選擇器之間能夠相互替代，就是說獲取一個元素，你會有不少種方法獲取到。因此咱們平時真正能用到的只是少數的最經常使用的選擇器。

 

css選擇器

jQuery徹底兼容css選擇器

名稱	用法	描述
ID選擇器	$(「#id」);	獲取指定ID的元素
類選擇器	$(「.class」);	獲取同一類class的元素
標籤選擇器	$(「div」);	獲取同一類標籤的全部元素
並集選擇器	$(「div,p,li」);	使用逗號分隔，只要符合條件之一就可。
交集選擇器	$(「div.redClass」);	獲取class爲redClass的div元素
子代選擇器	$(「ul>li」);	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	$(「ul li」);	使用空格，表明後代選擇器，獲取ul下的全部li元素，包括孫子等

跟CSS的選擇器如出一轍。

過濾選擇器

這類選擇器都帶冒號:

名稱	用法	描述
:eq（index）	$(「li:eq(2)」).css(「color」, 」red」);	獲取到的li元素中，選擇索引號爲2的元素，索引號index從0開始。
:odd	$(「li:odd」).css(「color」, 」red」);	獲取到的li元素中，選擇索引號爲奇數的元素
:even	$(「li:even」).css(「color」, 」red」);	獲取到的li元素中，選擇索引號爲偶數的元素
:first	$(「li:first」).css(「color」, 」red」);	獲取到的li元素中的第一個
:last	$(「li:last」).css(「color」, 」red」);	獲取到的li元素中的最後一個

 

篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點相似，可是用法不同，篩選選擇器主要是方法。

名稱	用法	描述
children(selector)	$(「ul」).children(「li」)	獲取當前元素的全部子元素中的li元素
find(selector)	$(「ul」).find(「li」);	獲取當前元素中的後代元素中的li元素
siblings(selector)	$(「#first」).siblings(「li」);	查找兄弟節點，不包括本身自己。
parent()	$(「#first」).parent();	查找父親
eq(index)	$(「li」).eq(2);	至關於$(「li:eq(2)」),index從0開始
next()	$(「li」).next()	找下一個兄弟
prev()	$(「li」).prev()	找上一次兄弟

其餘補充

mouseover與mouseenter

mouseover和mouseoverenter都有鼠標通過的意思，可是在註冊鼠標通過事件的時候，推薦使用mouseenter

mouseenter 與 mouseover 的不一樣

1. mouseover與mouseout是一對事件，當鼠標通過當前元素或者當前元素的子元素的時候，mouseover事件都會觸發【事件冒泡】。

2. mouseenter與mouseleave是一對事件，只有當鼠標通過當前元素時，事件會觸發，鼠標通過子元素，mousenter事件是不會觸發的。

index方法

index()方法返回的是當前元素在全部兄弟元素裏面的索引。

<ul>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
  <li><a href="#">我是連接</a></li>
</ul>

當碰到這種結構的時候，推薦給li註冊事件，這樣經過index方法才能獲取到正確的索引值。