jQuary教程6:元素的操作

Posted 2020-11-08 autoxingjy

1 empty方法

//html
<div>
    <p></p>
    <span></span>
</div>

//js
$(‘div).empty();
  
//执行完的结果
<div></div>

 

2 删除元素

//html
<p></p>
<div>
   <span></span>
   文本
</div>

//js
$(‘div‘).remove();

//执行之后的结果
<p></p>

 

3 克隆元素

//html
<div id="box"></div>
<p>
    <span>span元素</span>
</p>

//js
var newP = $(‘p‘).clone();
$(‘#box‘).append(newP);

//执行完的结果
<div id="box">
   <p>
     <span>span元素</span>
   </p> 
 </div>
<p>
    <span>span元素</span>
</p>

3-1 传true

//html
<div id="box"></div>
<p>
    <span>span元素</span>
</p>

//js
$span = $(‘span‘);
$span.on(‘click‘, function(){
      console.log(‘span‘)
})
var newP = $(‘p‘).clone(true);
$(‘#box‘).append(newP);

//执行完的结果
<div id="box">
   <p>
     <span>span元素</span>   //点击会打印span
   </p> 
 </div>
<p>
    <span>span元素</span>    //点击会打印span
</p>