Dom操作常用方法
.append()/.prepend()
.append()
函數(shù)用于向每個(gè)匹配元素內(nèi)部的末尾位置追加指定的內(nèi)容
.prepend()
函數(shù)用于向每個(gè)匹配元素內(nèi)部的起始位置追加指定的內(nèi)容根时。
指定的內(nèi)容可以是:html字符串项炼、DOM元素(或數(shù)組)、jQuery對象顾犹、函數(shù)(返回值)。
$("p").append( '<p>插入段落</p>' ) // 插入DOM元素
$('p').append($('strong')) // 插入jQuery對象,如果追加的內(nèi)容是當(dāng)前頁面中的某些元素,那么這些元素將從原位置上消失虑稼。
//簡而言之,這相當(dāng)于一個(gè)移動(dòng)操作势木,而不是復(fù)制操作蛛倦。
$('p').append(function(index){ // 插入function,函數(shù)傳入兩個(gè)參數(shù):第一個(gè)參數(shù)就//是當(dāng)前元素在匹配元素中的索引啦桌,
第二個(gè)參數(shù)就是該元素當(dāng)前的內(nèi)部html內(nèi)容(innerHTML)
return '插入段落' + index
})
.before()/.after()
.before()
函數(shù)用于在每個(gè)匹配元素之前插入指定的內(nèi)容
.after()
函數(shù)用于在每個(gè)匹配元素之后插入指定的內(nèi)容溯壶。
指定的內(nèi)容可以是:html字符串、DOM元素(或數(shù)組)甫男、jQuery對象且改、函數(shù)(返回值)。
$('p').before('<i>somthing</i>')
$('p').after('$('#id')') //插入的內(nèi)容是當(dāng)前頁面中的某些元素板驳,那么這些元素將從原位置上消失又跛。
//簡而言之,這相當(dāng)于一個(gè)移動(dòng)操作若治,而不是復(fù)制操作慨蓝。
.remove()/.empty()
.remove()
刪除被選元素(及其子元素)
.empty()
清空被選擇元素內(nèi)所有子元素
$('p').remove()
$('p').empty()
$('p').remove('.class') //通過添加選擇器,可以進(jìn)行過濾刪除
.html()/.text()
.html()
函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的DOM元素內(nèi)innerHTML
.text()
函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的DOM元素內(nèi)innerText
<div>
<p>段落1</p>
<p>段落2</p>
</div>
$('div').html()
// 返回結(jié)果:
"
<p>段落1</p>
<p>段落2</p>
"
$('div').text()
// 返回結(jié)果:
"
段落1
段落2
"
屬性操作常用方法
.val()
函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的DOM元素的value值端幼,該函數(shù)常用于設(shè)置或獲取表單元素的value屬性值礼烈。例如:<input>、<textarea>婆跑、<select>此熬、<option>、<button>等滑进。
$('input').val('somthing') //設(shè)置所有選中的input的value為somthing摹迷。
.attr()/.prop()
.attr()
和.prop()
函數(shù)都用于設(shè)置或返回當(dāng)前jQuery對象所匹配的元素節(jié)點(diǎn)的屬性值。
兩者使用上的區(qū)別是:對于HTML元素本身就帶有的固有屬性郊供,在處理時(shí),建議使用prop方法近哟。對于HTML元素我們自己自定義的DOM屬性驮审,在處理時(shí),建議使用attr方法。
<input id="chk1" type="checkbox" action='123' >
// .prop()用于設(shè)置或獲取指定DOM元素(指的是JS對象疯淫,Element類型)上的屬性(property)
$("#chk1").prop("action") // undefined
document.querySelector('#chk1').action // undefined
// .attr()用于設(shè)置或獲取指定DOM元素所對應(yīng)的文檔節(jié)點(diǎn)上的屬性(attribute)
$('#chk1').attr('action') // '123'
document.querySelector('#chk1').getAttribute('action') // "123"
$("#chk1").prop("checked") // false
$("#chk1").attr("checked") // undefined
document.querySelector('#chk1').checked //false
document.querySelector('#chk1').getAttribute('checked') //null
//勾選checkbox后 .attr()函數(shù)不會(huì)更新
$("#chk1").prop("checked") //true
$("#chk1").attr("checked") //undefined
document.querySelector('#chk1').checked //true
document.querySelector('#chk1').getAttribute('checked') //null
.removeAttr()
函數(shù)用于移除在當(dāng)前jQuery對象所匹配的每一個(gè)元素節(jié)點(diǎn)上指定的屬性
$('img').removeAttr('alt') //刪除所有img標(biāo)簽中的alt屬性
.css()
函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的元素的css樣式屬性值地来。
$('div').css('fontSize', '20px') //設(shè)置
$('div').css('fontSize') //獲取
.addClass() /.removeClass()/.toggleClass()
.addClass()
函數(shù)用于為當(dāng)前jQuery對象所匹配的每一個(gè)元素添加指定的css類名。
.removeClass()
移除當(dāng)前jQuery對象所匹配的每一個(gè)元素上指定的css類名熙掺。
.toggleClass()
切換當(dāng)前jQuery對象所匹配的每一個(gè)元素上指定的css類名未斑。
$('div').addClass('clearfix') //增加clearfix類
$('div').removeClass('clearfix') //刪除clearfix類
$('div').toggleClass('clearfix') //切換clearfix類
.hasClass()
指示當(dāng)前jQuery對象所匹配的元素是否含有指定的css類名。返回值是Boolean類型
$('div').hasClass("bar")
其他常用函數(shù)
.each()
函數(shù)用于以當(dāng)前jQuery對象匹配到的每個(gè)元素作為上下文來遍歷執(zhí)行指定的函數(shù)币绩。所謂的上下文蜡秽,意即該函數(shù)內(nèi)部的this指針引用了該元素。
$("ul li").each(function(index, element){
// this === element
$(element).html( "編號" + (index + 1) );
});
$.extend()
函數(shù)用于將一個(gè)或多個(gè)對象的內(nèi)容合并到目標(biāo)對象缆镣。
var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com" };
// y和z的屬性將被合并復(fù)制到對象x上
var obj = $.extend( x, y, z );
.clone()
函數(shù)用于克隆當(dāng)前匹配元素集合的一個(gè)副本芽突,并以jQuery對象的形式返回
$('div').clone()
.index()
函數(shù)用于獲取當(dāng)前jQuery對象中指定DOM元素的索引值。
$('li').index($('li.active'))
.ready()
函數(shù)用于在當(dāng)前文檔結(jié)構(gòu)載入完畢后立即執(zhí)行指定的函數(shù)董瞻。
$(document).ready( function(){
alert('hello world')
});