jQuery筆記總結

時間 2019-12-08

標籤 jquery 筆記總結欄目 JQuery 简体版

原文原文鏈接

=============== 1 ==================

一、 jQueryjavascript

　　jQuery是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript，因此並非代替JavaScript的。css

　　jQuery是最火的JavaScript庫，已經被集成到VS2010了，獲得了MS的支持，MS的Ajax toolkit和jQuery結合也是最方便，jQuery的擴展插件也是很是多。 html

二、 jQuery特色java

　　a) 很好的解決了不一樣瀏覽器的兼容問題（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）jquery

　　 b) 對於不一樣控件具備統一的操做方式web

　　 c) 體積小（幾十KB）、使用簡單方便（Write Less Do More）編程

　　 d) 鏈式編程$("#div1").draggble().show().hide().fly() 、隱式迭代、插件豐富、開源、免費windows

　　 e) 讓編寫JavaScript程序更簡單、更強大！數組

三、 jQuery中的頂級對象（$）瀏覽器

　　要想使用jQuery的方法必須經過$對象。只有將普通的Dom對象封裝成jQuery對象，才能調用jQuery中的各類方法。

　　$是jQuery簡寫，在代碼中可使用jQuery代替$，但通常爲了方便你們都直接使用$。

四、 window.onload 與 $(document).ready(fn);的區別

　　1）window.onload：頁面徹底加載完畢纔會觸發，即全部Dom元素建立完畢、圖片、Css等都加載完畢後才被觸發。$(document).ready()只要Dom元素加載完畢即觸發。這樣能夠提升響應速度。

　　2）$(document).ready();能夠屢次註冊事件處理程序，而且最終都會執行，而window.onload每次註冊新的事件處理程序時都會將前面的覆蓋掉。

　　注意：

　　1）使用jQuery實現window.onload的效果：$(window).load(fn);這裏是load(fn)而不是onload(fn);與Dom不同。

　　2） $(function(){ … });與$(document).ready(function(){ … });等效

　五、 jQuery通用的兩個函數

　　 $.map(array,fn)//遍歷、修改數組、不支持Dictionary風格數組（能夠遍歷，返回值錯誤）

　　• 對數組中的每一個元素調用fn進行處理，返回值爲處理後的一個新數組，原數組不變。

　　 • 1.4.1不能處理Dictionary風格數組,1.7.1能夠(jQuery是開源的，新版本可能會將舊版本的一些方法的源代碼重寫。）

• fn函數有兩個參數：element(當前循環的數組元素)、index(當前下標)

• 在fn中this並不表示當前循環的元素

　　 $.each(array, fn)//遍歷數組,return false退出循環，return true跳至下一個循環

　　• 遍歷數組中的元素。支持普通數組和Dictionary風格數組。

　　• 對數組array每一個元素調用fn函數進行處理，沒有返回值。

　　• fn函數有兩個參數：key, value。對於普通數組key就是索引。能夠直接在fn中使用this，每次執行傳遞進來的函數， this關鍵字都指向一個不一樣的DOM元素

　　• 通常都是對數據的遍歷。【除非key、value中，value是引用類型不然不能修改數組】

　　• 普通數組推薦用無參，用dict風格的用key、value

　　元素的each：

　　　　jQuery元素也能夠調用each方法，只是對$.each的簡化調用，return false；終止循環

　　　　$.each($('div'),function(k,v){ … }); 等同於：$('div').each(function(k,v){ … });

　　　　$.trim(字符串); //去掉兩端空格，調試看實現方式。內部實際是調用了：

　　1) 字符串.replace(/^\s+/,’’);

　　2) trimLeft = /^[\s\xA0]+/; trimRight = /[\s\xA0]+$/;

　　3) IE一些版本不支持\s空格，\xA0也表示空格

　　六、 jQuery對象和DOM對象

　　 Dom對象若是想調用jQuery的方法必須先轉換爲jQuery對象。

　　獲取Dom對象

　　• var spObj=document.getElementById(‘span1’);

　　• spObj.innerText=‘Hello World’;//存在瀏覽器兼容問題

　　 Dom對象→ jQuery 對象

　　• $(spObj).text(‘哈哈’);//$(Dom對象),就將Dom對象轉換爲了jQuery對象。

　　• var dvObj = $(spObj).text()；//獲取值

　　• $(dvObj).html(‘<font color=」red」>hello </font>’)//至關於innerHTML

　　• $(dvObj).attr(「score」,100)，增長屬性

　　• var s=$(spObj).attr(「score」);//從屬性中獲取值

　　 jQuery→Dom 對象（通常不會轉，只有在jQuery中沒有須要的方法時，才轉的）

　　1) $(spObj).get(0).innerHTML

　　2) $(spObj)[0].innerHTML

　　經過jQuery方式獲取頁面上的元素（獲取後直接就是一個jQuery對象）：

　　• $(‘#id’)、$(‘span’)、$(‘.cls’)、……

　　• 經過jQuery對象便可調用：.text()、val()、html()、css(‘color’,’red’)、……。jQuery中大多都是方法少有屬性，由於屬性很難鏈式編程。獲取值、設置值都是使用的同一個方法，有參數表示設置值，無參數表示取值。

　　注意：Array（數組）是JS語言自己的對象，不是Dom對象，所以不須要轉換爲jQuery對象就能用

　　七、 jQuery選擇器（用於選取頁面上的元素對象）

　　　　1) Dom中獲取頁面元素對象

　　　　• document.getElementById(‘id’);

　　　　• document.getElementsByTagName(‘input’);

　　　　• document.getElementsByName(‘gender’);

　　　　2) jQuery中獲取頁面元素對象

　　　　• Id選擇器：$(‘#id’);若是選擇器中包含特殊字符，用「\\」轉義，如：<span id=」foo:bar」></span>，JQuery代碼爲：#foo\\:bar

　　　　• 標籤選擇器：$(‘input’)【$(‘*’);選擇頁面上的全部元素。】

　　　　• (*)屬性過濾選擇器：$(‘*[name=gender]’)或$(‘[name=gender]’)

　　=============== 2 ==================

　　一、 jQuery的迭代(包裝集)

　　　　隱式迭代：$(‘p’).text(‘嗨’)；//內部是先循環遍歷篩選出$(‘p’)對象，再找text()屬性;在調試時，能夠分兩步（省去篩選對象的時間）：

　　　　1）var pObj=$(‘p’);

　　　　2）pObj.text(‘嗨’);

　　　　如何判斷對象是否存在？

　　　　jQuery選擇器返回的是一個對象數組，調用text()、html()、click()之類方法的時候實際上是對數組中每一個元素迭代調用該方法，所以即便經過id選擇的元素不存在也不會報錯，若是須要判斷指定的id是否存在，應該寫：

if ($("#btn1").length <= 0) { // length屬性，jQuery對象中元素的個數

alert("id爲btn1的元素不存在！");

}

　　　　 $(「#id」).length>0//用途：判斷頁面上的某個元素是否存在，動態建立元素的時候用。

　　二、鏈式編程（直接在屬性後面點屬性）

　　　　前提：每一個方法調用完畢後，都是返回的調用者本身

　　在jQuery中大多數都是方法，屬性不多，緣由：方法有返回值，經過返回值才能實現鏈式編程

　　　　$(‘p’).text(‘嗨’).css(‘backbround-color’,’red’).css(‘border’,’2px solid green’).click(

　　　　alert(($this).text())

　　　　);

　　　　$(‘p’).text(‘嗨’).css({‘backbround-color’:’red’, ‘border’:’2px solid green’}).click(

　　　　alert(($this).text())

　　　　);

　　注意：

　　　　1）鍵值對集合必定要加大括號

　　　　2） background-color或backgroundColor均可

　　　　3）鏈式編程中「.」的時候是針對的上一步的返回值的節點集合的操做。

　　　　4）鏈式編程的時候必定要注意在何時「破壞」了鏈，當前對象的傳遞，若是傳遞被破壞，則繼續鏈式編程會有意想不到的結果！nextAll(),prevAll(),sibilings()。解決辦法：調用end()方法。（返回鏈被破壞前的對象。）

　　三、選擇器

　　類樣式選擇器：$(‘.className’).text();

　　多條件選擇器：$(「p,div,span.menuitem」)，同時選擇p標籤、div標籤和擁有menuitem樣式的span標籤元素。【將每一個選擇器匹配到的結果合併到一塊兒】

　　層次選擇器（5種）：

　　　　一、 $("div li")獲取div下的【全部】li元素（後代，子、子的子……）

　　　　二、 $(「div > li」)獲取div下的【直接】li子元素

　　　　$(「div > * 」)獲取div下的【全部直接】子元素

　　　　3、 $(「.menuitem + div」)獲取樣式名爲menuitem以後的相鄰的（緊接着的）第一個div元素（不經常使用）等同於$(‘.menuitem’).next(‘div’);若是相鄰的那個元素不是div,則不會繼續向後找。能夠：$(「.menuitem + div + p」)

　　　　四、 $(「.menuitem ~ div」)獲取樣式名爲menuitem以後全部的兄弟div元素，等同於$(‘. menuitem ’).nextAll(‘div’)。【nextAll(‘*’)或nextAll()表示後面的全部元素。】

　　注意：選擇器表達式中的空格不能多不能少。易錯！過濾器與表單選擇器時注意。

　　四、獲取當前元素的兄弟元素的方法

next();	以後的緊鄰着的第一個兄弟元素（下一個）
nextAll();	以後的全部兄弟元素
prev();	以前的緊鄰着的兄弟元素（上一個）
prevAll();	以前的全部兄弟元素
siblings();	全部兄弟元素

　　注意：nextAll()、prevAll()等方法返回值是一個元素集合，區別鏈式編程的返回值。

　　五、基本過濾選擇器（通常以＇:＇開頭）

　　 :first 選取第一個元素。$("div:first")選取第一個<div>。等同於：$(‘div’).first()

　　 :last 選取最後一個元素。$("div:last")選取最後一個<div>。等同於：$(‘div’).last()

　　 :not(選擇器) 選取不知足「選擇器」條件的元素，$("input:not(.myClass)")選取樣式名不是myClass的<input>

　　 :checkbox，匹配全部複選框

　　 :even、:odd，選取索引是偶數、奇數的元素：$("input:even")選取索引是偶數的<input>

　　 :eq(索引序號)、gt(索引序號)、:lt(索引序號) 選取索引等於、大於、小於索引序號的元素，好比$("input:lt(5)")選取索引小於5的<input>。注意：元素索引從0開始

　　 $(":header")選取全部的h1……h6元素（*）

　　 $("div:animated")選取正在執行動畫的<div>元素。（*）

不只可使用選擇器進行絕對定位，還能夠進行相對定位，只要在$()指定第二個參數，第二個參數爲相對的元素：$(選擇器,context);例如：$(‘td’,$(‘div table tr’));context參數能夠是dom對象集合或jQuery對象，若沒有參數，則會在整個文檔中搜索

　　六、屬性、表單過濾器

　　屬性過濾選擇器（7種）（以id屬性爲例）：

$('div[id]');	選取有id屬性的div
$('div[id = vv]');	選取id爲w的div
$('div[id != vv]');	選取id不爲w的div
$('div[id ^= vv]');	選取id以w開頭的div
$('div[id $= vv]');	選取id以w結尾的div
$('div[id *= vv]');	選取id包含w的div
$('div[id][name][value=sss]');	選取同時包含id屬性、name屬性、value屬性等於ss的div

　　注意：jQuery中沒有對getElementsByName進行封裝，用$("input[name=abc]")

　　表單對象選擇器（過濾器）：

　　　　• $("#form1:enabled")選取id爲form1的表單內全部啓用的元素

　　　　• $("#form1:disabled")選取id爲form1的表單內全部禁用的元素

　　　　• $("input:checked")選取全部選中的元素（Radio、CheckBox）

　　　　• $("select:selected")選取全部選中的選項元素（下拉列表，<select>\<option>）

　　表單選擇器

　　 $(「:input")選取全部<input>、<textarea>、<select>和<button>元素。和$("input")不同， $("input")只得到<input>

　　 $(":text")選取全部單行文本框，等價於$("input[type=text]")

　　 $(「:password」)選取全部密碼框。

　　同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。代替了$(‘input[type=***]’);

　　七、 jQuery的DOM操做

　　一、使用html()讀取或者設置元素的innerHTML：

　　alert($("a:first").html()); $("a:first").html("hello");

　　二、使用text()讀取或者設置元素的innerText：

　　alert($("a:first").text()); $("a:first").text("hello");

　　三、使用attr()讀取或者設置元素的屬性，對於jQuery沒有封裝的屬性（全部瀏覽器沒有差別的屬性）用attr進行操做。

alert($("a:first").attr("href "));

$("a:first").attr("href", "http://www.rupeng.com");

attr({‘key’ :’value’ , ’k’ :’v’});

　　八、動態建立DOM節點

　　使用$(html字符串)來建立Dom節點，而且返回一個jQuery對象，而後調用append()將新建立的節點添加到Dom中：

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

　　建立radio，使用$(‘<input name=「」/>’);，不要在建立好後經過attr()設置name，如：attr(‘name’,’gender’).//在IE6下有問題。

　　追加方法

append()	在元素的末尾追加元素（最後一個子節點）
prepend()	在元素的開始添加元素（第一個子節點）
after()	在元素以後添加元素（添加兄弟）
before()	在元素以前添加元素（添加兄弟）

　　其餘追加方法（將本身追加到某元素）

子元素.appendTo(父元素);	主動巴結!到最後一個
子元素.prependTo(父元素);	主動巴結到第一個
(*)A.insertBefore(B);	將A插入到B的前面，等同於B.before(A);
(*)X.insertAfter(Y);	將X插入到Y的後面，等同於Y.after(X);

　　刪除節點

　　1) empty()，清空某元素下的全部子節點

內部實現：while(ele.firstChild){ ele.removeChild(ele.firstChild); }

　　2) 元素.remove(expr) ，刪除當前元素，返回值爲被刪除的元素。還能夠繼續使用被刪除的節點。好比從新添加到其餘節點下。

　　權限選擇中：var items = $(「#select1 option:selected」).remove(); $(「#select2」).append(items); 更狠的：$(「#select1 option:selected」).appendTo($(「#select2」))；//在jQuery1.4.1下不太同樣。

　　九、其餘：

　　a) 有開始和結束標籤的元素纔有text()屬性

　　b) js中數組的length是動態變化的，每次增長或減小一個元素就會自動增長或減少

　　c) 事件中的函數，最後不能帶分號，會報錯。如：$(‘#dv’).click=(function(){…});

　　d) color ：注意第一個字母小寫

　　e) 對於table中的元素，在選擇具體tr或td時要經過table獲取

　　f) p標籤放到div中後會將div撐大，設置一下p的margin:0就行了。

　　g) jQuery中，arr.join(‘ , ’)，將數組arr的元素用‘，’分隔

　　h) 設置除了本身的樣式不一樣的方法：1）$(‘tr:not(this)’) ，2）$(‘tr’).css();$(this).css();

　　i) 注意：children()，取得包含匹配的元素集合中的每個元素的全部子元素的元素集合

　 j)動態建立一個radioButton，怎樣給radio後面添加文本 ???

　　=============== 3 ==================

　　一、節點操做

　　替換節點（replaceWith()、replaceAll() ）：

　　1) replaceWith(content| fn)，將全部匹配的元素替換成指定的HTML或DOM元素。若是傳遞一個函數進來的話，返回值必須是HTML字符串

　　a) $("br").replaceWith("<hr/>"); 用<hr/>替換br

　　b) HTML代碼:

<div class="container">
        <div class="inner first">Hello<div>
        <div class="inner second">And<div>
        <div class="inner third">Goodbye<div>
</div>

jQuery代碼:

$('.third').replaceWith($('.first'));

結果：

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

　　注意：用第一段替換第三段，可見他是移動到目標位置來替換，而不是複製一份來替換

　　2) replaceAll(selector)，用匹配的元素替換掉全部 selector匹配到的元素

　　3) $(‘<br/>’).replaceAll(‘hr’); //用<br/>元素替換全部的hr調用者也得是選擇器選擇到的元素。

　　注意：在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成爲一個破壞性操做，要選擇先前選中的元素，須要使用end()方法

　　包裹節點

　　4) wrap(html| ele| fn)，將全部元素逐個用指定標籤包裹

把全部p用一個新建立的div包裹

$("p").wrap("<div class='wrap'></div>");

用ID是"content"的div將每個p包裹起來

$("p").wrap(document.getElementById('content'));

用原先div的內容做爲新div的class，並將每個元素包裹起來

$('.inner').wrap(function() {

return '<div class="' + $(this).text() + '" />';

});

　　5) wrapAll(html|ele)，將全部匹配的元素用單個元素包裹起來

$(A).wrapAll(‘B’)，在A標籤的最外層只包一個B標籤，若其中有其餘的標籤，則會將該標籤移動到B標籤的最後面

　　$(「b」).wrap(「<font color=‘red’></font>」) 將全部粗體字紅色顯示

　　結果：<font color=‘red’><b></b></font>

　　6) wrapInner()//在內部圍繞

　　二、樣式操做：

attr("class")	獲取樣式值
attr("class"," myclass")	設置樣式
addClass("myclass")	追加樣式，不影響其餘樣式
removeClass("myclass")	移除樣式
toggleClass("myclass")	切換樣式（若存在，去掉，不然添加）
hasClass("myclass")	判斷是否應用了某樣式

注意：

$(‘body * ’)，選擇器*表示全部類型的控件。亦能夠寫爲：$(‘*’)

屬性：

　　attr( name | properties | key,（value| fn）)，設置或返回被選元素的屬性值

name，返回文檔中全部圖像的src屬性	$("img").attr("src");
Properties，爲全部圖像設置src和alt屬性	$("img").attr({ src: "test.jpg", alt: "Test Image" });
(Key, value)，爲全部圖像設置src屬性	$("img").attr("src ","test.jpg");
(Key,fn)，把src屬性值設置爲title屬性值	$("img").attr("title", function() { return this.src });

　　注意：使用removeAttr()刪除屬性，在源代碼中看不到，這是和清空屬性的區別。attr(‘name’,’’)

事件：

　　unbind(type,[data| fn])，bind()的反向操做，從每一個匹配的元素中刪除綁定的事件

(type, fn)

Type：刪除元素的一個或多個事件，由空格分隔多個事件值。

fn：要從每一個匹配元素的事件中反綁定的事件處理函數

(type, false)

Type:同上；False:設置爲false會使默認的動做失效

eventObj

事件對象，這個eventObj參數來自事件綁定函數

　　例：

　　1）unbind()，移除元素上綁定的全部事件，unbind("click")；只移除click事件的綁定;bind:+=；unbind:-=

　　2）刪除特定函數的綁定：

　　var foo = function () {

　　 // 處理某個事件的代碼

　　};

　　$("p").bind("click", foo); // ... 當點擊段落的時候會觸發 foo

　　$("p").unbind("click", foo); // ... 不再會被觸發 foo

　　三、 RadioButton操做

　　l 取得RadioButton的選中值，被選中的radio只有一個值，因此直接用val()

　　• $("input[name=gender]:checked").val()

　　• <input id="rd2" checked="checked" name="gender" type="radio" value="男" />男<input id="rd1" checked="checked" name="gender" type="radio" value="女" />女<input id="rd3" checked="checked" name="gender" type="radio" value="未知" />未知</p>

　　設置RadioButton的選中值：.attr(‘checked’, true);

　　• $("input[name=gender]").val(["女"]);

　　• 或者 $(":radio[name=gender]").val(["女"]);

　　• 注意val中參數的[]不能省略,val()的參數必須是一個數組。

　　對RadioButton的選擇技巧對於CheckBox和Select列表框也適用

　　除了可使用val批量設置RadioButton、CheckBox等的選中之外，還能夠設定checked屬性來單獨設置控件的選中狀態

　　 $(‘#s1’).val ([‘1’,’2’, ’ 3’]);//同時設置多個下拉菜單選中

　　四、其餘

　　a) script代碼放到元素下面能夠省略「$()；」

　　b) 選擇器之間須要空格、+、~等隔開，過濾器不須要，選擇器和過濾器之間也不須要

　　$(‘#s2’).append($(‘#s1 :selected’).remove()); //此處注意#s1 :selected之間的空格，因爲selected自己也是一個選擇器，不是一個過濾器，表示是s1下面的全部被選中的option

　　c) 焦點進入控件的事件是focus，焦點離開控件的事件是blur。

　　1）若是報錯「例外被拋出」等，極可能是選擇器表達式有問題，好比單詞拼寫錯誤、加了沒必要要的空格等。jQuery是一堆寫好的JavaScript函數庫能夠和普通JS代碼混着用。最好不要dom、jQuery方式混着用。

　　2）注意不一樣jQuery版本的區別。

　　=============== 4 ==================

　　一、事件

　　1) jQuery中的事件綁定：$("#btn").bind('click', {'name':'sxl' ,'age':21} ,function(e)

　　{alert(e.data.name);alert(e.data.age);})，每次都這麼調用太麻煩，因此jQuery能夠用$("#btn").click(function(){})來進行簡化

　　2) 合成事件hover[‘hʌvə]，hover(enterfn , leavefn)，當鼠標放在元素上時調用enterfn方法，當鼠標離開元素時調用leavefn方法。至關於mouseover與mouseout事件的結合。

　　3) 事件冒泡：jQuery中也像JavaScript同樣是事件冒泡。若是想得到事件相關的信息，只要給響應的匿名函數增長一個參數：e（事件對象）。調用事件對象的stopPropagation()方法終止冒泡。e. stopPropagation();

　　標準js方式：e.stopPropagation();

　　 IE下：e.cancelBubble = true；

　　eg:　　$("tr").click(function(e) { alert("tr被點擊"); e.stopPropagation(); });//注意函數的參數是e

　　4) 阻止默認行爲：有的元素有默認行爲，好比超連接點擊後會轉向新連接、提交按鈕默認會提交表單，若是想阻止默認行爲只要調用事件對象的preventDefault()方法和window.event.returnValue=false效果同樣。

$(「a」).click(function(e){alert(「全部超連接暫時所有禁止點擊」);

e.preventDefault(); });//jQuery中封裝的。

　　5) jQuery的事件對象：event對象。

　　• 屬性：pageX、pageY、target得到觸發事件的元素(冒泡的起始，和this不同，至關於window.event.srcElement)、which若是是鼠標事件得到按鍵（1左鍵，2中鍵，3右鍵），若是是鍵盤事件keydown則獲取的是keyCode。

　　• altKey、shiftKey、ctrlKey得到alt、shift、ctrl是否按下，爲bool值

　　• one()一次性事件綁定：只執行一次隨後當即unbind。如：one(‘click’, fn);

　　• e.type獲取當前事件的類型click、mousemove、…

　　• $(this).offset()//獲取當前元素相對於頁面的座標。

$(this).offset().left、$(this).offset().top

　　注意：target獲取的是原生的DOM對象，還須要轉換爲jQuery對象

　　二、鼠標

　　1） mousemove([[data],fn])事件，鼠標在元素上移動時觸發。事件處理函數會被傳遞一個變量(事件對象)，其.clientX（.pageX）和 .clientY（.pageY）屬性表明鼠標的座標

　　在mousemove、click等事件的匿名響應函數中若是指定一個參數e，那麼就能夠從e讀取發生事件時的一些信息，好比對mousemove等鼠標事件來講，就能夠讀取e.pageX、e.pageY來得到發生事件時鼠標在頁面的座標。

　　練習：Tooltips效果。//注意position爲absolute

　　2） mouseover([[data],fn])，在鼠標移入對象時觸發

3） mouseout與mouseleave事件的區別：mouseleave事件（經常使用mouseenter事件一塊兒使用）只有在鼠標指針離開被選元素時，纔會觸發。而mouseout 事件是在鼠標指針離開任何子元素時觸發。

　　三、動畫

　　　　1） show()、hide()：顯示、隱藏元素。不帶參數，則當即顯示、隱藏；若指定速度參數則會用指定時間進行動態顯示、隱藏，也可以使用內置速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery動畫函數中須要速度的地方通常也可使用這三個值。

　　　　2） toggle(speed)：在顯示、隱藏之間切換

　　 $(":button[value=show]").click(function() { $("div").show(); });

　　$(":button[value=hide]").click(function() { $("div").hide(); });

　　　　3）播放聲音<bgsound id=「snd」 loop=「0」 src=「」>,動態設置src的wav文件便可。

　　　　　　eg： windows選項卡效果：1）菜單用ul→li 。2）下面的內容用三個div

　　ul標籤說明：

　　　　1) TYPE 標籤屬性設置了全部後續的列表類型，除非設置了不一樣的 type 值。

　　　　2) UL 元素從 BODY 的 font 屬性的高度中繼承 line-height。例如，若是 BODY 的 font-size 屬性大於 UL 元素的 font-size 屬性，那麼 UL 中的列表項目就會根據 BODY 的 font-size 間距排列。

　　　　3) 此元素在 IE 3.0 及以上版本的 HTML 中可用，在 IE4.0 及以上版本的腳本中可用。

　　　　4) 此元素是塊元素。

　　　　5) 此元素須要關閉標籤。

　　li標籤說明：

　　　　1) TYPE 標籤屬性的值 disc, circle 和 square 應用於無序列表；值 1, a, A, i 和 I 應用於有序列表。

　　　　2) 當 LI 元素使用樣式表(CSS)絕對定位時，列表項目的符號並不現實。

　　　　3) 此元素是塊元素。

　　　　4) 此元素不須要關閉標籤。

　　4）滑動效果：slideDown()、slideUp()、slideToggle()

　　5）淡入淡出（透明）

　　　　• fadeIn()、fadeOut()、

　　　　• fadeToggle()，經過不透明度的變化來開關全部匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數

　　　　• fadeTo()，把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數

　　6）自定義動畫

　　　　• animate({樣式},speed)

　　　　部分樣式不支持：backgroundColor、color、borderStyle、……

　　• 使用animate設置對象位置的時候要確保position的值爲absolute或relative.

　　• 中止動畫正在執行動畫的元素.stop()(*)

　　• 動畫隊列：.animate().animate().animate()….;

　　• $(‘#dvAnimate’).animate({ width: ‘+=100px’, height: ‘+=100px’, left: ‘300px’, top: ‘100px’, borderWidth: ‘20px’ }, 2000)，在2000毫秒內，width增長100px

　　　　不少Dom作的功能用ASP.net服務端代碼也能完成，可是那樣會頁面頻繁刷新，性能、可用性很是差。能用Dom操做就不要用ASP.net服務端代碼。先學HTML、JS、Dom，不要一上來就學asp.net，由於那樣容易被ASP.Net好用所迷惑。

　　四、注意

　　　　1） id和jQuery對象的區別：動態建立出來的對象在append以前是不能經過$("#id")來引用。

　　　　2） js中單引號與雙引號

　　　　3） $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中，不在table中。

　　五、 jQuery插件

　　　　1）什麼是cookie： Cookie就是存儲在瀏覽器裏的一些數據。它須要瀏覽器的支持，能夠禁用，但通常不用考慮禁用Cookie的狀況。

　　　　2） Cookie的幾個特徵：

　　1）與域名相關，163.com不能讀取baidu.com記錄的Cookie；

　　2）字節有限：一個域名能寫入的Cookie總尺寸、總條數是有限制的，通常是幾千字節、幾十條，超過之後瀏覽器本身會根據本身的策略移除一些Cookie；

　　3） Cookie中數據，必須是無關緊要的，由於瀏覽器可能會按期清除、用戶也可能會手動清除，因此下次不必定能讀出來。

　　　　3） jQuery Cookie使用

　　　　使用方法，Cookie保存的是鍵值對

　　• 一、添加jQuery.cookie.js

　　• 二、設置值，$.cookie('名字', '值')。cookie中保存的值都是文本。

　　• 三、讀取值，var v=$.cookie('名字')

　　alert($.cookie("用戶名"));

　　$.cookie("用戶名","tom");在同域名的另一個頁面中也能讀取到。

　　設置值的時候還能夠指定第三個參數，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true })，expires表示要求瀏覽器保留Cookie幾天，這個值只是給瀏覽器的建議，可能沒到時間就已經被清除了。能夠實現「勾選【記錄個人用戶名10天】」的功能。若是不設定expires在瀏覽器關閉之後就清除，options參數用哪一個設置哪一個。 secure：傳輸cookies時候，是否須要一個安全協議。

　　　　 IE開發人員工具，查看緩存。IECollection中也有。

　　 jqzoom插件圖片放大

　　步驟1：<script type='text/javascript' src='js/jquery-1.2.6.js'></script> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

　　步驟2：<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

　　步驟3：<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a>

　　步驟4：$(document).ready(function(){ $('.MYCLASS).jqzoom(); });

　　步驟4的詳細配置：

　　$(document).ready(function(){ var options = { zoomWidth: 300, zoomHeight: 250, xOffset: 10, yOffset: 0, position: "right" //and MORE OPTIONS }; $('.MYCLASS).jqzoom(options); });

　　經常使用的jQuery插件

　 jQuery官方的UI控件 jQueryUI

　　 http://jQueryui.com/ 下發包

　　表現和內容分離，語義化。

　　 jQuery.validate 表單驗證插件

　　 Form,用於爲表單提供直接的Ajax能力

　　全部插件列表http://plugins.jQuery.com/

　　步驟1：解壓jQueryUI後將CSS目錄（裏面包含images）與Js目錄拷貝的網站下。

　　步驟2：導入jquery-ui-1.8.16.custom.css和jquery-ui-1.8.16.custom.min.js

　　步驟3：$(function () { $('#txt1').datepicker(); });

　　六、網頁分析工具

　　　　DebugBar→IE的