2019-05-31

jQuery知識(shí)點(diǎn)

"$"符號(hào)在 jQuery 中代表對(duì) jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象,通過該對(duì)象

可以獲取 jQuery 對(duì)象闹究,調(diào)用 jQuery 提供的方法等霜瘪。只有 jQuery 對(duì)象才能調(diào)用 jQuery 提供

的方法珠插。

1、 Dom對(duì)象(javascript 中獲取 Dom 對(duì)象)

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div")颖对;

2捻撑、 jQuery包裝集|對(duì)象(可以說是Dom對(duì)象的擴(kuò)充)

在 jQuery 的世界中將所有的對(duì)象, 無論是一個(gè)還是一組,

都封裝成一個(gè) jQuery 包裝集,比如獲取包含一個(gè)元素的 jQuery 包裝集:

var jQueryObject = $("#testDiv");

3、 Dom轉(zhuǎn)jQuery對(duì)象

Dom 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象缤底,只需要利用$()方法進(jìn)行包裝即可

var domDiv = document.getElementById('mydiv'); // 獲取 Dom 對(duì)象

mydiv = $(domDiv);

4顾患、 jQuery? 對(duì)象轉(zhuǎn) Dom? 對(duì)象

jQuery 對(duì)象轉(zhuǎn) Dom 對(duì)象,只需要取數(shù)組中的元素即可

//第一種方式 獲取 jQuery 對(duì)象

var jqueryDiv = jQuery('#mydiv');

//第二種方式 獲取 jQuery 對(duì)象

jqueryDiv = $('#mydiv');

var dom = jqueryDiv[0];//將以獲取的 jquery 對(duì)象轉(zhuǎn)為 dom

5个唧、 jQuery? 選擇器

基礎(chǔ)選擇器(常用)

選擇器? ? ? ? ? ? ? ? 名稱? ? ? ? ? ? 舉例

id 選擇器? ? ? ? ? ? #id? ? ? ? ? ? ? ? ? ? $("#testDiv")選擇 id 為 testDiv 的元素

元素名稱選擇器? element? ? ? ? ? ? ? ? $("div")選擇所有 div 元素

類選擇器 ? ? .class? ? ? ? ? $(".blue")選擇所有 class=blue 的元素

層次選擇器

選擇器? ? ? ? 名稱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 舉例

后代選擇器? ancestor descendant? $("#parent div")選擇 id 為 parent 的元素的所有 div 元素

子代選擇器? parent > child? $("#parent>div")選擇 id 為 parent 的直接 div 子元素

相鄰選擇器? prev + next? $(".blue + img")選擇 css 類為 blue 的下一個(gè) img 元素

同輩選擇器? prev ~ sibling? $(".blue ~ img")選擇 css 類為 blue 的之后的 img 元素

單選擇器(forms)

表單選擇器? :input? 查找所有的 input 元素:$(":input")江解;注意:會(huì)匹配所

有的 input、textarea徙歼、select 和 button 元素犁河。

文本框選擇器? :text? 查找所有文本框:$(":text")

密碼框選擇器? :password? 查找所有密碼框:$(":password")

單選按鈕選擇器 :radio

查找所有單選按鈕:$(":radio")

復(fù)選框選擇器? :checkbox? 查找所有復(fù)選框:$(":checkbox")

提交按鈕選擇器 :submit

查找所有提交按鈕:$(":submit")

圖像域選擇器? :image? 查找所有圖像域:$(":image")

重置按鈕選擇器 :reset

查找所有重置按鈕:$(":reset")

按鈕選擇器? :button? 查找所有按鈕:$(":button")

文件域選擇器? :file? 查找所有文件域:$(":file")

6鳖枕、 jQuery Dom操作

操作元素的屬性

attr(屬性名稱)? ? 獲取指定的屬性值,操作 checkbox 時(shí)選中返回

checked呼股,沒有選中返回 undefined耕魄。

attr('checked')

attr('name')

prop(屬性名稱)? ? 獲取具有 true 和 false 兩個(gè)屬性的屬性值? prop('checked')

設(shè)置屬性

attr(屬性名稱,屬性值)? 設(shè)置指定的屬性值彭谁,操作 checkbox時(shí)選中返回 checked,沒有選中返回 undefined允扇。

attr('checked',’checked’)

attr('name',’zs’)

prop(屬性名稱缠局,屬性值)? 設(shè)置具有 true 和 false 兩個(gè)屬性的屬性值

prop('checked',’true’)

移除屬性

removeAttr(屬性名)? 移除指定的屬性? removeAttr('checked')

操作元素的樣式

attr(“class”)? ? ? ? ? ? ? ? ? ? 獲取 class 屬性的值,即樣式名稱

attr(“class”,”樣式名”)? ? 修改 class 屬性的值考润,修改樣式

addClass(“樣式名”)? ? ? ? ? 添加樣式名稱

css()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 添加具體的樣式

removeClass(class)? ? ? ? ? ? ? 移除樣式名稱

補(bǔ)充:增加元素的具體樣式狭园,格式:

1)css({‘樣式名’:’樣式值’,’樣式名 2’:’樣式值 2’})

例:css({"background-color":"red","color":"#fff"});

2)css(“樣式名”,”樣式值”)

例:css('color','white')

操作元素的內(nèi)容

對(duì)于元素還可以操作其中的內(nèi)容,例如文本糊治,值唱矛,甚至是 html。

html() 獲取元素的 html 內(nèi)容

html("html 內(nèi)容") 設(shè)定元素的 html 內(nèi)容

text()? 獲取元素的文本內(nèi)容井辜,不包含 html

text("text 內(nèi)容")? 設(shè)置元素的文本內(nèi)容绎谦,不包含 html

val()? 獲取元素 value 值

val(‘值’)? 設(shè)定元素的 value 值

創(chuàng)建元素

$(‘元素內(nèi)容’)

$(‘<p>this is a paragraph!!!</p>’)

添加元素(常用)

prepend(content)? ? ? 在被選元素內(nèi)部的開頭插入元素或內(nèi)容,被追加的 content 參數(shù)粥脚,可以是字符窃肠、HTML 元素標(biāo)記。

$(content).prependTo(selector)? ? ? 把 content 元素或內(nèi)容加入 selector 元素開頭

append(content)? ? ? ? 在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容刷允,被追加的 content 參數(shù)冤留,可以是字符、HTML 元素標(biāo)記树灶。

刪除元素

remove()? 刪除所選元素或指定的子元素纤怒,包括整個(gè)標(biāo)簽和內(nèi)容一起刪。

empty()? ? 清空所選元素的內(nèi)容

遍歷元素

each()

$(selector).each(function(index,element)) :遍歷元素

參數(shù) function 為遍歷時(shí)的回調(diào)函數(shù)天通,

index 為遍歷元素的序列號(hào)泊窘,從 0 開始。

element 是當(dāng)前的元素土砂,此時(shí)是 dom 元素州既。

7、 jQuery事件

ready()加載事件

ready()類似于 onLoad()事件

ready()可以寫多個(gè)萝映,按順序執(zhí)行

$(document).ready(function(){})等價(jià)于$(function(){})

bind()綁定元素事件

為被選元素添加一個(gè)或多個(gè)事件處理程序吴叶,并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType : 是一個(gè)字符串類型的事件類型序臂,就是你所需要綁定的事件蚌卤。這類類型可以包括如下:

blur, focus, focusin, focusout, load, resize, scroll, unload, click,

dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]:傳遞的參數(shù)实束,格式:{名:值,名 2:值 2}

handler(eventObject):該事件觸發(fā)執(zhí)行的函數(shù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市逊彭,隨后出現(xiàn)的幾起案子咸灿,更是在濱河造成了極大的恐慌,老刑警劉巖侮叮,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件避矢,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡囊榜,警方通過查閱死者的電腦和手機(jī)审胸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卸勺,“玉大人砂沛,你說我怎么就攤上這事∈锴螅” “怎么了碍庵?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)悟狱。 經(jīng)常有香客問我静浴,道長(zhǎng),這世上最難降的妖魔是什么芽淡? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任马绝,我火速辦了婚禮,結(jié)果婚禮上挣菲,老公的妹妹穿的比我還像新娘富稻。我一直安慰自己,他們只是感情好白胀,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布椭赋。 她就那樣靜靜地躺著,像睡著了一般或杠。 火紅的嫁衣襯著肌膚如雪哪怔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天向抢,我揣著相機(jī)與錄音认境,去河邊找鬼。 笑死挟鸠,一個(gè)胖子當(dāng)著我的面吹牛叉信,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播艘希,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼硼身,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼硅急!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起佳遂,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤营袜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后丑罪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荚板,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年吩屹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了啸驯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡祟峦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出徙鱼,到底是詐尸還是另有隱情宅楞,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布袱吆,位于F島的核電站厌衙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏绞绒。R本人自食惡果不足惜婶希,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蓬衡。 院中可真熱鬧喻杈,春花似錦、人聲如沸狰晚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽壁晒。三九已至瓷们,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秒咐,已是汗流浹背谬晕。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留携取,地道東北人攒钳。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像歹茶,于是被迫代替她去往敵國(guó)和親夕玩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子你弦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評(píng)論 0 44
  • 第一章 jQuery簡(jiǎn)介 1-1 jQuery簡(jiǎn)介 1.簡(jiǎn)介 2.優(yōu)勢(shì) 3.特性與工具方法 1-2 環(huán)境搭建 進(jìn)入...
    mo默22閱讀 1,583評(píng)論 0 11
  • jQuery基礎(chǔ)(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗(yàn) $(docume...
    croyance0601閱讀 1,083評(píng)論 0 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5燎孟? 答:HTML5是最新的HTML標(biāo)準(zhǔn)禽作。 注意:講述HT...
    kismetajun閱讀 27,485評(píng)論 1 45
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性揩页。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2