JQuery介绍
目前前端常用的JS框架,目的是简化JavaScript的开发
JQuery的使用
导入外部JS文件
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
JQuery的选择器
如何选择要进行操作的页面元素
选择器的基本语法:
$("选择器")
例如:操作id为id-1的div标签
原生JS:
document.getElementById("id-1")
JQuery:
$("#id-1")
CSS选择器
JQuery可以使用CSS选择器,如:
- 标签选择器:选择页面中所有相同类型的标签,如:p、h1、a
- 类选择器:.类名 ,选择页面中多个设置该类的标签
- ID选择器:#ID,选择页面中唯一设置了该ID的标签
- 后代选择器:父选择器 子选择器
- 分组选择器:选择器,选择器,选择器
过滤选择器
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)显示出来
完整代码
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8">
<style type="text/css">
.add,.sub{
width: 30px;
height: 30px;
background: #ccc;
text-align: center;
line-height: 30px;
vertical-align: middle;
cursor: pointer;
display: inline-block;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//计算总价
function calcPrice(){
var sum = 0;
//获得所有name为check的选中状态的复选框,对其进行遍历
$("[name='check']:checkbox:checked").each(function(){
//获得该复选框同一行的总价文字
var price = $(this).parent().parent().find(".total_price").text();
sum += parseInt(price);
});
//显示到总价格标签中
$("#total").text(sum);
}
//网页加载后
$(function(){
//调用计算总价
calcPrice();
//给name为checkAll的复选框添加点击事件
$("[name='checkAll']:checkbox").click(function(){
//找到所有name为check的复选框,将checked属性设置为和该复选框一样
$("[name='check']:checkbox").prop("checked",$(this).prop("checked"));
calcPrice();
});
//点击商品的复选框后重新计算价格
$("[name='check']:checkbox").click(function(){
calcPrice();
});
//给所有的+号添加点击事件
$(".add").click(function(){
//获得数量文字
var num = parseInt($(this).prev("span").text());
if(num < 10){
//更新数量
$(this).prev("span").text(num+1);
//获得单价
var total_price = $(this).parent().parent().find(".price").text() * (num + 1);
//更新同一行的总价
$(this).parent().parent().find(".total_price").text(total_price);
//更新所有商品总价
calcPrice();
}
});
//给所有的-号添加点击事件
$(".sub").click(function(){
//获得数量文字
var num = parseInt($(this).next("span").text());
if(num > 1){
//更新数量
$(this).next("span").text(num-1);
//获得单价
var total_price = $(this).parent().parent().find(".price").text() * (num - 1);
//更新同一行的总价
$(this).parent().parent().find(".total_price").text(total_price);
//更新所有商品总价
calcPrice();
}
});
//给name为pay的button添加点击事件
$("[name='pay']:button").click(function(){
var jsons = new Array();
var i = 0;
//遍历所有被选中的商品
$("[name='check']:checkbox:checked").each(function(){
var id = $(this).parent().parent().find(".id").text();
var name = $(this).parent().parent().find(".name").text();
var price = $(this).parent().parent().find(".price").text();
var num = $(this).parent().parent().find(".num").text();
var total = $(this).parent().parent().find(".total_price").text();
//向数组添加JSON对象
jsons[i++] = {"id":id,"name":name,"price":price,"num":num,"total":total};
});
//JSON.stringify是将json数组转换为字符串
alert(JSON.stringify(jsons));
});
});
</script>
</head>
<body>
<table width="60%">
<tr>
<th><input type="checkbox" name="checkAll" checked="true"></th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td><input type="checkbox" name="check" checked="true"></td>
<td><span class="id">1<span></td>
<td><span class="name">IPhoneX</span></td>
<td><span class="price">8000.0</span></td>
<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
<td><span class="total_price">8000.0</span></td>
</tr>
<tr>
<td><input type="checkbox" name="check" checked="true"></td>
<td><span class="id">2</span></td>
<td><span class="name">小米6</span></td>
<td><span class="price">3000.0</span></td>
<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
<td><span class="total_price">3000.0</span></td>
</tr>
<tr>
<td><input type="checkbox" name="check" checked="true"></td>
<td><span class="id">3</span></td>
<td><span class="name">华为P10</span></td>
<td><span class="price">5000.0</span></td>
<td><span class="sub">-</span><span class="num">1</span><span class="add">+</span></td>
<td><span class="total_price">5000.0</span></td>
</tr>
</table>
总价格:<span id="total">0</span> <input type="button" value="结算" name="pay">
</body>
</html>