表单属性过滤选择器
表单选择器
JQuery常用方法
========================================================================
| 方法 | 作用 |
| — | — |
| val() / val(‘值’) | 读写表单的值 |
| prop(‘属性名’)/prop(‘属性名’,‘值’) | 读写标签的属性 |
| css(‘样式名’)/css(‘样式名’,‘值’) | 读写标签的样式 |
| text()/text(‘文字’) | 读写标签的文字内容 |
| html()/html(‘HTML代码’) | 读写标签内部的HTML |
| parent() | 获得父标签 |
| next(‘标签名’) | 获得邻近的下一个标签 |
| prev(‘标签名’) | 获得邻近的上一个标签 |
| find(‘选择器’) | 查找子标签 |
| each(function) | 对集合进行遍历操作 |
| addClass(“类选择器”) | 添加类选择器 |
| removeClass(“类选择器”) | 删除类选择器 |
| toggleClass(“类选择器”) | 切换样式 |
JQuery事件
======================================================================
JQuery的事件处理
$(选择器).bind(“事件名”,function(){
事件处理代码
});
或
$(选择器).事件名(function(){
事件处理代码
});
常用事件：
-
click 点击
-
mouseIn 鼠标进入
-
mouseOut 鼠标移出
-
mouseMove 鼠标移动
-
keyDown 键盘按下
-
keyUp 键盘弹起
-
focus 获得焦点
-
blur 失去焦点
…
JQuery的动画
=======================================================================
| 方法 | 作用 |
| — | — |
| show()/show(毫秒数) | 显示 |
| hide()/hide(毫秒数) | 隐藏 |
| fadeIn()/fadeIn(毫秒数) | 淡入 |
| fadeOut()/fadeOut(毫秒数) | 淡出 |
| slideDown()/slideDown(毫秒) | 向下滑动 |
| slideUp()/slideUp(毫秒) | 向上滑动 |
| animate({样式:‘值’,样式:‘值’},毫秒数) | 自定义动画 |
案例：购物车
====================================================================
功能：
1）计算选中商品的总价格
2）全选和全不选
3）商品数量的修改
4）点击结算后，统计选中商品的信息
功能分析：
1）计算选中商品的总价格
1）如何找到所有商品前面选中的复选框
$(“[name=checkOne]:checkbox:checked”)
2）如何获得选中复选框同一行的价格和数量
先使用parent()定位到行tr标签上
通过find查找子标签
3）如何将所有选中商品的价格和数量统计起来
each进行遍历
2）全选和全不选
1）给全选复选框设置点击事件
2）使用prop修改checked属性
3）名字为checkOne的复选框checked属性设置为和checkAll一样
3）商品数量的修改
加1：
1）给所有class为add的标签设置点击事件
2）找到当前标签的上一个span，获得文字，设置文字为原数量+1
3）找到同一行的money，更新价格
4）更新总价格
4） 点击结算后，统计选中商品的信息
1）找到所有选中的复选框
2）找到同一行的商品信息
3）显示出来
完整代码
