目录
1.1.插件：就是封装类javaScript的一些列方法，导入之后可以调用这些方法。
2.自定义插件 $.extend() | $.fn.extend()
2.1.$.extend()；实现对象继承 (类似java的静态方法 直接可以通过$工具调用)
2.4. argument 数组容器，可以存储函数中的参数个数
2.5. $.fu.exntend(); 扩展jQuery对象的方法
3.购物车案例（由于上个文档还是有bug，因此本次案例是对上次bug进行处理优化后的代码）：
一、插件
1.区分java的类方法以及对象方法
答：类（静态）方法（直接调用，无需实例化对象）；
对象方法：StuDao sd =new StuDao(); sd.addStu();（需要实例化对象调用）；
1.1.插件：就是封装类javaScript的一些列方法，导入之后可以调用这些方法。
1.2.如何下载插件？
第一步：浏览器搜索：jQuery，点击插件
第二步：根据需要点击需要的插件
第三步：进入下图界面，根据需求选择，进行双击
第四步：选择需求的版本，点击下载
第五步：选择好版本之后，如图所示：下载即可
1.3.如何使用插件？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例</title>
</head>
<!-- 导入jQuery插件 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
<!-- 导入validate插件 -->
<script src="js/jquery.validate.js" type="text/javascript">
<!-- 编写jQuery代码 -->
<script type="text/javascript">
</script>2.自定义插件 $.extend() | $.fn.extend()
2.1.$.extend()；实现对象继承 (类似java的静态方法 直接可以通过$工具调用)
语法：$.extend(被继承对象,继承对象1,继承对象2···);
//例：案例1：两个对象的继承（两个参数）
var person = {
"name":"老王",
"sex":"男",
"age":18
};
console.log(person);
var stu = {};
console.log(stu);
//使用$.extend()来实现将stu继承person中的属性
$.extend(stu,person);
console.log("---------------------------------------------------------------------------")
//例：案例2：三个对象的继承（三个参数）
console.log(stu);
var teacher ={"name":"张老师","phone":"110"};
console.log(teacher);
//使用$.extend()来实现将stu继承person以及teacher中的属性
$.extend(stu,person,teacher);
console.log(stu);特点：当参数有三个或多个的时候，多个继承对象有一个属性相同，那么被继承人会继承的 那个属性是最后一个继承对象的属性，前面会被覆盖掉，如果是属性不相同，那么， 就会被继承所有。
2.2.自定义插件（方法）
2.3. $.extend()扩展jQuery类方法
//语法：
$.extend({
"方法名":function(){
执行语句;
}
});2.4. argument 数组容器，可以存储函数中的参数个数
//例：
//获取多个数中最大值
$.extend({
"myMax":function(){
var max =arguments[0];
if(arguments.length>0){
for(var i =0;i<arguments.length;i++){
if(arguments[i]>max){
max=arguments[i];
}
}
}else{
//如果没有数据，返回0
return arguments.length;
}
return max;
}
});
//调用
console.log($.myMax(45,3,23,3249,6,23));
console.log($.myMax());2.5. $.fu.exntend(); 扩展jQuery对象的方法
//语法：
$.fn.nextend({
"方法名":function(){
执行语句;
}
});特点：需要通过对象来调方法,亦或者通过$.fn.方法名;
3.第三方插件:表单验证插件
//语法：
$().validate({
rules:{
对象1的name属性名称:{
规则1,
规则2,
···
},
对象2的name属性名称:{
规则1,
规则2,
···
},
对象n的name属性名称:{
规则1,
规则2,
···
}
},
messages:{
对象1的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象2的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象3的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
}
}
});注意：不能有分号结尾，根据name属性来定义规则和错误信息提示。
3.1.规则定义:
二、思维导图
三、案例
1.插件案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插件案例</title>
<style type="text/css">
#myForm .error{
color:red;
font-size: 12px;
margin-left: 10px;
}
</style>
<!-- 导入jQuery插件 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
<!-- 导入validate插件 -->
<script src="js/jquery.validate.js" type="text/javascript">
</script>
<!-- 编写jQuery代码 -->
<script type="text/javascript">
$(function(){
//获取表单标签调用设置插件的方法
$("#myForm").validate({
//规则：rules
rules:{
//账号：username
username:{
//必填项
required:true
},
//邮件 myeamil
myeamil:{
required:true,
//email格式
email:true
}
},
//自定义错误信息
messages:{
username:{
// 账户的错误信息提示
required:"用户名不能为空"
},
myeamil:{
required:"邮箱不能为空",
myeamil:"邮箱的格式不满足要求"
}
}
});
});
</script>
</head>
<body>
<form action="" method="get" id="myForm">
账号：<input type="text" autocomplete="off" name="username" id="" value="" /><span id="">
</span>
<br>
邮箱：<input type="email" name="myeamil" id="" value="" />
<br>
密码<input type="password" name="" id="" value="" />
<br>
<input type="submit" name="" id="" value="注册" />
</form>
</body>
</html>
2.全选案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例</title>
</head>
<!-- 导入jQuery插件 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
<!-- 编写jQuery代码 -->
<script type="text/javascript">
// 加载函数
$(function(){
//全选方法
$.fn.extend({
"myAll":function(){
console.log($(this));
$(this).each(function(){
//跟随着全选改变而改变
$(this).prop("checked",$("#ckx").prop("checked"));
});
}
});
//全选 按钮设置点击事件
$("#ckx").click(function(){
//获取到所有的复选框
$("input:checkbox:gt(0)").myAll();
});
//优化全选
$.fn.extend({
"optimizeAll":function(){
$(this).click(function(){
// console.log($(this));
var flag =true;
$("input:checkbox:gt(0)").each(function(){
//但凡有一个没有选中，就不选中
if($(this).prop("checked") === false){
// console.log(123);
flag=false;
}
});
console.log(flag);
$("#ckx").prop("checked",flag);
});
}
});
//为所有复选框设置点击事件（除了全选的那个）
$("input:checkbox:gt(0)").optimizeAll();
});
</script>
<body>
<input type="checkbox" name="" id="ckx" value="" />全选|取消全选
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<button type="button" id="obtn1">$.fn.extend()调用</button>
</body>
</html>
3.购物车案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车案例</title>
<!-- css代码 -->
<style type="text/css">
/* 居中 */
th{
text-align: center;
}
table tr{
text-align: center;
}
</style>
<!-- 导入插件 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
<!-- 编写jQuery代码 -->
<script type="text/javascript">
// 加载函数|入口函数
$(function(){
//定义一个变量保存总金额
var sum =0;
//1.全选
$("#all").click(function(){
//每次都清空
sum=0;
// 点击全选的时候，其它的也选中
// console.log($(":input:checkbox:gt(0)"));
$(":input:checkbox:gt(0)").each(function(){
$(this).prop("checked",$("#all").prop("checked"));
});
//全选选中的情况
if($("#all").prop("checked")===true){
//获取所有的选中的复选框，除了本身
$(":input:checkbox:gt(0)").each(function(){
//总金额：
sum+=parseInt($(this).parent().parent().children().eq(4).text());
//进行设置
$("span").text(sum);
});
}else if($("#all").prop("checked")===false){
sum=0;
//进行设置
$("span").text(sum);
}
});
//优化全选
$(":input:checkbox:gt(0)").click(function(){
//每次都清空
sum=0;
//但凡一个没有选中，全选就不选中
//控制结果
var flag =true;
$(":input:checkbox:gt(0)").each(function(){
if(!$(this).prop("checked")===flag){
flag=false;
}
if($(this).prop("checked")===true){
// alert($(this).parent().parent().children().eq(4).text());
sum+=parseInt($(this).parent().parent().children().eq(4).text());
//总金额 1.选中的 2.当我点击选中的按钮不断更新
$("span").text(sum);
//当我点击后取消的情况
if($(this).prop("checked")===false){
//拿到总金额
sum-=parseInt($(this).parent().parent().children().eq(4).text());
}
}
});
$("#all").prop("checked",flag);
});
//2.删除
$(":button").click(function(){
//排除掉
// console.log($(this).html());
if($(this).html()==="删除"){
//拿到行对象
var Tr =$(this).parent().parent();
//拿到总价格
var money =parseInt(Tr.children().eq(4).text());
// console.log(money);
//删除需要减掉
//解决没有选中的情况
console.log(sum);
// console.log(type(sum));
if(!sum==0){
// alert(123);
sum-=money;
//总金额：
$("span").text(sum);
}
//自己删除自己
Tr.remove();
}
});
//3.批量删除
$("#Del").click(function(){
//获取所有选中的除了全选
$(":input:checkbox:gt(0)").each(function(){
if($(this).prop("checked")===true){
// console.log(123);
//拿到行对象
var Tr =$(this).parent().parent();
//拿到总价格
var money =parseInt(Tr.children().eq(4).text());
if(!sum==0){
// alert(123);
sum-=money;
//总金额：
$("span").text(sum);
}
//自己删除自己
Tr.remove();
}
});
});
//4.加减数量
// console.log($(":button"));
$("table tr>td>button").click(function(){
// console.log($(this).html());
if($(this).html()==='+'){
//获取文本框的内容
// console.log($(this).prevAll().eq(0));
//数量
var quantity =$(this).prevAll().eq(0).val();
quantity++;
//赋值给文本框
$(this).prevAll().eq(0).prop("value",quantity);
// alert("加法");
//判断除非选中，否则不加
//拿到当前的复选框
//点击只能是一次
//行
var Tr =$(this).parent().parent();
//当前按钮
var btn =Tr.children().eq(0).children();
// console.log(btn);
//判断是否选中
if(btn.prop("checked") === true){
//获取单价
var price =parseInt($(this).parent().parent().children().eq(2).text());
// console.log(price);
//总价
sum+=price;
$("span").text(sum);
}
}else if($(this).html()==='-'){
var quantity =$(this).nextAll().eq(0).val();
// alert(quantity);
if(quantity==='1'){
// alert("商品数量不能小于1件");
//选择权交给用户
var answer =prompt("你确定需要删除吗？回答：“是”或“不是”");
if(answer==="是"){
//拿到行对象
var Tr =$(this).parent().parent();
//删除之前拿到它的总价格
var money =Tr.children().eq(4).text();
// alert(money);
//自己删除自己
//总价
sum-=money;
$("span").text(sum);
Tr.remove();
return false;
}else{
return false;
}
}else{
quantity--;
//行
var Tr =$(this).parent().parent();
//当前按钮
var btn =Tr.children().eq(0).children();
// console.log(btn);
//判断是否选中
if(btn.prop("checked") === true){
//获取单价
var price =parseInt($(this).parent().parent().children().eq(2).text());
// console.log(price);
//总价
sum-=price;
$("span").text(sum);
}
}
// console.log($(this).nextAll().eq(0).val());
// alert("减法");
//赋值给文本框
$(this).nextAll().eq(0).prop("value",quantity);
}
//单价
// console.log($(this).parent().parent().children().eq(2).text());
var price = $(this).parent().parent().children().eq(2).text();
//总价
var money = price*quantity;
$(this).parent().parent().children().eq(4).text(money);
});
//开始显示价格
// console.log($("table tr:gt(0)"));
//加载价格
//获取数量和单价
$("table tr:gt(0)").each(function(){
//单价
var price =$(this).children().eq(2).text();
//数量
var many =$(this).children().eq(3).children().eq(1).val();
// alert(many);
var money =price*many;
$(this).children().eq(4).text(money);
//总价
$("span").text(sum);
});
});
</script>
</head>
<body>
<table border="1px" cellspacing="" cellpadding="" width="100%">
<tr>
<th>全选<input type="checkbox" name="" id="all" value="" /></th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>巧克力</td>
<td>15</td>
<td><button type="button">-</button><input type="text" name="" id="" readonly="readonly" value="1" style="width: 14px;" /><button type="button">+</button></td>
<td></td>
<td><button type="button">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>牛奶</td>
<td>25</td>
<td><button type="button">-</button><input type="text" name="" id="" readonly="readonly" value="2" style="width: 14px;" /><button type="button">+</button></td>
<td></td>
<td><button type="button">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>爆米花</td>
<td>5</td>
<td><button type="button">-</button><input type="text" name="" id="" readonly="readonly" value="3" style="width: 14px;" /><button type="button">+</button></td>
<td></td>
<td><button type="button">删除</button></td>
</tr>
</table>
<button type="button" id="Del">批量删除</button>
<font size="5">金额：</font><span id="">
</span> <b>元</b>
</body>
</html>
扫一扫
58
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
