1.jQuery 属性操作
1.1 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性,比如 <a>
元素里面的 href ,比如<input>
元素里面的 type。
- 获取属性语法
prop(''属性'')
2. 设置属性语法
prop(''属性'', ''属性值'')
1.2 设置或获取元素的任意属性,包括标准DOM和自定义属性值 attr()
用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”。
1.获取属性语法
attr(''属性'') // 类似原生 getAttribute()
- 设置属性语法
attr(’‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute()
案例:购物车案例模块-全选
① 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
② 因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮,就来判断:
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
⑥ :checked 选择器 :checked 查找被选中的表单元素。
jQuery 内容文本值
主要针对元素的内容
还有表单的值
操作。
- 普通元素内容 html()( 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
- 普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
- 表单的值 val()( 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
案例:购物车案例模块-增减商品数量
案例:购物车案例模块-修改商品小计
① 核心思路:每次点击+号或者-号,根据文本框的值 乘以 当前商品的价格 就是 商品的小计
② 注意1: 只能增加本商品的小计, 就是当前商品的小计模块(p-sum)
③ 修改普通元素的内容是text() 方法
④ 注意2: 当前商品的价格,要把¥符号去掉再相乘截取字符串 substr(1)
⑤ parents(‘选择器’)
可以返回指定祖先元素
⑥ 最后计算的结果如果想要保留2位小数 通过
toFixed(2) 方法
⑦ 用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件
⑧ 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
$("div").each(function (index, domEle) { xxx; })
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数: index 是每个元素的索引号;
demEle 是每个DOM元素对象
,不是jquery对象 - 所以要想使用jquery方法,
需要给这个dom元素转换为jquery对象 $(domEle)
- This关键字指向当前的对象
案例:购物车案例模块-计算总计和总额
① 核心思路:把所有文本框里面的值相加就是总计数量。总额同理
② 文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可
③ 点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额
④ 因此可以封装一个函数求总计和总额的, 以上2个操作调用这个函数即可。
⑤ 注意1: 总计是文本框里面的值相加用 val() 总额是普通元素的内容用text()
⑥ 要注意普通元素里面的内容要去掉¥并且转换为数字型才能相加
创建元素
$(''<li></li>'');
创建了一个动态的li
添加元素
① 内部添加元素,生成之后,它们是父子关系。 ② 外部添加元素,生成之后,他们是兄弟关系。
- 内部添加
element.append('内容');
把内容放入匹配元素内部`最后面`,类似原生 appendChild
element.prepend('内容');
把内容放到元素内部的最前面
- 外部添加
element.after('内容');
把内容放入目标元素后面
element.before('内容');
把内容放入目标元素前面
删除元素
① remove 删除元素本身。 ② empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
element.remove();//删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容 ,也就是删除元素的子节点
案例:购物车案例模块-删除商品模块
① 核心思路:把商品remove() 删除元素即可
② 有三个地方需要删除: 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
③ 商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发
④ 删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品
⑤ 清理购物车: 则是把所有的商品全部删掉