jQuery(属性操作)

1、操作任意属性

  a、attr()

//1. 读取第一个div的title属性
  console.log($('div:first').attr('title')) // one


//2. 给所有的div设置name属性(value为atguigu)
  $('div').attr('name', 'Tom')

  b、removeAttr()

//3. 移除所有div的title属性
  $('div').removeAttr('title')

  c、prop

 //11. 点击'全选'按钮实现全选
    // attr(): 操作属性值为非布尔值的属性
    // prop(): 专门操作属性值为布尔值的属性
  var $checkboxs = $(':checkbox')
  $('button:first').click(function () {
    $checkboxs.prop('checked', true)
  })

  //12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
    $checkboxs.prop('checked', false)
  })

2、操作class属性

  a、addClass()

//4. 给所有的div设置class='name'
  $('div').attr('class', 'name')


//5. 给所有的div添加class='abc'
  $('div').addClass('abc')

  b、removeClass() 

3、操作html代码、文本、值

  a、html()

//7. 得到最后一个li的标签体文本
  console.log($('li:last').html())

  //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  $('li:first').html('<h1>mmmmmmmmm</h1>')

  b、val()

//9. 得到输入框中的value值
  console.log($(':text').val()) // 读取

  //10. 将输入框的值设置为atguigu
  $(':text').val('value') // 设置      读写合一

                             

猜你喜欢

转载自www.cnblogs.com/lzb0803/p/9190349.html
今日推荐