以下 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>