JQuery學習筆記

時間 2019-11-24

標籤 jquery 學習筆記欄目 JQuery 简体版

原文原文鏈接

11月23日css

JQuery2.x版本：production jQuery2.1.4（優化壓縮後的版本，主要用於部署網站時使用）html

：Development JQuery2.1.4（未壓縮版本，通常網站建設使用）jquery

：map file for JQuery 2.1.4（通常用於加強調試，不須要下載）ajax

test01.html瀏覽器

$表示當前使用的是jQuery對象來操縱網頁，在<script>區域中，$(document).reday是jQuery的頁面加載事件，這事件是傳統的window.load事件替代方法，當DOM載入就緒時，就會執行括號定義的代碼。app

加載的事件說明：使用jQuery的選擇器選擇div元素，使用函數css更改div字體；框架

爲頁面上的div元素添加click事件，當點擊div時候會彈出消息框。ide

向HTML頁面添加一個新的div元素，並關聯click事件。函數

12月1日學習

jQuery選擇器：

1.基本選擇器：id選擇器（如 $(「#divId」)） id爲divId的元素

標籤名稱選擇器（如 $(「a」)） <a>標籤

CSS樣式類選擇器（如 $(「.bgRed」)）

多個放在一塊兒用」,」分隔開便可。

擴展

$("p") 選取 <p> 元素。

$("p.intro") 選取全部 class="intro" 的 <p> 元素。

$("p#demo") 選取全部 id="demo" 的 <p> 元素。

12月5日

2.層次選擇器：層次關係的選擇規則

ancestor descendant後代選擇器（經常使用）

$(".bgRed div")選擇CSS類爲bgRed的元素全部<div>

parent>child父類選擇器

$(".myList>li")選擇myLis類的直接子節點<li>對象

prev+next相鄰選擇器

$("#hibiscus+img")選擇id爲hibiscus後面同級別的img對象

prev～slibings 平級選擇器

$("#someDiv～[title]")選擇id爲someDiv的對象後面的全部帶有title的元素

3.過濾選擇器：

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的得到焦點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的鼠標懸停事件

4.jQuery事件：

jQuery 隱藏方法hide()、show()展現方法和toggle()切換方法

1.只能運用在id或class中

2.可設置時延

3.hide()和show()爲單獨方法，toggle()爲前二者的綜合

操做DOM：Document Object model(文檔對象模型)

12月6日

動態建立內容：$(html)動態建立一個DOM對象

方法：append()：在被選元素的結尾插入內容。

prepend()：在被選元素的開頭插入內容。

after():在被選元素以後插入內容。

before():在被選元素以前插入內容。

語法：$(「#idAppend」).click(

function(){

//追加內容

$(「#idcontent」).append(「<b>使用append添加元素</b><br/>」);

}

);

$(「#idappendTo」).click(

Function(){

//追加內容，語法與append顛倒

$(「<b>使用appendto添加元素</b></br>」).appendTo(「#idcontent」);

}

);

動態刪除節點：

remove()方法：用來刪除指定的DOM元素，它會將節點從DOM元素樹中移除。但會返回一個指向DOM元素的引用，並非真正的將jQuery引用的元素對象刪除，能夠繼續經過這個引用來操做元素。

empty()方法：不會刪除節點，只是清空節點中的內容，DOM元素依然保持在DOM元素樹中。

12月8日

jQuery事件處理：

頁面初始化語法:

$(document).ready(function(){

//頁面加載事件的代碼

});

注意：爲了能正確使用ready事件，必須確保<body>標籤中沒有定義onload事件，不然不會觸發ready事件。並且onload事件必需要等到全部元素下載完成後纔會執行，這會影響執行的效率。

簡介的語法：

$().ready(function) 或者直接寫成 $(function)

切換事件：

hover方法：元素在鼠標懸停與鼠標移除的事件中進行切換。

hover方法的語法：hover([over],out)

toggle方法：能夠依次調用多個制定的函數，直到最後一個函數，接着重複對這些函數輪流進行調用。

toggle語法：$(selector).toggle(function(),function(),function())

jQuery插件

https://plugins.jquery.com/ 下載jquery插件。

開發本身的插件。

插件方法分爲兩類：

1.對象級別的插件開發:指在jQuery的選擇器對象上添加對象方法，值有存在一個jQuery對象的實例時，才能調用該插件。好比confirmOn插件，能夠看做一個對象級別的插件。

2.類級別的插件開發：指在類級別添加靜態方法，而且能夠將函數置於jQuery的命名空間中，好比經典的$.ajax()、$.trim()等就是類級別插件。

開發插件注意事項：

$.fn.extend表示要建立一個對象級別的插件。

12月14日：

關於ExtJS、JQuery UI和easy UI的選擇問題

首先根據你的需求，你須要這些框架具備你須要的UI組件，ExtJS、easy ui都具有你須要用到的那幾款ui組件，好比messagebox、tree、grid。相比較jQuery UI的ui組件不夠全面，好比grid，可是jquery有不少各類插件，包括grid,但它不在jQuery UI內。而Ext JS和easy ui最新版提供的GRID都有20種以上實現不一樣功能grid。

輕重比較，說ExtJS比較大，jquery較小，那只是淺顯的理解。首先ExtJS是一個完整的Framework,是重量級別的，easy ui 是基於jquery庫的一套UI組件庫，是輕量級的，ExtJS是應用application級的，而jquery是page頁面級的。固然application也是由page組成的，那就須要你本身去完成了，考慮你的需求，和使用框架的初衷，選擇使用哪種。同時ExtJs因爲是重量級框架，徹底面向對象風格，提供API很是完備也很是龐大，因此學習成本也想相對較大。

兼容性ExtJS兼容IE全系列瀏覽器和其餘非IE現代瀏覽器，jquery UI向來不太考慮ie低版本瀏覽器的兼容，從態度上的鄙視。easy UI是基於jquery的，jquery2.X以上的版本再也不支持IE6、7、8,，已鄭重聲明，請看官方網站，easyUI最新版本1.3.3使用jQuery2.0,因爲又不少HTML5特性，再也不支持IE6\7\8，低版本由一些小部分的兼容不夠好，請本身作技術選型的時候去測試，你要使用那個版本。在兼容問題上，他們都有瑕疵，看你的接收程度。