jQuery 函數(shù)

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')
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寞蚌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子钠糊,更是在濱河造成了極大的恐慌挟秤,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抄伍,死亡現(xiàn)場離奇詭異艘刚,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)逝慧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門昔脯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人笛臣,你說我怎么就攤上這事云稚。” “怎么了沈堡?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵静陈,是天一觀的道長。 經(jīng)常有香客問我诞丽,道長鲸拥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任僧免,我火速辦了婚禮刑赶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘懂衩。我一直安慰自己撞叨,他們只是感情好金踪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著牵敷,像睡著了一般胡岔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枷餐,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天靶瘸,我揣著相機(jī)與錄音,去河邊找鬼毛肋。 笑死怨咪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的村生。 我是一名探鬼主播惊暴,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拧篮,長吁一口氣:“原來是場噩夢啊……” “哼羡洁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起帆喇,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤卫病,失蹤者是張志新(化名)和其女友劉穎油啤,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蟀苛,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡益咬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帜平。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幽告。...
    茶點(diǎn)故事閱讀 39,764評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖裆甩,靈堂內(nèi)的尸體忽然破棺而出冗锁,到底是詐尸還是另有隱情,我是刑警寧澤嗤栓,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布冻河,位于F島的核電站,受9級特大地震影響茉帅,放射性物質(zhì)發(fā)生泄漏叨叙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一堪澎、第九天 我趴在偏房一處隱蔽的房頂上張望擂错。 院中可真熱鬧,春花似錦樱蛤、人聲如沸马昙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽行楞。三九已至,卻和暖如春土匀,著一層夾襖步出監(jiān)牢的瞬間子房,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工就轧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留证杭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓妒御,卻偏偏與公主長得像解愤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子乎莉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評論 2 354

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

  • $(”p”).addClass(css中定義的樣式類型); 給某個(gè)元素添加樣式 $(”img”).attr({sr...
    專注寒冰三千歲閱讀 505評論 0 4
  • 一送讲、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評論 0 44
  • 通過jQuery,您可以選韧锟小(查詢哼鬓,query)HTML元素,并對它們執(zhí)行“操作”(actions)边灭。 jQuer...
    枇杷樹8824閱讀 656評論 0 3
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式异希。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,171評論 0 1
  • 每當(dāng)我郁悶時(shí)绒瘦,我就想到那落井的驢称簿,它的處境與經(jīng)歷與我何其相似,驢的思維與精神是可以借鑒與學(xué)習(xí)的惰帽。 張...
    飄聆閱讀 141評論 0 0