三、jquery中的元素操作

3.1 创建元素

可以使用$()函数的功能来创建元素

var $div = $("<div class='aaa', id='aaa', data-info='nihao'>今天天气很好</div>");

3.2 上树

• jquery中的上树方法有很多种，可以是：

  • 父元素选择子元素

  • 子元素选择父元素

  • 兄弟选择兄弟

3.2.1 父元素选择子元素

• $(box).append(selector|jquery|element)：往父元素的后面追加元素

• $(box).prepend(selector|jquery|element)：往父元素的前面追加元素

// 父元素选择子元素,追加到后面
var $list = $("#list");

// 原生元素
var li = document.createElement("li");
// 添加内部文本
li.innerHTML = 1;
$list.append(li);

// jquery对象
$list.append($("<li>2</li>"));
// html
$list.append("<li>3</li>");

// 父元素选择子元素,追加到前面
var $list = $("#list");

// 原生元素
var li = document.createElement("li");
// 添加内部文本
li.innerHTML = 1;
$list.prepend(li);

// jquery对象
$list.prepend($("<li>2</li>"));
// html
$list.prepend("<li>3</li>");

3.2.2 子元素选择父元素

• $(box).appendTo(selector|jquery|element)：往父元素的后面追加元素

• $(box).prependTo(selector|jquery|element)：往父元素的前面追加元素

// 子元素选择父元素，追加到后面
var $list = $("#list");

var $li1 = $("<li>1</li>");
var $li2 = $("<li>2</li>");
var $li3 = $("<li>3</li>");

// 原生元素
$li1.appendTo(document.getElementById("list"));

// jquery对象
$li2.appendTo($("#list"));

// 选择器
$li3.appendTo("#list");

// 子元素选择父元素，追加到前面
var $list = $("#list");

var $li1 = $("<li>1</li>");
var $li2 = $("<li>2</li>");
var $li3 = $("<li>3</li>");

// 原生元素
$li1.prependTo(document.getElementById("list"));

// jquery对象
$li2.prependTo($("#list"));

// 选择器
$li3.prependTo("#list");

结构：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li id="four">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

执行代码：

// 创建一个li
var $li = $("<li>111</li>");

// 将li插入到four的前面作为它的兄弟节点存在
$li.insertBefore($("#four"));

// 创建一个li
var $li = $("<li>111</li>");

// 将li插入到four的后面作为它的兄弟节点存在
$li.insertAfter($("#four"));

3.2.3 兄弟之间的插入

// 在four的后面插入某个元素
var $four = $("#four");
$four.after("<p>哈哈哈，我是一个p元素</p>");


// 在four的前面插入某个元素
$four.before("<div>呵呵，我是一个div</div>");

3.3 wrap

wrap 让某个元素的外层多一层元素

结构：

<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>

执行代码：

// wrap 让某个元素的外层多一层元素
$("p").wrap("<div></div>");

3.4 wrapAll

wrapAll 让所有元素的外层多一层元素

// wrapAll 让所有元素的外层多一层元素
$("p").wrapAll("<div></div>");

3.5 unwrap

unwrap 将匹配到的元素去掉一层父元素

<p>A</p>
<p>B</p>
<p>C</p>
<div id="box">
    <p id="p1">我是一个p标签</p>
</div>
<p>D</p>
<p>E</p>

// unwrap 将匹配到的元素去掉一层父元素
$("#p1").unwrap();

3.6 replaceWith和replaceAll

结构：

<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>

执行代码：

// replaceWith 将匹配到的元素替换掉指定元素
$("p").replaceWith("<div>123</div>");

// replaceAll 将指定的元素替换掉匹配的元素
$("<div>456</div>").replaceAll($("p"));

3.7 empty、remove

结构：

<div id="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

执行代码：

// empty 表示清空后代，但是自己还在
$("#box").empty();

// remove 表示自杀，自己和后代都没有了
$("#box").remove();

3.8 clone

• clone(boolean)

  • boolean：是一个布尔值

  • 默认是false的时候，天生连同自己的后代一同复制

  • true的时候，连同事件一起复制

结构：

<div id="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

执行代码：

// 使用clone 复制box
$("#box").after($("#box").clone());

// 使用clone 传递参数true
$("#box").click(function(){
    alert(123);
});
$("#box").after($("#box").clone(true));