10.jQuery之属性

作者: 修卡录 | 来源:发表于2018-04-18 08:55 被阅读1次

    讲述对属性的使用

    1. 操作任意属性

    attr()

    removeAttr()

    prop()

    2. 操作class属性

    addClass()

    removeClass()

    3. 操作HTML代码/文本/值

    html()

     val()


    // 1. 读取第一个div的title属性

          console.log($("div:first").attr("title"));

    // 2. 给所有的div设置name属性(value为tom)

          console.log($("div").attr("name","tom"));

    // 3. 移除所有div的title属性

          console.log($('div').removeAttr("title"));

    // 4. 给所有的div设置class='cs'

           $("div").attr("class","cs")

    // 5. 给所有的div添加class='abc'

          console.log($("div").addClass("abc"));

    // 6. 移除所有div的cs的class

    // $("div").removeAttr("class",'cs')此方法不行,虽然如此写像是移除class为cs的class但是这是错误的写法,会只认移除所有的class就是 $("div").removeAttr("class")

    正确写法:

    $('div').removeClass('cs') 

    // 7. 得到最后一个li的标签体文本

      console.log($("ul>li:last").html())

    //  8. 设置第一个li的标签体为<h1>mmm</h1>

    $("li:first").html("<h1>mmm</h1>")

    //  9. 得到输入框中的value值

      console.log($(":text").val())

    // 10. 将输入框的值设置为cs

            $(":text").val("cs")

    //  11. 点击'全选'按钮实现全选

      // attr(): 操作属性值为非布尔值的属性

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

    var $check=$(":checkbox");

    $("button:first").click(function(){

    //$check.attr("checked",true)

        $check.prop("checked",true)

    })

    $("button:last").click(function(){

    //   $check.attr("checked",false)

          $check.prop("checked",false)

    })

    相关文章

      网友评论

        本文标题:10.jQuery之属性

        本文链接:https://www.haomeiwen.com/subject/ipgmkftx.html