目录
创建元素/插入元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="gname">
<input type="text" id="gprice">
<input type="text" id="gcount">
<button onclick="btnAdd()">加入到购物车</button>
</p>
<table border="1" width="600">
<thead>
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
<script src="jquery-1.11.3.js"></script>
<script>
function btnAdd(){
//1.获取三个文本框的值
var gname = $("#gname").val();
var gprice = $("#gprice").val();
var gcount = $("#gcount").val();
//2.创建两个按钮1）删除按钮
var $btnDelete = $("<button>删除</button>");
//为$btnDelete绑定click 事件
$btnDelete.click(function(){
// 删除父元素的父元素
$(this).parent().parent().remove();
});
// 创建修改按钮
var $btnUpdate = $("<button>修改</button>");
//为$btnUpdate绑定click事件
$btnUpdate.click(function(){
//通过修改按钮获取购买数量的td(获取父元素的上一个元素)
var $tdCount = $(this).parent().prev();
//判断当前按钮的文字是修改还是确定
if($(this).html() == "修改"){
//执行修改操作
$(this).html("确定");
//创建 俩按钮一个文本框
var $btnMinus = $("<button>-</button>");
var $txtCount = $("<input type='text'>");
$txtCount.val($tdCount.text());
var $btnAdd = $("<button>+</button>");
//为$btnMinus绑定click 事件
$btnMinus.click(function(){
//让当前元素后面的文本框的值-1
var txtCount = $(this).next();
txtCount.val(txtCount.val()-1);
});
//为$btnAdd绑定click事件
$btnAdd.click(function(){
var txtCount=$(this).prev();
txtCount.val(Number(txtCount.val())+1);
});
// 清空$tdCount中的内容
$tdCount.empty();
$tdCount.append($btnMinus).append($txtCount).append($btnAdd);
}else{
//执行确定操作
$(this).html("修改");
// 获取$tdCount中的值
var value = $tdCount.children("input").val();
$tdCount.html(value);
}
});
//3.创建4个td,分别追加值
var $tdName=$("<td>"+gname+"</td>");
var $tdPrice=$("<td>"+gprice+"</td>");
var $tdCount=$("<td>"+gcount+"</td>");
var $tdOper=$("<td></td>");
$tdOper.append($btnDelete);
$tdOper.append($btnUpdate);
//4.创建1个tr,追加td
var $tr = $("<tr></tr>");
$tr.append($tdName).append($tdPrice).append($tdCount).append($tdOper);
//5.将tr追加到tbody中
$("#content").append($tr);
}
</script>
</body>
</html>jQuery事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<form action="/" method="post">
<p>
用户账号
<input type="text" id="uname">
<span></span>
</p>
<p>
用户密码
<input type="password" id="upwd">
<span></span>
</p>
<p>
重复密码
<input type="password" id="cpwd">
<span></span>
</p>
<p>
<input type="submit">
</p>
</form>
<script src="jquery-1.11.3.js"></script>
<script>
// 检查用户名称是否在6-18位
// 返回值：true,表示通过,false，表示未通过
function checkUname(){
var len = $("#uname").val().length;
if (len>=6&&len<=18){
$("#uname").next().text("通过");
return true;
}else{
$("#uname").next().text("用户名必须6-18位");
return false;
}
}
// 判断密码是否符合规则
function checkUpwd(){
var len = $("#upwd").val().length;
if(len>=6){
$("#upwd").next().text("通过");
return true;
}else{
$("#upwd").next().text("密码必须6位以上");
return false;
}
}
// 判断两次密码是否一致
function checkCpwd(){
var upwd = $("#upwd").val();
var cpwd = $("#cpwd").val();
if(upwd==cpwd){
$("#cpwd").next().text("通过");
return true;
}else{
$("#cpwd").next().text("两次密码必须一致")
return false;
}
}
// DOM数加载完成后去绑定事件
$(function(){
// 为#uname绑定blur事件
$("#uname").blur(checkUname);
$("#upwd").blur(checkUpwd);
$("#cpwd").blur(checkCpwd);
$("form").submit(function(){
return checkUname() && checkUpwd() && checkCpwd()
})
});
</script>
</body>
</html>