jQuery操作元素

转载 2012年03月27日 21:53:57

jQuery操作元素

通常,我们在创建元素时,会使用以下代码:

var p = document.createElement("p");

p.innerText = "this is param";

document.getElementById("dv1").appendChild(p);

通过appendChild方法,将该元素加入至另外一个元素.

偶尔,我们为了简单、方便,也会使用下面一个方法来创建元素,:

document.getElementById("dv1").innerHTML = "<p>this is a param</p>";

上面的代码中,我们也动态的创建了一个元素,并将该元素添加至div,但是,我们要说的是,这种方法是错误的,原因如下:

1.在页面加载时改变了页面的结构.IE6,如果网络速度变慢或页面内容太多,就会出现"终止操作"的错误.

2.使用修改HTML内容添加元素,不符合dom标准.在实际工作中,可能会碰到使用此方法后,浏览器并不能立刻显示添加的元素的状况.

所以,我们应摒弃这种编程方法,采用正确的,通用的方法来创建元素.

创建新的元素

下面介绍两种正确创建元素的方法.

1.使用HTML DOM创建元素

varp = document.createElement("p");

p.innerText = "this is param"

 2.使用jQuery函数创建元素

$("<p>this is a param</p>"

我们此处使用了jQuery核心类库中的一个方法:

jQuery(html,ownerDocument)

return:jQuery

根据HTML原始字符串动态创建Dom元素.

此处,我们要注意,如果传入的是一个完整的HTML字符串,jQuery内部使用的也是innerHTML.所以,我们参见另一种方法来创建元素 

//注意:

//    不要写成$("p").html("this is a param");

$("<p/>").html("this is a param"); 

将元素添加至对象上

添加元素时,我们要注意,应该在页面加载完元素后,才可以修改Dom的结构,至少也应该是需要被修改的元素被加载完后,再修改该元素.

我们可以使用下面两种方法来将元素添加至Dom

window.onload = function() {

    varp = document.createElement("p");

    p.innerHTML = "this is a param";

    document.getElementById("dv1").appendChild(p);

}

此段代码的缺点是,加载行为会在页面加载完毕之后再执行,:如果页面上有大量图片或许多资源时,我们可能会因此等很久.

解决办法是,我们在该dom元素加载完毕后,即对其进行添加行为.jQuery函数可实现此功能:

$(function() { 

    varp = document.createElement("p");

    p.innerHTML = "this is a param";

    document.getElementById("dv1").appendChild(p);

}); 

常用函数

 常用的函数比较多,按照帮助文档的分类罗列,我们来一个一个了解函数的使用方法.

 1.内部插入

函数名

描述

举例

结果

append(content)

向每个匹配的元素内部追加内容

$("#dv1").append("<b>this is append</b>");

使用以下样式:
div

{

    display:inline;

    border:solid 1px silver;

    margin:2px;

    line-height:25px;

}

使用效果如下:

prepend(content)

向每个匹配的元素内部前置内容

$("#dv2").prepend("<b>this is prepend</b>");

appendTo(content)

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

$("<b>this is appendTo</b>").appendTo($("#dv3"));

prependTo(content)

将每个匹配的元素前置到另一个指定元素集合中

$("<b>this is prependTo</b>").prependTo($("#dv4"));

注意:

上述方法均是在元素内部进行操作,append是添加到元素内部的后面,prepend是添加到元素内部的前面.

appendprepend均是主体A添加B,appendToprependTo均是B添加至A主体.

2.外部插入

函数名

描述

举例

结果

after(content)

在每个匹配的元素后插入内容

$("#dv1").before("<b>this is before</b>");

使用以下样式:
div

{

    display:inline;

    border:solid 1px silver;

    margin:2px;

    line-height:25px;

}

效果如下:

before(content)

在每个匹配的元素前插入内容

$("#dv2").after("<b>this is after</b>");

insertAfter(content)

把所有匹配的元素插入指定的元素集合后面

$("<b>this is insertAfter</b>").insertAfter($("#dv3"));

insertBefore(content)

把所有匹配的元素插入指定的元素集合前面

$("<b>this is insertBefore</b>").insertBefore($("#dv4"));

 

3.包裹

函数名

描述

举例

备注

wrap(elem)

把匹配的元素用其他元素匹配的结构化标记包装起来

$("b").wrap($("div"));

生成源码:
<div>

    <b>this is b1</b></div>

<div>

    <b>this is b2</b></div>

<div>

wrap(html)

把匹配的元素用其他元素匹配的结构化标记包装起来

$("b").wrap("<div></div>");

wrapAll(elem)

将所有匹配的元素用单个元素匹配起来

$("b").wrapAll($("div"));

生成源码:
<DIV>

<B>this is b1</B>

<B>this is b2</B>

</DIV>

wrapAll(html)

将所有匹配的元素用单个元素匹配起来

$("b").wrapAll("<div></div>");

wrapInner(elem)

将匹配元素的内容用一个Dom元素包装起来

$("p").wrapInner($("b"));

<p>

    <b>this is p1</b>

</p>

wrapInner(html)

将匹配元素的内容用一个Dom元素包装起来

$("p").wrapInner("<b></b>");

注意:

wrap,wrapAll,wrapInner三者之间的区别.

wrap是为每个匹配的元素都包装了一个格式化标记.

wrapAll是将所有匹配的元素用一个格式化标记包装起来

 

4.替换

函数名

描述

举例

备注

replaceAll(selector)

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

$("<p>this is param</p>").replaceAll($("b"));

 

replaceWith(content)

将匹配的元素替换成指定的HTMLDom元素

$("b").replaceWith("<p>this is param</p>");

 

注意:

此两个函数与append 和 appendTo相似.

replaceAll是满足条件的A元素集替换匹配的B元素集

replaceWith(content)A元素集被content元素集替换

5.删除

函数名

描述

举例

备注

empty()

删除匹配的集合的所有子节点

<divid="dv1">

   dv1<p>

       this is a param</p>

</div>

<div>

   dv2</div>

<b>this is b</b>

<scripttype="text/javascript">

   $("div").empty();

</script>

清除div下所有的子元素.
页面源码:
<divid="dv1">

</div>

<div>

</div>

<b>this is b</b>

remove([expr])

Dom中删除所有匹配的元素
expr:用于筛选元素的jQuery表达式

<divid="dv1">

   dv1<p>

       this is a param</p>

</div>

<div>

   dv2</div>

<b>this is b</b>

<scripttype="text/javascript">

   $("div").remove();

</script>


删除页面中所有的div
页面源码:
<B>this is b</B>

6.复制

函数名

描述

举例

结果

clone()

克隆匹配的元素,并且选中这些克隆的副本

<divid="dv1">dv1</div>

<bthis is b</b>

<scripttype="text/javascript">

   $("b").clone().insertBefore($("#dv1"));

</script>

 

clone(true)

克隆匹配的元素及其所有的事件,并选中这些克隆的副本

<divid="dv1">dv1</div>

<bonclick="alert(this.innerHTML)">this is b</b>

<scripttype="text/javascript">

   $("b").clone(true).insertBefore($("#dv1"));

</script>

--选自《从零开始学习jQuery

相关文章推荐

JQuery操作DOM元素

  • 2015年08月01日 11:44
  • 334KB
  • 下载

关于jquery清空div块中表单的值和操作元素是否可用

关于jquery清空div块中表单的值和操作元素是否可用

使用jquery操作table元素:增加或删除一行

最近在做一个后台管理系统,需要做上传资源图片的功能,上传图片是默认只有一个上传控件,页面使用table布局,代码片段如下: ......  应用图片: ...
  • abc_key
  • abc_key
  • 2011年11月22日 23:34
  • 9969

使用jquery选择器操作form元素

/***************************************/ //>jquery 关于包装集选择器的使用demo /*****************************...

jQuery学习笔记(二)—— 操作DOM元素

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。...

10分钟-jQuery操作DOM元素

1.使用attr()方法控制元素的属性attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。例:调用at...

jQuery之操作DOM元素

操作DOM元素:控制元素、向元素内追加插入内容、复制添加删除元素等1. 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元...

jquery之操作元素属性和特性(设置特性值,attr(name,value),attr(attributes)方法的使用)

jquery之操作元素属性和特性(设置特性值,attr(name,value),attr(attributes)方法的使用)...
  • fhd001
  • fhd001
  • 2011年03月31日 00:49
  • 2199

使用jQuery操作元素的属性与样式

使用jQuery操作元素的属性与样式  本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性  对于下面这样一个标签元素: img id...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery操作元素
举报原因:
原因补充:

(最多只允许输入30个字)