首页技术文章正文

jQuery属性操作prop()、attr()和data()

更新时间:2022-08-30 来源:黑马程序员 浏览量:

IT培训班


jQuery提供了一些属性操作的方法,主要包括prop()、attr()和data()等。通过这些方法,能够实现不同的需求。下面我们分别进行详细讲解。

1.prop()方法

prop0方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性,如<a>标签的href属性。具体语法示例如下:

$(selector).prop("属性名")                        //获取属性值
$(selector).prop("属性“,“属性值")               //设置属性值

下面我们通过代码演示prop()方法的使用。

<a href="http://localhost" title="主页"></a>
<script>
  console.log($("a").prop("href"));              //输出结果:http://localhost
  $("a").prop("title","首页");                   //设置title的值为“首页”
</script>

在上述代码中,第3行代码用于获取<a>标签的href属性,输出到控制台中。第4行代码用于设置<a>标签的title属性,将属性值设为“首页”。

在开发中,还会经常使用prop(‘属性’)获取表单元素的checked值,示例代码如下:

<input type="checkbox"checked>
<script>
  //获取表单元素的checked值
  $("input").change(function() {
   console.log($(this).prop("checked")); //复选框选中时,输出结果为true
  });
</seript>

上述代码中,第1行代码设置了input 的type值为checkbox,表示复选框。第4行代码给input绑定了change事件,当表单元素状态发生变化时触发。如果复选框处于选中状态,则输出结果为true,否则输出false。

2. attr()方法

Attr()用来设置或获取元素的自定义属性,自定义属性是指用户给元素添加的非固有属性。例如,给div添加index属性,保存元素的索引值。具体语法如下。

$(selector).attr("属性名")                   // 获取属性值
$(selector).attr(”属性", “属性值“)        // 设置属性值

下面我们通过代码演示attr()方法的使用,如下所示。

<div index="1" data-index="2">我是div</div>
<script>
  console.log($("div").attr("index"));       // 输出结果:1
  console.log($("div").attr("data-index"));  // 输出结果:2
  $("div").attr("index", 3);                 // 设置index的属性值为3
  $("div").attr("data-index", 4);            // 设置data-index属性值为4
</script>

在上述代码中,div的index属性是一个普通的自定义属性,data-index是HTML5的自定义属性(以“data-”开头),使用atr()方法都可以进行设置或获取。需要注意的是,自定义属性无法使用prop()设置和获取。

3. data()方法

data()方法用来在指定的元素上存取数据。数据保存在内存中,并不会修改DOM元素结构;一旦页面刷新,之前存放的数据都将被移除。具体语法如下:

$(selector).data("数据名")                   // 获取数据
$(selector).data("数据名","数据值")         // 设置数据

下面我们演示通过data()方法实现数据的操作,示例代码如下。

<div>我是div</div>
<script>
  $ ("div").data("uname","andy");           // 设置数据
  console.log ($("div").data("uname"));     // 获取数据,输出结果:andy
</script>

上述代码运行后,umame会保存到内存中,不会出现在HTML结构中。

使用data()方法还可以读取HTML5自定义属性data-index,示例代码如下:

<div index="1"data-index="2">我是div</div>
<script>
  console.log($("div").data("index"));//输出结果:2
</script>

在上述代码中,第3行用来获取data-index属性,属性名中不需要“data-”前缀,并且返回的结果是数字型。


分享到:
在线咨询 我要报名
和我们在线交谈!