內容概覽

1. JQuery的初步認識
2. JQuery的選擇器
3. JQuery的過濾器

一、JQuery的初步認識

1.1 JQuery概念

• 一個JavaScript框架。本質上就是一些js檔案，封裝了js的原生程式碼而已。簡化JS開發。

1.2 JQuery能做什麼

• javascript用來幹什麼的:
  • 操作DOM物件
  • 動態操作樣式css
  • 資料訪問
  • 控制響應事件
• jquery作用一樣，但是更加快速簡潔。

1.3 jquery有哪些功能（API）

• 選擇器
• 過濾器
• 事件
• 動畫效果
• ajax

1.4 如何引用jquery

• 引入本地jquery： <script type="text/javascript" src="jquery.js">

• 引入Google線上提供的庫檔案（穩定可靠高速）

• 寫第一個JQUery案例

  • 解釋:在JQuery庫中，'$()'等效於就jQuery()

    //引入jquery檔案
    <script type=“text/javascript” src=“”></script>
    //在html頁面編寫jq
    <script type=“text/javascript”>
       $(function(){
           alert(“jQuery 你好!”);
       });
    </script>
    

1.5 講解$(function(){})

• ‘$’是jQuery的別名，如‘$()'也可寫作jQuery(),相當於頁面初始化函式，當頁面載入完畢，會執行jQuery()。
• JQuery操作DOM文件時，必須確保DOM已經載入完畢，此時就需要用到JQuery的ready事件。
• $(document).ready(function(){})即$(function(){})
  • 類似於js的window.onload事件函式，但是ready事件要先於onload事件執行
  • window.onload = function(){};

• 為方便開發，jQuery簡化這樣的方法，直接用$()表示
• JQuery的ready事件不等於Js的load：
  • 執行時機不同：load需要等外部圖片和視訊等全部載入才執行。ready是DOM繪製完畢後執行，先與外部檔案
  • 用法不同：load只可寫一次，ready可寫多次

• window.onload與$(document).ready()對比

  	window.onload	$(document).ready()
  執行時機	必須等網頁中所有內容載入完後(圖片)才執行	網頁中的DOM結構繪製完後就執行,可能DOM元素相關的東西並沒有載入完
  編寫個數	不能同時執行多個	能同時執行多個
  簡化寫法	無	$(document).ready(function(){ //.. }); 推薦寫法：$(function(){ });

1.6 JQuery物件與JS物件的區別與轉換

• JQuery物件在操作時，更加方便
• JQuery物件和js物件方法部分不通用
• 兩者相互轉換
  • jq -- > js : jq物件[索引] 或者 jq物件.get(索引)
  • js -- > jq : $(js物件)

1.8 $()講解

• $在JQuery庫中,$是JQuery的別名，$()等效於就jQuery().
• $()是JQuery方法,咱可看作是JQuery的選擇器，與css選擇器相似（可做對比）
• 只要是jQuery的物件都這樣變數加上一個符號$ 方便識別：var $div = $("#")

function　$(id){
        return document.getElementById(id);
    }

1.9 $和document是相等的嗎？

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("a") == $("#a"));//返回結果為false
alert(document.getElementById("a") == $("#a").get(0));//返回true

• 物件轉換($(element))

  • 原生dom物件和jquery代理物件的相互轉換

  $(傳入的原生物件);
  //原生物件轉化成jQuery物件
  var nav = document.getElementById("nav");
  var $nav = $(nav);
  alert($nav.get(0) == nav);//true
  

  二、選擇器

2.1 基本選擇器

• 基本選擇器
  • id選擇器：$("#id")
  • 類選擇器：$(".classname")
  • 元素選擇器：$("div")
  • 組合選擇器：$("div,p,.classname,#id")
• 層級選擇器:通過DOM的巢狀關係匹配元素
  • 包含選擇器：$("a b")在給定的祖先元素下匹配所有後代元素。(不受層級限制)
  • 子選擇器：$("parent > child") 在給定的父元素下匹配所有子元素。
  • 相鄰選擇器：$("prev + next") 匹配所有緊接在prev元素後的next元素。
  • 兄弟選擇器：$("prev ~ siblings") 匹配prev元素之後的所有sibling元素。

2.2 過濾選擇器

2.2.1 基本過濾選擇

$("li:first")    //第一個li
$("li:last")     //最後一個li
$("li:even")     //挑選下標為偶數的li
$("li:odd")      //挑選下標為奇數的li
$("li:eq(4)")    //下標等於 4 的li(第五個 li 元素)
$("li:gt(2)")    //下標大於 2 的li
$("li:lt(2)")    //下標小於 2 的li
$("li:not(#runoob)") //挑選除 id="runoob" 以外的所有li

2.2.2 內容過濾選擇器

$("div:contains('Runob')")    // 包含 Runob文字的元素
$("td:empty")                 //不包含子元素或者文字的空元素
$("div:has(selector)")        //含有選擇器所匹配的元素
$("td:parent")                //含有子元素或者文字的元素

2.2.3 可見過濾選擇器

$("li:hidden")       //匹配所有不可見元素，或type為hidden的元素
$("li:visible")      //匹配所有可見元素

2.2.4 屬性過濾選擇器

$("div[id]")        //所有含有 id 屬性的 div 元素
$("div[id='123']")        // id屬性值為123的div 元素
$("div[id!='123']")        // id屬性值不等於123的div 元素
$("div[id^='qq']")        // id屬性值以qq開頭的div 元素
$("div[id$='zz']")        // id屬性值以zz結尾的div 元素
$("div[id*='bb']")        // id屬性值包含bb的div 元素
$("input[id][name$='man']") //多屬性選過濾，同時滿足兩個屬性的條件的元素

2.2.5 子元素過濾選擇器

• :nth-child()選擇器是很常用的子元素過濾選擇器，如下
  • :nth-child(even)選擇每個父元素下的索引值是偶數的元素
  • :nth-child(odd)選擇每個父元素下的索引值是奇數的元素
  • :nth-child(2)選擇每個父元素下的索引值是2的元素
  • :nth-child(3n)選擇每個父元素下的索引值是3的倍數的元素 (n從1開始)

2.2.6 表單物件屬性過濾選擇器

2.2.7 表單選擇器

2.2.8 特定位置選擇器

• :first
• :last
• eq(index)

2.2.9 指定範圍選擇器

• :even
• :odd
• :gt(index)
• :lt(index)

2.2.10 排除選擇器

• :not 非

三、選擇器優化

• 使用合適的選擇器表示式可以提高效能、增強語義並簡化邏輯。常用的選擇器中，ID選擇器速度最快，其次是型別選擇器。

  • 多用ID選擇器
  • 少直接使用class選擇器
  • 多用父子關係，少用巢狀關係

• 查詢

  • 向下查詢後代元素
    • children():取得所有元素的所有子元素集合（子元素）（沿著 DOM 樹向下遍歷單一層級）
    • find():搜尋所有與指定表示式匹配的元素(所有後代元素中查詢)
  • 查詢兄弟元素 siblings()查詢當前元素的兄弟

四、JQuery操作屬性

1..操作屬性：attr()、prop()

• attr和prop區別：如果屬性的值是布林型別的值 用prop操作，反之attr

  返回屬性的值：
  $(selector).attr(attribute)
  
  設定屬性和值：
  $(selector).attr(attribute,value)
  
  使用函式設定屬性和值：
  $(selector).attr(attribute,function(index,currentvalue))
  
  設定多個屬性和值：
  $(selector).attr({attribute:value, attribute:value,...})