jQuery_CSS操作(一)-【官方】百战程序员_IT在线教育培训机构

选择器
1. 基础选择器类选择器元素选择器 ID选择器子元素选择器后代元素选择器
2. 属性选择器完美匹配包含前缀开头结尾空格
3. jQuery扩展选择器 eq even odd first last gt lt
DOM操作
1. Class操作 addClass() removeClass() toggleClass() hasClass()
2. 文本操作 html() text() val()
3. 属性操作 attr() removeAttr()
4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
5. DOM 插入现有元素内 .append() .prepend()
6. DOM 插入现有元素外 .after() .before()
7. DOM 移除 .empty() .remove()
8. DOM 替换 .replaceAll() .replaceWith()
CSS操作
1. .css()
2. .height()，.width()
3. .innerHeight()，.innerWidth()
4. .outerHeight()，.outerWidth()
事件处理
遍历
动画

.css()

获取和设置匹配元素的样式

获取样式值


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 60px;
            height: 60px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div style="background-color:#123456;">div容器</div>
    <script>
        var color = $("div").css("background-color");
        console.log(color);
    </script>
</body>
</html>

设置样式


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>Hello,itbaizhan</p>
    <script>
        $("p").css("color", "red");
    </script>
</body>
</html>

.height()，.width()

获取元素的当前高度值宽度值或设置元素的高度值宽度值


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 5px;
            background: rgb(255, 140, 0);
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $("div").height(200).width(200)
    </script>
</body>
</html>

.innerHeight()，.innerWidth()

为元素的当前计算高度值和宽度值,包括padding，但是不包括border


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
            background: rgb(255, 140, 0);
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        var currentHeight = $("div").innerHeight();
        var currentWidth = $("div").innerWidth();
        console.log(currentHeight,currentWidth);
    </script>
</body>
</html>

.outerHeight()，.outerWidth()

获取元素的当前宽度值和高度值,包括padding，border和选择性的margin


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 5px;
            border: 10px solid #666;
            background-color: red;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div></div>
    <p class="text2"></p>
    <script>
        $(".text2").text("outerWidth:" + $("div").outerWidth() + " , outerWidth(true):" + $("div").outerWidth(true));
    </script>
</body>
</html>

实时效果反馈

1. 下列哪个属性是获取一个元素的大小,包括padding，但是不包括border：

A height() , width()

B innerHeight() , innerWidth()

C outerHeight() , outerWidth()

答案

1=>B

jQuery_DOM操作(六) jQuery_CSS操作(二)

北京市昌平区回龙观镇南店村综合商业楼2楼226室