jQuery prop()方法

1、添加并移除名为‘color’的属性:

$('button').click(function () {

  var $x = $('div')

  $x.prop('color', 'f00')

  $x.append('The color 属性:' + $x.prop('color'))

  $x.removeProp('color')

})

prop()方法设置或返回被选元素的属性和值,

返回属性值时,返回第一个匹配元素的值;

设置属性值时,为匹配元素集合设置一个或多个属性/值对

注意:prop()方法应该用于检索属性值,例如DOM属性;

  如需检索HTML属性,请使用attr()方法代替;

  如需移除属性,请使用removeProp()方法

 

eg:

返回属性的值:$(selector).prop(规定属性的名称)

设置属性和值:$(selector).prop(规定属性的名称,规定属性的值)

使用函数设置属性和值:$(selector).prop(规定属性的名称,function (检索集合中元素的index位置,检索被选元素的当前属性值))

设置多个属性和值:$(selector).prop({规定属性的名称:规定属性的值,规定属性的名称:规定属性的值,......})

 2、prop()还有一个很好用的功能,就是可以直接获取到对应元素标签及子孙标签:

eg:

<!DOCTYPE html>
<html>
<head>
  <title>练习</title>
  <style type="text/css"></style>
</head>
<body>
  <div class="test"><p class="test1">hello,你好!</p></div>
  <script type="text/javascript" src="jquery-1.11.3.js"></script>
  <script type="text/javascript">
    console.log($(".test").prop("outerHTML"))
 // 结果:<div class="test"><p class="test1">hello,你好!</p></div>
  </script>
</body>
</html>
 或者用:$(this).clone()).html()
 
补充:
html()用来读取和修改元素的HTML标签;
test()用来读取或修改元素的纯文本内容;
val()用来读取或修改表单元素的value值
 
posted @ 2018-09-07 18:42  辰辰plus  阅读(1885)  评论(0编辑  收藏  举报