jQuery_2操作dom元素

Posted fuzzier

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery_2操作dom元素相关的知识,希望对你有一定的参考价值。

首先声明本次随笔大部分来源于huizhi网,单纯用于自己记笔记

 

1 元素属性操作

在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。

1.1 获取元素属性

语法:attr(name)  参数name表示属性的名称

1.2 设置元素属性

单个属性设置语法:attr(key, value)

多个属性设置语法:attr({key0:value0, key1:value1})

1.3 删除元素属性

语法:removeAttr(name)

示例 使用attr()方法设置、获取、删除a标记中href属性。

<script type="text/javascript">
$(function(){
    $("#a1").attr("href","http://www.xxx.com");//设置a标记中的href属性
    var $url = $("#a1").attr("href");//获取a标记中的href属性
    $("#tip").html($url);
})
$(function(){//删除a标记中的href属性
    $("#a1").removeAttr("href");
})
</script>
...省略代码
 
<h3>attr()方法设置元素属性</h3>
<a data="http://www.hxxxz.com" id="a1">点我就变</a>
<div>改变后的地址:<span id="tip"></span></div>
...省略代码

result:

2 元素内容操作

在jQuery中,操作元素内容的方法包括html()和text()。详细如下:

示例 在页面中,用html()和 text()方法获取div标记中的内容,并将内容分别作为html(val)和text(val)的参数,分别设置元素的内容,并将结果显示在页面中。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $strHtml = $("#divShow").html();//获取HTML内容
    var $strText = $("#divShow").text();//获取文本内容
    $("#divHtml").html($strHtml);//设置HTML内容
    $("#divText").text($strText);//设置文本内容
})
</script>
...省略代码
<div id="divShow">**_几天不见你又瘦了_**</div>
<div id="divHtml"></div>
<div id="divText"></div>
 

result:

3 元素样式操作

通过addClass()css()可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称后者直接将样式的属性内容写在括号中

示例 使用css()和addClass()方法,改变div元素的背景色,再用removeClass()移除一个元素的样式。

<style type="text/css">
    body{font-size:15px;text-align:center}
    div{border:solid 1px #666;
        padding:5px;width:220px;margin:5px}
    .blue{background-color:blue}
</style>
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    $("#content0").css("background-color","red");
    $("#content1").addClass("blue");
    $("#rem").click(function(){//click点击事件我们将在后面介绍到。
        $("#content1").removeClass("blue");
    })
})
</script>
...省略代码
 
### css()方法设置元素样式
 
<div id="content0">我穿了一件红色外衣</div>
<div id="content1">我穿了一件红色外衣</div>
<div><button id="rem">脱下蓝色的外衣</button></div>

result:

 4 向元素追加内容

如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。

如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容

append()语法形式:$(html).append(content)

appendTo()语法形式:$(content).appendTo(html)

before()的语法形式:$(html).before(content)

after()的语法形式:$(html).after(content)

参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

示例 向p标记中或前或后分别追加内容。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $content = "**我是append()方法追加的内容**";
    var $contentTo = "**我是appendTo()方法追加的内容**";
    var $before = "**我是before()方法追加到前面的内容**";
    var $after = "**我是before()方法追加到后面的内容**";
    $("#id1").append($content);
    $($contentTo).appendTo("#id2");
    $("#id3").before($before);
    $("#id4").after($after);
})
</script>
...省略代码
    <p id="id1">append()追加内容:</p>
    <p id="id2">appendTo()追加内容:</p>
    <p id="id3">before()追加到前面</p>
    <p id="id4">after()追加到后面</p>

result: 后三个方法并没有实现

5 复制元素

想要复制元素,调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性

语法形式:$(content).clone() 参数content可以HTML内容、HTML元素标记。

 示例 使用clone()复制页面中的一个div,并追加到body中

<script type="text/javascript">
$(function(){
    $("body").append($("div").clone());
}) 
</script>
...省略代码
 
<h3> 复制元素</h3>
 
<div id="me">我是王大锤</div>

result:

6 元素替换

在jQuery中想要替换元素或元素中的内容,replaceWith()和replaceAll()方法都可以但它们调用时,内容和被替换元素所在的位置不同

replaceWith()语法形式:$(selector).replaceWith(content)

replaceAll()语法形式:$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

示例 

<script type="text/javascript">
$(function(){
    $("#me").replaceWith("<div>走上人生巅峰</div>");
    $("<div>那是我逝去的青春</div>").replaceAll("#yi");
}) 
</script>
...省略代码
 
<h3> 替换元素</h3>
 
<div id="me">我是王大锤</div>
<div id="yi">在夕阳下奔跑</div>

7 包裹元素

在jQuery中使用wrap()和wrapInner()方法包裹元素和内容,但前者用于包裹元素本身后者则用于包裹元素中的内容(像是里面的string)

wrap()语法形式:$(selector).wrap(wrapper)

wrapInner()语法形式:$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

示例 

<script type="text/javascript">
$(function(){ 
    $("p").wrap("");//所有段落标记字体加粗
    $("span").wrapInner("");//所有段落中的span标记斜体
})
</script>
...省略代码
 
<p>一周中最喜欢的是:<span>周五</span></p>    /*wrap包裹的是<div><p>...<span>..</span></p></div>*/
 
<p>一周中最不喜欢的是:<span>周一</span></p>   /*而wrapInner包裹的是<p>...<div><span>..</span></div></p>*/

result:

 

8 遍历元素

在DOM元素操作中,有时需要对同一标记的全部元素进行统一操作。在jQuery中,使用each()方法可以实现元素的遍历。

语法形式:$(selector).each(callback)

参数callback是一个function函数,该函数还可以接收一个行参index,这个形参为遍历元素的序号,序号从0开始;如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。

示例

<script type="text/javascript">
$(function(){ 
    $("div").each(function(index){
        if(index == 2){
            $(this).addClass("red");
        }
    })
})
</script>
...省略代码
 
<h3>each()遍历元素</h3>
 
<div>帽子</div>
<div>上衣</div>
<div>裤子</div>
<div>鞋子</div>
 

删除元素

在DOM元素操作中,jQuery为删除元素提供了两种方法:remove()和empty()。remove()-删除被选元素(及其子元素)empty()-从被选元素中删除子元素

示例 

<p><script type="text/javascript">
$(function(){
    $("#rem").click(function(){
        $("#div0").remove();
    });
    $("#emp").click(function(){
        $("#div1").empty();
    });
})
</script>
...省略代码</p>
<h3> 删除元素</h3>
 
<div id="div0">帽子<button id="rem">remove删除帽子</button></div>
<div id="div1">上衣<button id="emp">empty删除上衣</button></div>
<div id="div2">裤子</div>
<div id="div3">鞋子</div>

 

以上是关于jQuery_2操作dom元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_2操作dom元素

实用代码片段将json数据绑定到html元素 (转)

jQuery中的DOM操作

jQuery中DOM操作

锋利的jQuery ——jQuery中的DOM操作

使用 JQuery ajax 在 DOM 操作后附加事件