黑馬javaee就業(yè)32期基礎(chǔ)1-25天dayjavascript預(yù)習(xí)筆記

JavaScript內(nèi)容概JavaScript加強(qiáng)，涉及到ECMAScript語法、BOM對象、DOM對象以 Ajax傳統(tǒng)編程jQuery框架，九種選擇器 學(xué)習(xí)內(nèi)JQueryUI插jQueryAjax編jQuery 插反向Ajax編程(彗星一、JavaScript基礎(chǔ)加JavaScript是在瀏覽器內(nèi)容運(yùn)行，無需編譯、解釋執(zhí)行動(dòng)態(tài) 語言，所有變量使用var定義。t的3個(gè)組成部分分別為： 、文檔對模型、瀏覽器對象模型帶格式的:字體帶格式的:字體默認(rèn)軟雅中文軟雅10體顏色帶格式的:字體顏色①：代碼<title>JavaScript程序編寫內(nèi)部JS<script 編寫JavaScript代<title>JavaScript程序編寫內(nèi)部JS<script 編寫JavaScript代 外部JS批注[ThinkPad1注意編碼的設(shè) 批注[ThinkPad2]:這里不建議使用language屬性帶格式的:無,行距帶格式的:無,行距:單倍行批注[ThinkPad3]:這里重點(diǎn)講解變量以及函數(shù)，運(yùn)符和程序結(jié)構(gòu)與Java類似JavaScript依次從變量(標(biāo)示符、關(guān)鍵字)，運(yùn)算符，程序結(jié)構(gòu)(ifwhilefor)，以r來定義，是弱類型變量，不代表沒有類型，變量本身還是有類ara0，arb.5；他們分別為整數(shù)以及浮點(diǎn)數(shù)類型】每行結(jié)尾分號(hào)可有可無，建議編寫注釋和Java類似，支持單行注釋(//)和多行注釋(/*③：數(shù)據(jù)JavaScript分為原始數(shù)據(jù)類型 數(shù)據(jù)類型，分 于棧和堆中原始數(shù)據(jù)類型：number、string、boolean、null和數(shù)據(jù)類型：存在很多種，每種都是object對script //定義所有變量都用var，但是變script //定義所有變量都用var，但是變量本身具 vara 整 varb 浮點(diǎn) varc=true;// vardabc"本數(shù)據(jù)類 vare'abc'字符 通過typeof查看數(shù)據(jù)alert(typeof //通過instanceof判斷變量數(shù)據(jù)類型alert(dinstanceof alert(ainstanceof newString("abc對象類 alert(sinstanceof</script批注[ThinkPad4顯示數(shù)據(jù)[ThinkPad5結(jié)果為false，批注[ThinkPad4顯示數(shù)據(jù)[ThinkPad5結(jié)果為false，變量d[ThinkPad6這里的s是對象類型object，前面的d是基本數(shù)據(jù)類型null：對象不存undefined：對象存在 屬性或者方法不存在(對象未初始化ECMAScript對ECMAScript常用的有7個(gè)對象，依次為String、Number、Boolean、Math、Date、Array以及Regxp。①：String類型常用屬性方建議查看手冊，這里需要注意的為length屬性以及match方 Java中提供matches方法例如 返回JavaScript與matches方法等價(jià)的那個(gè)方法，是RegExp對象提供test方法 /^\d+$等價(jià)于new"1234".match("^\\d+$")返回是匹配正則表達(dá)式內(nèi)等價(jià)②：Math常用屬性和PI屬round(x)把數(shù)四舍五入為最接

帶格式的:字體:(中文)+中文正文宋體帶格帶格式的:字體:(中文)+中文正文宋體帶格式的:縮進(jìn):首行縮進(jìn):0厘思路，不會(huì)沒啥關(guān)系，查手冊即可[ThinkPad8這里提到的為常用的，還有很多其批注[ThinkPad9]:^和&分別為開始和結(jié)束符random返回0~1之間的隨機(jī)pow(x,y次sqrt(x)③：Date常用屬性和toLocaleString()返回當(dāng)?shù)乇镜鼗掌诟袷?日11:07:52getTime()返回從 到目前為止毫秒值script vars1 s1是基本數(shù)據(jù)類 vars2=newString("abcs2是對象類// s2);script vars1 s1是基本數(shù)據(jù)類 vars2=newString("abcs2是對象類// s2);//alert("98"==98);////alert("true"==true);////alert(1==true);// vard010;/八進(jìn) vard20x10十六進(jìn) match方法類似Java中matches，有區(qū)alert(/^\d+$/.test("1234abc"等價(jià)于java中//alert("1234".match("^\\d+$")math方法返回的是匹配正則表達(dá)式內(nèi)容，alert(/^\d+$/.exec("1234abc1234"返回匹配的內(nèi) Date使 vardatenewDate當(dāng)前日 alert(date.toLocaleString());//返回當(dāng) 日期格vardateStr=date.getFullYear()+"-+"-"+date.getDate()+" </script批注[ThinkPad11自定義日期格式帶格式的:字體:(中文)+中文正帶格式的:字體:(中文)+中文正文宋體帶格式的:縮進(jìn):首行縮進(jìn):0厘push加入元素到數(shù)pop()從數(shù)組移除最后一個(gè)reverse()反join連接數(shù)組元素通過特定內(nèi)容回字sortscript 定義數(shù)組Array對 方script 定義數(shù)組Array對 方式vararr1= 數(shù)組的遍歷長度 for(vari=0;i<arr1.length; 方式 vararr2newArray(3定義長度為3 arr2[0]= arr2[1]= arr2[2]="cc"arr2["100"]="dd";//// 方式 vararr3=newArray(1,2,3數(shù)組三個(gè)元素12//alert(arr3.join("-"));//1-2- alert(arr3.slice(1,3));//從1下標(biāo)，截取到3下標(biāo)，1下標(biāo)包含，3下標(biāo)不包批注[ThinkPad12]:JS中，{}代表對象，[]代表數(shù)批注[ThinkPad13JS中不存在批注[ThinkPad13JS中不存在越界問批注[ThinkPad14]:JS中，length為最大角標(biāo)此結(jié)果為批注[ThinkPad15]:結(jié)果為undefined，對應(yīng)存在，只是值不存在，所以是undefined，而不帶格式的:行距小值1.1整中文與西文文的間距整中文與數(shù)字的間帶格式的:字體:(中文)+中文正文宋體帶格式的:縮進(jìn):首行縮進(jìn):0厘帶格式的:字體軟雅中文軟雅10體顏色帶格式的:字體:(中文)+中文正文宋體①：函數(shù)定義的三注意：第二種方式使用越來越多，第三種不常用，第一種<script方式functionadd(a,b){//沒有返回值，形參不需要類returna+b可以返}////方式二function函數(shù)，sub成為函數(shù)名varsub=function(a,b){returna-b;}//方式三用Function對象義函newFuntion(arg1,arg2 var varmulnewFunction("a","b","returna*b;// Function alert(mulinstanceofFunction);//帶格式的:字體:(中文)+中文正文(宋帶格式的:字體:(中文)+中文正文(宋體帶格式的:字體:(中文)+中文正文(宋體帶格式的:字體默認(rèn)軟雅黑中文軟雅黑10粗體顏色帶格式的:字體:(中文)+中文正文(宋體一組與編 相關(guān)的函 此塊具體內(nèi)容請參照W3C文檔查 ——JavaScript面向?qū)ο缶嶫ava是面向?qū)ο?，寫Java程序，寫類和對象。JavaScript是基于對象，寫Js，不用創(chuàng)建類，使用Js內(nèi)部已經(jīng)定義好的對象。①：定義JavaScript對象的兩種方式一：使用已經(jīng)存在的對象，通過關(guān)鍵字進(jìn)行vars=newvaro=new[ThinkPad16之后類似此種格[ThinkPad16之后類似此種格式均為運(yùn)行結(jié)//alert(dateinstanceofObject);//JS對象類似一個(gè)map結(jié)vararr=newarr[0]100;/使用數(shù)組數(shù)組元素賦arr['aaa1000定義對//arr.showInfofunction定義對象方//arr.showInfo();//100,Js其實(shí)就是一個(gè)類似map結(jié)構(gòu)，key為屬性名和方法名，value為屬性值和方法定方式二：通過{}創(chuàng)varobj=name:' age:20,getName: 對象屬性通過關(guān)鍵字return}對象對象屬性[]和////alert(obj["age"]);//添加一個(gè)方法到obj對象obj.getAge=return}定義類批注[ThinkPad18]:注意定義類結(jié)構(gòu)與定義對象的區(qū) JavaScript中的定義類批注[ThinkPad18]:注意定義類結(jié)構(gòu)與定義對象的區(qū) varProduct=name保存name的值象屬this.price=}//基于類結(jié)構(gòu)創(chuàng)建對象，使用new關(guān)鍵字varp1=newProduct("冰箱",1000);varp2newProduct("洗衣機(jī)",1500);////function本身代表一個(gè)函數(shù)，JavaScript對象通過newfunction來獲得的，理function就是對象構(gòu)造帶格式的:段落間距段前:帶格式的:段落間距段前:0.5后:0.5JavaScript中所 類型都是對象Object實(shí) FunctionObjectJavaScript中所有對象都是通過newFunction實(shí)例(function)獲得------ObjectinstanceFunction JavaScript所有對象構(gòu)造函數(shù)都是function實(shí)例；JavaScript所有對象都o(jì)bject實(shí)例，functionobject使用JavaScript的傳遞性進(jìn)A：function是用來定義一個(gè)函數(shù)，所有函數(shù)實(shí)例都是Function對B：JavaScript中，所有對象都是通過newfunction得到VarObject=function(){...}VarString=function(){...}VarArray=function(){...}VarDate=function(){...}new[ThinkPad19這的String()就是具體的結(jié)論：所有對象構(gòu)造器都是Function實(shí)例alert(StringinstanceOfFunction) alert(ObjectinstanceOfFunction) new[ThinkPad19這的String()就是具體的VarsVaro=newObject()Vararr=newArray()Vardate=new結(jié)論：JavaScript中，一切對象都是object實(shí)例alert(sinstanceOfObject) alert(FunctioninstanceOfObject) oonew 實(shí)例化Object對

newFunction實(shí)例化Function

[ThinkPad20Js中，小寫的alert(finstanceofFunction);//truealert(finstanceofObject);//truealert(oinstanceofFunction);//falsealert(oinstanceofObject);//true③：function原型屬JavaScriptfunction構(gòu)造函數(shù)得來的function構(gòu)造函數(shù)prototype屬性，動(dòng)態(tài)修改對象屬性和方法。

批注[ThinkPad21o代表的是一個(gè)對[ThinkPad22對象本身不是Function實(shí)例，他是Object實(shí)例，Object才是Function的實(shí)例帶格式的:字體:(中文)+中文正文宋體④：繼A：使用原型鏈完成JavaScript單繼varA=function(){='xxx';}varB=function(){this.age=20;}方式一以prototype原型完成單繼承B的原型指向AB.prototype=newA();//從A實(shí)例中，繼承所有屬性varb=newB();//練習(xí)：通過prototype為String類添加一個(gè)trim方Stotype.trim=return ce(/(^\s*)(\s*$)/g,}B：對象冒充完成多繼varC=function(){='c';}varD=function(){this.msg=}varE=this.methodC= deletethis.methodC= delete批注[ThinkPad23]:在E中定義方法 C方法批注[ThinkPad24]:執(zhí)行方法，實(shí)際是在執(zhí)行C，->‘c’；其中thisE，infoE繼了this.methodD=D;this.desc=}vare=new//////⑤：動(dòng)態(tài)方法調(diào)可以改變this的指向，可以完成對象多定義函}屬性namevaro={name: //o.printInfo();//函數(shù)不屬于對象//JS提供動(dòng)態(tài)方法調(diào)用兩個(gè)方法，允許一個(gè)對象調(diào)用不是屬于它自己的方法(call////functionthis.sum=}call參//apply傳遞參數(shù)數(shù)add.apply(o,new//動(dòng)態(tài)方法調(diào)用現(xiàn)多重繼承，原理就是對varA=function(){='a';}varB=動(dòng)態(tài)方法調(diào)用

批注[ThinkPad25]:①：改變了this指向 varb=new 二、JavaScript瀏覽器對象DOMWindow代表窗體DOMHistory歷史記錄DOMLocation瀏覽器導(dǎo)航DOMNavigator瀏覽器信息DOMScreen屏幕不講重點(diǎn)：window、history、location，最重要的是window對window對Window對象表示瀏覽器中打開的（frameiframe），瀏覽器會(huì)為HTML文檔創(chuàng)建一個(gè)window對象，并為每個(gè)框架創(chuàng)建一個(gè)額外的window對

this.methodA=A;window.frames返回窗口中所有命名的框parent是父窗口（如果窗口是頂級窗口，那么parent==self==top）self是當(dāng)前窗口（等價(jià)window）父子窗體之間批注[ThinkPad26]:常用必備技能，必須掌opener父子窗體之間批注[ThinkPad26]:常用必備技能，必須掌在頁面內(nèi)嵌入一個(gè)iframe，在iframe中提供一個(gè)輸入項(xiàng)，輸入后，在iframe外面 <metahttp-equiv="Content-Type"content="text/html; <title>Untitled <script function varcontent=.ge 將輸入的內(nèi)容顯示到主窗體info window.parent..geementById("info").innerHTML= <h1>子窗體 <inputtype="text"id="content" <inputtype="button"value="顯示到主窗體"帶格式的:縮進(jìn):首行縮進(jìn):0主窗體 <metahttp-equiv="Content-Type"content="text/html; <title>父子窗體通信<script<scriptfunction//用主窗體子窗體內(nèi) ..ge}<h1>主窗體<div<inputtype="button"value="獲取子窗體輸入內(nèi)容"<iframe批注[ThinkPad27]:子窗體只有1。帶格式的:字體:(中文)+中文正文宋體②：windowopen<title>打開關(guān)閉窗體<title>打開關(guān)閉窗體 <script var function openNew= function ③：window彈 框相關(guān)的3個(gè)方<script alert("這是警告框 varcon=confirm("你想<script alert("這是警告框 varcon=confirm("你想好 varmsg=請輸 [ThinkPad28此處2個(gè)參數(shù)分別為提示信息和默認(rèn)信息，均為String類型帶格式的:段落間距段前:0.5行后:0.5帶格式的:字體:(中文)+中文正文宋體顯示效果截圖如下帶格式的:字體默認(rèn)軟雅帶格式的:字體默認(rèn)軟雅中文軟雅10體顏色帶格式的:字體:10磅,加粗,字體顏色:藍(lán)<script window.onload=<script window.onload= vardate=new ementById("time1").innerHTML ementById("time2").innerHTML setInterval("show1();",1000);//間隔1秒后重復(fù)執(zhí) setTimeout("show2();",1000);//1秒后執(zhí)行，執(zhí)行1 function vardate=new ementById("time1").innerHTML function vardate=new ementById("time2").innerHTML setTimeout("show2();",1000);//<div<div帶帶格式的:字體顏色帶格式的:字體:(中文)+中文正文宋體帶格帶格式的:字體:(中文)+中文正文宋體帶格不調(diào)整西文與中文之間的空<inputtype="button"value="返回onclick="history.back<inputtype="button"value="返回onclick="history.go(-1Location對代表瀏覽器導(dǎo)航在js函數(shù)中發(fā)起 效location.href='跳轉(zhuǎn)后url等價(jià)于<a三、JavaScript文檔對象模型批注[ThinkPad29]:批注[ThinkPad29]:空格即為1個(gè)文本節(jié)點(diǎn)<metahttp-equiv="Content-Type"content="text/html;<title>History和Location使用<inputtype="button"value="返回"onclick="history.back();"DOM解析模型，將文檔加載到內(nèi)存，形成一個(gè)樹形結(jié)構(gòu)<html>就是根節(jié)點(diǎn)，每個(gè)標(biāo) 注意：屬性節(jié)點(diǎn)，它不屬于DOM樹形結(jié)構(gòu)，不屬于任何節(jié)點(diǎn)父節(jié)點(diǎn)，也不屬于任何的子節(jié)點(diǎn)屬性節(jié)點(diǎn)依附于元素節(jié)點(diǎn)上種附加【上面代碼產(chǎn)生6個(gè)元素節(jié)點(diǎn)，5個(gè)屬性節(jié)點(diǎn)，9個(gè)文本節(jié)點(diǎn)HTML本身也是XML，所有可以使用XMLDOMAPI規(guī)DOMElementDOMAttrDOMTextHTMLDOMXMLDOM的擴(kuò)HTMLDOMXMLDOM開發(fā)JS來說更加簡單方便BOM和HTMLDOM學(xué)習(xí)DOM編程， 對象開始 代表當(dāng)前HTML網(wǎng)頁文檔對象，window對象一個(gè)屬性，可以直接使用，所有HTMLDOM對象都 子對DOM編程開 代表整個(gè)HTML文檔①：通過 獲得Node節(jié)點(diǎn)對象.forms獲得頁面中所有form元素 頁面中<body元 用JS操作網(wǎng)頁 信息

批注[ThinkPad30]:Node是整個(gè)開發(fā)的 索本或者屬性了全局檢索提供了三個(gè)重要的批注[ThinkPad31]:NodeList有一個(gè)length屬性一個(gè)item方法批注[ThinkPad31]:NodeList有一個(gè)length屬性一個(gè)item方法 ementsByNamename屬性檢索，獲得 ementsByTagName通 元素名稱獲得其中NodeList可以作為數(shù)組進(jìn)行 //在每一個(gè) 內(nèi) //在每一個(gè) 內(nèi)追加一 window.onload= varnodeList=.ge for(vari=0; varh1=varh1= h1.innerHTML+=" </批注[ThinkPad32]:帶格式的:字體中文帶格式的:字體中文中文正文顏色:青色批注[ThinkPad33]:它不是所有xml元素通用屬如果node是元素，去操作里面的文本內(nèi)容innerHTML(HTML頁面內(nèi)所有元素，一定批注[ThinkPad33]:它不是所有xml元素通用屬XML取得一個(gè)元素內(nèi)部文本內(nèi)容element.firstChild.nodeValue(看批注③：通過節(jié)點(diǎn)Node相對位置關(guān) 元<h1id="h1">明天休息h1><varh1 3.DOMDOM獲取節(jié)點(diǎn)：節(jié)點(diǎn)查詢參DOM改變節(jié)點(diǎn)：元素屬性修內(nèi)部文本元素的修改DOM刪除節(jié)點(diǎn)：removeChild刪除子元素、removeAttribute(name)刪除節(jié)點(diǎn)指定屬*要?jiǎng)h除節(jié)點(diǎn) DOM替換節(jié)點(diǎn) ceChild：父節(jié)點(diǎn) ceChild(新節(jié)點(diǎn),被替換節(jié)點(diǎn))如果對于一個(gè)已經(jīng)存在節(jié)點(diǎn)，執(zhí)行appendChild、re DOM創(chuàng)建節(jié)點(diǎn) 對象提供createElement()創(chuàng)建元素、創(chuàng)建屬性、createTextNode()創(chuàng)建文本DOM添加節(jié)點(diǎn)appendChild父元素.appendChild(新的子節(jié)點(diǎn) 父節(jié)點(diǎn).insertBefore(新子節(jié)點(diǎn),已經(jīng)存在子節(jié)點(diǎn))DOM克隆節(jié)點(diǎn)源節(jié)點(diǎn).cloneNode(true);該方法可以返回一個(gè)節(jié)點(diǎn)的克隆節(jié)點(diǎn)，克隆 此節(jié)內(nèi)容有大量的練習(xí)，建議大家做寫，增強(qiáng)代碼的熟四、 為對象添 <script function alert(" <script function alert("移動(dòng) 上方 </<imgsrc="1.jpg"width="200"height="300"onmouseover=[ThinkPad34方式一HTML元素中添加對②：在JS代碼中為元素添 帶格式的:字體中文中文正文色動(dòng)設(shè)帶格式的:行距倍行距1.12行整中文與文文字的間距,調(diào)整中文與數(shù)字的間 <metahttp-equiv="content-type"content="text/html;<scriptfunctionovertest(){<metahttp-equiv="content-type"content="text/html;<scriptfunctionovertest(){alert("移動(dòng)到上方");}window.onload= ementById("myimg").onmouseover;}<imgsrc="1.jpg"width="200"height="300"總結(jié)：優(yōu)先使用第二種，將js代碼與HTML元素代碼分離開，更加方便統(tǒng)一管理 問題：HTML元素添加 ，與JS添加 在實(shí)際開發(fā)中，如果傳參數(shù)，使用HTML元素綁 ，如果不傳參數(shù)，使用JS綁。傳參數(shù)也可以使用與JS綁 【使 綁定與JS綁定<metahttp-equiv="content-type"content="text/html;<script function window.onload= ementById("mybutton").onclick= clicktest('次奧 <inputtype="button"id="mybutton"value=" <inputtype="button"id="mybutton"value="點(diǎn)擊我 <inputtype="button"value="別碰我！"onclick="clicktest('次奧}帶格式的:帶格式的:字體中文中文正文色:自動(dòng)設(shè)置帶格式的:行距倍行距1.12整中文與文文字的間距,調(diào)整中文與數(shù)字的間Mousemove：鼠標(biāo)移動(dòng)時(shí)觸 鼠標(biāo)跟隨效Mouseover：鼠標(biāo)從元素外，移動(dòng) 上，信息提示、字體變Mouseout：鼠標(biāo)從元素上，移出元素范圍，和mouseover鼠標(biāo)點(diǎn) （左鍵相 click鼠標(biāo)單dbclick鼠標(biāo)雙mousedown/mouseup鼠標(biāo)按下、按鍵彈起click=mousedown+mouseup; focus聚焦頁面焦點(diǎn)定位到目標(biāo)元素blur離焦頁面焦點(diǎn)由目標(biāo)元素移開<scriptwindow.onload=.geementById("username").value="用戶名";//聚焦.geementById("username").onfocus=function(){}//離焦varname=.geementById("username").value;.geementById("username").value="";}}}請輸入用戶名：<inputtype="text"帶格式的:兩端對帶格式的:字體帶格式的:兩端對帶格式的:字體中文中文正文粗字體顏色動(dòng)設(shè)帶格式的:字體:非加粗,字體顏色:文字帶格式的:段落間距段前:0.5行后:0.5鍵使用場景：沒有提交按鈕，我們一般采用回車進(jìn)scriptscript window.onload= ementById("message").onkeypress= 判斷鍵是否為if(e&& 火狐瀏覽 if(e.which== alert("提交 IE if(window.event.keyCode==13 alert("提交 </ 發(fā)送消息<inputtype="text"name="message"批注[ThinkPad37]:這里需要考慮瀏覽器兼帶格式的:字體中文中文正文粗,字體顏色:自動(dòng)設(shè)帶格式的:字體中文中文正文粗,字體顏色:自動(dòng)設(shè)置火狐沒有全局event對象，必須在發(fā) form的提交、onsubmitreturnvalidateForm"對表單進(jìn)行校改onchange制作select聯(lián)動(dòng)效 省市聯(lián)重點(diǎn)：onclick、onchange、onblur、默

批注[ThinkPad38]:如果以后開發(fā)涉及到寫<script<script 默 發(fā) function varisConfirmwindow.confirm(" if(!isConfirm){// 默 if(e&& // window.event.returnValue= 冒 function if(e&& IE window.event.cancelBubble= function <h1>默 <!--刪除時(shí)，詢問用戶是否刪除，然后再跳轉(zhuǎn) <!- 冒 <divonclick="divclick();"><ahref="#"onclick="aclick(event);">這 HTMLDOMEvent對提供preventDefault()用于 的發(fā)生，該方法IE不支持，在IE中使用returnValue提供stopPropagation()用與阻止事 ，該方法IE不支持，在IE五、Ajaxweb交互2種模式對①：2種交互模式的流②：2種交互模式用戶體異步交互模型：客戶端將請求提交給Ajax引擎，客戶端可以繼續(xù)操作，由Ajax引擎來成與服務(wù) 端通信，當(dāng)響應(yīng)回來后，jx引擎會(huì)更新客戶頁面，在客戶端提交求后，用戶可以繼續(xù)操作，而無需等待。Ajax①：開發(fā)創(chuàng)建XMLHttpRequest對將狀態(tài)觸發(fā)器綁定到一個(gè)函使用open方法建立與服務(wù)器的連向服務(wù)器端發(fā)送數(shù)在回調(diào)函數(shù)中對返回?cái)?shù)據(jù)進(jìn)<script第一步建functiontryxmlHttp=new}catch(tryMS)tryxmlHttp=new}catch(otherMS) try xmlHttp=newActiveXObject(" }catch(failed) xmlHttp= 這里可以報(bào)一個(gè)錯(cuò)誤，無法獲得XMLHttpRequest對 return =第二步響應(yīng)從服務(wù)器返回后，Ajax引擎需要更新頁面回調(diào)函 xmlHttp.onreadystatechange= //第五步，響應(yīng)返回后執(zhí) 狀態(tài)依次0 //0未初始 1正在加 2已經(jīng)加 3交互 4響應(yīng)完 if(xmlHttp.readyState== //判斷數(shù)據(jù)是否正 if(xmlHttp.status== 響應(yīng)有 alert("響應(yīng)返回了 第三步與服務(wù)器連 ");//oworld代表Servlet xmlHttp.open("POST"," // xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form- 批注[ThinkPad39]:XMLHttpRequest對象的方法批注[ThinkPad39]:XMLHttpRequest對象的方法open批注[ThinkPad40]:回調(diào)函數(shù)編寫模式固定，主要責(zé)處理數(shù)status：服務(wù)器返回的http狀態(tài) 5)statusText：服務(wù)器返回的http狀態(tài)信息方法③：客戶端向服務(wù)器提交get方式發(fā)送數(shù)xmlHttp.open("GET","url?key=value");//參數(shù)已經(jīng)在urlpost方式發(fā)送數(shù)xmlHttp.open("POST","url"不需要寫參urlencoded");//post發(fā)送參數(shù)前，需要設(shè)置編碼格式xmlHttp.send("name=xxx&pwd=xxx"post數(shù)④：Ajax編程圖說明：查看時(shí)，請將文檔放到為180%較為合適結(jié)合編程圖解 第一個(gè)案例的代碼進(jìn)行解剖三種不同服務(wù)器響應(yīng)數(shù)據(jù)類型編[ThinkPad41重點(diǎn)練習(xí)！接下來的3個(gè)練習(xí)希常見的服[ThinkPad41重點(diǎn)練習(xí)！接下來的3個(gè)練習(xí)希①：HTML片段的數(shù)據(jù)處理通過xmlhttp.responseText獲得返回?cái)?shù)通過Dom查找獲得元調(diào)用元素的innerHTML進(jìn)行操從x需要分別編寫客戶端和服務(wù)器端就好?？蛻舳宋覀円詄t.mlhUrmret以及配置文件.l。下面分別對三個(gè)文件內(nèi)容進(jìn)說明：三個(gè)文件的具體內(nèi)容請雙擊方框內(nèi)的圖標(biāo)即可查看，這里推薦使用進(jìn)行關(guān)效果圖展示：(數(shù)據(jù)使用 ，abc和def存在注意：在register.html文件中，與服務(wù)器建立連接是，url一定要寫對，否則返回?cái)?shù)據(jù)時(shí)出現(xiàn)404錯(cuò)誤！【"/Ajax/CheckUsernameServlet?username="】②：JSON格式數(shù)據(jù)處練習(xí)2：通 獲得table數(shù)據(jù)，顯示---返回HTML片通過product.jsp生成HTML片段，返回客戶端，客戶端Ajax引擎接收，通過innerHTMLtable元素嵌入到頁面內(nèi)部，其思路與案例一類似，這里不做詳細(xì)介紹。這里需要是第二種解決方案JSON(HTML片段容易造成返回?cái)?shù)據(jù)帶回過多冗余的元素JSON是一種JavaScript輕量級數(shù)據(jù)交互格式Ajax編程。易于人閱讀格式一{key:value,key:value,key:value鍵值對直分開，鍵值之間用:鍵本身必須是字符串常量{name: 是等價(jià)值格式二：[值1,值2,值3]數(shù)組結(jié)構(gòu)組合后復(fù)雜格[{name:'aaa'name:'bbb'},{name:ccc表示三個(gè)對象數(shù)JSON應(yīng)用場景：AJAX請求參數(shù)和響應(yīng)數(shù)問題：服務(wù)器端如何生成json格式數(shù)據(jù)------------>>依賴 開源類③：JSON-lib的使java類庫javabeanmaplistarray轉(zhuǎn)換json格式字符串持json字符串轉(zhuǎn)換javabean對象(反過來只支持這一種，使用很少)在使用JSON-lib時(shí)必須導(dǎo)5jar包[ThinkPad42截圖內(nèi)容注意看轉(zhuǎn)后后json串開發(fā)時(shí)我們[ThinkPad42截圖內(nèi)容注意看轉(zhuǎn)后后json串將數(shù)組/list集合解析成JSON串JSONArrayjsonArrayJSONArray.fromObject(list變量Javabean/Map解析成JSON使用JSONObject可以解析javabean類JSONObjectjsonObject=對象屬性過濾轉(zhuǎn)換JSON通過JsonConfig對象配置對象哪些屬性不參與轉(zhuǎn)換批注[ThinkPad43]:創(chuàng)建1jsonConfig對批注[ThinkPad44]:配置product對象的price屬不參與轉(zhuǎn)換，這里需要的是一個(gè)String類型的數(shù)重構(gòu)

導(dǎo)入jsonlib需要的jar①：table.html(雙擊圖標(biāo)即可查看代碼③：web.xml(需要注 路徑使用json數(shù)據(jù)格式，優(yōu)化了性能，但是添需要注意在table.html中點(diǎn)擊 不生跳轉(zhuǎn)可以使用如下方法控制此外表格的拼接也需要注listProducts.java中，注意使JSONArraylist集合轉(zhuǎn)化成json使用eval將返回的json轉(zhuǎn)換成對象vartext=varobj=運(yùn)行效④：XML格式數(shù)據(jù)處練習(xí)3：select完成省級聯(lián)XStream的使問題：服務(wù)器端如何將java對象，生成XML格式數(shù)據(jù)？需要第 類庫支持XStreamXStreamisasimplelibrarytoserializeobjectstoXMLandbackagain.XStream主要完成Java對象的序列化(xstream-1.3.1.jar)以及解析(xpp3min-XStream 方xStream.toXML(obj)：將對象序列化xStream.fromXML(inputStream/xml片段)：將xml信息解析rmlstga,a)：將類型解析或者序列化時(shí)，取一個(gè)別名代碼案例：序列化)解析xml時(shí)，要注意別 名規(guī)則要與序列化時(shí)保持一致XStreamJavabean中進(jìn)行注c：SeAavu"t)注解生效：raeAt();tastbe設(shè)置變量生成屬性Xrmiid@XStreamImplicit(itemFieldName=“hobbies設(shè)置集合類型變量六、jQuery框jQuery1.4是企業(yè)主流版本，從jQuery1.6開始引入大量新特性。 這里講解以1.8.3為主(新版本主要是瀏覽器兼容問題以及新特性)jQuery提供jquery-1.8.3.jsjquery-jquery-1.8.3.jsjQuery框架源碼，沒有被精簡，體積較大（主要用來研究源碼），企業(yè)開發(fā)時(shí)，需要jquery-1.8.3.min.js（精簡過1.jQuery批注[ThinkPad45]:jQuery可批注[ThinkPad45]:jQuery可以綁定多onload數(shù)，而傳統(tǒng)模式只能綁定一個(gè)函數(shù)，后面的會(huì)將前面等價(jià)于 ①：jQuery基本傳統(tǒng)Js寫法window.onload=alert("傳統(tǒng)}<scripttype="text/javascript"src="../jquery-<script 函jQuery(callback)//onload函jQuery(expression,[context])//查找指定對 九種選擇jQuery(elementsdom對象轉(zhuǎn)換為jQuery對是DOM對象 )成為了jQuery對jQuery(html ])//htmljQuery對 o</p得到j(luò)Query對<scripttype="text/javascript"src="../jquery-<script獲得div對vardomObject ementById("mydiv"獲得DOM對domObject.innerHTML= //通過包裝DOM對象，成為jQuery對var$jQueryObject$(domObject)DOM對象成為jQuery對$jQueryObject.html("傳智播客html()是jQuery//通 jQuery對象下標(biāo)0元素，獲得DOM對vardom1$jQueryObject[0轉(zhuǎn)換jQuery對象為DOM對vardom2=$jQueryObject.get(0);dom2.innerHTML="傳智播客 <div jQuery對象無法使用DOM對象屬性方法，DOM對象也無法使用jQuery對象屬性方法。但是我們可以使用jQuery提供方法，將DOM對象通過jQuery()函數(shù)包裝成為jQuery對象，同樣我們可以把jQuery對象轉(zhuǎn)化成DOM對象。jQuery--->DOM對象：$jQuery對象[0]或者$jQuery對象DOM對象--->jQuery：$(DOM對象jQuery九種選擇選擇器是jQuery的根基,在jQuery中, 處理,遍歷DOM和Ajax操作依賴于選擇jQuery(expression,[context])在 函數(shù)jQuery中傳入表達(dá)式，對頁面中元 ①：基本選擇根據(jù)元素id屬性、class屬性、元素名稱對元素進(jìn)行選id選擇器： $("#元素id屬性")class選擇器：$(".元素class屬性")多個(gè)選擇器同時(shí)使用selector1,select2例如$("#xxidxxxclass同時(shí)選擇id和class匹配兩類元素練習(xí)通過each在每個(gè)div元素內(nèi)容前入傳智播客通過size()/length打印頁面中class屬性 的元素?cái)?shù)通過index()打印id屬性為foo的 <scripttype="text/javascript"src="../jquery-<script 選中所有div得到集 //在每個(gè)div內(nèi)容前加 this.innerHTML傳智播客this.innerHTML $(this).html("傳智播客

[ThinkPad46選擇器以練習(xí)為主，練習(xí)里面結(jié) //通過size()/length打印頁面中class屬性為 的元素?cái)?shù)量 //通過index()打印 //通過index()打印id屬性為foo的 是頁面內(nèi)的第幾個(gè) <div<div<div<p 根據(jù)祖先、后代、父子關(guān)系、兄弟關(guān)系進(jìn)行選ancestordescendant獲取ancestor元素下邊的所有元素$("forminput")parent>child 獲取parent元素下邊的所有直接child子元素 $("form>prevnext獲取pre元素的后一個(gè)兄弟元素$("labelinput")prev~siblings獲取pre元素后邊的所有兄弟元素$("form~練習(xí)將class屬性值 的元素下所有a元素字體變?yōu)榧t將class屬性值 的元素下直接a元素字體變?yōu)樗{(lán)將div元素后所有兄弟a元素，字體變?yōu)辄S色，大小變?yōu)?lt;scripttype="text/javascript"src="../jquery-<script//將class屬性值 的元素下所有a元素字體變?yōu)榧t //將class屬性值 的元素下直接a元素字體變?yōu)樗{(lán) //將div元素后所有兄弟a元素，字體變?yōu)辄S色，大小變?yōu)?("div~a").css({color:'yellow','font-<div <a>div<a>p<p <a>p③：基本過濾選擇:first選取第一個(gè) 選取最后一個(gè):not(selector)去除所有與給定選擇器匹配的元素:even選取所有元素中偶數(shù)索引的元素，從0開始計(jì)數(shù) 選取數(shù)元:odd選取所有元素中奇數(shù)索引的元素，從0開始計(jì)數(shù) 選取數(shù)元:eq(index)選取指定索引的元素:gt(index)選取索引大于指index的元素:lt(index)選取索引小于指index的元素:header選取所有的標(biāo)題元素如：h1,h2, :animated匹配所有正在執(zhí)行動(dòng)畫效果的元練習(xí)設(shè)置表格第一行，顯設(shè)置表格除第一行以外顯示為藍(lán)設(shè)置表格奇數(shù)行背景色設(shè)置表格偶數(shù)行背景色設(shè)置頁面中所有標(biāo)題為灰設(shè)置頁面中正在執(zhí)行動(dòng)畫效果div背景黃色，不執(zhí)行動(dòng)畫div<scripttype="text/javascript"src="../jquery-<script//設(shè)置表格第一行，顯示為紅//設(shè)置表格除第一行以外顯示為藍(lán) //設(shè)置表格奇數(shù)行背景色黃色/設(shè)置表格偶數(shù)行背景色綠$("tr:even").css("background-$("tr:odd").css("background-//設(shè)置頁面中所有標(biāo)題顯示為灰//設(shè)置頁面中正在執(zhí)行動(dòng)畫效果div背景黃色，不執(zhí)行動(dòng)畫div背景綠//無法選中正在執(zhí)行動(dòng)畫的元$("div:not(:animated)").css("background-$(this).css("background-color","yellow");//設(shè)置執(zhí)行動(dòng)畫素<h1>表格信息<h2>這是一張商品表<tableborder="1"<th>商品編號(hào)<th>商品名稱<th>售價(jià)<th>數(shù)量<td>冰箱<td>洗衣機(jī)<td>熱水器 slideDown(speed,概通過高度變化（向下增大）地觸發(fā)一個(gè)回調(diào)函數(shù)。來。在Qey.中，上下的pdig和mrn也會(huì)有動(dòng)畫，效果更流暢。參speedString,Number三種預(yù)定速度之一的字符串("slownormalorcallback可選)FunctionFunction在動(dòng)畫完成時(shí)執(zhí)行的函fadeOut(speed,概通過不 的變化來實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫完成后可選觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫只調(diào)整元素的不 ，也就是說所有匹配的元素的高度和寬度不發(fā)生變化。參speedString,Number三種預(yù)定速度之一的字符串("slow","normal","fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如callback(可選)Function在動(dòng)畫完成時(shí)執(zhí)行的函④：內(nèi)容過濾選擇內(nèi)容選擇器是對子元素和文本內(nèi)容:contains(text選取包含text文本內(nèi)容的元素$("div:contains('John')")文本內(nèi)容含有john的所有div:empty選取不包含子元素或者文本節(jié)點(diǎn)的空$("td:empty")td元素必須為 選取含有選擇器所匹配的元素的元素$("div:has(p)").addClass("test");含有p子元素 $("td:parent")所有不為空td元素選練習(xí)設(shè)置含有文本內(nèi)容”傳智播客”的div的字體顏色為紅設(shè)置沒有子元素的div元素文本內(nèi)容”這是一個(gè)空設(shè)置包含p元素的div背景色為黃設(shè)置所有含有子元素的span字體為藍(lán)<scripttype="text/javascript"src="../jquery-<script設(shè)置含有文本內(nèi)容傳智播客”的div的字體顏色為紅$("div:contains('傳智播客設(shè)置沒有子元素的div這是一個(gè)空$("div:empty").html('這是一個(gè)空設(shè)置包含p元素的div背景色為黃$("div:has(p)").css("background-//設(shè)置所有含有子元素的span字體為<div>今天是個(gè)晴天<div>明天要去傳智播客學(xué)<div><span>JavaScript</span>是網(wǎng)頁開<div>Ajax是異步的JavaScript

技術(shù)<div<p>jQuery</p>JavaScript一個(gè)輕量級框架⑤：可見性過濾選根據(jù)元素的可見與不可見狀態(tài)來選:hidden選取所有不可見元素:visible選取所有可見的元素練習(xí)為表單中所有隱藏域class屬性，值設(shè)置table所有見tr設(shè)置table所有tr字體顏色為紅色，顯示出來輸出tr中文本<scripttype="text/javascript"src="../jquery-<script//為表單中所有隱藏域添加class屬性，值 設(shè)置table見tr$("tr:visible").css("background-設(shè)置table所有隱藏tr字體顏色為紅色，顯示并輸出tr中文本 訂單 -xxxx金額100隱藏令牌號(hào)<inputtype="hidden"value="12312-0xccx-zx-asd-21-asd-gdfgd"<inputtype="submitvalue="確認(rèn)支付<tr <td>冰箱<tr<td>洗衣機(jī)<td>熱水器⑥：屬性過濾選擇通過元素的屬性來選取相應(yīng)的元[attribute]選取擁有此屬性的元素$("div[id]")[attribute=value]選取指定屬性值為value的所有元素[attribute!=value]選取屬性值不為value的所有元素[attribute^valuevalue開始的所有元素[attribute$valuevalue結(jié)束的所有元素[attribute*=value]選取屬性值包含value的所有元素練習(xí)設(shè)置所有含有id屬性的div，字體顏設(shè)置所有class屬性值含 元素背景色為黃對所有既有id又有class屬性div元素，添加一個(gè)點(diǎn) ，打印 中內(nèi)<scripttype="text/javascript"src="../jquery-<script//設(shè)置所有含有id屬性的div，字體顏色紅//設(shè)置所有class屬性值含 元素背景色為黃$("[class*= ']").css("background-//對所有既有id又有class屬性div元素，添加一個(gè)點(diǎn) ，打印 中內(nèi)<divid="mydiv" <div <div<div<divid="xxx" <p ⑦：子元素過濾選對某元素中的子元素hhdnxeod)選取索引為dx的元素、索引為偶數(shù)的元素、索引為奇數(shù)的元素iex從1開始區(qū)別:first-child選取第一個(gè)子元:last-child選取最后一個(gè):only-child選取唯一子元素，它的父元素只有它這一個(gè)子元練習(xí)選擇id屬性mytable下3的倍數(shù)行，字體顏色為表格數(shù)行表格數(shù)行只有一個(gè)tdtr元素<scripttype="text/javascript"src="../jquery-<script//選擇id屬性mytable下3的倍數(shù)行，字體顏色為紅$("#mytabletr:nth-表格數(shù)行景色色數(shù)行$("tabletr:nth-child(even)").css("background- $("tabletr:nth-child(odd)").css("background-//從1計(jì)$("tr:even").css("background-color","yellow");//從0計(jì)只有一個(gè)tdtr元素體為$("trtd:only-運(yùn)行結(jié)果運(yùn)行結(jié)果<tableborder="1"width="400"<tr><td>1</td><td>冰箱<tr><td>2</td><td>洗衣機(jī)<tr><td>3</td><td>熱水器<tr><td>4</td><td>電飯鍋<tr><td>5</td><td>電磁爐<tr><td>6</td><td>豆?jié){機(jī)<tr><td>7</td><td>微波爐<tr><td>8</td><td>電視<tr><td>9</td><td>空調(diào)<tr><td>10</td><td>收音機(jī)<tr><td>11</td><td>排油煙機(jī)<tr><td>12</td><td>加濕器<tr><td>13電暖氣</td>加濕器⑧：表單過濾選擇選取表單元素的過濾選擇 選取所有<input>、<textarea>、<select>和<button>元 選取所有的文本框元:password選取所有 框元 選取所有的單選框元 選取所有的多選框元 選取所有的提交按鈕元 選取所有的圖像按鈕元 選取所有重置按鈕元 選取所有按鈕 選取所有文件上傳域元 選取所有不可見元練習(xí)對所有text框和password框，添加離 ，校驗(yàn)輸入內(nèi)容不能為對button添加點(diǎn) ，提交form表<scripttype="text/javascript"src="../jquery-<script//對所有text框和password框，添加離 ，校驗(yàn)輸入內(nèi)容不能為獲得表單元素內(nèi)容varvalue=$(this).val獲得value將輸入內(nèi)容if($.trim(value)==""alert("用戶名 不能為空}//對button添加點(diǎn) ，提交form表運(yùn)行結(jié)果運(yùn)行結(jié)果<formaction="regist"method="post"用戶名<inputtype="text"name="username"<inputtype="password"name="password"<inputtype="radioname="gender"value="男"/><inputtype="radioname="gendervalue="女城市<select<option <option 個(gè)人簡介<textarearows="5"cols="60<inputtype="button"value="提交⑨：表單對象屬性過濾選選取表單元素屬性的過濾選:enabled選取所有可用元:disabled選取所有不可用元:checked選取所有被選中的元素，如單選框、:selected選取所有被選中項(xiàng)元素，如下拉列表框、列練習(xí)buttonradiocheckboxselect中選中項(xiàng)的<scripttype="text/javascript"src="../jquery-<script點(diǎn)擊button打印radiocheckboxselect中選中項(xiàng)的//打印選 的打打印運(yùn)行結(jié)果運(yùn)行結(jié)果

：<inputtype="radioname="gendervalue="男<inputtype="radioname="gendervalue="女女:<inputtype="checkbox"name="hobby"value="體育體<inputtype="checkbox"name="hobbyvalue="讀書讀<inputtype="checkbox"name="hobbyvalue="音樂音<inputtype="checkboxname="hobby"value="旅游旅游城市<select<option <option <optionvalue="廣州">廣州<inputtype="buttonvalue="獲取選中的值id="mybutton"jQuery選擇器 each(function(){})遍歷集合size()/length屬性返回集合長度index查找目標(biāo)元素是集合中第幾個(gè)元②：CSS樣式操css(name,value)css({name:value,name:value同時(shí)修改多CSS基本過濾選擇選API功能是相$("tr:first")等價(jià)于③：九種選擇器重基本選擇器和層級選擇器鎖定元使用屬性過濾選擇器和內(nèi)容過濾選擇器具體選中元表單操作:checkedselected表單選中元配合基本過濾選擇器，縮小選中的jQuery的DOM操使用ey的九種選擇器可以基本選中需要操作的對象，但是為了提高uy的查詢效率，可以結(jié)合jey的內(nèi)置查找函數(shù)一起使用①：查children([expr])獲取指定的子元素find(expr)獲取指定的后代元素parents([expr])獲得祖輩元素parent()獲取父元素next([expr])獲取下一個(gè)兄弟元素prev([expr])獲取前一個(gè)兄弟元素siblings([expr])獲取所有兄弟元素在XML解析中find方法使用最多對查找結(jié)果進(jìn)行遍歷操作each(functioneach函數(shù)中可以通過this獲得DOM對象，$(this)獲得jQuery對象②：屬性設(shè)置屬性屬性同時(shí)設(shè)置多個(gè)attr({name:value,name:valueattr("checked","true")等價(jià)于prop("checked")練習(xí)點(diǎn)擊button，動(dòng)態(tài)設(shè)置div的屬性idname嘗試能否設(shè)置一個(gè)不存在的屬性<scripttype="text/javascript"src="../jquery-<script點(diǎn)擊一個(gè)button，動(dòng)態(tài)設(shè)置div的屬性idname嘗試能否設(shè)置一個(gè)不存在的屬可以設(shè)置一個(gè)不存 <div <inputtype="buttonvalue="設(shè)置屬性idmybutton"③：CSS操通過attr屬性設(shè)置/獲取style屬attr('style','color:red添加style屬性設(shè)置CSS樣式屬性css(name,value)CSS樣式屬css(properties)傳遞key-value對象，設(shè)置多CSS樣式屬性設(shè)置class屬性addClass(class)添加一個(gè)class屬性removeClass([class])移除一個(gè)class屬性練習(xí)點(diǎn)擊button，使一個(gè)div的背景顏色變?yōu)辄S通過toggleClass(class實(shí)現(xiàn)點(diǎn)擊字體變?yōu)榧t色，再點(diǎn)擊<scripttype="text/javascript"src="../jquery-<script點(diǎn)擊button，使一個(gè)div的背景顏色變?yōu)?("#div1").css("background-通過toggleClass(class實(shí)現(xiàn)點(diǎn)擊字體變?yōu)榧t色，再點(diǎn)擊<style.divclass}<div<inputtype="button"value="背景顏色變?yōu)辄S色"id="button1<inputtype="button"value="字體顏色開關(guān)id="button2"④：HTML代碼&文本&值操批注[ThinkPad47]:這個(gè)函數(shù)不能用于XML文檔。批注[ThinkPad47]:這個(gè)函數(shù)不能用于XML文檔?？梢杂糜赬HTML文[ThinkPad48該方法既可以XHTML也可以用于XML文檔和設(shè)置某個(gè)元素中的文本內(nèi) 文本內(nèi)text(content)設(shè)置文本內(nèi)文本框、下拉列表框、單選框選中的元素值 元素value屬性val(content)設(shè)置元素value屬性練習(xí)<div><p>傳智播客</p></div>divhtmltext對使用val()獲得文本框、下拉框、單選框選中的測試能否通過val設(shè)置單選框、下拉框的選中<scripttype="text/javascript"src="../jquery-<scriptdiv><p>傳智播客</p></div>獲取div中html和text對var$obj$("<div><p>傳智播客 //使用val()獲得文本框、下拉框、單選框選中的

//測試能否通過val設(shè)置單選框、下拉框的$("#city").val("廣州運(yùn)行結(jié)果$("input[name='gender']").val(['女運(yùn)行結(jié)果傳智播客致力打造專業(yè)的IT高級培訓(xùn)課程——?jiǎng)?wù)實(shí)、創(chuàng)新、 用戶名<inputtype="text"id="username<inputtype="radioname="gender"value="男"/><inputtype="radioname="gendervalue="女女<br/>城市<selectid="city"><option <option <optionvalue="廣州">廣州</select><inputtype="buttonvalue="獲取val設(shè)置val控制radioselectcheckbox選$("#city").val("廣州$("input[name='gender']").val(['女練習(xí)輸出所有select元素下的所有option元素中對應(yīng)的文本內(nèi)例如:<optionvalue="中專">中專^^</option>輸出--->中專<scripttype="text/javascript"src="../jquery-<script<select<option>博士 <option>本科<option>大專⑤：jQuery添加創(chuàng)建元拼接好HTML代碼片段$(html片段 產(chǎn)生jQuery對內(nèi)部插$node.append($newNode)內(nèi)部結(jié)$node.prepend($newNode)內(nèi)部開始位置追外部插$node.after($newNode)在存在元素后面追加兄 在存在元素前面追練習(xí)id=edu下增加<optionvalue="大專">大專<scripttype="text/javascript"src="../jquery-<script追加option內(nèi)容大創(chuàng)建元var$newNode=$("<optionvalue='大專'>大專添加元 $("#edu").append($newNode內(nèi)部結(jié) $("#edu").prepend($newNode);//內(nèi)部開 $("option[value='本科$newNode.insertBefore($("option:contains('高中<select<optionvalue="博士">博士<option <optionvalue="本科">本科<optionvalue="高中">高中⑥：jQuery刪除選中要?jiǎng)h除元素 完成元素刪選中要?jiǎng)h除元素 刪除特定規(guī)則元remove刪除節(jié)點(diǎn)后 也會(huì)刪detach刪除節(jié)點(diǎn)后 會(huì)保留從1.4新練習(xí)分別使用detach和remove刪除帶有click 的p ，刪除后再將p重新加入body查看 <scripttype="text/javascript"src="../jquery-<script//使用remove方法刪除p元素，連 一起刪 var$p=//使用detach刪除 會(huì)保var$p= 練習(xí)表格數(shù)據(jù)添加與刪除練<scripttype="text/javascript"src="../jquery-<scriptvarname= = varphone=DOMvar$tr$("<tr><td>"+name+"</td><td>"+ href='javascript:void(0onclick='del(this)'>刪除</a></td></tr>");

批注[ThinkPad49]:jQuery不推薦這么干，在后面事 functiondel(o)對象o代表

}<inputtype="text"id="name"郵箱<inputtype="text" "<inputtype="text"id="phone"/><inputtype="buttonvalue="提交<tableborder="1" <th>郵箱 <th>刪除 節(jié)$(“p”).clone();返回節(jié)點(diǎn)克隆后的副本，但不會(huì)克隆原節(jié)點(diǎn)$(“p”).clone(true);克隆節(jié)點(diǎn)，保留原替換節(jié) </b>");將所有p元素，替換為 ceAll(“p”);與 ceWith相全選練<scripttype="text/javascript"src="../jquery-<script全選varisChecked=this.checked=全全不反this.checked=

請選擇您 <inputtype="checkboxid="checkallbox全選/<inputtype="checkbox"name="hobby" "<inputtype="checkboxname="hobby"value="籃球籃<inputtype="checkboxname="hobby"value="游泳游<inputtype="checkboxname="hobby"value="唱歌唱歌<inputtype="buttonvalue="全選id