C#-WebForm-★★★JQuery知識——基礎知識、選擇器、事件★★★

JQuery 與 JS 之間的轉換

　　將JQuery轉換爲JS —— get(0)　　例如：alert( $("#d1").get(0).offsetwidth );

　　將JS 轉換爲JQuery —— $(" ")　　例如：$("#d1").click(function(){});

 

一、什麼是JQuery？　　

它就是一套JS方法包，也叫JS框架或前端框架

Node.js 是一個開發環境

二、JQuery的用法：文件引用到aspx網頁中前臺代碼中

三、基本選擇器：

$("#d1")　　ID 選擇器

$(".cla")　　Class選擇器

$("div")　　標籤名選擇器

$("#d1,#d2,#d3,#d4")　　並列選擇器，用「,」隔開

$(".cla c2")　　後代選擇器，用空格隔開

四、過濾選擇器：

基本過濾

　　首尾過濾：第一個和最後一個是指在代碼中第一次出現的標籤無論其位置如何

　　　　$(".c1:first")　　獲取class="c1"的標籤的第一個

　　　　$(".c1:last")　　獲取class="c1"的標籤的最後一個

　　等於某個索引

　　　　$(".d1:eq(x)")　　class="d1"的標籤中索引爲x的標籤

　　　　$(".d1").eq(x).click({});

　　不等於某個索引

　　　　$(".d1:gt(索引值)")　　class="d1"的標籤中索引大於x的標籤

　　　　$(".d1:lt(索引值)")　　class="d1"的標籤中索引小於x的標籤

　　　　$(".d1:not(選擇器)")　　class="d1"的標籤中不包括（選擇器）的其餘全部

　　　　　　例如：$(".d1:not(.d1:eq(2))")　　class="d1"的全部標籤中，除索引爲2的其餘的全部標籤

　　奇偶過濾

　　　　$(".d1:odd")　　class="d1"的標籤中索引爲奇數的標籤

　　　　$(".d1:even")　　class="d1"的標籤中索引爲偶數的標籤

　　屬性過濾

　　　　屬性名　　$(".d1[hehe]")　　class="d1"的標籤中含有「hehe」屬性的全部標籤

　　　　屬性值　　$(".d1[hehe=wqf]") 或 $(".d1[hehe!=wqf]")　　class="d1"的標籤中含有「hehe」屬性的全部標籤中 屬性值等於或不等於某個值的標籤

　　內容過濾

　　　　內容過濾　　$(".d1:contains(字符串)")　　class="d1"的標籤中內容包含字符串的全部標籤

　　　　子元素過濾　　$(".d1:has(標籤名)")　　class="d1"的標籤中內容包含某標籤子元素的全部標籤

五、JQuery的事件是把JS中的事件去掉on，好比JS中「onclick」、「ondblclick」，JQuery則爲「click」、「dblclick」

　　例如：$(".d1").click( function () {} );

六、複合事件

　　hover　　鼠標懸浮時和移出時事件

　　　　$(".d1").hover( function () {} , function () {});

　　toggle　　點擊事件，循環執行其中方法，容許其中有多種方法

　　　　$(".d1").toggle ( function () {} , function () {}  );

七、將來元素

　　在網頁加載以後，再建立出來的元素成爲將來元素　　live：將來元素　　參數1：將來元素的事件　　參數2：事件的內容

　　$(".d1").live( "click" , function () {} );　　將來元素class="d1"的標籤的點擊事件

　　如何不使用將來元素給新建的標籤附加點擊事件？

<script>

    function hehe() {
        alert("aa");
    };

    //div點擊事件
    $(".d1").click(function () {
        hehe();
    });

    //點擊按鈕建立新的div，附加點擊事件
    $("#btn1").click(function () {
        var s = "<div class=\"d1\" onclick=\"hehe()\"></div>";
        //在class="d1"的標籤中最後一個 後面添加一個新的標籤
        $(".d1:last").after(s);
    });

</script>

不使用將來元素爲新建立的標籤附加點擊事件

 

八、事件冒泡

　　什麼是事件冒泡？就是觸發一個事件後聯動觸發其餘多個事件

　　阻止事件冒泡：return false;