jQuery——clone()方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery——clone()方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
作用:創建一個匹配的元素集合的深度拷貝副本(可拷貝元素樣式、屬性)
【例】填寫下列表格(克隆元素并添加內容)
代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {text-align: center;width: 300px;}th {width: 100px;}.demo {display: none;}</style> </head><body><table class="stb" border="1"><tr><th>name</th><th>age</th><th>sex</th></tr><tr class="demo"><td></td><td></td><td></td></tr></table> </body> <script src="./jquery.js"></script> <script>//模擬json數據var studArr = [{name: 'jwh',age: '18',sex: 'female'},{name: 'dqs',age: '23',sex: 'male'},{name: 'ly',age: '23',sex: 'female'}];var wrapper = $('.stb')studArr.forEach(function (ele, index) {var cloneDom = $('.demo').clone().removeClass('demo')cloneDom.find('td').eq(0).text(ele.name).next().text(ele.age).next().text(ele.sex);cloneDom.appendTo(wrapper);});</script></html>?結果
【注】事件不能克隆,如下例,創建一個div如下圖
綁定點擊事件并克隆該div如下
$('.demo').click(function () {console.log(1); }).clone().css({backgroundColor: 'teal'}).appendTo('body');結果
即,點擊事件并未克隆到新的div上
總結
以上是生活随笔為你收集整理的jQuery——clone()方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jQuery——给元素添加父级的方法
- 下一篇: jQuery的事件1——on,one