前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作(2)

当前位置:

首页 > Python基础教程 >

前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作(2)

$(A).insertBefore(B) // 把A放到B外部的前面 //外部 $(A).after(B) // 把B放到A外部的后面 $(A).before(B) // 把B放到A外部的前面

移除和清空元素:

$('.p1').remove()           //从DOM中删除所有匹配的元素(标签和事件)，被删掉的对象做返回值，包括删除自身

var $btn=$('button').detach()      // 删除标签，保留事件，被删掉的对象做返回值
$('ul').append($btn)               //此时按钮能追加到ul中

$('.p1').empty()                  // 清空匹配的元素集合中所有的子节点，不包括自身

替换:

$('.p1').replaceWith($('.p2'))        //后面的替换前面的所有.p1标签
$('.p1').replaceAll($('.p2'))        //前面的替换后面的所有.p2标签

克隆:

.clone(true)    //不加参数true，克隆标签但不克隆标签带的事件,加参数true，克隆标签并且克隆标签带的事件

11.571 克隆示例

			
<head> 
<style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.min.js"></script>
<script>  
  $("#b1").on("click", function () {        // clone方法不加参数true，克隆标签但不克隆标签带的事件
    $(this).clone().insertAfter(this);
  });  
  $("#b2").on("click", function () {        // clone方法加参数true，克隆标签并且克隆标签带的事件
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
			

栏目列表