jQuery04--jQuery HTML DOM

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 1.9k | 阅读时长 ≈ 6

jQuery HTML DOM学习笔记

jQuery HTML DOM 获取和设置

jQuery text（）

该方法可用于获取或设置选定元素标签之间的文本内容，不包含元素标签本身。

  • 获取文本内容
    使用不带任何参数的text（）方法可以获取选定元素标签之间的所有文本内容语法，格式为$（selector）.text（）；
    该方法的返回结果为字符串类型，包含了所有匹配元素内部的文本内容。 返回，只只返回文本内容，不带前后HTML标签。
    如果是元素内部的后代元素中包含有文本，则使用text（）也会获取其中的文本内容。
    需要注意的是，text（）方法不能用于处理表单元素的文本内容，如果需要获取或设置表单中<\textarea>或<\input>元素的文本值需要使用val（）方法。
  • 设置文本内容
    设置选定元素标签之间文本内容的方法如下$（selector）.text（“新文本内容”）；
    该方法会用新文本内容替换就文本内容。

jQuery html（）

该方法用于获取或设置选定元素标签的全部内容，包括内部的文本以及其他HTML标签。该方法调用的是JavaScript原生属性inneHTML。

  • 获取HTML内容
    获取选定元素标签之间HTML代码内容的方法如下$（selector）.html（）；
    刚用来获取元素的HTML内容时，该方法无需带有参数。
    需要注意的是，如果符合要求的元素不止一个，该方法只获取第一个符合选择器要求的元素内部的HTML代码。

  • 设置HTML内容
    设置选定元素标签之间HTML内容的方法如下$（selector）.html（“新的HTML内容”）；

jQuery val（）

该方法用来获取或设置选定表单元素的value属性值。

  • 获取表单元素值
    获取选定元素标签之间文本内容的方法如$（selector）.val（）；
  • 设置表单元素值
    设置选定元素标签之间文本内容的方法如下$（selector）.val（“新文本文件”）；

jQuery attr（）

该方法用于获取或设置选定元素的属性值。

  • 获取元素属性值
    获取选定元素标签之间文本内容的方法如下$（selector）.attr（attributeName）；
    该方法只能获取符合条件的第一个元素的值。
  • 设置元素属性值
    设置选定元素标签之间文本内容的方法如下$（selector）.attr（attributeName，value）；
    该方法可以将所有符合条件的元素属性值全部设置。

jQuery css（）

该方法用于获取或设置选定元素的CSS属性值。

  • 获取CSS属性值
    获取选定元素标签CSS属性的方法如下$（selector）.css（propertyName）；
    该方法可以获得符合条件的第一个元素的指定CSS属性值。

新增数组类型的propertyName参数，用于批量获取元素的多个属性值，语法格式为$（selector）.css（［propertyName1，propertyName2…propertyNameＮ］）；
属性只名称需要像字符串一样带引号。

  • 设置CSS属性值
    设置选的元素标签CSS属性值的方法如下$（selector）.css（propertyName，value）；
    两个参数都要带引号。
    如果有多个CSS属性需要同时设置，语法结构为$（selector）.css（{propertyName1:value1，propertyName2:value2…}）；

jQuery 添加

jQuery append（）和prepend（）

append（）方法用于在所有符合条件的元素内部的结尾处追加内容。
语法结构为append（content，［content］）；
其中content参数的类型可以是文本、数组。、HTML代码或元素标签。
prepend（）参数方法和append（）方法的参数完全相同，只不过追加位置从指定元素内部的结尾处变更为开头处。prepend（content，［content］）；

  • 追加文本
    使用这两种方法添加文本内容允许带有格式化标签。
    例如$（“div#text”）.append（“这段文本带有<i>格式化</i>标签”）；
  • 追加元素
    用这两种方法添加新元素，可以直接在参数位置填入相关HTML代码。
    例如$（“div#text”）.append（“<p>这段文本</p>”）；
  • 追加混合内容
    如果有不同类型的内容（例如文本和HTML元素）需要同时添加可以在参数位置添加若干个变量，其间用逗号隔开，例如
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    ### jQuery after（）和before（）
    after（）方法用于在选定元素之后加入新的内容，before（）方法用于在选定元素之前加入新的内容。
    ~~~
    after（content，［content］）；
    before（content，［content］）；
    ~~~
    - 追加文本
    使用这两种方法添加文本内容，允许带有格式化标签。
    规则和append（）同

    - 追加元素
    使用这两种方法添加新元素，可以直接在参数位置填入相关HTML代码。语法结构和append（）方法同。
    - 追加混合内容
    如果有不同类型的内容需要同时添加，可以在参数位置添加若干个变量，语法和append（）相同。

    ## jQuery 删除
    ### jQuery remove（）
    该方法用于删除指定元素及其子元素，语法格式如下
    $（selector）.remove（）；
    1
    例如
    $（“p”）.remove（）；
    1
    2
    3
    4
    表示删除页面上所有段落元素。
    该方法也可以在括号中填了一个参数，用于筛选出特定的元素进行删除。
    例如
    ```$（“p”）.remove（“.style”）；

    jQuery empty（）

    该方法用于清空元素即从指定元素中删除其子元素和文本内容，语法格式为
    例如
    1
    2
    3
    4
    该方法仅用于清空元素内部的内容，但保留元素本身的结果。也就是说，当用该方法的时候标签里面的内容被清除了当标签本身还是存在的。

    ### jQuery removeAttr（）
    该方法用于删除元素的指定属性，语法结构为```$（selector）.removeAttr（property Name）

jQuery 类属性

jQuery addClass（）

当需要为元素设置多项CSS样式属性时，除了可以使用css（）方法逐行添加以外，还可以使用addClass（）方法直接为元素添加CSS要是表中的类名称。
如果有多个CSS类需要同时添加，可以都写在addClass（）方法的参数位置，之间用空格隔开。例如

style2”）```；
1
2
3
4

### jQuery removeClass（）
如果需要为元素取消某个CSS样式的类名称，只要使用removeClass（）方法即可，语法格式如下
```$（selector）.removeClass（className）

例如

1
2
3
4
5
表示删除class=“style1”的属性。

#### toggleClass（）
如果需要为元素切换某个CSS样式的类名称，只要使用toggleClass（）方法即可，语法格式为
```$（selector）.toggleClass（className）

例如
$（“p”）.toggleClass（“style1”）
表示为段落元素添加或删除class=“style1”的属性

jQuery尺寸

jQuery还提供了一系列方法用于获取和设置元素或浏览器窗口的尺寸。

1
2
3
4
5
6
width（）：获取或设置元素的宽度（不包括内外边距和边框宽度）
height（）：获取或设置元素的高度（不包括内外边距和边框宽度）
innerWidth（）：获取或设置元素的宽度（包括内边距）
innerHeight（）：获取或设置元素的高度（包括内边距）
outerWidth（）：获取或设置元素的宽度（包括内边距和边框宽度）
outerHeight（）：获取或设置元素的高度（包括内边距和边框宽度）

当以上方法不带任何参数表示获取元素的尺寸。
例如

1
var width=$（“div”）.width（）；

表示div块的宽度
如果需要获取带有外边距的尺寸，可以使用outerWidth（）方法加上参数值true表示。例如

1
var width=$（“div”）.outerWidth（）；
-------------本文结束感谢您的阅读-------------