第七章 使用jQuery操作DOM

jQuery对JavaScript中的DOM操作进行了封装

样式操作

内容及Value值操作

DOM操作分类：     节点操作

节点属性操作

节点遍历

CSS-DOMC操作

“元素”和“节点”含义大同小异，并不严格区分

 

1.样式操作

  设置和获取样式值  css()  $().css(设置属性);

  追加和移除样式 addClass()  $().addClass();

removeClass()$().removeClass();

  切换样式  toggleClass()  $().toggleClass();

  判断是否含指定的样式  hasClass()  $().hasClass();

总结：

1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

2.内容操作

  HTML代码操作

    html()可以对HTML代码进行操作，类似于JS中的innerHTML

$().html();  获取元素中的html代码

$().html(设置元素中的html代码);

  标签内容操作  text()

    $().text();  获取元素中的文本内容

$().text(设置元素中的文本内容);

Html()和text()方法区别

语法样式	参数说明	功能描述
Html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
Html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
Text()	无参数	用于获取所有匹配元素的文本内容
Text(content)	content为元素的文本内容内容	用于设置所有匹配元素的文本内容

  属性值操作 val()

$().val(); 获取元素的vallue属性值

$().val(设置元素的value属性值);

3.节点操作

  查找节点

  创建节点

   工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

总结：

A.document.write()只能以整个文档为单位操作，并且在页面加载完成过后调用会导航整个页面重绘不推荐使用。

B.document.innerHTML在数组拼接下速度相比document.createElement()快1倍左右。

C.document.innerHTML在程序处理嵌套结构时结构不如document.createElement()清析。

D.日常使用推荐document.createElement()在处理数据时结构更清晰，方便后期维护并且现在出现有大量数据需要网页显示，一般都是通过分页显示，同时不显示大量数据，当出现有大量数据又需要同时在网页显示性能优先可以考虑document.innerHTML

  插入节点                  Append(cotent)

appendTo(content)

1. 元素内部插入节点    Prepend(content)

prependTo(content)

  

After(content)  

  insertAfter(con)

1. 元素外部插入同辈节点  before(content)

                              insertBefore(con)

1、append()和appendTo()：在现存元素的内部，从后面插入元素

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

remove()删除整个节点

Empty()清空节点内容             

  替换节点

      replaceWith()、replaceAll()

  复制节点

      clone()用于复制某个节点
$(selector).clone([includeEvents]) ;

[参数ture或flase, true复制事件处理，flase时反之]

4.属性操作

  获取与设置元素属性

    attr()用来获取与设置元素属性

  删除元素属性

    removeAttr()用来删除元素的属性

5.节点遍历

  遍历子元素 children()   $(selector).children();

  遍历同辈元素

next() 获取紧邻匹配元素之后的元素

        Prev() 获取紧邻匹配元素之前的元素

        Slibings() 获取位于匹配元素前面和后面的所有同辈元素

  遍历前辈元素 parent()  获取元素的父级元素

               Parents()  获取元素的祖先元素

  其他遍历方法

each()  规定为每个匹配元素规定运行的函数

        End()   结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

6.CSS-DOM操作

Css()

Height() 设置或返回匹配元素的高度

Width()  设置或返回匹配元素的宽度

Offset()  返回一像素为单位的top和left坐标

offsetParent() 返回最近的已定位祖先元素。定位元素指的是元素的css position值被设置为relative、absolute或fixed的元素

Position()  返回第一个匹配元素相对于父元素的位置

scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移

scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移