2.1 元素属性操作

 

1.获取元素的属性

 

语法:attr(name)

 

参数name表示属性的名称

 

2.设置元素的属性

 

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

 

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

 

3.删除元素的属性

 

语法:removeAttr(name)

 

 

 

2.2 元素内容操作

 

html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也支持XML文档

 

 

 

语法格式

参数说明

功能描述

html()

无参数

用于获取元素的html内容

html(val)

val参数为元素的html内容

用于设置元素的html内容

text()

无参数

用于获取设置元素的文本内容

text(val)

val参数为元素的文本内容

用于设置设置元素的文本内容

 

 

 

2.3 元素样式操作

 

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

 

 

2.4 向元素中追加内容

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

示例如下:

 

(1)描述

 

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

 

(2)代码实现

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

<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>

View Code

 

2.5 复制元素

 

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

 

语法形式:$(content).clone()

 

参数content可以HTML内容、HTML元素标记。

 

示例如下:

 

(1)描述

 

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

 

(2)代码实现

 

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

<script type="text/javascript">
      $(function(){
          $("body").append($("div").clone());
      }) 
  </script>

  ...省略代码
   
  <h3> 复制元素</h3>

  <div id="me">我是王大锤</div>

View Code

 

 

2.6 元素替换

 

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

 

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

 

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

 

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

 

示例如下:

 

代码实现

 

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

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

View Code

 

2.7 包裹元素

 

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

 

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

 

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

 

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

 

示例如下:

 

代码实现

 

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

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

  <b><p>一周中最不喜欢的是:<span><i>周一<i></span></p></b>

View Code

 

2.8 遍历元素

 

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

 

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

 

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

 

示例如下:

 

代码实现

 

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

<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>

View Code

 

 

2.9 删除元素

 

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

 

示例如下:

 

代码实现

 

jQuery向指定div后添加一个div_javascript

jQuery向指定div后添加一个div_javascript_02

<script type="text/javascript">
    $(function(){
        $("#rem").click(function(){
            $("#div0").remove();
        });
        $("#emp").click(function(){
            $("#div1").empty();
        });
    })
 </script>
 ...省略代码
 <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>

View Code