jQuery ajax
<!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>jQuery DOM编程</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="dom.js"></script>
<style type="text/css">
.other{
background-color: green;
font-size: 20px;
}
.mybtn{
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" class="other" id="btn_clone" value="clone(test)" myattr="myValue"/> <br/>
<b id="b1" style="background-color: gray;">hello</b>
<div id="div1" name="div1" style="background-color: orange;">div1</div>
<div id="div2" name="div2" style="background-color: yellow;">div2</div>
<input type="button" id="btn"
style="background-color: blue;color: white;" value="删除我">
<ul id="ul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<fieldset>
<legend>内部插入节点(插入子节点)</legend>
<input value="append" type="button" id="test_append"/>
<input value="appendTo" type="button" id="test_appendTo"/>
<input value="prepend" type="button" id="test_prepend"/>
<input value="prependTo" type="button" id="test_prependTo"/>
</fieldset>
<fieldset>
<legend>外部插入节点(插入兄弟节点)</legend>
<input value="after" type="button" id="test_after"/>
<input value="before" type="button" id="test_before"/>
<input value="insertAfter" type="button" id="test_insertAfter"/>
<input value="insertBefore" type="button" id="test_insertBefore"/>
</fieldset>
<fieldset>
<legend>jquery删除节点</legend>
<input type="button" id="test_removeNode" value="删除节点" />
<input type="button" id="test_emptyNode" value="删除子节点" />
</fieldset>
<fieldset>
<legend>jquery克隆节点,替换节点</legend>
<input type="button" id="test_clone" value="克隆节点" />
<input type="button" id="test_replace1" value="替换节点" />
<input type="button" id="test_replace2" value="替换节点" myattr="myValue"/>
</fieldset>
<fieldset>
<legend>jquery属性操作</legend>
<input type="button" id="test_getterAttr" value="获取属性值"/>
<input type="button" id="test_setterAttr" value="设置属性值"/>
</fieldset>
<fieldset>
<legend>jquery CSS操作</legend>
<input type="button" id="test_addClass" value="添加Css"/>
<input type="button" id="test_removeClass" value="删除Css"/>
<input type="button" id="test_togggleClass" value="轮换Css"/>
<input type="button" id="test_hasClass" value="判读是否存在Css"/>
</fieldset>
</body>
</html>
$(function(){
$("#test_append").click(function(){
$("#ul").append($("#div1"));
})
$("#test_appendTo").click(function(){
$("#ul").appendTo($("#div2"));
})
$("#test_prepend").click(function(){
$("#ul").prepend($("#div1"));
})
$("#test_prependTo").click(function(){
$("#ul").prependTo($("#div2"));
})
$("#test_after").click(function(){
$("#b1").after($("#div1")).css("background","green");
})
$("#test_before").click(function(){
$("#b1").before($("#div2")).css("background","orange");
})
$("#test_insertAfter").click(function(){
$("#b1").insertAfter($("#div1")).css("background","yellow");
})
$("#test_insertBefore").click(function(){
$("#b1").insertBefore($("#div2")).css("background","pink");
})
$("#test_emptyNode").click(function(){
$("#ul").remove();//第一种方式
/*$("#ul").empty();*///第二种方式
/*$("#ul").detach();*///第三种方式
})
$("#test_removeNode").click(function(){
var res=$("#btn").remove();
res.insertAfter($("#ul"));
})
$("#btn_clone").click(function(){
alert("请点击我!!");
})
$("#test_clone").click(function(){
var res=$("#btn_clone").clone();
res.insertAfter($("#ul"));
})
$("#test_replace1").click(function(){
$(":button").replaceWith("<b>SB</b>");
})
$("#test_replace2").click(function(){
$(":button").replaceAll("<b>SB</b>");
})
$("#test_getterAttr").click(function(){
console.debug($("div").attr("name"));
})
$("#test_setterAttr").click(function(){
/*
$("div").attr("name",function(){
console.debug(arguments);
})*/
$("div").attr("name",function(index,arrvalue){
console.debug(arguments);
return arrvalue+"fdasdfa";
});
})
$("#test_addClass").click(function(){
$(":button").addClass("other");
})
$("#test_removeClass").click(function(){
$(":button").removeClass("other");
})
$("#test_togggleClass").click(function(){
$(":button").toggleClass("other");
})
$("#test_hasClass").click(function(){
console.debug($(":button").hasClass("other"));
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqindex.js"></script>
</head>
<body>
<h1 style="background-color:pink;font-family:微软雅黑;font-size:bold;color:orange;text-align:center;">失去焦点后的效果</h1><br>
用户名:<input id="username" type="text"/>
<span id="kongge"></span>
</body>
</html>
$(function(){
$("#username").blur(function(){
var username=$(this).val();
$.get("/jqservlet?cmd=search&username="+username,function(data){
if(data.success){
$("#kongge").css("color","green").text(data.msg);
}else{
$("#kongge").css("color","red").text(data.msg);
}
},"json");
})
})
package ajax;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
public class ajaxresult {
private Boolean success=true;
private String msg;
public ajaxresult(String msg, Boolean success) {
this.success = success;
this.msg = msg;
}
}
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
@WebServlet("/jqservlet")
public class jqservlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
private List<String>list=Arrays.asList("will","lucy");
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/json;charset=UTF-8");
String cmd=req.getParameter("cmd");
if(cmd.equals("search")) {
search(req, resp);
}
}
protected void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username=req.getParameter("username");
Map<String, Object>jsonmap=new HashMap<>();
PrintWriter out=resp.getWriter();
if(list.contains(username)) {
jsonmap.put("success", false);
jsonmap.put("msg","对不起,"+ username +"已经注册过了!!");
}else {
jsonmap.put("success", true);
jsonmap.put("msg","恭喜你,"+ username +"成功注册!!");
}
out.print(JSON.toJSONString(jsonmap));
}
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="login.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<span id="kong"></span><br>
用户名:<input id="username" type="text"/><br>
密码:<input id="password" type="text"/><br>
<input id="tijiao" type="button" value="jQajax登录"/>
</body>
</html>
$(function(){
$("#tijiao").click(function(){
var username=$("#username").val();
var password=$("#password").val();
$.post("/jqlogin?username="+username+"&password="+password,{username:username,password:password},function(data){
if(data.success){
window.location.href="jqindex.html"
}else{
console.debug(data.success);
$("#kong").css("background-color","red").text(data.msg);
}
},"json");
})
})
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
@WebServlet("/jqlogin")
public class jqlogin extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String username=req.getParameter("username");
String password =req.getParameter("password");
ajaxresult ajax=null;
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/json;charset=UTF-8");
PrintWriter out=resp.getWriter();
if("admin".equals(username)&&"123456".equals(password)) {
ajax=new ajaxresult("",true);
}else {
ajax=new ajaxresult("用户名或者密码错误",false);
}
out.print(JSON.toJSONString(ajax));
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqlinkage.js"></script>
</head>
<body>
<select id="province">
<option value=-1>请选择</option>
</select>省
<select id="city">
<option value=-1>请选择</option>
</select>市
</body>
</html>
$(function(){
$.get("/jqlinkage?cmd=firstlist",function(data){
$.each(data,function(index,item){
console.debug(item);
$("#province").append("<option value="+ item.id +">"+item.name+"</option>");
})
},"json")
$("#province").change(function(){
var pid=$(this).val();
if(pid<0)
return;
var param={pid:pid};
$.post("/jqlinkage?cmd=secondlist&pid="+pid,param,function(data){
$("#city").text("<option value='-1'>请选择</option>");
$("#city").append("<option value='-1'>请选择</option>");
$.each(data,function(index,item){
$("#city").append("<option value="+ item.id +">"+item.name+"</option>");
})
},"json")
})
})
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import lei.City;
import lei.Province;
@WebServlet("/jqlinkage")
public class jqlinkage extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/json;charset=UTF-8");
String cmd=req.getParameter("cmd");
if(cmd.equals("firstlist")) {
firstlist(req, resp);
}else {
secondlist(req, resp);
}
}
protected void firstlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out=resp.getWriter();
List<Province>list=Province.getAllProvince();
out.print(JSON.toJSONString(list));
}
protected void secondlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out=resp.getWriter();
String pid=req.getParameter("pid");
List<City>list=City.getCityByProvinceId(Long.valueOf(pid));
out.print(JSON.toJSONString(list));
}
}
<!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">
<script type="text/javascript " src="jquery-1.11.2.min.js"></script>
<script type="text/javascript " src="checkbox.js"></script>
<title>checkbox</title>
</head>
<body>
请选择你的爱好:<br/>
<input type="checkbox" id="checkAll"/>全选/全不选<br/>
<div>
<input type="checkbox" name="hobby"/>打篮球
<input type="checkbox" name="hobby"/>踢足球
<input type="checkbox" name="hobby"/>上网
</div>
<div>
<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
<input type="button" onclick="checkAll(false)" value="全不选"/>
<input type="button" onclick="checkUnAll()" value="反选"/>
</div>
</body>
</html>
function checkAll(checked){
$(":input[name=hobby]").prop("checked",checked);
}
function checkUnAll(){
$(":input[name=hobby]").prop("checked",function(index,value){
return !value;
});
}
$(function(){
$("#checkAll").click(function(){
checkAll(this.checked);
})
})
<!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>用户新增</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="select.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<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>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="sel1AddTosel2('select1','select2')" value="-->"/><br/>
<input type="button" onclick="sel1AddAllTosel2('select1','select2')" value="==>"/><br/>
<input type="button" onclick="sel1AddTosel2('select2','select1')" value="<--"/><br/>
<input type="button" onclick="sel1AddAllTosel2('select2','select1')" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
</body>
</html>
function sel1AddAllTosel2(init,target){
$("#"+init+" option").appendTo($("#"+target));
}
function sel1AddTosel2(init,target){
$("#"+init+" option:selected").appendTo($("#"+target));
}
<!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>用户新增</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="user.js"></script>
</head>
<body>
<form name="userForm">
<center>
用户录入<br/>
用户名:<input id="username" name="username" type="text" size=15/>
E-mail:<input id="email" name="email" type="text" size=15/>
电话:<input id="tel" name="tel" type="text" size=15/>
<input type="button" value="添加" id="btn_submit"/>
<input type="button" value="删除所有" id="btn_removeAll"/>
</center>
</form>
<hr/>
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTbody">
<tr>
<td>乔峰</td>
<td>[email protected]</td>
<td>18212345678</td>
<td><a href='#'>删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
$(function(){
$("#btn_submit").click(function(){
var username=$("input[name=username]").val();
var email=$("input[name=email]").val();
var tel=$("input[name=tel]").val();
var id=new Date().getTime();
var tr="<tr id="+id+"><td>"+ username +"</td><td>"+ email +"</td><td>"+ tel +"</td><td><a href='javascript:deleteuser("+id+")'>删除</a></td></tr>";
$("#userTbody").append(tr);
})
$("#btn_removeAll").click(function(){
$("#userTbody").empty();
})
})
function deleteuser(id){
$("#"+id).remove();
}
<!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>用户新增</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="item.js"></script>
</head>
<body>
<input type="button" id="addMoreItem" value="添加更多"/>
<table border="1" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody id="productTbody">
<tr>
<td>
<select>
<option>电脑</option>
<option>平板</option>
<option>手机</option>
</select>
</td>
<td><input type="text" name="price"/></td>
<td><input type="text" name="number"/></td>
<td id="total">0</td>
</tr>
</tbody>
</table>
</body>
</html>
$(function(){
$("#addMoreItem").click(function(){
var copy=$("#productTbody tr:first").clone();
copy.find("input[name=price]").val("");
copy.find("input[name=number]").val("");
$("#total").text("");
copy.appendTo($("#productTbody"));
})
$("input[name=price],input[name=number]").change(function(){
var price=$("input[name=price]").val();
var number=$("input[name=number]").val();
if(price&&number){
$("#total").text(price*number);
}
})
})