1 jQuery簡介

前言：目前正在學習JQuery，查閱了一下課外書籍和視訊，總結了這一塊的知識點，聽身邊的技術大神說這一塊挺重要的，個人感覺裡邊的內容挺多的，做個歸納供大家分享。

---

1.1jQuery簡介

1.1.1什麼是jQuery?

　　 JQuery，顧名思義，也就是JavaScript和查詢（Query），是一個輕量的，免費開源的JS函式庫，能夠極大的簡化JS程式碼

1.1.2jQuery的優勢

(1)可以極大簡化JS程式碼
(2)可以像CSS那樣來獲取頁面 元素
(3)可以操作CSS屬性來控制頁面的效果
(4)可以相容常用的瀏覽器

1.1.3jQuery的版本支援

1.x – 支援常用瀏覽器, 以及IE6+以上的版本
2.x – 支援常用瀏覽器, 以及IE9+以上的版本
3.x – 支援常用瀏覽器, 以及IE9+以上的版本
　　jQuery的缺點：jQuery的高版本不相容低版本。這是因為jQuery在升級除了會做一些內部優化之外，還會增加或刪除一些方法。如果升級到高版本，可能會造成之前的部分程式碼無法執行！　

---

3.3內容選擇器

1.1.4jQuery引入

　　1.jQuery函式庫本身是一個js檔案, 所以引入jQuery和引入一個普通的JS檔案一樣
　　
　　2.FAQ常見問題：在引入的過程中，經常會出現檔案引入失敗的錯誤:
　　
　　

檔案引入失敗是往往是由於jQuery庫檔案的路徑錯誤導致的!!

---

2 jQuery語法

2.1$符號介紹

$符號等價於jQuery, 參見jQuery原始碼:

　　呼叫$()等價於呼叫jQuery()，該函式會返回一個jQuery物件，該物件包含了若干個html元素，可以呼叫jQuery中提供的方法或屬性來操作這些元素.

$(“div”).css(“background-color”, “red”) – 為所有的div設定背景顏色為red

2.2文件就緒事件

　　這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，如果在文件沒有完全載入之前就執行函式，操作可能失敗。
　　在jQuery中提供了一個文件就緒事件函式：
　　

$(document).ready(function(){
    //在整個html文件載入完成之後立即觸發執行…
});

等價於window.onload事件：在整個html文件載入完成之後立即觸發

其簡寫形式為:(推薦!)
$(function(){
    //在文件載入完之後立即觸發執行…
});

---

2.3jQuery物件和JS物件的相互轉換

2.3.1為什麼需要相互轉換

　　jQuery是js的簡單框架, 在使用時通過$()可以返回一個jQuery物件, 可以通過jQuery提供的屬性或方法來操作其中的內容,
但是, 不可以通過jQuery物件來呼叫js的屬性或者js的方法. 反之,
也不可以通過JS物件來呼叫jQuery的屬性或者jQuery方法, 否則呼叫會報錯!!

2.3.2JS物件轉成jQuery物件

2.3.3jQuery物件轉成JS物件

---

3 jQuery選擇器(重點)

3.1基本選擇器

1、元素名(標籤名)選擇器：根據元素的名稱選中指定名稱的元素
格式：$(“元素名稱”)

2、類選擇器：根據元素的class屬性, 匹配所有class值相同的元素
格式：$(“.class值”)

3.ID選擇器：根據元素的id屬性值, 匹配具有特定id的元素
格式：$(“#id值”)

4.多元素選擇器：匹配多個選擇器選中的元素
格式：$(“選擇器1,選擇器2,…選擇器n”)

1. contains
$(“div:contains(‘xxx’)”) – 匹配所有div中包含xxx文字的div元素
2.empty
$(“div:empty”) – 匹配所有div中內容為空的div元素
3.has
$(“div:has(span)”) – 匹配所有div中包含span子元素的div元素
4.parent
$(“div:parent”) – 匹配所有div中內容不為空的div元素

3.4可見選擇器

1.hidden
$("div.hidden")-匹配所有掩藏的div元素
2.visible
$("div:visible")-匹配所有可見的div元素

3.5屬性選擇器

1.$("div[id]") -匹配所有具有id屬性的div元素
2.$("div[id='d1']")-匹配具有id屬性並且值為d1的div元素
3.$("div[id!='d1']") - 匹配具有id屬性並且值不等d1的div元素
4.$("div[id]^='d1'")- 匹配具有id屬性並且值是以d1開頭的div元素
5.$("div[id$='d1']") - 匹配具有id屬性並且值是以d1結尾的div元素

3.6子元素選擇器

3.8表單選擇器

1.$(":input")---匹配所有的表單項元素(包括input，select，textarea等)
2.$(":password")---匹配所有的密碼輸入框
3.$(":radio")---匹配所有的單選框
4.$(“:radio”) – 匹配所有的單選框
5.$(“:checkbox”) – 匹配所有的核取方塊
6.$(“:checked”) – 匹配所有被選中的單選框, 核取方塊, option選項

---

4 文件操作

4.1html元素的增刪改查

　1.建立新元素

$(“<div></div>”) – 建立一個div元素
$(“<div>hello…</div>”) – 建立一個包含文字內容的div元素
$(“<div><span></span></div>”) – 建立一個包含span子元素的div元素

　2.新增子元素

$(“div”).append($span); -- 為div新增一個span子元素
$("#div").append(子元素);

　3.刪除元素本身

$(“div”).remove(); -- 刪除匹配的所有div元素

　4.替換元素

$(“div”).replaceWith($span) – 將匹配的所有div元素替換為span元素

4.2html屬性/值操作

　1.html() – 獲取或設定元素的html內容

$(“div”).html() – 獲取所匹配元素中的第一個元素的html內容
$(“div”).html(“<span>xxx</span>”) – 為所有匹配的div元素設定html內容

　2.text() – 獲取或設定元素的文字內容

$(“div”).text() – 獲取所匹配元素的所有文字內容
$(“div”).text(“xxx”) – 為所有匹配的div元素設定文字內容

　3.attr() – 獲取或設定元素的屬性

$(“div”).attr(“id”) – 獲取所匹配元素中的第一個元素的id屬性值
$(“div”).attr(“id”, “div1”) – 為所匹配的div元素設定id屬性值

4.3操作CSS樣式

　1.css()函式　

$(“div”).css(“background-color”) – 獲取所匹配的div元素中的第一個div元素的背景顏色
$(“div”).css(“background-color”, “red”) – 為所匹配的div元素設定背景顏色

4.4效果

　　1.hide() — 設定所有匹配的元素的為隱藏
　　2.show() – 設定所有匹配的元素為顯示
　　3.toggle() – 切換元素的顯示狀態, 如果顯示則切換為隱藏, 如果是隱藏則切換為顯示.
　

---

5事件

5.1常用事件介紹

　　在JS中，通過元素的onclick屬性可以為元素繫結點選事件，例如：
　　

---

6 模擬員工資訊管理系統

瀏覽器預覽如下：

需要補充的程式碼功能：

6.3.1新增新員工

4.3操作CSS樣式

function addEmp(){
    //1.獲取新增員工的資訊
    var id = $("#box1 input[name='id']").val().trim();
    var name = $("#box1 input[name='name']").val().trim();
    var email = $("#box1 input[name='email']").val().trim();
    var salary = $("#box1 input[name='salary']").val().trim();
    //alert(id+" : "+name+" : "+email+" : "+salary);

    //2.校驗資料
    //>>員工資訊不能為空
    if(id == "" || name == "" || email == ""|| salary == ""){
        alert("員工資訊不能為空!");
        return;
    }
    //>>自己完成: 檢測郵箱格式是否正確

    //>>自己完成: 檢測工資格式是否正確( 必須是數值 )

    //>>員工的ID不能重複
    /* 獲取所有的id遍歷, 拿著使用者輸入的id依次進行對比, 如果相等, 就提示id已存在, 結束方法! */
    //獲取每一行的第二個td元素
    var isExist = false;//假設id是不存在的!
    $("table tr td:nth-child(2)").each(function(){
        if( id == $(this).text() ){
            alert("您輸入的id已存在!");
            isExist = true;//id存在!
        }
    });
    if(isExist){//如果id已存在, 則結束方法執行!
        return;
    }

    //3.將員工資訊新增到表格中
    var $td1 = $("<td><input type='checkbox'/></td>");
    var $td2 = $("<td>"+id+"</td>");
    var $td3 = $("<td>"+name+"</td>");
    var $td4 = $("<td>"+email+"</td>");
    var $td5 = $("<td>"+salary+"</td>");
    var $tr = $("<tr></tr>");
    //>>將td元素新增到tr中
    $tr.append($td1).append($td2).append($td3).append($td4).append($td5);
    //>>將tr新增到table中
    $("table").append($tr);
}

6.3.2修改員工資訊

function updEmp(){
    //1.獲取修改後的員工資訊
    var id = $("#box2 input[name='id']").val().trim();
    var name = $("#box2 input[name='name']").val().trim();
    var email = $("#box2 input[name='email']").val().trim();
    var salary = $("#box2 input[name='salary']").val().trim();
    //2.校驗資料
    //>>修改後員工資訊不能為空
    if(id == "" || name == "" || email == "" || salary == ""){
        alert("員工資訊不能為空!");
        return;
    }

    //3.根據員工的id修改員工資訊
    var isExist = false;//假設id不存在!
    $("table tr td:nth-child(2)").each(function(){
        if( id == $(this).text() ){//如果id存在則修改員工資訊
            $(this).next().html( name );
            $(this).next().next().html( email );
            $(this).next().next().next().html( salary );
            isExist = true;
        }
    });
    if(!isExist){//如果id不存在
        alert("您輸入的id不存在!");
    }
}

6.3.3刪除員工資訊

function delEmp(){
    //1.獲取所有被選中的行(tr)
    //方式一:
    //$("input:checked").parent("td").parent("tr").remove();

    //方式二:
    //$("td input:checked").parents("tr").remove();

    //方式三:
    $("input:checked").each(function(){
        //如果當前核取方塊的id值不為all, 則刪除當前行
        if( $(this).attr("id") != "all" ){
            $(this).parents("tr").remove();
        }
    });
}

6.3.4設定全選或全不選

function checkAll(thisobj){
    //1.獲取全選核取方塊的選中狀態值
    //<input type="checkbox" checked="checked">
    var isCK = $("#all").attr("checked");
    alert( isCK );
    //2.將選中狀態值設定給下面所有的核取方塊
    $(":checkbox").attr("checked", isCK);
}