jquery操作DOM元素的复习

使用attr()方法控制元素的属性

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

操作元素的内容

使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。

 var $content = "<b>唉，我又变胖了！</b>";

            $("#html").html($content);

            $("#text").text($content);

总结一下html和text的区别：

用html来获取文字，他会连同格式、样式一同的复制

用text来获取文字，他只是获取元素标签内的文本格式的内容并不会连带html格式

 

操作元素的样式

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

我们来谈谈。css（）和.addcss（）的相同和不同：

相同：

1：都可以用来改变元素的样式

不同：

1:addclass是将样式追加到属性class中，css是将样式追加到行内样式里。

2：从字面意思上来区分，addclass是添加类，css是样式。这也是两者显而易见的不同。

3：写法上的不同：

.addclass(”class1 class2 class3。。。。“)；

.css("background","red")//设置单个样式

.css({background:"red",color:"white"})//设置多个样式的时候，使用数组的写法。

移除属性和样式

使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名

 $("#content").removeClass("blue");

 $("#content").removeAttr("class");

使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

contentString, Element, jQueryV1.0

要追加到目标中的内容

function(index, html)FunctionV1.4

返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：

$(content).appendTo(selector)

参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

相当于追加的效果。

使用before()和after()在元素前后插入内容

使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：

$(selector).before(content)和$(selector).after(content)

其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

参数

contentString, Element, jQueryV1.0

插入到每个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。

使用clone()方法复制元素

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

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

复制的时候，会连同样式和标签一起复制过来。

参数

EventsBooleanV1.0

一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

Events[,deepEvents]Boolean,BooleanV1.5

1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

 

替换内容

replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：

$(selector).replaceWith(content)和$(content).replaceAll(selector)

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

使用wrap()和wrapInner()方法包裹元素和内容

wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

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

参数：

htmlStringV1.2

HTML标记代码字符串，用于动态生成元素并包装目标元素

elemElementV1.2

用于包装目标元素的DOM元素

fnFunctionV1.4

生成包裹结构的一个函数

 区别：

1：warp是包裹，就是在最外层用一个容器进行包裹，不会改变元素之前的样式，不会破坏原始文档的语义品质。

2：warpInner是被包裹，找到元素的祖先元素。然后加进去，这个方法会改变元素之前的语义。

使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：

$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<script src="jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        var $span = $("span")//创建一个jquery对象,要做什么？（用each方法遍历它，取出他的值）
        $span.each(function(index){
            if(index==3){
                console.info($(this).html())
            }
        })
    })

见解：调用这个方法会有一个回调函数，这个回调函数会提供给你一个值，这个值对应了不同的DOM元素，如果你需要调取某一个元素的值，或者你想取出所有元素的值，需要先创建一个对象，然后通过对象来获取值。

因为是遍历数组，所以每一次都指向一个不同的元素，可以用$(this)对象来获取相应的值

console.info($(this).html())

使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

remove是删除整个元素和标签，empty用清空来说更加合理，它会清空所有选择的子元素的内容，但是结构还是保留的。

问题：在设置attr（”attribute“，value） 属性要打引号，要设置的值不用打引号