jQuery操作CSS,html

目录

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>

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值