Web开发基础：JQuery详解

内容过滤选择器

---

可见过滤选择器

---

属性过滤选择器

---

子元素过滤选择器

---

表单属性过滤选择器

---

表单选择器

---

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）显示出来

完整代码