DOM文档遍历

5.3.1元素遍历

        1.利用选择器选择元素

        2.使用for循环遍历元素

        2.使用each函数遍历（由jQeury提供）：$(selector).each(function(index,element))

        3.直接或间接利用元素。

5.3.2元素属性操作

attr()方法用于获取或设置元素属性，removeAttr()用于删除元素属性

 2. 修改DOM元素的属性值。

        1. $(Selector).attr()  读取或修改某一个属性的值.

        2. $(Selector).removeAttr()//删除某一个属性。

        3. $(Selector).data();//读取或者修改某一个data属性，比如：data

语法	说明
attr（name）	取得第一个匹配元素的属性值，否则返回undefined
attr（properies）	将一个键值对形式的JSON对象设置为所有匹配元素的属性
attr（key，value）	为所有匹配的元素设置一个属性值
attr（key，function）	为所有匹配的元素设置一个计算的属性
removeAttr（name）	从每个匹配的元素中删除一个属性

2.class属性操作

语法	作用	说明
addClass(class)	追加样式	为每个匹配的元素追加指定的类名
removeClass(class)	移除样式	从所有匹配的元素中删除全部或者指定的类名
toggleClass(class)	切换样式	判断指定类是否存在，存在则删除，不存在则添加

5.3.3元素内容操作

html（）方法用于获取或设置元素的html内容，text（）方法用于获取或设置元素的文本内容

  3. 修改内容

        作用于input，textarea

        1. $(Selector).val();//读取或修改标签的value属性

        //作用于有结束标签的HTML元素，主要是除了input标签以外的。

        2. $(Selector).text();读取或修改标签内部的文本（转义或者去掉HTML代码以后的内容）

               //将内容转义以后写入到标签

        3. $(Selector).html();读取或修改标签内部的HTML代码。

                //将内容直接写入标签

语法	说明
html（）	获取第一个匹配元素的html内容
html（content）	设置第一个匹配元素的html内容
text（）	获取所有元素包括文本内容组合起来的文本
text（content）	设置所有匹配元素的文本内容

5.3.4元素样式操作

元素样式操作是指获取或设置元素的style属性，可以直接获取或修改元素的样式。

 4. 修改属性（calss css 宽高等）

        1. $(Selector).addClass("a")//添加class

        2. $(Selector).removeClass("a");//移除某class

        3. $(Selector).toggleClass();//切换class

        4. $(Selector).css(); //读取或修改某css值。 .css("width","200px")

        5. $(Selector).width();//读取或修改某元素的宽度

        6. $(Selector).height();//读取或修改某元素的高度

语法	说明
css(name)	获取第一个匹配元素的样式
css(properties)	将一个键值对的JSON对象设置为所有匹配元素的样式
css（name，value）	将所有匹配的元素设置样式
width（）	获取第一个匹配元素的当前宽度值（返回数值型结果）
width（value）	为所有匹配的元素设置宽度样式（可以是字符串或数字）
height（）	获取第一个匹配元素的当前高度值（返回数值型结果 ）
height（value ）	为所有匹配的元素设置高度样式（可以是字符串或数字）

5.3.5文档节点操作

1.节点追加

节点追加是指现有的文档结点中进行父子或兄弟结点的追加

5. DOM节点的操作

        1. 内部添加节点

             1.尾部添加  $(selector).append()//尾部添加（主动）

                         $(selector).appendTo()//被动的添加到元素内部的尾部。

                         选择器如果是一个ID/CSS/标签的等时，就会选择选择器所对应的元素。

                         选择器如果是一个HTML代码，那么浏览器会自动生成一个与之对应的HTML对象。

             2.头部添加  $(selector).perpend()//头部添加（主动）

                      $(selector).appendTo()//被动的添加到元素内部的头部。

        2. 外部添加节点

            1.头部

                before          主动

                insertBefore    被动的

            2.尾部

                after

                insertAfter

关系	语法	说明
父子结点	append（content）	向每个匹配的元素内部追加内容
父子结点	prepend（content ）	向每个匹配的元素内部前置内容
父子结点	appendTo（content ）	把所有匹配的元素追加到指定元素集合中
父子结点	prependTo（content ）	把所有匹配的元素前置到指定元素集合中
兄弟结点	after（content）	在每个匹配的元素之后插入内容
兄弟结点	before（content）	在每个匹配的元素之前插入内容
兄弟结点	insertAfter（content）	把所有匹配的元素插入到指定元素集合的后面
兄弟结点	insertBefore（content）	把所有匹配的元素插入到指定元