19:jQuery DOM

以下 jQuery 方法有什么作用碍现?如何使用憨栽?給出范例

.append()
.prepend()
.before()
.after()
.remove()
.empty()
.html()
.text()

<div class="box">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>

<script>
$('.box').append("<p>like</p>");

// 1.可以一次添加多個(gè)內(nèi)容浓领,內(nèi)容可以是DOM對(duì)象反镇、HTML string犯戏、 jQuery對(duì)象

//2.如果參數(shù)是function送火,function可以返回DOM對(duì)象祖很、HTML string、 jQuery對(duì)象漾脂,參數(shù)是集合中的元素位置與原來的html值

$('.box').prepend("<p>like</p>");
//向?qū)ο箢^部追加內(nèi)容假颇,用法和append類似,內(nèi)容添加到最開始

$('.box').before("<p>Hello</p>");
//在對(duì)象前面(不是頭部骨稿,而是外面笨鸡,和對(duì)象并列同級(jí))插入內(nèi)容,參數(shù)和append類似

$('.box').before("<p>特寫</p>");
//和before相反

$('.set-d').remove();
//刪除被選元素(及其子元素)

$('.box').empty();
//清空被選擇元素內(nèi)所有子元素

$('p').html('過年了');
//這是一個(gè)讀寫兩用的方法坦冠,用于獲取/修改元素的innerHTML

$('p').text('125');
//和html方法類似形耗,操作的是DOM的innerText值
</script>

$node.text()和$node.html()有什么區(qū)別?


$node.text()辙浑;屬性表示一個(gè)節(jié)點(diǎn)及其后代的文本內(nèi)容
$node.html(); 屬性表示一個(gè)節(jié)點(diǎn)及其后代的標(biāo)簽結(jié)構(gòu)

介紹以下 jQuery 函數(shù)的用法激涤,給出范例

.val()
.attr()
.removeAttr()
.prop()
.css()
.addClass()
.removeClass()
.hasClass()
.toggleClass()

提示
參考 jQuery 的文檔


<div class="box" id="set" title="season">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>

<script>
$('input').val('jirenggu');
//用來處理input的value呢灶,當(dāng)方法沒有參數(shù)的時(shí)候返回input的value值矩欠,當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候,方法修改input的value值為參數(shù)值

$('.box').attr('title');
//獲取元素特定屬性的值

$('.set-d').removeAttr()
//為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性(attribute)

$('.set-d').prop();
//獲取/設(shè)置值斋陪。

$('set-a').css('background-color':'red');
//獲取元素style特定property的值

$('.set-d').addClass('winter');
//為元素添加class侠草,不是覆蓋原class辱挥,是追加,也不會(huì)檢查重復(fù)

$('p').removeClass('set-c');
//移除元素單個(gè)/多個(gè)/所有class

$('#set').hasClass('.box');
//檢查元素是否包含某個(gè)class边涕,返回true/false

$('.set-a').toggleClass('.set-d');
//toggle是切換的意思晤碘,方法用于切換
</script>

jQuery 對(duì)象和原生 Dom 對(duì)象有什么區(qū)別?如何相互轉(zhuǎn)換功蜓?


//原生Dom轉(zhuǎn)jQuery對(duì)象 (對(duì)于一個(gè)DOM對(duì)象,只需要用$()把DOM對(duì)象給包裝起來园爷,就可以獲得一個(gè)jquery對(duì)象了,方式為$(DOM對(duì)象)式撼。)

<script>
var box = document.getElementById('box');
var $box = $(box);
</script>

//jQuery對(duì)象轉(zhuǎn)原生Dom (jquery對(duì)象是一個(gè)數(shù)組對(duì)象童社,可以通過【index】的方法得到相應(yīng)的DOM對(duì)象。)

<script>
var $box = $('#box');
var box1 = $box[0];
var box = $box.get(0);
</script>
//ps:DOM對(duì)象才能使用DOM方法端衰,jquery對(duì)象不能使用DOM中的方法叠洗,但jquery對(duì)象提供了一套更加完善的工具用于操作DOM

介紹以下 jQuery 方法的用法,給出范例

.each()
$.extend()
.clone()
.index()
.ready()

<script>
$('p').each(function(index){
console.log(index + ":" + $(this).text());
});
//遍歷一個(gè)jQuery對(duì)象旅东,為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)

var obj1 = {
name: "tom",
age: 18,
sex: boy
};
var obj2 = {
occupation: student,
school: Shanghai foreign language school
};
$extend(obj1,obj2);
//合并操作不是遞歸的

$('.set-a').clone().appendTo('.set-d');
//clone()方法深度復(fù)制所有匹配的元素集合,包括所有匹配元素十艾、匹配元素的下級(jí)元素抵代、文字節(jié)點(diǎn)

var list = $('.box');
alert("Index:" + $('p').indext(list));
//從給定集合中查找特定元素index

$(document).ready(function(){
$(".set-a").click(function(){
$("set-b").slideToggle();
});
});
//當(dāng)DOM準(zhǔn)備就緒時(shí),指定一個(gè)函數(shù)來執(zhí)行忘嫉。
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荤牍,一起剝皮案震驚了整個(gè)濱河市案腺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌康吵,老刑警劉巖劈榨,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異晦嵌,居然都是意外死亡同辣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門惭载,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旱函,“玉大人,你說我怎么就攤上這事描滔“舴粒” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵含长,是天一觀的道長券腔。 經(jīng)常有香客問我,道長拘泞,這世上最難降的妖魔是什么颅眶? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮田弥,結(jié)果婚禮上涛酗,老公的妹妹穿的比我還像新娘。我一直安慰自己偷厦,他們只是感情好商叹,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著只泼,像睡著了一般剖笙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上请唱,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天弥咪,我揣著相機(jī)與錄音,去河邊找鬼十绑。 笑死聚至,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的本橙。 我是一名探鬼主播扳躬,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了贷币?” 一聲冷哼從身側(cè)響起击胜,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎役纹,沒想到半個(gè)月后偶摔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡促脉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年辰斋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嘲叔。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡亡呵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出硫戈,到底是詐尸還是另有隱情锰什,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布丁逝,位于F島的核電站汁胆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏霜幼。R本人自食惡果不足惜嫩码,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望罪既。 院中可真熱鬧铸题,春花似錦、人聲如沸琢感。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驹针。三九已至烘挫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間柬甥,已是汗流浹背饮六。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留苛蒲,地道東北人卤橄。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像撤防,于是被迫代替她去往敵國和親虽风。 傳聞我的和親對(duì)象是個(gè)殘疾皇子棒口,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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