JQuery 與 JS 之間的轉換

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

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

?

1、什么是JQuery？　　

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

Node.js 是一個開發環境

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

3、基本選擇器：

$("#d1")　　ID 選擇器

$(".cla")　　Class選擇器

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

$("#d1,#d2,#d3,#d4")　　并列選擇器，用“,”隔開

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

4、過濾選擇器：

基本過濾

　　首尾過濾：第一個和最后一個是指在代碼中第一次出現的標簽不管其位置如何

　　　　$(".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"的標簽中內容包含某標簽子元素的所有標簽

5、JQuery的事件是把JS中的事件去掉on，比如JS中“onclick”、“ondblclick”，JQuery則為“click”、“dblclick”

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

6、復合事件

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

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

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

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

7、未來元素

　　在網頁加載之后，再創建出來的元素成為未來元素　　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\" οnclick=\"hehe()\"></div>";//在class="d1"的標簽中最后一個 后面添加一個新的標簽$(".d1:last").after(s);});</script> 不使用未來元素為新創建的標簽附加點擊事件

?

8、事件冒泡

　　什么是事件冒泡？就是觸發一個事件后聯動觸發其他多個事件

　　阻止事件冒泡：return false;

?

轉載于:https://www.cnblogs.com/qq450867541/p/6389271.html

總結

以上是生活随笔為你收集整理的C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。