jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）

最新推荐文章于 2024-07-26 11:41:15 发布

Just-Lsy

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量251

点赞数

分类专栏：笔记文章标签： jquery javascript 前端 html css

本文链接：https://blog.csdn.net/m0_59030524/article/details/123516610

版权

笔记专栏收录该内容

69 篇文章 6 订阅

订阅专栏

1. jQuery 属性操作

1.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href，比如 <input> 元素里面的 type。

获取属性语法

prop('属性')

设置属性语法

prop('属性', '属性值')

1.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index ='1'。

获取属性语法

attr('属性') // 类似原生 getAttribute()

设置属性语法

attr('属性', '属性值') // 类似原生 setAttribute()

该方法也可以获取 H5 自定义属性

1.3 数据缓存 data()

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

附加数据语法

data('name','value') // 向被选元素附加数据

获取数据语法

date('name') // 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" checked>
    <div index='1' data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function () {
            // 1. element.prop('属性名'); 获取元素固有的属性值
            console.log($('a').prop('href'));
            $('a').prop('title', '我们都挺好')
            $('input').change(function () {
                console.log($(this).prop('checked'));  //勾选是true，不勾选是false
            })
            console.log($('div').prop('index')); //undefined (index 是自定义属性)
            // 2. 元素的自定义属性   通过 attr() 获取
            console.log($('div').attr('index'));  //1
            $('div').attr('index', 4);
            console.log($('div').attr('data-index')); //2
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $('span').data('uname', 'andy');  //给data设置uname
            console.log($('span').data('uname')); //andy (打印uname)
            // 这个方法获取data-index h5自定义属性 第一个不要写data-开头 而且返回的是数字型
            console.log($('div').data('index')); //2(数字型)
        })
    </script>
</body>

2. jQuery 文本属性值

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

2.1 普通元素内容 html()

相当于原生 innerHTML。

html() // 获取元素的内容

html('内容') // 设置元素的内容

2.2 普通元素文本内容 text()

相当与原生 innerText。

text() // 获取元素的文本内容

text('内容') // 设置元素的文本内容

2.3 表单的值 val()

相当于原生 value。

val() // 获取表单的值

val('内容') // 设置表单的值

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($('div').html());  //<span>我是内容</span>
        $('div').html('123');    //把 我是内容 改为了 123
        // 1. 获取设置元素文本内容 text()
        console.log($('div').text());  //123
        // 1. 获取设置表单值 val()
        console.log($('input').val());  //请输入内容
        $('input').val('123')  //把 请输入内容 改为了 123
    </script>
</body>

3. jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

3.1 遍历元素

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

1. $('div').each()

$("div").each(function (index, domElem) {
    $(domElem);
});

each() 方法遍历匹配的每一个元素。主要用 DOM 处理。 each 每一个。
里面的回调函数有 2 个参数：index 是每个元素的索引号；demElem 是每个DOM元素对象，不是jquery对象
所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象：$(domElem)

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // $('div').css('color', 'red')
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ['red', 'green', 'blue'];
            $('div').each(function (i, domElem) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                console.log(domElem);
                // domElem.css('color', 'red');  //报错 
                $(domElem).css('color', arr[i]);
                sum += parseInt($(domElem).text());  //转换成字符型
                console.log(sum);  //6
            })
        })
    </script>
</body>

2. $('div').each()

$.each(object，function (index, element) { })

$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有 2 个参数：index 是每个元素的索引号； element 遍历内容。

其中，object 对象可以是 DOM 对象，数组，一般对象等。

（1）当 object 为 DOM 对象：

$.each($('li'), function (i, domElem) {
    $(domElem); // 转换为 jQuery 对象
})

（2）当 object 为数组：

$.each(arr, function(inbdex, value) {
    // arr 为原数组
    // index 为当前索引
    // value 为当前数组值
})

（3）当 object 为一般对象：

$.each(obj, function(key, value) {
    console.log(key, value);
    // obj: 对象
    // key: 对象的键
    // value: 对象的值
})

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // $('div').css('color', 'red')
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ['red', 'green', 'blue'];
            $('div').each(function (i, domElem) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                console.log(domElem);
                // domElem.css('color', 'red');  //报错 
                $(domElem).css('color', arr[i]);
                sum += parseInt($(domElem).text());  //转换成字符型
                console.log(sum);  //6

                // 2. $.each() 方法遍历元素  主要用于遍历数据，处理数据
                $.each($('div'), function (index, ele) {
                    console.log(index);  //0 1 2 
                    console.log(ele);
                })
                $.each(arr, function (i, ele) {
                    console.log(i);//0 1 2 
                    console.log(ele);
                })
                $.each({
                    name: 'andy',
                    age: 18
                }, function (i, ele) {
                    console.log(i);//输出的是 name age 属性名
                    console.log(ele);//输出的是 andy 18 属性值
                })
            })
        })
    </script>
</body>

3.2 创建元素

动态的创建了一个 <li>。

$('<li></li>');

3.3 添加元素

1. 内部添加

把内容放入匹配元素内部最后面，类似原生 appendChild。

element.append('内容')

把内容放入匹配元素内部最前面。

element.prepend('内容')

2. 外部添加

把内容放入目标元素后面

element.after('内容')

把内容放入目标元素前面

element.before('内容')

内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。

3.4 删除元素

删除匹配的元素（本身）

element.remove()

删除匹配的元素集合中所有的子节点

element.empty()

清空匹配的元素内容

element.html('div')

remove 删除元素本身。
empt() 和 html('') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="text">我是原先的div</div>
    <script>
        $(function () {
            // 1. 创建元素
            var li = $('<li>我是新创建的li</li>');

            // 2. 添加元素
            // （1）内部添加
            // $('ul').append(li);  //内部的后面
            $('ul').prepend(li);  //内部的前面
            // （2）外部添加
            var div = $('<div>我是后来的div</div>')
            // $('div').before(div); //外部的前面
            $('div').after(div); //外部的后面

            // 2. 删除元素
            // $('ul').remove(); //可以删除匹配的元素 自杀
            // $('ul').empty(); //可以删除匹配的元素里面的子节点 杀孩子
            $('ul').html(''); //可以删除匹配的元素里面的子节点 杀孩子
        })

    </script>
</body>

4. jQuery 尺寸、位置操作

4.1 jQuery 尺寸

语法	用法
`width()` / `height()`	取得匹配元素宽度和高度值只算 `width` / `height`
`innerWidth()` / `innerHieght()`	取得匹配元素宽度和高度值包含 `padding`
`outerWidth()` / `outerHeight()`	取得匹配元素宽度和高度值包含 `padding`、`border`
`outerWidth(true)` / `outerHeight(true)`	取得匹配元素宽度和高度值包含 `padding`、`borde`、`margin`

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。

<script src="jQuery.main.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. width() / height()  取得匹配元素宽度和高度值只算 width / height
            console.log($('div').width());  //200
            // $('div').width(300); //把width改为300px
            // 2. innerWidth() / innerHieght()	取得匹配元素宽度和高度值包含 padding
            console.log($('div').innerWidth());   //220
            // 3. outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding、border
            console.log($('div').outerWidth()); //250
            // 4. outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含 padding、borde、margin
            console.log($('div').outerWidth(true)); //290
        })
    </script>
</body>

4.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop() / scrollLeft()

4.2.1 offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。该方法有2个属性 left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。可以设置元素的偏移：

offset({ top: 10, left: 30 })

4.2.2 position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
该方法只能获取。

<script src="jQuery.main.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
            // 1.  offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
            console.log($('.son').offset());
            console.log($('.son').offset().top);  //110
            $('.son').offset({
                top: 200,
                left: 200
            })
            // 2. position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
            // 这个方法只能获取不能设置
            console.log($('.son').position()); //top: 100, left: 100  
            // 3. scrollTop() 方法设置或返回被选元素被卷去的头部。
        })
    </script>
</body>

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

scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

举例：带有动画的返回顶部

<script src="jQuery.main.js"></script>
    <style>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
</head>

<body>
    <div class="back">返回头部</div>
    <div class="container"></div>
    <script>
        $(function () {
            $(document).scrollTop(100);//设置坐标
            // scrollTop() 被卷去的头部
            // 页面滚动事件
            var boxtop = $('.container').offset().top;
            $(window).scroll(function () {
                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
                // });   //不能是文档，  而是body和html元素做动画
            })
        })
    </script>
</body>

Just-Lsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）

4. jQuery 属性操作4.1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href，比如 <input> 元素里面的 type。获取属性语法prop('属性')设置属性语法prop('属性', '属性值')4.2 设置或获取元素自定义属性值 attr()用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index ='1'。获取属性语法attr('属性') /
复制链接

扫一扫