• jQuery学习:属性


     

     

    .attr(属性) 读取属性值

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

    .attr(属性 ,属性值) 设置属性

    1. // 给所有div设置name属性 value = xxx
    2. $('div').attr('name','xxx');

    移除属性removeAttr(属性)

    1. // 给所有div移除title属性
    2. $('div').removeAttr('title')

     .attr(属性 ,属性值)会进行覆盖 所以使用

    1. // 给所有div添加class == 'xxx'
    2. $('div').attr('class', 'xxx');

     addClass再次添加class 就可以多次添加

     

    1. // 给所有div添加class == 'yyy'
    2. $('div').addClass('yyy');

     removeClass移除类

    1. // 移除所有div的xxx的class
    2. $('div').removeClass('xxx');

    html() 获取标签体文本

    1. // 得到最后一个li标签体文本
    2. console.log($('ul>li:last').html())

     html()社设置标签体文本

    1. // 设置第一个li的标签体为 "

      dddd

      "
    2. $('ul>li:first').html("

      dddd

      "
      )

    val()得到value的值

    	console.log($(':text').val())
    1. // 得到输入框中的value值
    2. console.log($('input[type=text]').val())

    设置value的值 

    1. // 将输入框的值设置为'你好'
    2. $(':text').val('你好')

     attr专门操作属性值为非布尔值的属性

    prop:专门操作属性值为布尔值的属性

    1. // 点击全选实现全选
    2. var $checkbox=$(':checkbox');//表单选择器
    3. $('button:first').click(function(){
    4. //$checkbox.attr("checked",true);
    5. $checkbox.prop("checked",true)
    6. }
    7. )
    8. $('button:last').click(function(){
    9. //$checkbox.attr("checked",false)
    10. $checkbox.prop("checked",false)
    11. }
    12. )
    1. <div id="div1" class="box" title="one">class为box的div1div>
    2. <div id="div2" class="box" title="two">class为box的div2div>
    3. <div id="div3">div3div>
    4. <span class="box">class为box的spanspan>
    5. <ul>
    6. <li>AAAAAli>
    7. <li title="hello" class="box2">BBBBBli>
    8. <li class="box2">CCCCCli>
    9. <li title="hello">DDDDDli>
    10. <li title="two"><span>BBBBBspan>li>
    11. ul>
    12. <input type="text" name="username" value="xx">
    13. <br>
    14. <input type="checkbox">
    15. <input type="checkbox">
    16. <br>
    17. <button>选中button>
    18. <button>不选中button>
    1. // 读取第一个div的title属性
    2. console.log($('div:first').attr('title'));
    3. // 给所有div设置name属性 value = xxx
    4. $('div').attr('name', 'xxx');
    5. // 给所有div移除title属性
    6. $('div').removeAttr('title')
    7. // 给所有div添加class == 'xxx'
    8. $('div').attr('class', 'xxx');
    9. // 给所有div添加class == 'yyy'
    10. $('div').addClass('yyy');
    11. // 移除所有div的xxx的class
    12. $('div').removeClass('xxx');
    13. // 得到最后一个li标签体文本
    14. console.log($('ul>li:last').html())
    15. // 设置第一个li的标签体为 "

      dddd

      "
    16. $('ul>li:first').html("

      dddd

      "
      )
    17. // 得到输入框中的value值
    18. console.log($(':text').val())
    19. // 将输入框的值设置为'你好'
    20. $(':text').val('你好')
    21. // 点击全选实现全选
    22. var $checkbox=$(':checkbox');//表单选择器
    23. $('button:first').click(function(){
    24. //$checkbox.attr("checked",true);
    25. $checkbox.prop("checked",true)
    26. }
    27. )
    28. $('button:last').click(function(){
    29. //$checkbox.attr("checked",false)
    30. $checkbox.prop("checked",false)
    31. }
    32. )

  • 相关阅读:
    redis相关面试题
    【网络】UDP协议
    华为OD社招Java岗面经,已OFFER
    为什么HashMap头插法会造成死循环?
    2022年9月1日:在 Visual Studio Code 中使用 Git 版本控制工具(未完成)
    第一章 行列式
    jQuery之Callbacks函数功能测试
    Android 10.0后创建文件
    html里面的伪元素是什么?如何操作?
    Linux 软链接与硬链接
  • 原文地址:https://blog.csdn.net/weixin_47295886/article/details/127789678