jQuery的属性，位置，元素操作

最新推荐文章于 2022-05-12 21:47:25 发布

初级前端工程师小膏

最新推荐文章于 2022-05-12 21:47:25 发布

阅读量288

点赞数

分类专栏： JavaScript jQuery 文章标签： jQuery的属性，位置，元素操作

本文链接：https://blog.csdn.net/weixin_45582072/article/details/100144342

版权

JavaScript jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

想要操作，或者获取元素原有属性，jQuery为我们良好的封装了各种，属性和方法。以下，便是：

jQuery 属性操作

jQuery有三种操作属性的方法：：prop() / attr() / data() ;

1.操作或获取固有属性，什么是固有属性，就是元素本身自带的属性，比如，input表单的value属性和 a标签的herf属性。

prop()，获取在匹配的元素集中的第一个元素的属性值. 
prop(属性值)：获取属性 prop(属性，属性值)，修改属性的属性值。

2.操作或获取自定义属性：自定义属性，用户给自己自定义添加的属性，称为自定义属性，通过attr（）来获取

alttr(属性)，获取属性。
alttr(属性，属性)，修改属性。

attr() 除了普·通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）。

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

data("name","value"),向被选元素附加数据。
data("name"),向被选元素获取数据。

jQuery 文本属性值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和

value 属性，主要针对元素的内容还有表单的值操作。

1.普通元素内容是html() //类似于源生的 inner HTML

$("div").html(),获取元素内容
$("div").html("你好嘛"),修改元素内容

2.元素内容text（）相当于原生的inner text

$("div").text(),获取元素内容
$("div").text("你好嘛"),修改元素内容

html()和text()的区别：html()不识别html标签的如果div里面有个span元素，那么会连着span标签获取过来，text(),识别html元素。

3.val() 获取表单元素

$("div").val(),获取元素内容
$("div").val("你好嘛"),修改元素内容

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：$("div").each().

$("div").each(funcount(index,ele){xxxx});
1.each()遍历div每个元素，主要用DOM处理
2.里面有两个参数 index 是索引号，ele是DOM对象元素，不是jQuery元素对象。
3.如果想要用jQuery方法 就要转换$("ele")

语法2：$.each($("div"),funcount(index.ele){*****});

$.each(obj,funcount(index,ele){XXXXXX});

$.each().主要用于遍历任何对象，用于数据处理，数组，对象

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

创建、添加、删除元素

1.创建元素

var li=$(<li></li>); 创建一个li

2.添加

内部添加：内部添加就是添加到匹配元素的里面，父子关系

var li=$(<li></li>); 创建一个li
$("ul").append(li)// 添加到匹配元素的后面
$("ul").prepend(li) // 添加到匹配元素的前面

外部添加：添加到元素的外面，跟匹配元素是兄弟关系。


$("ul").after("div"),添加到匹配元素的后面
$("ul").before("div"),添加到匹配元素的前面

3.删除元素

element.remove()// 删除元素本身
element.empty()删除匹配元素中的所有子元素节点
element.html("")//清空匹配元素内容

jQuery 尺寸操作

width()/height() 取得匹配元素宽度和高度，只算width 和hight
innerwidht()/innerheight() 取得匹配元素宽度和高度，包含padding值+widht higth
outerwidth()/outerheight() 取得匹配元素宽度和高度，包含padding+border+width/heght
outerwidth(ture)/outerheight(ture) 取得匹配元素宽度和高度 padding+border+maring+width/heght

以上参数为空，则获取相应值，放回的数字型，
如果参数为数字，则修改相应值
参数不毕写单位

jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

1.offset() 获取距离文档的距离跟父元素没有关系

1.offset()设置或获取元素偏移
offset方法设置或放回被选中元素相对于文档的偏移坐标，跟父级没有关系
offsetTop()// 获取元素距离文档上方的距离
offsetLeft()// 获取元素距离文档左边的距离

2.position() 获取距离父元素的距离，如果没有父元素则是body,这个方法只能获取，不能赋值

1.position()设置或获取元素距离父元素带有定位的距离 
position方法设置或放回被选中元素相对于父级带有定位的偏移坐标，如果没有则以body为主
positionTop()// 
positionLeft()//

3.scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()/scrollLeft(),方法设置或放回被选元素被卷去头部。
不跟参数是获取，跟参数则是，修改。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>