• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery网页开发案例:jQuery常用API--jQuery 元素操作

武飞扬头像
愿君记取此一枝
帮助1

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

 遍历元素

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

语法1

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

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个

2. 里面的回调函数有2个参数:  index 是每个元素的索引号;  demEle 是每个DOM元素对象,不是jquery对象

3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象  $(domEle)

学新通

它是自动给我们数组设置了索引号

学新通 dom元素对象,所以不能使用jQuery方法

学新通

可以转换为jq对象然后使用方法 

学新通

这里是要转换的,因为字符与数字相加比较特殊,要转换

  1.  
    <div>1</div>
  2.  
    <div>2</div>
  3.  
    <div>3</div>
  4.  
    <script>
  5.  
    $(function() {
  6.  
    // $("div").css("color", "red");
  7.  
    // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
  8.  
    // 1. each() 方法遍历元素
  9.  
    var sum=0
  10.  
    var arr=["red","blue","green"]
  11.  
    $("div").each(function(i,domEle){
  12.  
    // 回调函数第一个参数一定是索引号 可以指定索引号名
  13.  
    // console.log(index);
  14.  
    // console.log(i);
  15.  
    // 回调函数第二个参数一定是dom元素对象 、
  16.  
    // console.log(domEle);所以不能使用jQuery方法
  17.  
    console.log(domEle)
  18.  
    $(domEle).css("color",arr[i])
  19.  
    sum =parseInt($(domEle).text());
  20.  
    })
  21.  
    console.log(sum)
  22.  
    // 2. $.each() 方法遍历元素 主要用于遍历数据,处理数据
  23.  
     
  24.  
    })
  25.  
    </script>
学新通

 语法2

  1.  
    $.each(objectfunction (index, element) { xxx; }
  2.  
     

1. $.each()方法可用于遍历任何对象主要用于数据处理,比如数组,对象

2. 里面的函数有2个参数:  index 是每个元素的索引号;  element  遍历内容

学新通

以后遍历dom对象用第一种,遍历 数组,对象用第二种。

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

核心思路:把所有文本框里面的值相加就是总计数量。总额同理

文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可

点击 -号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额

因此可以封装一个函数求总计和总额的, 以上2个操作调用这个函数即可。

注意1: 总计是文本框里面的值相加用 val()     总额是普通元素的内容用text() 

注意普通元素里面的内容要去掉¥并且转换为数字型才能相加

学新通

  1.  
    $(function(){
  2.  
    // 1.全选 全选功能模块
  3.  
    // 就是把全选按钮(checkall)的状态赋值给三个小按钮(j-checkbox)就可以了
  4.  
    // s事件可以是哟共change
  5.  
    $(".checkall").change(function(){
  6.  
    var a= $(this).prop("checked");
  7.  
    $(".j-checkbox,.checkall").prop("checked",a)//并集选择器 自己也选上
  8.  
    })
  9.  
    // 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
  10.  
    $(".j-checkbox").change(function(){
  11.  
    // console.log($(".j-checkbox:checked").length) 所有小复选框的个数
  12.  
    if($(".j-checkbox:checked").length===$(".j-checkbox").length){
  13.  
    $(".checkall").prop("checked",true)
  14.  
    }else{
  15.  
    $(".checkall").prop("checked",false)
  16.  
    }
  17.  
    });
  18.  
    // 首先声明一个变量,当我们点击 号(increment),就让这个值 ,然后赋值给文本框。
  19.  
    $(".increment").click(function(){
  20.  
    // 得到当地兄弟文本框的值 现在的值为1
  21.  
    var n=$(this).siblings(".itxt").val();
  22.  
    // console.log(n)
  23.  
    n ;
  24.  
    $(this).siblings(".itxt").val(n)
  25.  
    // 每次点击 号或者-号,根据文本框的值 乘以 当前商品的价格  就是 商品的小计
  26.  
    // var p=$(this).parent().parent().siblings(".p-price").text().substr(1)*n;
  27.  
    var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n
  28.  
    // console.log(p)
  29.  
    // 小计模块
  30.  
    // $(this).parent().parent().siblings(".p-sum").html("¥" p)
  31.  
    $(this).parents(".p-num").siblings(".p-sum").html("¥" p.toFixed(2))
  32.  
    getSum();
  33.  
    })
  34.  
    // 减法
  35.  
    $(".decrement").click(function(){
  36.  
    // 得到当地兄弟文本框的值 现在的值为1
  37.  
    var n=$(this).siblings(".itxt").val();
  38.  
    // console.log(n)
  39.  
     
  40.  
    if(n==1){
  41.  
    return false;
  42.  
    }
  43.  
    n--;
  44.  
    $(this).siblings(".itxt").val(n)
  45.  
    // var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n;
  46.  
    var p = $(this).parents(".p-num").siblings(".p-price").html();
  47.  
    // console.log(p)
  48.  
    p = p.substr(1)
  49.  
    // 小计模块
  50.  
    $(this).parents(".p-num").siblings(".p-sum").html("¥" (p * n).toFixed(2));
  51.  
    getSum();
  52.  
    // $(this).siblings(".itxt").val(n)
  53.  
    })
  54.  
    // 4.用户修改文本框的值 计算 小计模块
  55.  
    $(".itxt").change(function(){
  56.  
    // 用最新的表单内的值 乘以 单价即可  但是还是当前商品小计
  57.  
    n=$(this).val();
  58.  
    var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n
  59.  
    $(this).parents(".p-num").siblings(".p-sum").html("¥" p.toFixed(2))
  60.  
    getSum();
  61.  
    })
  62.  
    // 5.计算总计和总额模块
  63.  
    getSum();
  64.  
    function getSum(){
  65.  
    var count=0;//计算总计数
  66.  
    var money=0;//计算总价钱
  67.  
    $(".itxt").each(function(i,ele){
  68.  
    count =parseInt($(ele).val());
  69.  
    })
  70.  
    $(".amount-sum em").text(count)
  71.  
    $(".p-sum").each(function(i,ele){
  72.  
    money =parseInt($(ele).text().substr(1));
  73.  
    })
  74.  
    $(".price-sum em").text("¥" money.toFixed(2))//.text(money)就是修改为我们的money
  75.  
    }
  76.  
    })
学新通

 创建元素

语法:

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

学新通

创建li但是没有添加 

添加元素

1. 内部添加

element.append(''内容'')  

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

element.prepend(''内容'')  

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

2. 部添加

element.after(''内容'')        //  把内容放入目标元素后面
element.before(''内容'')    //  把内容放入目标元素前面 

 ①内部添加元素,生成之后,它们是父子关系。

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

学新通

 删除元素

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

 ①remove 删除元素本身。

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

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

核心思路:把商品remove() 删除元素即可

有三个地方需要删除: 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车

商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发

删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品

清理购物车: 则是把所有的商品全部删掉

  1.  
    // 6.删除商品模块
  2.  
    // 商品后面的删除按钮
  3.  
    $(".p-action a").click(function(){
  4.  
    // 删除的是当前的商品
  5.  
    $(this).parents(".cart-item").remove();
  6.  
    getSum();
  7.  
    })
  8.  
    // 删除选中的商品
  9.  
    $(".remove-batch").click(function(){
  10.  
    $(".j-checkbox:checked").parents(".cart-item").remove();
  11.  
    getSum();
  12.  
    })
  13.  
    // 清空购物车 删除全部商品
  14.  
    $(".clear-all").click(function(){
  15.  
    $(".cart-item").remove();
  16.  
    getSum();
  17.  
    })
学新通

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

核心思路:选中的商品添加背景,不选中移除背景即可

选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景

小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景

这个背景,可以通过类名修改,添加类和删除类

学新通

  1.  
    if($(this).prop("checked")){
  2.  
    // 让所有商品添加check-cart-item类名
  3.  
    $(".cart-item").addClass("check-cart-item");
  4.  
    }else{
  5.  
    // check-cart-item移除
  6.  
    $(".cart-item").removeClass("check-cart-item")
  7.  
    }

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhhckgg
系列文章
更多 icon
同类精品
更多 icon
继续加载