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() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
2. 位置
  1. .offset()
  2. .position()
  3. .scrollLeft(), .scrollTop()
事件处理
遍历
动画

.offset()

获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

获取位置


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p {
            margin: 10px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p class="text1">Hello</p>
    <p class="text2"></p>
    <script>
        var offset = $(".text1").offset();
        $(".text2").html("left: " + offset.left + ", top: " + offset.top);
    </script>
</body>
</html>

设置位置


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $("div").offset({ top: 100, left: 100 });
    </script>
</body>
</html>

.position()

获取元素的当前坐标，相对于offset parent的坐标

温馨提示
.position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于documet的当前坐标当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 200px;
            border: 2px solid #000;
            margin-left: 100px;
            position: relative;
        }
        .box {
            width: 100px;
            height: 100px;
            padding: 15px;
            background-color: red;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <p class="text1"></p>
    <p class="text2"></p>
    <script>
        var position = $(".box").position();
        var offset = $(".box").offset();
        $(".text1").text("left: " + position.left + ", top: " + position.top);
        $(".text2").text("left: " + offset.left + ", top: " + offset.top);
    </script>
</body>
</html>

.scrollLeft(), .scrollTop()

获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background: #CCCCCC;
            border: 3px solid #666666;
            margin: 5px;
            padding: 5px;
            width: 200px;
            height: 200px;
            overflow: auto;
        }
        p {
            margin: 10px;
            padding: 5px;
            border: 2px solid #666;
            width: 1000px;
            height: 1000px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>itbaizhan</h1>
        <p>sxt</p>
    </div>
    <span class="text"></span>
    <script>
        $(".container").scrollLeft(300);
        var scrollLeft = $(".container").scrollLeft();
        console.log(scrollLeft);
    </script>
</body>
</html>

实时效果反馈

1. 获取一个元素相对于父级元素的位置偏移,使用下列哪个属性：

A offset()

B position()

C scrollLeft()

D scrollTop()

答案

1=>B

jQuery_CSS操作(一) jQuery_事件之绑定事件处理器

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