中国站
中国站
国际站

关于我们

质量为本、客户为根、勇于拼搏、务实创新

新闻公告

< 返回新闻公共列表

jQuery 属性，元素

发布时间：2020-03-21 00:00:00

   属性操作固定属性 prop()

  1. 获取固定属性
  • $("a").prop("href")

      2. 设置属性

  • $('a').prop("title", '我们')

注意:

  • prop 更加适用disabled / checked / selected 等。

自定义属性 attr()

  1. 获取自定义属性
  • $('div').attr('index')

      2. 设置自定义属性

  • $('span').attr('index', 1)

数据缓存 data()

  1. 设置数据缓存
  • $('span').data('uname', 'peach')

      2. 获取数据缓存

  • $('span').data('uname')

注意：

  • data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。
<meta name="viewport" content="width=device-width, initial-scale=1.0">Document都挺好<input type="checkbox" name="" id="" checked>我是div123function () {// 1.获取固定属性名console.log($("a").prop("href"));
        console.log($("a").prop('title'));// 1.1 设置属性$('a').prop("title", '我们')// 1.2 prop 更加适用disabled / checked / selected 等。$('input').change(function () {
            console.log($(this).prop("checked"));
        })// 2 自定义属性// 2.1 获取自定义属性console.log($('div').attr('data-index'));
        console.log($('div').attr('index'));// 2.2 设置自定义属性$('span').attr('index', 1)// 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面$('span').data('uname', 'peach'); // 设置缓存数据console.log($('span').data('uname'));  // 获取缓存数据// 3.1 data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。console.log($('div').data('index'));

    })" _ue_custom_node_="true">
示例代码
$(function () {// 全选和 全不选// 把全选的的状态给其他商品的状态即可// 1. 全选$('.checkall').change(function () {// 1.1 设置其他商品的状态和全选按钮 的状态一致console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));// 1.2 如果全选则 让所有的商品添加 check-cart-item 类名if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名} else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })// 2. 如果小框里面的数值等于所有数组，则选择全选$('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);// 如果当前选择的数量等于商品数量， 则全选选中if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }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");
        }
    })



})
案列-全选与全不选

文本数值

文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

  1. 普通元素内容html()  对应JS中的 innerHTML
  2. 普通元素文本内容   对应JS中的 innerText
  3. 表单的值                 对应JS中的 value

注意：html() 可识别标签，text() 不识别标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">Document我是内容// 1. 获取设置元素内容 html()console.log($('div').html());// 1.1 设置HTML内容$('div').html('握手')// 2. 获取设置元素文本内容 text()console.log($('div').text());// 2.1 设置文本内容$('div').text('111')// 3. 获取设置表单值 val()console.log($('input').val());// 3.1 设置属性值$('input').val('test')" _ue_custom_node_="true">
示例代码
$(function () {// 全选和 全不选// 把全选的的状态给其他商品的状态即可// 1. 全选$('.checkall').change(function () {// 1.1 设置其他商品的状态和全选按钮 的状态一致console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));// 1.2 如果全选则 让所有的商品添加 check-cart-item 类名if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名} else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })// 2. 如果小框里面的数值等于所有数组，则选择全选$('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);// 如果当前选择的数量等于商品数量， 则全选选中if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }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");
        }
    })// --------------------------------------------------------------------------------// 商品 + 计算$('.increment').click(function () {// 获取到当前多少件商品var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);// 然后获取到单价标签var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价var price = (p * n).toFixed(2); // 保留两位小数console.log(price);// 然后把价格替换到小计里面// 获取到小计标签$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })// 商品 - 计算$('.decrement').click(function () {// 先获取到当前商品数量var n = $(this).siblings('.itxt').val()// 如果等于1  不做操作if (n == 1) {return false}
        n--;// 赋值到数量标签里面$(this).siblings(".itxt").val(n);// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
    })// 用户直接再文本款里面输入数量$('.itxt').change(function () {var n = $(this).val()if (n < 0) {
            n = 1
            $(this).val(n);
        }// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })

})
案例-购物车小计计算

元素操作

  1. $('div').each(function (i, domEle) {   })
  • 回调函数第一个是index，第二个是dom元素对象, 要转换为jquer对象

      2. $.each(obj, function (i, ele) {  })

  • $.each() 方法遍历元素 主要用于遍历数据，处理数据
<meta name="viewport" content="width=device-width, initial-scale=1.0">Document123function () {var sum = 0var arr = ["red", "green", "blue"];// 第一种遍历元素$('div').each(function (i, domEle) {// console.log(i, domEle);// 回调函数第一个是index，// 第二个是dom元素对象,要转换为jquer对象$(domEle).css('color', arr[i])
                sum += parseInt($(domEle).text())
            })// 第二种 $.each() 方法遍历元素 主要用于遍历数据，处理数据$.each(arr, function (i, ele) {
                console.log(i, ele);
            })

            $.each({
                "name": 'peach',
                "age": 12
            }, function (i, ele) {
                console.log(i);  // nameconsole.log(ele); // peach})


        })" _ue_custom_node_="true">
示例代码
$(function () {// 全选和 全不选// 把全选的的状态给其他商品的状态即可// 1. 全选$('.checkall').change(function () {// 1.1 设置其他商品的状态和全选按钮 的状态一致console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));// 1.2 如果全选则 让所有的商品添加 check-cart-item 类名if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名} else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })// 2. 如果小框里面的数值等于所有数组，则选择全选$('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);// 如果当前选择的数量等于商品数量， 则全选选中if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }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");
        }
    })// --------------------------------------------------------------------------------// 商品 + 计算$('.increment').click(function () {// 获取到当前多少件商品var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);// 然后获取到单价标签var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价var price = (p * n).toFixed(2); // 保留两位小数console.log(price);// 然后把价格替换到小计里面// 获取到小计标签$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })// 商品 - 计算$('.decrement').click(function () {// 先获取到当前商品数量var n = $(this).siblings('.itxt').val()// 如果等于1  不做操作if (n == 1) {return false}
        n--;// 赋值到数量标签里面$(this).siblings(".itxt").val(n);// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })// 用户直接再文本款里面输入数量$('.itxt').change(function () {var n = $(this).val()if (n < 0) {
            n = 1
            $(this).val(n);
        }// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })// ----------------------------------------------------------------// 计算总价getSum()function getSum() {// 先定义总件数，总价格var count = 0;var money = 0;
        $('.itxt').each(function (i, ele) {// ele 就是三个图书的dom对象，要转换为jquer对象count += parseInt($(ele).val()) // 总件数})// 修改底部总件数$('.amount-sum em').text(count)// 修改总价格$('.p-sum').each(function (i, ele) {// 总价格money += parseInt($(ele).text().substr(1))
        })// 修改底部总价格$(".price-sum em").text("￥" + money.toFixed(2));


    }

})
案例-购物车计算总价和总件数

创建，删除，修改元素

创建

  • $("
  • 创建的li
  • ")

添加

  1. 内部添加
  • $('li').append(li) // 放在元素的最后面
  • $('li').prepend(li)  // 放在元素的最前面

      2. 外部添加

  • $('li').after(li) // 放在目标元素的最后面
  • $('li').before(li)   // 放在目标元素的最前面

内部添加元素，生成后，他们是父子关系

外部添加元素，生成后，他们是兄弟关系

删除

  1. $('ul').remove() // 自杀式删除，删除元素本身
  2. $('ul').html('')  // 可以删除匹配的元素里面的子节点 孩子
  3. $('ul').empty() // 匹配删除ele 里面的所有子节点

empty() 和 html()  区别在于html可以设置内容

<meta name="viewport" content="width=device-width, initial-scale=1.0">Document原先的li<div class="test">我是原先的div

示例代码

$(function () {// 全选和 全不选// 把全选的的状态给其他商品的状态即可// 1. 全选$('.checkall').change(function () {// 1.1 设置其他商品的状态和全选按钮 的状态一致console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));// 1.2 如果全选则 让所有的商品添加 check-cart-item 类名if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名} else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })// 2. 如果小框里面的数值等于所有数组，则选择全选$('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);// 如果当前选择的数量等于商品数量， 则全选选中if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }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");
        }
    })// --------------------------------------------------------------------------------// 商品 + 计算$('.increment').click(function () {// 获取到当前多少件商品var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);// 然后获取到单价标签var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价var price = (p * n).toFixed(2); // 保留两位小数console.log(price);// 然后把价格替换到小计里面// 获取到小计标签$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })// 商品 - 计算$('.decrement').click(function () {// 先获取到当前商品数量var n = $(this).siblings('.itxt').val()// 如果等于1  不做操作if (n == 1) {return false}
        n--;// 赋值到数量标签里面$(this).siblings(".itxt").val(n);// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })// 用户直接再文本款里面输入数量$('.itxt').change(function () {var n = $(this).val()if (n < 0) {
            n = 1
            $(this).val(n);
        }// 得到商品的单价var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)var price = (p * n).toFixed(2); // 保留两位小数$(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })// ----------------------------------------------------------------// 删除商品模块$('.p-action a').click(function () {
        $(this).parents('.cart-item').remove();
        getSum();

    })// 删除选中的商品$('.remove-batch').click(function () {
        $('.j-checkbox:checked').parents('.cart-item').remove()
        getSum()
    })// 清空购物车$('.clear-all').click(function () {
        $('.cart-item').remove()
        getSum()
    })// ----------------------------------------------------------------// 计算总价getSum()function getSum() {// 先定义总件数，总价格var count = 0;var money = 0;
        $('.itxt').each(function (i, ele) {// ele 就是三个图书的dom对象，要转换为jquer对象count += parseInt($(ele).val()) // 总件数})// 修改底部总件数$('.amount-sum em').text(count)// 修改总价格$('.p-sum').each(function (i, ele) {// 总价格money += parseInt($(ele).text().substr(1))
        })// 修改底部总价格$(".price-sum em").text("￥" + money.toFixed(2));

    }

})
案例-清空删除购物车

尺寸，位置操作尺寸


















语法

用法

width() / height()

匹配元素宽度和高度，只算width和height

innerWidth()  /  innerHieght()

匹配元素宽度和高度，包含padding

outerWidth()  /  outerHeight()

匹配元素宽度和高度，包含padding, border

outerWidth(true)  /  outerHeight(true)

匹配元素宽度和高度，包含padding，border，margin

  • 如果() 里面参数为空，返回相对应值，返回数字类型
  • 参数如果为数字，则是修改相对于的值
  • 参数可以不写单位
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentfunction () {
            console.log($('div').height());  //200console.log($('div').width(250));  // 修改值console.log($('div').innerWidth());  //220  width + paddingconsole.log($('div').outerWidth());  // 250   width + padding + borderconsole.log($('div').outerWidth(true))  // 290  width + padding + border + margin})" _ue_custom_node_="true">
示例代码

位置

  1. offset()  设置或者获取元素偏移量
  • 跟父级别没关系，相对于文档的偏移量
  • 有left, top两个属性， offset().top 获取相对于文档的值，
  • 设置元素偏移量: offser({left: 100, top: 100})

      2. position()  获取元素偏移

  • 相对于定位的父亲偏移量坐标
  • 有left, top两个属性， offset().top 获取相对于父亲的值
  • 只能获取
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documenttop: 10px;
        }" _ue_custom_node_="true"><div class="father"><div class="son">

示例代码

      3. scrollTop() /  scrollLeft()  设置获取元素卷去的距离

  • () 为空是获取，里面是数字是设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">Document<div class="back">返回顶部
<div class="container">

示例代码

$(function () {// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current// 节流阀  互斥锁 var flag = true;// 1.显示隐藏电梯导航var toolTop = $(".recommend").offset().top;
    toggleTool();function toggleTool() {if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function () {
        toggleTool();// 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名if (flag) {
            $(".floor .w").each(function (i, ele) {if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });// 2. 点击电梯导航页面可以滚动到相应内容区域$(".fixedtool li").click(function () {
        flag = false;
        console.log($(this).index());// 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().topvar current = $(".floor .w").eq($(this).index()).offset().top;// 页面动画滚动效果$("body, html").stop().animate({
            scrollTop: current
        }, function () {
            flag = true;
        });// 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名$(this).addClass("current").siblings().removeClass();
    })
})
案例-电梯导航


相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-02


本文链接：https://f.ynicp.com/news/content/3565.html 复制本文链接 链接已复制
/template/Home/Zkeys/PC/Static
加入我们，立即开启您的云服务之旅！
免费注册
  • 100倍故障赔偿
  • 5天无理由退款
  • 7x24小时服务
  • 0元快速备案
  • 1V1专席秘书
阿里云云南电信商务中国西部数码中资源ZOL软件下载PC下载网非凡软件站下载之家天极网绿软基地宝塔面板绿色下载站浙联集团华彩软件站起点软件园急速下载站

Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所　昆明市网翼通科技有限公司　滇ICP备08002592号-4

ipv6 ready 国家IPv6监测