1,DOM通緝
創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),冷水灘網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:冷水灘等地區(qū)。冷水灘做網(wǎng)站價(jià)格咨詢:18980820575
a、css選擇器(4類):tag 標(biāo)簽名 | .class 類名 | #id 唯一標(biāo)識(shí) | *
b、組合選擇器:
并列組合:s1s2 匹配s1和s2
s1,s2 匹配s1或者s2
s1:not(s2)匹配s1但不匹配s2
層級(jí)組合:s1 s2 匹配s2且存在祖先結(jié)點(diǎn)匹配s1
s1:has(s2)匹配s1且存在子孫節(jié)點(diǎn)匹配s2
s1 > s2 匹配s2且父節(jié)點(diǎn)匹配s1
s1 + s2 匹配s2且前驅(qū)節(jié)點(diǎn)匹配s1
s1~s2 匹配s2且上文有兄弟節(jié)點(diǎn)匹配s1
c、偽類選擇器:
索引::first 第一個(gè)、:last 最后一個(gè)、:even 偶數(shù)的、:odd 奇數(shù)的、:eq() 等于、:lt() 小于、:gt() 大于
內(nèi)容::contains()、:empty、:parent、:header、:animated
狀態(tài)::hidden、:visited、:enabled、:disabled、:checkde、:selected
父子::nth-child(…)、:first-child、:last-child、:only-child
表單::input、:text、:password、:radio、:checkbox、:file、:button 、:submit、:reset、:p_w_picpath
d、屬性過濾器:
[屬性=值] :存在特定屬性,且屬性值等于特定值
[屬性!=值] :存在特定屬性,且屬性值不等于特定值
[屬性^=值]:存在特定屬性,且屬性值以特定值開始
[屬性$=值]:存在特定屬性,且屬性值以特定值結(jié)束
[屬性*=值] :存在特定屬性,且屬性值包含特定值
2,事件綁定
a、傳統(tǒng)的事件綁定有三種方式:
修改標(biāo)簽,設(shè)置相應(yīng)的onXXX屬性。例:
先定義事件響應(yīng)函數(shù),再綁定到事件。例:function btnSubmit_ alert(“hi!”); }var btn = document.getElementById(“#btnSubmit”);btn.onclick=btnSubmit;
直接綁定匿名函數(shù)。例:var btn = document.getElementById(“#btnSubmit”);btn. alert(“hi!”);}
b、jQuery 對(duì)象通過成員函數(shù)綁定 W3C 標(biāo)準(zhǔn)事件
°函數(shù)名:事件名稱(沒有前綴 on),例如:click
°參數(shù):事件響應(yīng)函數(shù),通常用匿名函數(shù)。$(“#btnSubmit”).click(function(){ alert(“hi!”);});
c、jQuery 對(duì)象的 bind(…)方法也可以綁定事件。
$(“#btnSubmit”).bind(“click”,function(){ alert(“hi!”);});
3,控制css
a、css(name):參數(shù) name :樣式名。功能:返回 jQuery 對(duì)象首個(gè)元素的 name 樣式定義。
b、css(name , value):參數(shù) name :樣式名。參數(shù) value :樣式定義。功能:給 jQuery 對(duì)象中所有元素設(shè)置指定樣式。 c、css(properties):參數(shù) properties :包含”樣式名:樣式定義”鍵值對(duì)的對(duì)象。功能:按鍵值對(duì)給 jQuery 對(duì)象所有元素設(shè)置樣式。
d、vheight()、width() 返回第一個(gè)DOM元素的高度像素值。如果帶參數(shù),則設(shè)置 height 樣式為相應(yīng)值。
e、show()、hide()°顯示所有 DOM 元素?!憧蓭б粋€(gè)整數(shù)參數(shù) d,實(shí)現(xiàn) d 毫秒內(nèi)顯示的特效?!愕诙€(gè)參數(shù)可選,為特效完成時(shí)的回調(diào)函數(shù)。
f、toggle():所有DOM元素在顯示與隱藏之間來回切換。
g、text()、text(value)°讀取第一個(gè)DOM 元素的關(guān)聯(lián)文本值、設(shè)置 innerText = value。
h、html()、html(value)°讀取第一個(gè) DOM 元素的 innerHTML 值。設(shè)置innerHTML = value
i、attr(name)、attr(name,value)、 removeAttr(name)°讀取第一個(gè) DOM 元素指定屬性的值或 undefined 。°移除所有 DOM 元素名為 name 的屬性。
4,訪問DOM元素集
a、find (expr) °參數(shù)expr :選擇器 °功能:生成當(dāng)前對(duì)象副本,但是從每個(gè)DOM 元素內(nèi)部再次匹配檢索器 expr 。
b、size () 或 length () °功能:返回DOM 元素總數(shù)。
c、slice (from , to) °參數(shù)from:起始元素下標(biāo) °參數(shù)to:結(jié)束元素下標(biāo) + 1 °功能:生成對(duì)象副本但移除從from 到 (to – 1) 的DOM元素。 °注意:此方法不改變當(dāng)前對(duì)象。
d、each (fn) °參數(shù)fn :回調(diào)函數(shù),形參為當(dāng)前 DOM 元素的索引值。 °功能:依次對(duì)每個(gè)DOM 元素執(zhí)行回調(diào)函數(shù) fn?!銓?shí)例:$("img").each(function(i){this.src = "test" + i + ".jpg"; });
e、is (expr) °參數(shù)expr:選擇器功能:判斷是否至少有一個(gè)DOM 元素符合選擇器 expr 。
f、append (text)°參數(shù) text :待添加的文本?!愎δ埽合蛎總€(gè) DOM 元素內(nèi)部結(jié)尾處添加指定文本。
j、prepend (text)°功能:向每個(gè) DOM 元素內(nèi)部開始處添加指定文本。
h、before (text)、after (text)°功能:向每個(gè) DOM 元素之前(后)插入指定文本。
i、add (html)°參數(shù) html :創(chuàng)建元素的 HTML 代碼?!愎δ埽簞?dòng)態(tài)添加新元素。
g、remove (expr)°功能:生成當(dāng)前對(duì)象副本,但移除匹配 expr (選擇器)的 DOM 元素。
k、empty()°功能:生成當(dāng)前對(duì)象副本,但移除所有DOM 元素。
l、prev (expr)、next (expr)、parent(expr)、children (expr)、siblings (expr)°功能:返回每個(gè)DOM 元素的前趨、后繼同輩元素、父元素、子元素、同輩元素。
5,ajax支持
a、AJAX 是一種流行的 B/S 技術(shù),其中包含三個(gè)要點(diǎn):°A = 異步操作,也即先加載后處理;°J = Javascript 腳本;°X = XML ,目前出現(xiàn)了 JSON 與之抗衡。
b、jQuery 為 AJAX 提供了兩個(gè)層次的訪問函數(shù),以及 6 種狀態(tài)事件:
°高級(jí)函數(shù):$.get (url, params, callback);$.post (url, params, callback); load (url, params, callback);
°低級(jí)函數(shù):$.ajax(params)
°狀態(tài)事件:ajaxSuccess、ajaxError、ajaxComplete、ajaxSend、ajaxStart、ajaxStop、
c、$.get(url , p , fn)、$.post(url , p , fn , type)
°參數(shù)url :請(qǐng)求的頁(yè)面 URL 。
°參數(shù)p :(可選)請(qǐng)求參數(shù)(鍵值對(duì)對(duì)象) 。
°參數(shù)fn : (可選)操作成功觸發(fā)的回調(diào)函數(shù)。
°功能:通過GET 方法加載遠(yuǎn)程頁(yè)面。
°注意:回調(diào)函數(shù)fn 可以通過參數(shù)處理加載的數(shù)據(jù)。
如果需要處理操作失敗的狀態(tài),請(qǐng)改用$.ajax(…) 。
d、$.ajax (opt)
°參數(shù)opt:配置 Ajax 請(qǐng)求的鍵值對(duì)對(duì)象。常用的鍵名有:data: 請(qǐng)求參數(shù),可以是字符串、鍵值對(duì)對(duì)象或字符串?dāng)?shù)組。dataType: 期望數(shù)據(jù)類型,可以是html、xml、json、script等。timeout: 操作時(shí)限(秒)。每次設(shè)置都將改寫默認(rèn)值。type: 發(fā)送請(qǐng)求的方法,默認(rèn)為 GET。url: 遠(yuǎn)程 URL。其它:beforeSend、success、error、complete (4個(gè)事件)
°功能:返回包含遠(yuǎn)程響應(yīng)數(shù)據(jù)的XMLHttpRequest 對(duì)象。參數(shù)鍵都是可選的,默認(rèn)值可通過$.ajaxSetup (opt) 設(shè)置。
6,Q&A
a、jQuery 對(duì)象如何轉(zhuǎn)成 DOM 元素?
°通過下標(biāo)索引或get(index)方法
°例如:$(“div”)[0] ; $(“div”).get(0)
b,jQuery 對(duì)象和 DOM 元素的區(qū)別是什么?
°首先,jQuery 對(duì)象維護(hù)一個(gè) DOM 元素的數(shù)組;
°其次,jQuery 對(duì)象不能使用 DOM 方法,反之亦然。
°例如:$(“div”).html() ; $(“div”)[0].innerHTML