jQuery操作元素

最新推荐文章于 2024-08-15 19:25:35 发布
置顶 最新推荐文章于 2024-08-15 19:25:35 发布
阅读量1.1k 收藏
点赞数
文章标签： jquery html div function 浏览器 文档

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是添加到元素内部的前面.

append和prepend均是主体A添加B,而appendTo和prependTo均是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)

将匹配的元素替换成指定的HTML或Dom元素

$("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》

__GYT
关注
JQuery操作元素
Lucky1019的博客
12-01 229
1、元素固有属性-prop(例如:href、type等) 获取属性: prop('属性') 设置属性: prop('属性','属性值') 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。 2、元素自定义属性值-attr 用户自己给元素添加的属性，称为自定义属性。获取属性: attr('属性') //类似js中的getAttribute() 设置属性: attr('属性','属性
jQuery资料之遍历元素
宅羽的博客
12-16 218
◆ 遍历元素： jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 方法一： $('div').each(function (index, domEle) { xxx, } ) each方法遍历匹配每个元素，主要用DOM处理。 里面的回调函数有2个参数：index为每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象 所以...
jQuery的元素操作
最新发布
2402_84658588的博客
08-15 1104
用户自己给元素添加的属性，我们称为自定义属性比如给div添加 index="1"。//获取属性语法attr('属性') //类似原生 getAttribute()//设置属性语法attr('属性','属性值') //类似原生 setAttribute()
jquery之操作元素
爱前端的程序媛的博客
04-12 198
前面学习了jQuery选择器以及jQuery动态效果的方法，今天来学习jQuery操作元素的一些知识，主要包括三个内容：属性操作、内容文本值操作以及元素的增删改查和遍历的操作。 同样是学习一些方法的使用。 属性操作 固有属性 prop() 方法 —— 获取属性值prop(“属性名”)； 更改属性值prop(“ 属性名 ”," 值") 自定义属性 attr() 方法 ——获...
jQuery之操作元素
weixin_63040021的博客
06-09 127
操作元素的属性属性的分类：固有属性：元素本身就有的属性（id、name、class、style）返回值是boolean的属性：checked、selected、disabled自定义属性：用户自己定义的属性attr()和prop()的区别：如果是固有属性，attr()和prop()方法均可操作如果是自定义属性，attr()可操作，prop()不可操作如果是返回值是boolean类型的属性若设置了属性，attr()返回具体的值，prop()返回true；
jQuery操作元素、事件处理
weixin_61561066的博客
07-24 1655
jQuery操作元素、事件处理
JQuery操作元素的css样式
01-19
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能...
jQuery中的元素操作
qq_49956121的博客
09-21 819
一、元素内容操作 元素内容操作是jQuery对元素文本的DOM 操作。 1、html()获取HTML中的内容 2、html(“val”)设置HTML中的内容 3、text()获取文本 注意：结果是由所有匹配元素包含的文本内容组合起来的文本。 4、text(“text”)设置文本 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 5、val()获取元素值 6、val(“value”)设置元素值 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 二、元素属性操作 元素属
jQuery Dom元素操作技巧
12-29
jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('<div class=error_info><span class=Validform_checktip></span></
jQuery 查找元素操作实例小结
10-16
在前端开发中，操作DOM元素是最常见的任务之一，jQuery提供了强大的选择器功能，帮助开发者高效地完成这一任务。以下将详细解读标题中提到的jQuery查找元素操作的实例和知识点。 1. 通过id查找：在HTML元素中，每个...
jQuery 元素操作
weixin_46077178的博客
05-17 431
jQuery 元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。 1、遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 $('div').each(function (index, domEle) { xxx; }) 注释 1.each() 方法遍历匹配的每一个元素，主要用DOM处理，each每一个 2.里面的回调函数有2个参数：index是每个元素的索引号，可以修改索引号名称，
jQuery元素操作
sinat_39119933的博客
10-21 564
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index="1"语法描述语法获取属性语法attr("属性”） //类似原生getAttribute()设置属性语法attr("属性","属性值“）//类似原生setAttribute()注意：attr()除了普通属性操作，更适合操作自定义属性，（该方法也可以获取H5 自定义属性）3.3数据缓存 date()date()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除描述语法。
jQuery-元素操作
wsssq_的博客
03-11 572
遍历、创建、添加、删除元素操作
jQuery_元素操作
大脸猫~
06-25 663
一.高度和宽度 获取高度： $(&amp;quot;div&amp;quot;).height(); // 高度 $(&amp;quot;div&amp;quot;).width(); //宽度 设置高度： $(&amp;quot;div&amp;quot;).height(300); $(&amp;quot;div&amp;quot;).height(“300px”);
jquery操作html元素
xiaoxiaoyu85的专栏
05-19 1016
1.获取某个元素的id, name $(document).ready(function(){ id = $('div').eq(0).attr('id'); alert(id) alert($(this).attr("name")) });
jQuery操作元素属性
solo_ocean的专栏
06-27 511
1.attr( name ) 取得第一个匹配元素的属性值。通过这个方 法可以方便地从第一个匹配元素中获取一 个属性的值。如果元素没有相应属性，则返 回undefined 。  例：$("img").attr("src");返回文档中第一个图像的src属性值； 2.attr( properties )将一个“名/值”形式的对象设置为所有匹配 元素的属性。这是一种在所有匹配元素中批量设置很多属性的
jQuery操作元素内容
青椒盖饭的博客
01-13 487
之前发现val()函数可以取得元素内容,但是是加上jQuery之中,也可以利用val设置元素内容 示例设置元素value &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jquery项目&lt;/title&gt; &lt;script type="text/javascript" s
JQUERY操作元素
07-28
下面是一些常见的jQuery操作元素的示例： 1. 选择元素： - 通过元素标签名选择：`$('tagname')` - 通过类名选择：`$('.classname')` - 通过ID选择：`$('#idname')` - 通过属性选择：`$('[attribute=value]')` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值