jq基础入门

这是学习jq基础的一些内容整理

创建元素

$("<div></div>");

这种方法创建的元素，是不存在页面中的，需要另外添加到页面中

节点的移动

1. 在子节点最后插入

$("#box").append($box2);
//插入已经存在的盒子
$("#box").append("<div></div>");
//在插入的过程中创建

2. 在子节点最前插入

$("#box").prepend($box2);
//把box2放到box内部最前边

3. 在同级元素的前面插入节点

$("#box").before($box2);
//把节点$box2放在$box的同级元素中的最前

4. 在所有同级元素的最后插入节点

$("#box").after($box2);

5. 由于jq具有隐式迭代特性，可以同时将一个节点添加到多个节点，此时注意不要写id

<p id="p"><p>
<div></div>
<div></div>
<div></div>
<div></div>
$("div").append($("#p"));

6. appendTo和prependTo

7. appendTo刚好和append相反

//将text放到box中最后
$("#box").append($("text"));
$("text").append($("#box"));

2. prependTo()和prepend（）完全相反

//把text节点放在box中的最前
$("#text").prependTo($("#box"));

7. html方法

和js中的innerHTML一样

$("#box").html("<div></div>");

8. 节点的删除方式
9. empty(); 可以完全清除内部所有东西

$("#box").empty();

2. remove();自杀

$("#box").remove();

3. 设置html内容是空

$("#box").html("")

9. 克隆节点

//clone()用于克隆节点
//如果传入的值是false 是浅复制，只能复制标签内容 ，不能复制事件
$("#box").clone(false)
//如果传入的值是true 表示是深复制 不仅复制标签内容，还能复制事件
$("#box").clone(true);