购物车全选按钮的制作与优化
第一步:了解jQuery中表单选择器的使用
选择器 | 说明 |
---|---|
:input | 选取所有 input 元素 |
:button | 选取所有普通按钮,即<input type ="button" /> |
:submit | 选取所有提交按钮,即<input type ="submit" /> |
:reset | 选取所有重置按钮,即<input type = "reset" /> |
:text | 选取所有单行文本框 |
:textarea | 选取所有多行文本框 |
:password | 选取所有密码文本框 |
:radio | 选取所有单选框 |
:checkbox | 选取所有复选框 |
:image | 选取所有图片域 |
:file | 选取所有文件域 |
第二部:分析案例需求
全选思路∶里面3个小的复选框按钮(j-checkbox )选中状态( checked )跟着全选按钮( checkall )走。因为checked是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态赋值给3小复选框就可以了。当我们每次点击小的复选框按钮,就来判断:如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选。
第三部:jQuery编写
先得到一个input中的数值将值赋值给变量其次给变量拿出来做--操作,减完在把值赋值给input,对input内容进行修改
parents():方法可以返回指定的祖先元素
to.Fixed(参数):对数值返回指定的小数位数,参数是我们需要保留的小数位
截取字符串:substr(1)
var n=22;
n.toFixed(3);//return 22.00
// 1.获取设置元素内容 html()
console.log($( "div" ).htm1());
改值:// $( "div" ).html("123");
// 2.获取设置元素文本内容 text()console.log($("div" ).text());
改值:$("div").text( "123");
// 3.获取设置表单值val()
console.log($( "input").val());改值:$( "input").va1( "123");
jQuery方法遍历元素(第一种方法)
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
$ ( "div" ) .each (function (index,domEle) { xxx; })
1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
⒉里面的回调函数有2个参数: index是每个元素的索引号; domEle是每个DOM元素对象
不是jquery对象
3.所以要想使用jquery方法,需要给这个dorn元素转换为jquery对象$(domEle)
jQuery方法遍历元素(第二种方法)
$.each (object , function (index,element){ xxx; })
1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
⒉.里面的函数有2个参数: index是每个元素的索引号; element遍历内容