jQuery 之属性操作

最新推荐文章于 2024-07-30 20:19:19 发布

启之灵

最新推荐文章于 2024-07-30 20:19:19 发布

阅读量183

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/85472470

版权

jQuery 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>10_属性</title>
</head>
<body>

<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">DDDDDD</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>

<!--
1. 操作任意属性
   attr()
   removeAttr()
   prop()
2. 操作class属性
   addClass()
   removeClass()
3. 操作HTML代码/文本/值
   html()
   val()
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
     需求:
     1. 读取第一个div的title属性
     2. 给所有的div设置name属性(value为atguigu)
     3. 移除所有div的title属性
     4. 给所有的div设置class='guiguClass'
     5. 给所有的div添加class='abc'
     6. 移除所有div的guiguClass的class
     7. 得到最后一个li的标签体文本
     8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
     9. 得到输入框中的value值
     10. 将输入框的值设置为atguigu
     11. 点击'全选'按钮实现全选
     12. 点击'全不选'按钮实现全不选
     */
    //1. 读取第一个div的title属性
    // console.log($('div:first').attr('title')) // one

    //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>mmmmmmmmm</h1>"
    //$('li:first').html('<h1>mmmmmmmmm</h1>')

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

    //10. 将输入框的值设置为atguigu
    //$(':text').val('atguigu') // 设置      读写合一
    //11. 点击'全选'按钮实现全选
    // attr(): 操作属性值为非布尔值的属性
    // prop(): 专门操作属性值为布尔值的属性
    var $checkboxs = $(':checkbox')
    $('button:first').click(function () {
        $checkboxs.prop('checked', true)
    })

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