使用jQuery操作网页元素（节点）

通过jQuery创建节点有两种方式:

第一种方式：

var $img = $("<img >");$("body").append($img);

第二种方式：

var $img = "<img src='image/xingxing.gif'/>";$("body").append($img);

简写：

$("body").append("<img src='image/xingxing.gif'/>");

移动和复制元素

原则:单个目标移动,多个目标复制

主要是针对参数为$("选择器"),其对象为DOM上的一个节点

而$("p").append("<b>直接添加</b>");语句不存在移动和复制元素,直接将<b>直接添加</b>添加到p标记中

内部插入(父子)

append(content) 向每个匹配的元素内部追加内容。

HTML 代码:<p>I would like to say: </p>

jQuery 代码:

$("p").append("<b>Hello</b>");

结果:[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(target) 把所有匹配的元素追加到另一个指定的元素元素集合中

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

HTML 代码:

<p>I would like to say: </p><div></div><div></div>

jQuery 代码:

$("p").appendTo("div"); //多个目标div复制,则将<p><p>I would like to say: </p>复制到<div>

结果:

<div><p>I would like to say: </p></div>

<div><p>I would like to say: </p></div>

新建段落追加div中并加上一个class

HTML 代码:

<div></div><div></div>

jQuery 代码:

$("<p>要添加的段落</p>").appendTo("div").addClass("test").end().addClass("test2");

结果:

<div><p class="test test2">要添加的段落</p></div>

<div><p class="test">要添加的段落</p></div>

prepend(content) 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").prepend("<b>Hello</b>");

结果:

[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(target)把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

HTML 代码:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo"><p>I would like to say: </p></div>

以上四种方法如果目标元素是唯一的一个元素，那么append()方法是移动元素

如果目标元素是多个元素那么append()方法是复制元素

即单个目标移动,多个目标复制原则

外部插入(兄弟)

before(content) 在每个匹配的元素之前插入内容。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").before("<b>Hello</b>");

结果:[ <b>Hello</b><p>I would like to say: </p> ]

insertBefore(target) 所有匹配的元素插入到另一个、指定的元素元素集合的前面。

HTML 代码:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代码:

$("p").insertBefore("#foo");

结果:<p>I would like to say: </p><div id="foo">Hello</div>

after(content) 在每个匹配的元素之后插入内容。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").after("<b>Hello</b>");

结果:<p>I would like to say: </p><b>Hello</b>

insertAfter(target) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

HTML 代码:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter("#foo");

结果:<div id="foo">Hello</div><p>I would like to say: </p>

以上四种方法如果目标元素是唯一的一个元素，那么append()方法是移动元素

如果目标元素是多个元素那么append()方法是复制元素

即单个目标移动,多个目标复制原则

节点替换

replaceWith(content)

将所有匹配的元素替换成指定的HTML或DOM元素

$('select').replaceWith(content); $('select')被content替换

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素

$('content').replaceAll(select); 用content主动替换select元素

HTMl代码

<h2>节点替换</h2><ul id="shu"><li id="guan">关羽</li><li id="zhang">张飞</li><li id="zhao">赵云</li></ul><ul id="wu"><li>孙权</li><li>周瑜</li><li id="su">鲁肃</li><li id="gai">黄盖</li></ul><input type="button" value="替换" onclick="f1()" />

jQuery代码：

function f1(){//被动//鲁肃 被 张飞 替换$('#su').replaceWith($('#zhang'));//主动//关羽 替换 孙权$('#guan').replaceAll('#wu li:first');}

删除元素

$(匹配节点).remove(); //删除指定的节点

$(父节点).empty(); //父节点清空子节点

remove()方法 从DOM中删除所有匹配的元素。只删除标签

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:how are

remove()方法，也可以接受参数remove(expr)

$("p").remove(":contains('大')"); 等同于$("p").remove("p:contains('大')");

$("p:contains('大')").remove()

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove(".hello");

结果:how are <p>you?</p>

虽然remove()方法可以接受参数,但通常还是建议在选择器阶段就将要删除的对象确定,然后有remove()一次性删除.

例如上面的代码如果改为:$("p:contains('大')").remove();

empty()方法 可以删除所有子元素(清空标签里面的内容 但是保留标签)

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:<p></p>

detach()方法 从DOM中删除所有匹配的元素。可以删除标签和文本 detach:分离

与remove()不同的是, 所有绑定的事件、附加的数据等都会保留下来。

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").detach();

结果:how are

detach()方法也可接受参数

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").detach(".hello"); //从DOM中把带有hello类的段落删除

结果:how are <p>you?</p>

克隆(复制)元素

开发者希望即使目标对象只有一个, 同样能执行复制操作; jQuery()提供了clone()方法来完成这项任务。

HTML 代码:

<b>Hello</b><p>, how are you?</p>

jQuery 代码:

$("b").clone().prependTo("p");

结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>

实例:

<html><head><title>clone()方法</title><style type="text/css"><!--body{ margin:5px; padding:0px; }p{ margin:0px; padding:1px 1px 1px 0px; }img{border:1px solid #003775;margin:4px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("img:eq(0)").clone().appendTo($("p")); //等同于$("p").append($("img:eq(0)").clone());$("img:eq(1)").clone().appendTo($("p:eq(0)")); //等同于$("p:eq(0)").append($("img:eq(0)").clone());});</script></head><body><img src="08.jpg"> <img src="09.jpg"><hr><p><img src="10.jpg"></p><p><img src="10.jpg"></p><p><img src="10.jpg"></p></body></html>

另外clone()函数还可以接受布尔对象作为参数, 当该参数为true时除了克隆元素本身, 它所携带的事件方法将一块被复制, 默认值false。

$().clone(true) //节点和其事件都给复制

$().clone(false) //只给复制节点本身

HTML 代码:

<input type="button" value="Clone Me">

jQuery 代码:

$(function(){$("input[type=button]").click(function(){    //克隆自己，并且克隆点击的行为    $(this).clone(true).insertAfter(this);});});

注意:appendTo(target)、prependTo(target)、insertBefore(target)、insertAfter(target)方法，

append(content)、 prepend(content)、 before(content)、 after(contant)

clone()是添加在被克隆的对象(content)的后面,不是针对目标(target)克隆

$("li:first").appendTo("ul");

$("ul").append($("li:first"));

注意: 为什么append后加"$", 是因为"li:first"选择器前面无"$", jQuery将li:first当成字符串去解析;

因此：选择器前面无"$"符号时, 需要用$("")进行解析, 才可以执行;

$("ul").append($("li:first")); 是正确的写法：

实例1：

<html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.4.4.js"></script><script type="text/javascript">$(function(){//页面加载完毕, 给"shu国"的li设置事件$('#shu li').mouseover(function(){this.style.backgroundColor = "lightblue"; //this分别依次代表每个li的DOM对象});$('#shu li').mouseout(function(){this.style.backgroundColor = ""; //this分别依次代表每个li的DOM对象});});function f1(){//复制一份"张飞", 并传给wuvar fu_zhang = $('#zhang').clone(true);//复制[节点]和[事件]var fu_zhang = $('#zhang').clone(false);//只复制[节点]$('#wu').append(fu_zhang);}</script></head><body><h2>节点复制</h2><ul id="shu"><li id="guan">关羽</li><li id="zhang">张飞</li><li id="zhao">赵云</li></ul><ul id="wu"><li>孙权</li><li>周瑜</li><li id="su">鲁肃</li><li id="gai">黄盖</li></ul><input type="button" value="复制" onclick="f1()" /></body></html>

实例2：下拉列表项目移动

实现的功能

1 点击->把左边选中的移动到右边

2 点击==>把左边全部移动到右边

3 双击左边或者右边的某个选项,将其自动移动到另外一边

<html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="./jquery-1.4.4.js"></script><script type="text/javascript">//页面加载完毕后，给option设置dblclick双击事件，移动到对方$(function(){    $("#shu option").live("dblclick",function(){        $(this).appendTo("#wu");    });    $("#wu option").live("dblclick",function(){        $(this).appendTo("#shu");    });});function toRight(){    //左侧"选中"项目移动到右侧    $("#shu option:selected").appendTo('#wu');}function toLeft(){    //右侧"选中"项目移动到左侧    $("#wu option:selected").appendTo('#shu');}function toAllRight(){    //左侧全部项目移动到右侧    $("#shu option").appendTo('#wu');}function toAllLeft(){    //右侧全部项目移动到左侧    $("#wu option").appendTo('#shu');}</script><style type="text/css">select {width:180px;height:280px;}</style></head><body><h2></h2><select id="shu" multiple="multiple"><option>刘备</option><option>关羽</option><option>张飞</option><option>赵云</option></select><select id="wu" multiple="multiple"><option>孙权</option><option>周瑜</option><option>黄盖</option><option>鲁肃</option></select><br /><br /><input type="button" value="-->" onclick="toRight()"><input type="button" value="<--" onclick="toLeft()"><input type="button" value="==>" onclick="toAllRight()"><input type="button" value="<==" onclick="toAllLeft()"></body></html>

实例3:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}ul{    width: 600px;    margin: 50px auto;}li{    margin-top: -1px;    line-height: 40px;    list-style: none;    border: 1px solid red;}.red{background-color: red;}.green{background-color: green;}.orange{background-color: orange;}.blueiolet{background-color: blueviolet;}.pink{background-color: pink;}span:not(:first-child){color: #fff;cursor: pointer;text-decoration: underline;}</style></head><body><ul><li class="red"><span>1中国第二艘航母完成首次出海试验任务 将返回码头</span><span>上移</span><span>下移</span><span>置顶</span><span>置底</span><span>删除</span></li><li class="green"><span>2女子发现购物卡里被充进2亿元 立刻做了一个举动</span><span>上移</span><span>下移</span><span>置顶</span><span>置底</span><span>删除</span></li><li class="orange"><span>3"天才指挥家"舟舟中年:风光不再 年演出不足10场</span><span>上移</span><span>下移</span><span>置顶</span><span>置底</span><span>删除</span></li><li class="blueiolet"><span>4法律硕士为开一张"无罪证明" 跑4个派出所等10天</span><span>上移</span><span>下移</span><span>置顶</span><span>置底</span><span>删除</span></li><li class="pink"><span>5女子称打滴滴快车遭司机尾随 车辆与平台信息不符</span><span>上移</span><span>下移</span><span>置顶</span><span>置底</span><span>删除</span></li></ul><script src="js/jquery-2.2.4.min.js"></script><script type="text/javascript">$("li>span:nth-child(2)").click(function() { //上移    $(this).parent().insertBefore($(this).parent().prev())});$("li>span:nth-child(3)").click(function() { //下移    $(this).parent().insertAfter($(this).parent().next())});$("li>span:nth-child(4)").click(function() { //置顶    $(this).parent().prependTo($("ul"))});$("li>span:nth-child(5)").click(function() { //置底部    $(this).parent().appendTo($("ul"))});$("li>span:nth-child(6)").click(function() { //删除    $(this).parent().remove()});</script></body></html>