目录
  1. 1. 属性
    1. 1.1. attr()
      1. 1.1.1. 参数
      2. 1.1.2. 示例
    2. 1.2. removeAttr()
      1. 1.2.1. 参数
      2. 1.2.2. 示例
    3. 1.3. prop()
      1. 1.3.1. 参数
      2. 1.3.2. 示例
    4. 1.4. removeProp()
      1. 1.4.1. 参数
      2. 1.4.2. 示例
    5. 1.5. attr与prop
    6. 1.6. addClass()
      1. 1.6.1. 参数
      2. 1.6.2. 示例
    7. 1.7. removeClass()
      1. 1.7.1. 参数
      2. 1.7.2. 示例
    8. 1.8. html()
      1. 1.8.1. 参数
      2. 1.8.2. 示例
    9. 1.9. text()
      1. 1.9.1. 参数
      2. 1.9.2. 示例
    10. 1.10. val()
      1. 1.10.1. 参数
      2. 1.10.2. 示例
JQ属性值操作

属性

attr()

参数

attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。

示例

var $input = $(':input')
// 为$input的value属性赋值
$input.attr('value','this is input value')

var $img = $(':img')
// 获取$img的src属性
$img.attr('src')

removeAttr()

参数

removeAttr(name)

从每一个匹配的元素中删除一个属性

示例

// 删除img元素的src属性
$("img").removeAttr("src");

prop()

参数

prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。

示例

>var $checkbox = $(':checkbox')
>// 为$checkbox的checked属性赋值
>$input.prop('checked',true)
>$input.prop('checked',false)

removeProp()

参数

removeProp(name)

用来删除由.prop()方法设置的属性集

示例

>var $checkbox = $(':checkbox')
>//移除$checkbox的checked属性
>$checkbox.removeProp("checked")

attr与prop

  • attr(): 操作属性值为非布尔值的属性
  • prop(): 专门操作属性值为布尔值的属性

addClass()

参数

addClass(class|fn)

为每个匹配的元素添加指定的类名。

示例

// 为p元素添加新的类样式
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

removeClass()

参数

removeClass(class|fn)

从所有匹配的元素中删除全部或者指定的类。

示例

// 为p元素移除selected的类样式
$("p").removeClass("selected");

html()

参数

html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

示例

// 返回p元素的html
$('p').html();
// 设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

text()

参数

text([val|fn])

取得所有匹配元素的内容。

示例

// 返回p元素的文本内容
$('p').text();
// 设置所有 p 元素的文本内容
$("p").text("Hello world!");

val()

参数

val([val|fn|arr])

获得匹配元素的当前值。

示例

// 获取文本框中的值
$("input").val();
// 设定文本框的值
$("input").val("hello world!");
文章作者: Jachie Xie
文章链接: https://xjc5772.github.io/2020-04/27/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/JQ/JQ%E5%B1%9E%E6%80%A7%E5%80%BC%E6%93%8D%E4%BD%9C/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog
打赏
  • 微信
  • 支付宝

评论