jQuery2.6--属性

最新推荐文章于 2022-11-10 15:56:36 发布

jiaody111

最新推荐文章于 2022-11-10 15:56:36 发布

阅读量163

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/103444977

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

操作任意属性

attr() 读写任意属性：读取属性时，只读取找到的第一个满足条件的值设置属性时，给所有满足条件的属性都设置相应的值
removeAttr() 删除任意属性：删除所有满足条件的属性值要删除多个属性，属性之间用空格隔开
prop() 读写属性值为布尔的属性

操作class属性

addClass()
removeClass()
toggleClass()
hasClass()

操作html/文本/值

html()
val() 读取的是input的value属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        /*
         需求:
         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. 点击'全不选'按钮实现全不选
         */
        $(function () {
            //1. 读取第一个div的title属性
            console.log($('div:first').attr('title')); //one
            //2. 给所有的div设置name属性(value为atguigu)
            $('div').attr('name','atguigu');
            $('div').each(function () {
                console.log('2.给所有的div设置name属性(value为atguigu)=== '+$(this).attr('name'))
            })
            //3. 移除所有div的title属性
            $('div').removeAttr('title');
            //4. 给所有的div设置class='guiguClass'
            $('div').attr('class','guiguClass'); //通过attr设置class，会移除原来的class
            //5. 给所有的div添加class='abc'
            $('div').addClass('abc');//通过addClass添加class,不会移除原来的class，而是在原来的class基础上追加class
            //6. 移除所有div的guiguClass的class
            $('div').removeClass('guiguClass');
            //7. 得到最后一个li的标签体文本
            console.log($('li:last').html());//<span>BBBBB</span>
            //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
            $('li:first').html('<h1>mmmmmmmmm</h1>');
            console.log($('li:first').html());//<h1>mmmmmmmmm</h1>
            //9. 得到输入框中的value值
            console.log($(':text').val());//guiguClass
            //10. 将输入框的值设置为atguigu
            $(':text').val('atguigu');
            console.log($(':text').val());//atguigu
            //11. 点击'全选'按钮实现全选
            $('button:first').click(function () {
                $(':checkbox').prop('checked',true)
            })
            //12. 点击'全不选'按钮实现全不选
            $('button:last').click(function () {
                $(':checkbox').prop('checked',false)
            })
        })
    </script>
</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>
</body>
</html>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2.6--属性

操作任意属性attr() 读写任意属性：读取属性时，只读取找到的第一个满足条件的值设置属性时，给所有满足条件的属性都设置相应的值removeAttr() 删除任意属性：删除所有满足条件的属性值要删除多个属性，属性之间用空格隔开prop() 读写属性值为布尔的属性操作class属性addClass()removeClass()toggleClass()hasClass()...
复制链接

扫一扫