前端基础之操作标签—文档处理
一、操作標(biāo)簽
1、文檔處理
? <1>添加到指定元素內(nèi)部的后面
$(A).append(B) // 把B追加到A后面 $(B).appendTo(A) // 把B追加到A后面? <2>添加到指定元素內(nèi)部的前面
$(A).prepend(B); // 把B添加到A的前面 $(B).prependTo(A); // 把B添加到A的前面? <3>添加到指定元素外部的后面
$(A).after(B) // 把B放到A外部的后面 $(B).insertAfter(A) // 把B放到A外部的后面? <4>添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面 $(B).insertBefore(A) // 把B放到A的前面? <5>移除和清空元素
remove() // 從DOM中刪除所有匹配的元素 empty() // 刪除匹配的元素集合中所有子節(jié)點(diǎn)? <6>替換
$(A).replaceWith(B) //把A替換成B $(B).replaceAll(A) // 把所有匹配到的A替換成B$('div').replaceWith('<p>wjs</p>').appendTo('body'); // 返回結(jié)果為div標(biāo)簽，
$('<p>wjs</p>').replaceAll('div').appendTo('body'); // 返回結(jié)果為p標(biāo)簽，
? <7>克隆
clone() // 有true參數(shù)，加上true會把點(diǎn)擊事件等一塊復(fù)制? <8>克隆示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body> <button class="b1" type="button">點(diǎn)我哈哈</button> <!--type='button'取消點(diǎn)擊會刷新頁面的這個動作--> <script>$('.b1').on('click',function () {$(this).clone(true).insertAfter(this);// this誰點(diǎn)擊就是誰 }) </script></body> </html>二、事件
1、常用事件
2、事件綁定
? <1> .on(events[,selector],function(){})
? ★events：事件
? ★selector：選擇器（可選的）
? ★function：事件處理函數(shù)
? <2>給標(biāo)簽綁定事件的方式
a、在標(biāo)簽上寫? οnclick=函數(shù)名();
b、在js代碼中? 標(biāo)簽對像.onclick = function () {}
? <3>jQuery綁定事件方式
a、$('選擇器').click(function () {} )
b、$('選擇器').on('click',function () {} )/$('選擇器').on('click','.delete',function () {} )
3、移除事件
4、阻止后續(xù)事件執(zhí)行
? <1>return false; // 常見阻止表單提交等
? <2>e.preventDefault(); // e為自定義的一個變量
5、阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="d1"><p class="p1">點(diǎn)我哈哈</p> </div> <script>$('.d1').click(function () {alert('div')});$('.p1').click(function (e) {alert('p');// 點(diǎn)擊'點(diǎn)我哈哈'會彈出'p'和'div'彈框// e.stopPropagation(); // 用來阻止冒泡的 }) </script> </body> </html> 阻止事件冒泡6、頁面載入
7、事件委托
事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件。
示例：
表格中每一行的編輯和刪除按鈕都能觸發(fā)相應(yīng)的事件。
$('table').on('click','.delete',function () {// 刪除按鈕綁定的事件$(this).parents().remove('tr'); })?
轉(zhuǎn)載于:https://www.cnblogs.com/wjs521/p/9629673.html
總結(jié)
以上是生活随笔為你收集整理的前端基础之操作标签—文档处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android学习四、Android中的
- 下一篇： 样品GA的良好理解