day02_jQuery.ppt

jQuery_day02,Contents,目,录,jQuery 属性操作jQuery 文本属性值jQuery 元素操作jQuery 尺寸、位置操作,能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置,目标,TARGET,学习jQuery中的各种操作属性方法,要点提示,jQuery属性操作,掌握程度：应用,1.1 jQuery属性操作,1.普通属性和表单属性操作 获取值：$(a).prop(href)赋 值：$(input).prop(checked,true);2.普通属性和自定义属性操作 获取值：$(a).attr(href)赋 值：$(a).attr(aaa,我们都挺好);3.自定义属性和H5新增属性 获取值：$(a).data(uname)赋 值：$(a).data(uaname,哈哈哈);,1.1 jQuery属性操作,课堂问答,知识总结,完成购物车全选案例,要点提示,案例：购物车模块-全选(上),掌握程度：应用,1.2 案例：购物车模块-全选,完成购物车全选案例,要点提示,案例：购物车模块-全选(下),掌握程度：应用,1.2 案例：购物车模块-全选,练习,实现购物车模块-全选案例,提示,注意：表单属性 selected 操作使用 prop()思路：被选中的个数和总个数的比较。,5分钟,1.2 案例：购物车模块-全选,案例：购物车模块-全选,学会操作文本属性值,要点提示,jQuery文本属性值,掌握程度：应用,2.1 jQuery文本属性值,1.类比DOM中innerHTML属性方法：html()获取值：$(a).html()赋 值：$(a).html(赋值内容，识别标签);2.类比DOM中innerText属性方法：text()获取值：$(a).text()赋 值：$(a).text(赋值内容，NO识别标签);3.类比DOM中value属性方法：val()获取值：$(input).val()赋 值：$(input).val(val()操作标签，必须带有value属性-表达标签);,2.1 jQuery文本属性值,课堂问答,知识总结,完成购物车增减商品数量案例,要点提示,案例：购物车模块-增减商品数量,掌握程度：应用,2.2 案例：购物车模块-增减商品数量,练习,实现购物车模块-增减商品数量案例,提示,核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值+，然后赋值给文本框。修改表单的值是val()方法,5分钟,2.2 案例：购物车模块-增减商品数量,案例：购物车模块-增减商品数量,完成购物车修改商品小计案例,要点提示,案例：购物车模块-修改商品小计（上）,掌握程度：应用,2.3 案例：购物车模块-修改商品小计,完成购物车修改商品小计案例,要点提示,掌握程度：应用,2.3 案例：购物车模块-修改商品小计,案例：购物车模块-修改商品小计（中）,完成购物车修改商品小计案例,要点提示,掌握程度：应用,2.3 案例：购物车模块-修改商品小计,案例：购物车模块-修改商品小计（下）,练习,实现购物车模块-修改商品小计案例,提示,核心思路：核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计修改普通元素的内容是text()方法,5分钟,2.3 案例：购物车模块-修改商品小计,案例：购物车模块-修改商品小计,学会jQuery遍历元素的方法each(),要点提示,jQuery元素的遍历each(),掌握程度：应用,3.1 jQuery遍历,学会jQuery遍历数据的方法$.each(),要点提示,jQuery数据的遍历$.each(),掌握程度：应用,3.1 jQuery遍历,完成购物车计算总数总额案例,要点提示,案例：购物车模块-计算总数总额,掌握程度：应用,3.2 案例：购物车模块-计算总数总额,练习,实现购物车模块-计算总数总额案例,提示,把所有文本框中的值相加就是总额数量，总计同理。文本框里面的值不同，如果想要相加需要用 each()遍历，声明一个变量做计数器，累加即可。,5分钟,3.2 案例：购物车模块-计算总数总额,案例：购物车模块-计算总数总额,学习jQuery创建添加删除元素的方法,要点提示,jQuery创建添加删除元素,掌握程度：应用,3.3 jQuery创建添加删除元素,1.创建元素$(我是后来创建的li)2.添加元素$(ul).append(li);/内部添加并且放到内容的最后面$(ul).prepend(li);/内部添加并且放到内容的最前面$(.test).after(div);/.test的后面兄弟形式加一个$(.test).before(div);/.test的前面兄弟形式加一个3.删除元素$(ul).remove();/可以删除匹配的元素 自杀$(ul).empty();/可以删除匹配的元素里面的子节点 孩子$(ul).html();/可以删除匹配的元素里面的子节点 孩子,3.3 jQuery创建添加删除元素,课堂问答,知识总结,上午复习,属性操作的三个方法是：硬件、硬件、硬件 内容文本值操作的三个方法是：硬件、硬件、硬件 写出jQuery中三个元素操作方法：硬件、硬件、硬件,上午复习,上午复习,属性操作的三个方法是：attr()、prop()、data()内容文本值操作的三个方法是：html()、text()、val()写出jQuery中三个元素操作方法：$(标签)、append()、prepend()、remove()、html()、empty(),上午复习,完成购物车删除商品案例,要点提示,案例：购物车模块-删除商品,掌握程度：应用,3.4 案例：购物车模块-删除商品,练习,实现购物车模块-删除商品案例,提示,核心思路：核心思路：把商品remove()删除元素即可有三个地方需要删除：1.商品后面的删除按钮 2.删除选中的商品 3.清理购物车,5分钟,3.4 案例：购物车模块-删除商品,案例：购物车模块-删除商品,完成购物车选中商品添加背景案例,