Python 前端開發(fā)之jQuery綁定事件及操作標(biāo)簽

//?在匹配的元素之后插入內(nèi)容? 兄弟元素.after(要插入的兄弟元素)； 要插入的兄弟元素.inserAfter(兄弟元素)； $('ul').after('

我是一個(gè)h3標(biāo)題

我是一個(gè)h2標(biāo)題

//?在匹配的元素之前插入內(nèi)容 兄弟元素.before(要插入的兄弟元素)； 要插入的兄弟元素.inserBefore(兄弟元素)；? //示例 $('ul').before('

我是一個(gè)h3標(biāo)題

我是一個(gè)h2標(biāo)題

//刪除節(jié)點(diǎn)后，事件也會(huì)刪除（簡(jiǎn)言之，刪除了整個(gè)標(biāo)簽） $(selector).remove();? //?刪除節(jié)點(diǎn)后，事件會(huì)保留 $(selector).detach();? //?清空選中元素中的所有后代節(jié)點(diǎn) $(selector).empty();

//?remove $('ul').remove(); //?detach var?$btn?=?$('button').detach() $('ul').append($btn)?//此時(shí)按鈕能追加到ul中 //empty $('ul').empty()?//清空掉ul中的子元素，保留ul

//?selector被替換：將所有匹配的元素替換成指定的string、js對(duì)象、jquery對(duì)象。 $(selector).replaceWith(content); //?selector被替換：將所有的匹配的元素替換成p標(biāo)簽。 $('

哈哈哈

//?replaceWith? $('h5').replaceWith('hello?world')?//將所有的h5標(biāo)題替換為a標(biāo)簽 $('h5').replaceWith($('#app'));?//將所有h5標(biāo)題標(biāo)簽替換成id為app的dom元素 //?replaceAll $('

//?克隆匹配的DOM元素 $(選擇器).clone();

$('button').click(function()?{? ????//?1.clone()：克隆匹配的DOM元素 ????//?2.clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本(簡(jiǎn)言之，副本具有與真身一樣的事件處理能力) ????$(this).clone(true).insertAfter(this); })

3、屬性操作

//獲取值：attr()設(shè)置一個(gè)屬性值的時(shí)候?只是獲取值 $('div').attr('id') $('div').attr('class') //設(shè)置值 $('div').attr('class','box')?//設(shè)置一個(gè)值 $('div').attr({name:'hahaha',class:'happy'})?//設(shè)置多個(gè)值

//刪除單個(gè)屬性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //刪除多個(gè)屬性 $('#box').removeAttr('name?class');

//?查看屬性 $(selector).prop(property) //?設(shè)置屬性 $(selector).prop(property,value) //?設(shè)置多個(gè)屬性 $(selector).prop({property:value,?property:value,...})

$('input').attr('checked') "checked" $('input').prop('checked') true $('input').prop('cheched',false)??//設(shè)置取消選中

表格全選、反選示例：

???? ???? 全選 反選 取消 ??? ???? ????????# ????????姓名 ????????愛好 ???? ??? ???? ???? ???????? ????????金老板 ????????開車 ???? ???? ???????? ????????alex ????????抽煙、喝酒、燙頭 ???? ???? ???????? ????????苑昊（苑局） ????????不洗頭、不翻車、不要臉 ???? ????

實(shí)際示例：

???? ???? ???? ????????.active{ ????????????color:?red; ????????} ???? ?????

?????????
• 張三
?????????
• 李四
?????????
• 王五
?????