jQuery | 常用API （属性操作 + 内容文本值 + 元素操作 + 尺寸、位置操作）

不爱吃菜的蔡菜

于 2022-05-24 17:01:06 发布

阅读量439

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/muziqwyk/article/details/124930449

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 普通元素内容 html()（相当于原生inner HTML)

2. 普通元素文本内容 text() (相当与原生 innerText)

3. 表单的值 val()（相当于原生value)

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

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

案例：品优购电梯导航

jQuery 属性操作

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

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

1. 获取属性语法 element.prop('属性名')

        $('a').prop('href')

2. 设置属性语法 prop(''属性'', ''属性值'')

            $('a').prop('title', 'bilibili'); // 设置属性

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

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

1. 获取属性语法

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

            console.log($('div').attr('index'));

2. 设置属性语法

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

            $('div').attr('index', '4');

数据缓存 data()

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

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

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

            // 3. 数据缓存data()  这个里面的数据是存放在元素的缓存里面
            $('span').data('uname', 'andy');
            console.log($('span').data('uname'));  // andy
            console.log($('div').data('index'));
            // 这个方法获取data-index  h5自定义属性  不用写data-  而且返回的是数字型

案例：购物车案例模块-全选

全选思路：

里面3个小的复选框按钮（j-checkbox）选中状态跟着全选按钮（checkall）走。
因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态赋值给3小复选框就可以了。

    // 1. 全选功能  全不选功能
    // 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了
    $('.checkall').change(function(){
        $(this).prop('checked'); // 得到全选按钮的状态
        // 把全选按钮的状态赋值给小按钮 和 类名为 checkall的按钮
        $('.j-checkbox,.checkall').prop('checked',$(this).prop('checked')); 
    })

当我们每次点击小的复选框按钮，就来判断：

如果小复选框被选中的个数等于 3 （全部小复选框的个数）
就应该把全选按钮选上，否则全选按钮不选。
:checked 选择器 :checked 查找被选中的表单元素。

    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $('.j-checkbox').change(function(){
        // if(被选中的复选框的个数==3){
        //     就要选中全选按钮
        // }else {
        //     不要选择全选按钮
        // }
        // :checked 选择器   :checked 查找被选中的表单元素。
        // console.log($('.j-checkbox:checked').length);
        // $('.j-checkbox').length   所有小复选框的个数

        if($('.j-checkbox:checked').length==$('.j-checkbox').length){
            $('.checkall').prop('checked',true);
        }else{
            $('.checkall').prop('checked',false);
        }
    })

jQuery 内容文本值

1. 普通元素内容 html()（相当于原生inner HTML)

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

2. 普通元素文本内容 text() (相当与原生 innerText)

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

3. 表单的值 val()（相当于原生value)

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

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容
        console.log($('div').html());   // 得到div里面的内容
        $('div').html('123');  // 内容改为123

        // 2. 获取元素文本内容 text()
        console.log($('div').text());
        $('div').text('hahaha');

        // 3. 获取设置表单值 val()
        $('input').val('俺是内容');
    </script>
</body>

案例：购物车案例模块-增减商品数量

核心思路：

首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（itxt）的值。修改表单的值是val() 方法
注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。
要获取表单的值减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

    // 3. 增减商品数量模块：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框
    $('.increment').click(function(){
        // 得到当前兄弟文本框的值
        var n=$(this).siblings('.itxt').val();
        n++;
        $(this).siblings('.itxt').val(n);
    })
        $('.decrement').click(function(){
        // 得到当前兄弟文本框的值
        var n=$(this).siblings('.itxt').val();
        if(n<=1){
           return false;
        }
        n--;
        $(this).siblings('.itxt').val(n);
    })

案例：购物车案例模块-修改商品小计

核心思路：

每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum），修改普通元素的内容是text() 方法
注意2：当前商品的价格，要把￥符号去掉再相乘，截取字符串 substr(1)
parents(‘选择器’) 可以返回指定祖先元素
最后计算的结果如果想要保留2位小数，通过 toFixed(2) 方法

        // 4.修改商品小计模块：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格
       var price= $(this).parent().parent().siblings('.p-price').text(); // this的爸爸的爸爸的兄弟
       price= price.substr(1);
       var p=(price*n).toFixed(2); // 保留两位小数
       $(this).parent().parent().siblings('.p-sum').text('￥'+p);

用户也可以直接修改表单里面的值，同样要计算小计。
用表单change事件用最新的表单内的值乘以单价即可
但是还是当前商品小计

    // 5. 用户修改文本框的值：计算 小计模块
    $('.itxt').change(function(){
        // 先得到文本框里的值   乘以   文本框的单价
        var n= $(this).val();  // 文本框的值
        var price= $(this).parents('.p-num').siblings('.p-price').html();
        price=price.substr(1);
        var p=(price*n).toFixed(2);
        $(this).parents('.p-num').siblings('.p-sum').html('￥'+p);
    })

jQuery 元素操作

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

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。

如果想要给同一类元素做不同操作，就需要用到遍历。

$("div").each(function (index, domEle) { xxx; }）

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

            // 1. each() 方法遍历元素
            var arr = ['red', 'blue', 'pink'];
            $('div').each(function (i, domEle) {
                // 回调函数第一个参数一定是索引号,可以自己指定索引号名称
                console.log(i);
                // 回调函数第二个参数一定是 dom元素对象
                console.log(domEle);
                $(domEle).css('color', arr[i]); // 转换成jQuery对象

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

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

            // 2. $.each()  方法遍历元素  主要用于遍历数据，处理数据
            $.each($('div'), function (i, ele) {
                console.log(i);  // 索引号
                console.log(ele);  // 元素
            })

遍历数组：

            $.each(arr, function (i, ele) {
                console.log(ele);
            })

遍历对象：

            $.each({
                name: 'andy',
                age: 20
            }, function (i, ele) {
                console.log(i);  // 输出的是 name age  属性名
                console.log(ele); // 输出的是 andy  20  属性值
            })

案例：购物车案例模块-计算总计和总额

核心思路：

把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量count，相加即可
点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
注意：总计是文本框里面的值相加用 val() 总额是普通元素的内容用text()
要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
另外，要小复选框勾上才计算！用if语句

    // 6. 计算总计和总额模块
    getSum();
    function getSum(){
        var count = 0; // 计算总件数
        var money = 0; // 计算总金额
        $('.itxt').each(function(i,ele){
            // 当小复选框勾选上才进行计算总件数
            if($(ele).parents('.p-num').siblings('.p-checkbox').find('.j-checkbox').prop('checked')){
                count += parseInt($(ele).val()); // input表单的val值
            }
        })
        $('.amount-sum em').text(count); // 让em的内容变成count

        $('.p-sum').each(function(i,ele){
            if($(ele).siblings('.p-checkbox').find('.j-checkbox').prop('checked')){
                money += parseFloat($(ele).text().substr(1));
            }
        })
        $('.price-sum em').text('￥'+money.toFixed(2));
    }

创建元素

            // 1. 创建元素
            var li = $('<li>我是后来创建的小li</li>');
            var div = $('<div>我是后来的div</div>');

动态的创建了一个 <li>

添加元素

内部添加

            // (1)内部添加 
            $('ul').append(li);  // 放到内容的最后面
            $('ul').prepend(li);  // 放到内容的最前面

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

外部添加

            // (2)外部添加
            $('.test').after(div);  // 把div放到目标元素.test的后面
            $('.test').before(div);  // 放到目标元素前面

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

删除元素

            // 3. 删除元素
            $('ul').remove();  // 删除ul元素的本身  自杀
            $('ul').empty();   // 删除里面所有的子节点    本身元素不杀掉
            $('ul').html('');  //清空匹配的元素内容

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

案例：购物车案例模块-删除商品模块

核心思路：

把商品remove() 删除元素即可有三个地方需要删除：
1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
商品后面的删除按钮：一定是删除当前的商品，所以从 $(this) 出发
删除选中的商品：先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
清理购物车：则是把所有的商品全部删掉

    // 7. 删除商品模块
    // (1) 商品后面的删除按钮
    $('.p-action a').click(function(){
        $(this).parents('.cart-item').remove();
        // 调用函数6
        getSum();

    })
    // (2) 删除选中的商品
    $('.operation .remove-batch').click(function(){
        // 删除的是小的复选框选中的商品
        $('.j-checkbox:checked').parents('.cart-item').remove();
        // 调用函数6
        getSum();

    })
    // (3) 清空购物车 删除全部商品
    $('.operation .clear-all').click(function(){
         $('.cart-item').remove();
        // 调用函数6
        getSum();

    })

案例：购物车案例模块-选中商品添加背景

核心思路：

选中的商品添加背景，不选中移除背景即可 addClass() removeClass() 不加点
全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景

        // 8. 选中商品添加背景
        if($(this).prop('checked')){
            // 让所有的商品添加.check-cart-item类名
            $('.cart-item').addClass('check-cart-item');
        }else{
            // 移除类名.check-cart-item
            $('.cart-item').removeClass('check-cart-item');
        }

小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景这个背景，可以通过类名修改，添加类和删除类

        // 8. 选中商品添加背景
        if($(this).prop('checked')){
            // 让当前的商品添加.check-cart-item类名
            $(this).parents('.cart-item').addClass('check-cart-item');
        }else{
            // 移除类名.check-cart-item
            $(this).parents('.cart-item').removeClass('check-cart-item');
        }

jQuery 尺寸、位置操作

jQuery 尺寸

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

        $(function () {
            // 1. width() / height()  获取设置元素width和height大小  不加单位
            console.log($('div').width());  //200
            // $('div').width(300);  // 修改宽度
            // 2. innerWidth()  包括padding大小
            console.log($('div').innerWidth());  // 220
            // 3. outerWidth()  包括padding和border
            console.log($('div').outerWidth());  // 250
            // 4. outerWidth(true)  包括padding和border和margin
            console.log($('div').outerWidth(true));  // 290
        })

jQuery 位置

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

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

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

            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($('.son').offset());  // 返回的是一个对象
            console.log($('.son').offset().top);  // 100 
            console.log($('.son').offset().top);
            $('.son').offset({
                top: 200,
                left: 200
            })

position() 获取元素偏移

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

            // 2. 获取距离带有定位父级位置（偏移） position  如果没有带有定位的父级，则以文档为主
            console.log($('.son').position());

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

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

            $(document).scrollTop(100);

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

核心原理：

使用animate动画返回顶部。
animate动画函数里面有个scrollTop 属性，可以设置位置
但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

    <script>
        $(function () {
            $(document).scrollTop(100);
            var boxTop = $('.container').offset().top; // 盒子距离顶部的距离
            // 页面滚动事件
            $(window).scroll(function () {
                // 如果滚进去的距离大于盒子距离顶部的距离
                if ($(document).scrollTop() >= boxTop) {
                    $('.back').fadeIn();
                } else {
                    $('.back').fadeOut();
                }
            })
            $('.back').click(function () {
                // 不能是文档，是html和body做动画
                $('body,html').stop().animate({
                    scrollTop: 0
                })
            })
        })
    </script>

案例：品优购电梯导航

当我们滚动到今日推荐模块，就让电梯导航显示出来

    var toolTop = $('.recom').offset().top;
    $(window).scroll(function(){
        if($(document).scrollTop() >= toolTop){
            $('.fixedtool').fadeIn();
        }else {
            $('.fixedtool').fadeOut();
        }
    })

点击电梯导航页面可以滚动到相应内容区域

核心算法：因为电梯导航模块和内容区模块一一对应的当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top 然后执行动画即可

当你点击某个小li的时候，会出现他的索引号
当我们每次点击小li 就需要计算出页面要去往的位置
这些楼层都有一个共用的类名是W，所以当我们点击小丽的时候，我们选择楼层里面有W类名的盒子的eq（小li的索引号）就知道是哪个盒子了，然后再计算出它的offset().top

    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $('.fixedtool li').click(function() {
        // 当你点击某个小li的时候，会出现他的索引号
        console.log($(this).index()); 
        // 当我们每次点击小li 就需要计算出页面要去往的位置
        var current = $('.floor .w').eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $('html, body').stop().animate({
            scrollTop:current
        })
    })

当我们点击电梯导航某个小li，当前小li 添加current类，兄弟移除类名

        // 点击之后，让当前的小li添加carrot类名,姐妹移除current类名
        $(this).addClass('current');
        $(this).siblings().removeClass('current');

当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。

需要用到each，遍历内容区域大模块。
each里面能拿到内容区域每一个模块元素和索引号
判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
就利用这个索引号找到相应的电梯导航小li添加类。

        // 4. 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
        $('.floor .w').each(function(i,ele) {
            if($(document).scrollTop() >= $(ele).offset().top){
                // console.log(i); // 这个是每个模块的索引号
                $('.fixedtool li').eq(i).addClass('current').siblings().removeClass();
            }
        })