效果
1 替换 和 克隆
$(新节点).replaceAll(被替换的节点);
$(被替换的节点).replaceWith(新节点);
$(被复制的标签).clone() 类似 : ctrl + c
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
padding : 10px;
background-color : blue;
}
p {
background-color : red;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
// 需求1:当点击btn1时,将外面的p标签 替换 里面的p标签
$("#btn1").click(function(){
// $(被替换的节点).replaceWith(新节点);
$("#mydiv_p").replaceWith($("#myp"));
// 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
// 理想效果: 先复制,再粘贴
});
// 需求2:当点击btn2时,将外面的p标签 替换且克隆 里面的p标签
$("#btn2").click(function(){
// $(被替换的节点).replaceWith(新节点);
// 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
// 理想效果: 先复制,再粘贴
// 克隆: $(被复制的标签).clone() 类似 : ctrl + c
$("#mydiv_p").replaceWith($("#myp").clone());
});
});
</script>
</head>
<body>
<div id="mydiv">
<p id="mydiv_p">AAAA</p>
</div>
<p id="myp">BBBB<a href="#">CCCC</a></p>
<input type="button" id="btn1" value="替换"/>
<input type="button" id="btn2" value="替换并克隆"/>
</body>
</html>
2 案例3: 效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!-- BODY {
font-family: "宋体";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font_size: 12px;
}
.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}
.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}
.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}
.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg {
font-size: 12px;
}
.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "宋体";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
<script src="../js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 选中右移
$("#add").click(function(){
$("#second").append($("#first option:selected"));
});
// 全部右移
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
});
</script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:250px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select id="first" name="first" size="10" multiple="multiple" class="td3" >
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select id="second" name="second" size="10" multiple="multiple" class="td3" >
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
3 案例4: 二级联动
3.1 json
{ "firstName":"John" , "lastName":"Doe" }
var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
];
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
var studentJson = {"name":"张三", "age":"18"};
document.write(studentJson.name + " === " + studentJson.age + "<br/>"); // js 将内容显示到浏览器中
document.write(studentJson["name"] + " === " + studentJson["age"] + "<hr/>");
var studentJsonArr = [
{"name":"张三", "age":"13"},
{"name":"李四", "age":"24"},
{"name":"王五", "age":"25"},
{"name":"赵六", "age":"26"}
];
for(var i=0; i<studentJsonArr.length; i++) {
var studentJson = studentJsonArr[i];
document.write(studentJson.name + " ********* " + studentJson.age + "<br/>");
}
document.write("<hr/>");
// 遍历json
$(studentJson).each(function(){
// console.info(this.name + " ==== "+ this.age); // 赵六 ==== 26
});
// 遍历数组
$(studentJsonArr).each(function(){
//console.info(this);
var studentJson = this;
console.info(studentJson.name + " ====================== "+ studentJson.age);
});
</script>
</head>
<body>
</body>
</html>
3.2 案例实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="cities.js" ></script>
<script type="text/javascript">
$(function(){
// 1 加载省级信息
var provinceStr = "<option value='none'>--请选择省--</option>";
for(var i=0; i<china.length; i++) {
var provinceJson = china[i];
// console.info(provinceJson.p_id + " ==== " + provinceJson.p_name);
provinceStr += "<option value='" + provinceJson.p_id + "'>" + provinceJson.p_name + "</option>";
}
$("#province").html(provinceStr);
// 2 当省发生变化加载对应的市级信息
$("#province").change(function(){
// 2.1 获取选择的省的编号
var province_pid = this.value; // this指绑定事件的标签对象
// console.info("省的编号:" + province_pid);
// 2.2 根据省的编号 获取对应的市级信息
for(var i=0; i<china.length; i++) {
var provinceJson = china[i];
// console.info(provinceJson.p_id + " ======" + provinceJson.p_name);
// 根据省的编号 获取对应的市级信息
if(provinceJson.p_id == province_pid) {
var cityJsonArr = provinceJson.cities;
var cityStr = "<option value='none'>--请选择市--</option>";
for(var j=0; j<cityJsonArr.length; j++) {
var cityJson = cityJsonArr[j];
console.info(cityJson.c_id + " ****** " + cityJson.c_name);
cityStr += "<option value='" + cityJson.c_id + "'>" + cityJson.c_name + "</option>";
}
$("#city").html(cityStr);
}
}
});
});
</script>
</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>
4 ajax(CV)
4.1 what
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX = 异步 JavaScript和XML，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。
本质: 就是多线程
4.2 how
4.2.1 传统js(了解)
套路:
1. 创建对象
2. 建立连接, 发送数据
3. 处理响应
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script>
window.onload = function () {
// 需求1 校验用户名是否被占用
// 1.1 给用户名输入框绑定 键盘弹起事件
document.getElementById("username").onkeyup = function () {
var usernameVal = this.value;
// 1.1.1 创建干活的对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 1.1.2 建立连接 发送请求
xmlhttp.open("GET", "/web17/CheckUsernameServlet?username=" + usernameVal, true);
xmlhttp.send();
// 1.1.3 处理响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//console.info(xmlhttp.responseText);
document.getElementById("username_msg").innerHTML = xmlhttp.responseText;
}
}
}
// 需求2 校验昵称是否被占用
// 1.1 给用户名输入框绑定 键盘弹起事件
document.getElementById("nickname").onkeyup = function () {
var nicknameVal = this.value;
console.info(nicknameVal);
// 1.1.1 创建干活的对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 1.1.2 建立连接 发送请求
xmlhttp.open("POST","/web17/CheckNicknameServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nickname=" + nicknameVal);
// 1.1.3 处理响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//console.info(xmlhttp.responseText);
document.getElementById("nickname_msg").innerHTML = xmlhttp.responseText;
}
}
}
}
</script>
</head>
<body>
<form action="/web17/RegisterServlet" method="post">
<table>
<tr>
<td></td>
<td>${msg}</td>
<td></td>
</tr>
<tr>
<td>用户名(get)</td>
<td><input type="text" name="username" id="username"/></td>
<td id="username_msg"></td>
</tr>
<tr>
<td>昵称(post)</td>
<td><input type="text" name="nickname" id="nickname"/></td>
<td id="nickname_msg"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city"/></td>
<td id="city_msg"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"/></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
4.2.2 jquery的ajax(掌握)
$.ajax({
type: "POST", // 提交方式: get? post?
url: "some.php", // 访问路径
data: "name=John&location=Boston", // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
alert( "Data Saved: " + data );
}
});
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/web17/js/jquery-1.11.0.min.js"></script>
<script>
// 页面加载完成后执行
$(function(){
// 1 校验用户名是否被占用
$("#username").bind("keyup blur", function(){
var usernameVal = this.value;
if(usernameVal!=null && usernameVal.trim().length>0) {
$.ajax({
type: "get", // 提交方式: get? post?
url: "/web17/CheckUsernameServlet", // 访问路径
data: "username=" + usernameVal, // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
$("#username_msg").html(data);
}
});
}
});
// 2 校验昵称是否被占用
$("#nickname").bind("keyup blur", function(){
var nicknameVal = this.value;
if(nicknameVal!=null && nicknameVal.trim().length>0) {
$.ajax({
type: "post", // 提交方式: get? post?
url: "/web17/CheckNicknameServlet", // 访问路径
data: "nickname=" + nicknameVal, // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
$("#nickname_msg").html(data);
}
});
}
});
});
</script>
</head>
<body>
<form action="/web17/RegisterServlet" method="post">
<table>
<tr>
<td></td>
<td>${msg}</td>
<td></td>
</tr>
<tr>
<td>用户名(get)</td>
<td><input type="text" name="username" id="username"/></td>
<td id="username_msg"></td>
</tr>
<tr>
<td>昵称(post)</td>
<td><input type="text" name="nickname" id="nickname"/></td>
<td id="nickname_msg"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city"/></td>
<td id="city_msg"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"/></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
4.2.3 jquery的ajax简化版(掌握)
$.get("/web17/helloServlet", // 访问的路径
{ name: "John", time: "2pm" }, // 携带的数据
function(data){ // 处理响应函数
alert("Data Loaded: " + data);
}
);
$.post("/web17/helloServlet", // 访问的路径
{ name: "John", time: "2pm" }, // 携带的数据
function(data){ // 处理响应函数
alert("Data Loaded: " + data);
}
);
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/web17/js/jquery-1.11.0.min.js"></script>
<script>
// 页面加载完成后执行
$(function(){
// 1 校验用户名是否被占用
$("#username").bind("keyup blur", function(){
var usernameVal = this.value;
if(usernameVal!=null && usernameVal.trim().length>0) {
$.get("/web17/CheckUsernameServlet", // 访问的路径
{ "username" : usernameVal }, // 携带的数据
function(data){ // 处理响应函数
$("#username_msg").html(data);
}
);
}
});
// 2 校验昵称是否被占用
$("#nickname").bind("keyup blur", function(){
var nicknameVal = this.value;
if(nicknameVal!=null && nicknameVal.trim().length>0) {
$.post("/web17/CheckNicknameServlet", // 访问的路径
{ "nickname" : nicknameVal }, // 携带的数据
function(data){ // 处理响应函数
$("#nickname_msg").html(data);
}
);
}
});
});
</script>
</head>
<body>
<form action="/web17/RegisterServlet" method="post">
<table>
<tr>
<td></td>
<td>${msg}</td>
<td></td>
</tr>
<tr>
<td>用户名(get)</td>
<td><input type="text" name="username" id="username"/></td>
<td id="username_msg"></td>
</tr>
<tr>
<td>昵称(post)</td>
<td><input type="text" name="nickname" id="nickname"/></td>
<td id="nickname_msg"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city"/></td>
<td id="city_msg"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"/></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
4.2.4 显示数据库的类别信息
4.2.4.1 效果
4.2.4.2 分析
使用ajax进行局部刷新
4.2.4.3 将对象转成json字符串(重点)
导包
public String doSomething( Object arg1, ... ) {
Person p = ...load a person...;
// 创建对象
JSONSerializer serializer = new JSONSerializer();
// 干活
return serializer.serialize( p );
}
{
"class": "Person",
"name": "William Shakespeare",
"birthday": -12802392000000,
"nickname": "Bill"
}
分类代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加商品</title>
<script src="/web17/js/jquery-1.11.0.min.js"></script>
<script>
// 页面加载完成后执行
$(function(){
// 1 使用ajax获取分类信息 且 显示
$.ajax({
type: "POST", // 提交方式: get? post?
url: "/web17/FindCategoryListServlet", // 访问路径
success: function(data){ // 服务器返回给浏览器的数据
console.info(data);
var categoryStr = "<option value=''>---请选择类别---</option>"
for(var i=0; i<data.length; i++) {
var categoryJson = data[i];
categoryStr += "<option value='" + categoryJson.cid + "'>" + categoryJson.cname + "</option>"
}
// 将组装好option追加分类的select中
$("select[name='category']").html(categoryStr);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>商品名称</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>商品分类</td>
<td>
<select name="category"></select>
</td>
</tr>
</table>
</form>
</body>
</html>
4.2.5 三级联动
4.2.5.1 数据库表数据关系(自关联)
-- 选择省级信息 pid=-1 pid ===> parent id ===> 父级编号
select * from province_city_district where pid=-1;
-- 选择对应省的市级信息: 河北省的市级信息 编号: 13
select * from province_city_district where pid=13;
-- 选择对应市的区县级信息: 石家庄的区县级信息 编号: 1301
select * from province_city_district where pid=1301;
4.2.5.2 上课代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加商品</title>
<script src="/web17/js/jquery-1.11.0.min.js"></script>
<script>
// 页面加载完成后执行
$(function(){
// 1 使用ajax获取分类信息 且 显示
$.ajax({
type: "POST", // 提交方式: get? post?
url: "/web17/FindCategoryListServlet", // 访问路径
success: function(data){ // 服务器返回给浏览器的数据
// console.info(data);
var categoryStr = "<option value=''>---请选择类别---</option>"
for(var i=0; i<data.length; i++) {
var categoryJson = data[i];
categoryStr += "<option value='" + categoryJson.cid + "'>" + categoryJson.cname + "</option>"
}
// 将组装好option追加分类的select中
$("select[name='category']").html(categoryStr);
}
});
// 2 初始化省级信息
$.ajax({
type: "POST", // 提交方式: get? post?
url: "/web17/FindPCDListByPIDServlet", // 访问路径
data: {"pid" : "-1"}, // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
// console.info(data);
var proviceStr = "<option value=''>----请选择省----</option>";
for(var i=0; i<data.length; i++) {
var provinceJson = data[i];
proviceStr += "<option value='" + provinceJson.id + "'>" + provinceJson.name + "</option>";
}
$("select[name='province']").html(proviceStr);
}
});
// 3 当省发生变化时,加载对应的市级信息
// 3.1 给省的select绑定变化事件
$("select[name='province']").change(function(){
// 3.4 只保留区县的第一个
// $("select[name='district']").html("<option value=''>---请选择区县---</option>"); // 能够看懂
$("select[name='district']")[0].length = 1; // 只保留对应select的第一个option
// 3.2 获取选择省的编号
var province_id = this.value; // this 指绑定事件的对象
// 3.3 发送ajax请求 根据父级编号 查询子区域信息
$.ajax({
type: "POST", // 提交方式: get? post?
url: "/web17/FindPCDListByPIDServlet", // 访问路径
data: {"pid" : province_id}, // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
// console.info(data);
var cityStr = "<option value=''>----请选择市----</option>";
for(var i=0; i<data.length; i++) {
var cityJson = data[i];
cityStr += "<option value='" + cityJson.id + "'>" + cityJson.name + "</option>";
}
$("select[name='city']").html(cityStr);
}
});
});
// 4 当市发生变化时,加载对应的区县级信息
// 4.1 给市的select绑定变化事件
$("select[name='city']").change(function(){
// 3.2 获取选择市的编号
var city_id = this.value; // this 指绑定事件的对象
// 3.3 发送ajax请求 根据父级编号 查询子区域信息
$.ajax({
type: "POST", // 提交方式: get? post?
url: "/web17/FindPCDListByPIDServlet", // 访问路径
data: {"pid" : city_id}, // 浏览器给服务器的数据
success: function(data){ // 服务器返回给浏览器的数据
// console.info(data);
var districtStr = "<option value=''>----请选择区县----</option>";
for(var i=0; i<data.length; i++) {
var districtJson = data[i];
districtStr += "<option value='" + districtJson.id + "'>" + districtJson.name + "</option>";
}
$("select[name='district']").html(districtStr);
}
});
});
});
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>商品名称</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>商品分类</td>
<td>
<select name="category"></select>
</td>
</tr>
<tr>
<td>产地</td>
<td>
<select name="province">
<option value="">----请选择省----</option>
</select>
<select name="city">
<option value="">----请选择市----</option>
</select>
<select name="district">
<option value="">----请选择区----</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
