jQuery操作CSS，html

最新推荐文章于 2024-07-14 18:35:32 发布

zh__quan

最新推荐文章于 2024-07-14 18:35:32 发布

阅读量112

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zh__quan/article/details/98085376

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery操作css-添加，删除，切换类

jQuery操作css属性

jQuery操作css-尺寸

jQuery操作html-获取&设置

jQuery操作css-添加，删除，切换类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 270px;
            height: 340px;
            background: url("source/images/off.png");
            -webkit-background-size: cover;
            background-size: cover;
        }
        
        .selected {
            background: url("source/images/on.png");
            -webkit-background-size: cover;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
    <p></p>
    <button id="on">开灯</button>
    <button id="off">关灯</button>
    <button id="auto">自动开关</button>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#on').click(function() {
                $('div').addClass('selected');
            });


            $('#off').click(function() {
                $('div').removeClass('selected');
            });


            $('#auto').click(function() {
                $('div').toggleClass('selected');
            });
        })
    </script>
</body>

</html>

jQuery操作css属性

返回 CSS 属性

css("propertyname");

设置 CSS 属性

css("propertyname","value");

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <p></p>
    <p></p>

    <button id="get_style">获取样式</button>
    <button id="set_style">设置样式</button>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
             // 0. 获取需要的标签
             var $box = $('#box');

             // 1. 获取样式
            $('#get_style').click(function () {
                 var w  = $box.css('width');
                 var h  = $box.css('height');
                 var bg = $box.css('background-color');
                 console.log('宽度:' + w + 'px, 高度: ' + h + 'px, 背景颜色:' + bg);
            });

            // 2. 设置样式
            $('#set_style').click(function () {
                // 方式1
                $box.css('width', '300px');
                $box.css('height', '300px');
                $box.css('background-color', 'yellow');

               // 方式2
               $box.css('width', '300px').css('height', '300px').css('background-color', 'purple');

                // 方式3
                $box.css({
                    'width': '400px',
                    'height': '400px',
                    'background-color': 'blue'
                });
            });
        });
    </script>
</body>
</html>

jQuery操作css-尺寸

括号里面传值表示设置属性值，不传值表示获取属性值

width() 设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 返回元素的宽度（包括内边距）

innerHeight() 返回元素的高度（包括内边距）

outerWidth() 返回元素的宽度（包括内边距和边框）

outerHeight() 返回元素的高度（包括内边距和边框）

outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）

outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            background-color: yellow;
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 2px solid #000;
            margin: 30px;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function() {
            var $box = $('#box');
            console.log($box.width(300));
            console.log($box.height(500));

            console.log($box.innerWidth());
            console.log($box.innerHeight());

            console.log($box.outerWidth());
            console.log($box.outerHeight());

            console.log($box.outerWidth(true));
            console.log($box.outerHeight(true));
        });
    </script>
</body>

</html>

jQuery操作html-获取&设置

获得内容

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

设置内容

text(参数) - 设置或返回所选元素的文本内容

html(参数) - 设置或返回所选元素的内容（包括 HTML 标记）

val(参数) - 设置或返回表单字段的值

回调函数

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  })

获取属性

attr()

设置属性

设置单个属性

attr(属性名, 值)

设置多个属性

attr({属性名1:值1, 属性名2:值2})

回调函数

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

attr("href", function(i,origValue){
    return origValue + "/jquery";
  });

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box">
        <p id="content">内容</p>
        <span>哈哈哈哈</span>
    </div>
    <input type="text" id="name" value="itLike">
    <a href="http://www.itlike.com" target="_blank">撩课学院</a>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function() {
            // 1. 获取标签中的内容
            getContent();

            // 2. 设置标签中的内容
            setContent();

            // 3. 设置标签中属性的值
            setAttribute();
        });

        function getContent() {
            var $box = $('#box');

            // 1. 获取内容
            var text = $box.text();
            console.log(text);

            // 2. 获取标签和内容
            var html = $box.html();
            console.log(html);

            // 3. 获取输入框的内容
            var content = $('#name').val();
            console.log(content);

            // 4. 获取标签的属性值
            var href = $('a').attr('target');
            console.log(href);
        }

        function setContent() {
            var $box = $('#box');
            // $box.text('撩课学院');
            // $box.html('<h1>喜欢IT!</h1>');
            // $('#name').val('这是输入框');

            $box.text(function(index, oldValue) {
                return index + oldValue + ',哈哈哈哈';
            })
        }

        function setAttribute() {
            // $('a').attr('href', 'http://www.baidu.com');
            $('a').attr({
                'href': 'http://www.baidu.com',
                'target': '_self'
            })
        }
    </script>
</body>

</html>