jQuery 之样式及属性操作

转载于 2019-04-04 10:44:36 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/12965094/2374023

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面示例，通过jQuery实现按钮控制div元素的显示与隐藏效果，并展示了如何使用jQuery选择器获取和修改HTML元素的属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.js"></script>
    <style>
        .test{
            background-color: #428bca;
            width: 400px;
            height: 48px;
            line-height: 48px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="test1" type="button" onclick="openClose()" value="开关">
    <div class="test">abcdef</div>
    <script>
        function openClose() {
            //判断<div>类是否有hie这个属性
            if($(".test").hasClass('hide')){
                $(".test").removeClass('hide')
            }
            else{
                $(".test").addClass('hide')
            }
            //获取<input>标签
            console.log($('#test1'))
            //获取<input>标签的类型属性
            console.log($('#test1').attr('type'))
            //获取<input>标签的value值
            console.log($('#test1').attr('value'))
            //设置<input>标签的value值，从开关变成'open&close'
            $('#test1').attr('value','open&close')
        }
    </script>
</body>
</html>