當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DHL:jQuery框架学习使用总结，插件，继续中...

發布時間：2024/1/17 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 DHL:jQuery框架学习使用总结，插件，继续中... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.基礎知識：jQuery事件與事件對象【文章來自學IT網：http://www.xueit.com/html/2009-05/33_2020_00.html】

事件是javascript的靈魂: document.getElementById("testDiv2").onclick = showMsg; function showMsg(event) { alert("!!!"); } 等效于:<div id="testDiv1" οnclick="alert("!!!");">單擊事件 1</div> 我們常用的修改元素屬性添加事件的方式, 實際上是建立了一個匿名函數:document.getElementById("testDiv1").onclick = function(event){ alert("!!!");}; 這個匿名函數的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.這種方式的弊端是: 1. 只能為一個事件綁定一個事件處理函數. 使用"="賦值會把前面為此時間綁定的所有事件處理函數沖掉. 2. 在事件函數(無論是匿名函數還是綁定的函數)中獲取事件對象的方式在不同瀏覽器中要特殊處理:IE中,事件對象是window對象的一個屬性. 事件處理函數必須這樣訪問事件對象: obj.οnclick=function() { var oEvent = window.event; } 在DOM標準中,事件對象必須作為唯一參數傳給事件處理函數: obj.οnclick=function() { var oEvent = arguments[0]; } jQuery中的事件有了jQuery, 我們有了處理對象事件的一系列函數. 上面基礎知識還是要懂, 但是再也不用自己去實現處理多播事件委托的函數了. 正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:$("#testDiv4").bind("click", showMsg);我們為id是testDiv4的元素, 添加列click事件的事件處理函數showMsg. 使用jQuery事件處理函數的好處: 1. 添加的是多播事件委托. 也就是為click事件又添加了一個方法, 不會覆蓋對象的click事件原有的事件處理函數. $("#testDiv4").bind("click", function(event) { alert("one"); }); $("#testDiv4").bind("click", function(event) { alert("two"); });單擊testDiv4對象時, 依次提示"one"和"two". 2. 統一了事件名稱. 添加多播事件委托時, ie中是事件名稱前面有"on". 但是使用bind()函數我們不用區分ie和dom , 因為內部jQuery已經幫我們統一了事件的名稱. 3. 可以將對象行為全部用腳本控制. 讓HTML代碼部分只注意"顯示"邏輯. 現在的趨勢是將HTML的行為, 內容與樣式切分干凈. 其中用腳本控制元素行為, 用HTML標簽控制元素內容, 用CSS控制元素樣式. 使用jQuery事件處理函數可以避免在HTML標簽上直接添加事件.

?2. 對事件的總結中，

$("#testDiv").click(function(event) { alert("test div clicked ! "); });等效于:$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });
觸發單擊事件:
$("#testDiv").click();等效于$("#testDiv").trigger("click");

hover?事件是 mouseover 和 mouseout 兩個事件。所以hover方法是兩個參數。如：

代碼 $("#text1").hover(function(){
//移到元素上添加CSS
$(this).addClass("hover");
}, function(){
//移開元素上刪除CSS
$(this).removeClass("hover");
});

如果只想寫鼠標的進入或離開的動作時用jquery的mouseenter和mouseleave事件。（為了避免冒泡問題，不要注冊mouseover 和 mouseout）

?3. this關鍵詞：

當觸發任何事件處理程序時，關鍵詞this引用的都是攜帶相應行為的COM元素。而$()函數可以將一個DOM元素作為參數，就可以方便的使用$（this）,為相應的元素創建一個jQuery對象，就如同css選擇符找到該元素一樣了。

附：?

JQuery this 和 $(this) 的區別

$("#textbox").hover(?
????? function()?{?
?????????? this.title?=?"Test";?
????? },?
????? fucntion()?{?
????????? this.title?=?"OK”;?
????? }?
);

這里的this其實是一個Html 元素(textbox)，textbox有text屬性，所以這樣寫是完全沒有什么問題的。
但是如果將this換成$(this)就不是那回事了，Error--報了。

Error Code：
$("#textbox").hover(
?????? function() {
????????? $(this).title ＝ "Test";
?????? },
?????? function() {
????????? $(this).title = "OK";
?????? }
);

這里的$(this)是一個JQuery對象，而jQuery對象沒有title 屬性，因此這樣寫是錯誤的。

JQuery擁有attr()方法可以get/set DOM對象的屬性，所以正確的寫法應該是這樣：

正確的代碼：
$("#textbox").hover(
????? function() {
???????? $(this).attr(’title’, ‘Test’);
????? },
????? function() {
???????? $(this).attr(’title’, ‘OK’);
????? }
);

使用JQuery的好處是它包裝了各種瀏覽器版本對DOM對象的操作，因此統一使用$(this)而不再用this應該是比較不錯的選擇。

?4. 常用方法

jQuery中常用的函數方法總結

jQuery中為我們提供了很多有用的方法和屬性，自己總結的一些常用的函數，方法。個人認為在開發中會比較常用的，僅供大家學習和參考。

事件處理?

ready(fn)

代碼：
$(document).ready(function(){
? // Your code here...
})；

作用：它可以極大地提高web應用程序的響應速度。通過使用這個方法，可以在DOM載入就緒能夠讀取并操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。

bind(type,[data],fn)

?代碼：
$("p").bind("click", function(){
? alert( $(this).text() );
});

作用：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。起到事件監聽的作用。

toggle(fn,fn)
代碼：

$("td").toggle(
? function () {
??? $(this).addClass("selected");
? },
? function () {
??? $(this).removeClass("selected");
? }
);

作用：每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。挺有趣的一個函數，在動態實現某些功能的時候可能會用到。

(像click(),focus(),keydown()這樣的事件這里就不提了，那些都是開發中比較常用到的。)

外觀效果

addClass(class)和removeClass(class)

代碼：
$(".stripe tr").mouseover(function(){?
?????????????? $(this).addClass("over");}).mouseout(function(){
?????????????? $(this).removeClass("over");})
});
也可以寫成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：為指定的元素添加或移除樣式，從而實現動態的樣式效果，上面的實例中實現鼠標移動雙色表格的代碼。

css(name,value)

代碼：
$("p").css("color","red");

作用：很簡單，就是在匹配的元素中，設置一個樣式屬性的值。這個個人感覺和上面的addClass(class)有點類似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代碼：

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用：jQuery中提供的比較常用的幾個動態效果的函數。還可以添加參數：show(speed,[callback])以優雅的動畫顯示所有匹配的元素，并在顯示完成后可選地觸發一個回調函數。

animate(params[,duration[,easing[,callback]]])

?
作用：制作動畫效果用到的函數，功能非常的強大，可以連續使用此函數。

查找篩選

map(callback)
HTML 代碼:
<p><b>Values: </b></p>
<form>
? <input type="text" name="name" value="John"/>
? <input type="text" name="password" value="password"/>
? <input type="text" name="url" value="http://ejohn.org/%22/>
</form>
jQuery 代碼:
$("p").append( $("input").map(function(){
? return $(this).val();
}).get().join(", ") );
結果:
[ <p>John, password, http://ejohn.org/%3C/p> ]

?
作用：將一組元素轉換成其他數組（不論是否是元素數組）你可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立。

find(expr)

HTML 代碼:

<p><span>Hello</span>, how are you?</p>
jQuery 代碼:

$("p").find("span")
結果:

[ <span>Hello</span> ]

作用：搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。

文檔處理

attr(key,value)
HTML 代碼:
<img/><img/>
jQuery 代碼:
$("img").attr("src","test.jpg");

作用：取得或設置匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined 。在控制HTML標記上是必備的工具。

html()/html(val)
HTML 代碼:
<div><p>Hello</p></div>
jQuery 代碼:
$("div").html();
結果:
<p>Hello</p>

作用：取得或設置匹配元素的html內容，同類型的方法還有text()和val()。前者是取得所有匹配元素的內容。，后者是獲得匹配元素的當前值。三者有相似的地方常用在內容的操作上。

wrap(html)
HTML 代碼:
<p>Test Paragraph.</p>
jQuery 代碼:
$("p").wrap("<div class='wrap'></div>");
結果:
<div class="wrap"><p>Test Paragraph.</p></div>

?
作用：把所有匹配的元素用其他元素的結構化標記包裹起來。
這種包裝對于在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。可以靈活的修改我們的DOM。

empty()
HTML 代碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代碼:
$("p").empty();
結果:
<p></p>

作用：刪除匹配的元素集合中所有的子節點。

Ajax處理

load(url,[data],[callback])
url (String) : 待裝入 HTML 網頁網址。
data (Map) : (可選) 發送至服務器的 key/value 數據。
callback (Callback) : (可選) 載入成功時回調函數。

代碼：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
?? alert("The last 25 entries in the feed have been loaded");
?});

作用：載入遠程 HTML 文件代碼并插入至 DOM 中。這也是Jquery操作Ajax最常用最有效的方法。

serialize()
HTML 代碼:
<p id="results"><b>Results: </b> </p>
<form>
? <select name="single">
??? <option>Single</option>
??? <option>Single2</option>
? </select>
? <select name="multiple" multiple="multiple">
??? <option selected="selected">Multiple</option>
??? <option>Multiple2</option>
??? <option selected="selected">Multiple3</option>
? </select><br/>
? <input type="checkbox" name="check" value="check1"/> check1
? <input type="checkbox" name="check" value="check2"
checked="checked"/> check2
? <input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
? <input type="radio" name="radio" value="radio2"/> radio2
</form>
jQuery 代碼:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

作用：序列化表格內容為字符串。用于 Ajax 請求。

工具

jQuery.each(obj,callback)

代碼：
$.each( [0,1,2], function(i, n){
? alert( "Item #" + i + ": " + n );
});//遍歷數組
$.each( { name: "John", lang: "JS" }, function(i, n){
? alert( "Name: " + i + ", Value: " + n );//遍歷對象
});

作用：通用例遍方法，可用于例遍對象和數組。

jQuery.makeArray(obj)
HTML 代碼:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
jQuery 代碼:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
結果:
Fourth
Third
Second
First

作用：將類數組對象轉換為數組對象。使我們可以在數組和對象之間靈活的轉換。

jQuery.trim(str)

?
作用：這個大家應該很熟悉，就是去掉字符串起始和結尾的空格。

?5. 編寫單獨文件和插件：

例如如下代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title></title><style type="text/css">.abj{ width:100px; background-color:Blue; height:20px;}div { padding:20px;}#tooltip{ position:absolute; width:120px;height:22px; line-height:22px; border:1px solid #ccc; background:#f6f6f6; font-size:12px;}</style><script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> <script type="text/javascript">//超鏈接提示:$(document).ready(function () {var x = 10;var y = 20;$("a.tooltip").mouseover(function (e) {this.myTitle = this.title;this.title = "";var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";$("body").append(tooltip);$("#tooltip").css({"top": (e.pageY + y) + "px","left": (e.pageX + x) + "px"}).show("fast");}).mouseout(function () {$("#tooltip").remove();this.title = this.myTitle;})}); </script></head><body><p><a href="#" class="tooltip" title="這是我的超鏈接提示1">提示</a></p> <p><a hef="#" title="這是自帶提示1">自帶提示1</a></p> </body> </html>

?"超鏈接提示"的功能應該做成插件所有的頁面可以共用。

方式一：

建立單獨的js文件：

this.dhltip = function () {var x = 10;var y = 20;$("a.tooltip").mouseover(function (e) {this.myTitle = this.title;this.title = "";var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";$("body").append(tooltip);$("#tooltip").css({"top": (e.pageY + y) + "px","left": (e.pageX + x) + "px"}).show("fast");}).mouseout(function () {$("#tooltip").remove();this.title = this.myTitle;}) }jQuery(document).ready(function () { dhltip(); }); 這樣就ok！

方式二,也可以做成插件的形式jquery.dhltip.js：

總結：jQuery插件的結構

?第一種：擴展到$ 全局

(function ($) {
??? $.extend(
??? {
tip1: function(){alert("tip1");}
}?? //jQuery.extend(object)方法參數要求一個結構式對象！
?);
})(jQuery);

第二種：擴展到jquery對象

Html：

獲取一組radio被選中項的值：$("input[type=radio][checked]").val()

（幫助：jquery 的中括號的意思：匹配包含給定屬性的元素。匹配多個屬性不能寫成：$("input[type=radio，checked]")）

也不能：$("input:radio[name='paykind']").val() 取，這樣取到的值只是初始化的值一定要加上checked屬性。?

轉載于:https://www.cnblogs.com/dudu837/archive/2010/10/19/1855512.html

總結

以上是生活随笔為你收集整理的DHL:jQuery框架学习使用总结，插件，继续中...的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： WPF 放大镜(Magnifying G
下一篇：线性表-归并算法