zoukankan      html  css  js  c++  java
  • jQuery属性

    jQuery属性

    1、操作任意属性

    • attr() 操作属性值为非布尔值的属性
    • removeAttr()
    • prop() 专门操作属性值为布尔值的属性

    2、操作class属性

    • addClass()
    • removeClass()

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

    • html()
    • val()
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>
    
    <input type="text" name="username" value="guiguclass">
    <br>
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <button>全选</button>
    <button>全不选</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        // 1、读取第一个div的title属性
        console.log($('div:first').attr('title'))
        // 2、给所有的div设置name属性(value为atguigu)
        $('div').attr('name', 'atguigu')
        // 3、移除所有div的title属性
        $('div').removeAttr('title')
        // 4、给所有的div设置class='guiguClass'
        $('div').attr('class', 'guiguClass')
        // 5、给所有的div添加class='abc'
        $('div').addClass('abc')
        // 6、移除所有div的guiguClass的class
        $('div').removeClass('guiguClass')
        // 7、得到最后一个li的标签体文本
        console.log($('li:last').html())
        // 8、设置第一个li的标签体为"<h1>mmmmmmmm</h1>"
        $('li:first').html('<h1>mmmmmmmm</h1>')
        // 9、得到输入框中的value值
        console.log($(':text').val())
        // 10、将输入框中的值设置为atguigu
        $(':text').val('atguigu')
        // 11、点击'全选'按钮实现全选
        var $checkbox = $(':checkbox')
        $('button:first').click(function () {
            $checkbox.prop('checked', true)
        })
        // 12、点击'全不选'按钮实现全不选
        var $checkbox = $(':checkbox')
        $('button:last').click(function () {
            $checkbox.prop('checked', false)
        })
    </script>
    
  • 相关阅读:
    [题解]luogu_P1627_中位数(排列乱搞
    [题解]luogu_P3313_旅行(树剖
    [题解]luogu_P3201_梦幻布丁(启发式合并
    [题解]luogu_P4127_同类分布(数位dp
    [题解]弹飞绵羊
    [题解]luogu_P3469_BLO(理解tarjan/割点
    [题解]luogu_P3304直径(直径必经边
    [HAOI2015]树上操作(树链剖分)
    [SCOI2005]扫雷(递推)
    洛谷3865 ST表
  • 原文地址:https://www.cnblogs.com/Lethons/p/9349266.html
Copyright © 2011-2022 走看看