jquery
效果
1 替换 和 克隆
$(新节点).replaceAll(被替换的节点);
$(被替换的节点).replaceWith(新节点);
$(被复制的标签).clone() 类似 : ctrl + c
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<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">AAAAp>
div>
<p id="myp">BBBB<a href="#">CCCCa>p>
<input type="button" id="btn1" value="替换"/>
<input type="button" id="btn2" value="替换并克隆"/>
body>
html>
2 案例3: 效果
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
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">
<select id="first" name="first" size="10" multiple="multiple" class="td3" >
<option value="选项1">选项1option>
<option value="选项2">选项2option>
<option value="选项3">选项3option>
<option value="选项4">选项4option>
<option value="选项5">选项5option>
<option value="选项6">选项6option>
<option value="选项7">选项7option>
<option value="选项8">选项8option>
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">选项9option>
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 + "
"); // js 将内容显示到浏览器中
document.write(studentJson["name"] + " === " + studentJson["age"] + "
");
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 + "
");
}
document.write("
");
// 遍历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 案例实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<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 = "";
for(var i=0; i<china.length; i++) {
var provinceJson = china[i];
// console.info(provinceJson.p_id + " ==== " + provinceJson.p_name);
provinceStr += " + provinceJson.p_name + "";
}
$("#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 = "";
for(var j=0; j<cityJsonArr.length; j++) {
var cityJson = cityJsonArr[j];
console.info(cityJson.c_id + " ****** " + cityJson.c_name);
cityStr += " + cityJson.c_name + "";
}
$("#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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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 = ""
for(var i=0; i<data.length; i++) {
var categoryJson = data[i];
categoryStr += " + categoryJson.cname + ""
}
// 将组装好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 = ""
for(var i=0; i<data.length; i++) {
var categoryJson = data[i];
categoryStr += " + categoryJson.cname + ""
}
// 将组装好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 = "";
for(var i=0; i<data.length; i++) {
var provinceJson = data[i];
proviceStr += " + provinceJson.name + "";
}
$("select[name='province']").html(proviceStr);
}
});
// 3 当省发生变化时,加载对应的市级信息
// 3.1 给省的select绑定变化事件
$("select[name='province']").change(function(){
// 3.4 只保留区县的第一个
// $("select[name='district']").html(""); // 能够看懂
$("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 = "";
for(var i=0; i<data.length; i++) {
var cityJson = data[i];
cityStr += " + cityJson.name + "";
}
$("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 = "";
for(var i=0; i<data.length; i++) {
var districtJson = data[i];
districtStr += " + districtJson.name + "";
}
$("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>