package com.atguigu.demo;
public class Demo {
/**
* Servlet
* * 为什么学Servlet
* html servlet dao-jdbc(sql:select * from users where username=? and pwd=?)
* * Servlet简介
* * Servlet = java + html(url)
* * Server Applet
* * 狭义：javax.servlet.Servlet接口及其子接口
广义：指实现了Servlet接口的实现类
* Servlet工作原理（执行流程）
* 请求
* web.xml中url
* servlet-name -> servlet-class -> 找到指定Servlet
* 默认执行service()，处理请求，做出响应。
* Servlet生命周期：从创建到消亡的过程
* 构造器
* 执行次数：在整个生命周期中执行一次。
* 执行时机：第一次接收请求时执行
* init()：初始化
* 执行次数：在整个生命周期中执行一次。
* 执行时机：第一次接收请求时执行
* service()
* 执行次数：在整个生命周期中执行多次。
* 执行时机：每次接收请求时执行
* destroy()
* 执行次数：在整个生命周期中执行一次。
* 执行时机：关闭服务器时执行
* ServeltConfig与ServletContext区别
* ServeltConfig代表了当前Servlet的配置信息，它有以下三个作用：
* 获取当前Servlet的名称
* 获取当前Servlet的初始化参数（只能是当前的Servlet才能获取， 其他Servlet不能得到）
* 获取ServletContext对象
* ServletContext
* 获取当前Web应用的初始化参数（web.xml中注册的所有的Servlet 都可以获取）
* 获取服务器端资源的真实路径（文件的上传下载时需要用到）
* 它是一个域对象（后面讲解）
* 最终创建Servlet方式
* 继承HttpServlet类,也称之为Servlet
* EndServlet : HttpServlet : GenericServlet : Servlet
* HttpServlet
1. override service()
HttpServletRequest request = (HttpServletRequest)req;
HttpServletResponse response = (HttpServletResponse)res;
2. overload service()
String method = request.getMethod();
if(method.eq("GET")){
doGet();
}else if(method.eq("POST")){
doPost();
}
* GenericServlet
1. getServletConfig() getServletContext()
2. abstract service()
}
xml解析
package com.atguigu.demo;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import com.atguigu.bean.Student;
public class XpathDemo {
public static void main(String[] args) throws DocumentException {
SAXReader reader = new SAXReader();
Document document = reader.read("students.xml");
//调用selectSingleNode
Element element = (Element)document.selectSingleNode("/students/student[@id='3']");
String id = element.attributeValue("id");
String name = element.elementText("name");
String age = element.elementText("age");
Student stu = new Student(id, name, age);
System.out.println(stu);
}
}
package com.atguigu.demo;
import java.util.List;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import com.atguigu.bean.Student;
public class Demo {
/**
* XML解析
* * XML简介：eXtensible Markup Language(可扩展标记语言)
* * XML与HTML区别
* * XML没有预定义标签，均为自定义标签，HTML相反
* XML用来传输和存储数据，HTML用来显示数据
*
*/
public static void main(String[] args) {
try {
//创建解析器
SAXReader reader = new SAXReader();
//将xml解析成Document对象
Document document = reader.read("students.xml");
//通过Document对象获取根元素
Element rootElement = document.getRootElement();
//通过根元素，获取所有的子元素
List<Element> elements = rootElement.elements();
for (Element element : elements) {
//通过attributeValue()获取属性值
String id = element.attributeValue("id");
//通过elementText()获取元素的文本值
String name = element.elementText("name");
String age = element.elementText("age");
Student stu = new Student(id, name, age);
System.out.println(stu);
}
} catch (DocumentException e) {
e.printStackTrace();
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单对象属性过滤选择器</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
$("input:enabled").val("New Value");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$("input:disabled").val("New Value Too");
});
//3.获取多选框选中的个数
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
//4.获取多选框选中的内容
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
//使用$.each()迭代数组
$cc.each(function(){
alert($(this).val());
// alert(this.value);
});
// for(var i=0;i<$cc.length;i++){
// alert($cc[i].value);
// }
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
$ss.each(function(){
//DOM对象：this jQuery对象：$(this)
alert(this.value);
});
});
})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" size="5">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器其他练习</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
function anmateIt(){
$("#mover").slideToggle(1000, anmateIt);
}
anmateIt();
});
$(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择class不为 one 的所有 div 元素
$("#btn2").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//3.选择索引值为等于 3 的 div 元素
$("#btn3").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
$(":animated").css("background", "#bbffaa");
});
//5.选择含有子元素的div元素
$("#btn5").click(function(){
$("div:parent").css("background", "#bbffaa");
});
//6.选择所有不可见的 div 元素
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background", "#bbffaa");
});
//7.选取 属性title值等于'test'的div元素
$("#btn7").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//8.选取每个class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
$("div.one :first-child").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn2" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn3" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn4" />
<input type="button" value="选择含有子元素的div元素" id="btn5" />
<input type="button" value="选择所有不可见的 div 元素" id="btn6" />
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn7" />
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn8"/>
<h3>选择器练习.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
* 基本选择器（5）
* id选择器：$("#id")
* 类选择器：$(".class")
* 标签选择器：$("p")
* 所有（全局）选择器：$("*")
* 并集选择器：$("#id,.class,p")
* 层次选择器（4）
* 后代选择器:$("E F")
* 子代选择器:$("E>F")
* 相邻选择器:$("E+F")
* 同辈选择器:$("E~F")
*/
$(function(){
//1.选择 id 为 one 的元素
$("#btn1").click(function(){
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function(){
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br>
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM查询</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
var $div = $("div");
var $body = $("body");
//(1)eq()选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$div.eq(3).css("background-color","#fba");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
$div.first().css("background-color","#fba");
});
//(3)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
$div.filter(":even").css("background-color","#fba");
});
//(4)has()选择div中包含.mini的
$("#btn6").click(function(){
$div.has(".mini").css("background-color","#fba");
});
//(5)children()在body中选择所有class为one的div子元素:$("body>div.one")
$("#btn8").click(function(){
$body.children("div.one").css("background-color","#fba");
});
//(6)find()在body中选择所有class为mini的div后代元素
$("#btn9").click(function(){
$body.find("div.mini").css("background-color","#fba");
});
//(7)next() #one的下一个div
$("#btn10").click(function(){
$("#one").next("div").css("background-color","#fba");
});
//(8)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#fba");
});
//(9)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
$("span").add("#two").css("background-color","#fba");
});
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM增删改</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
DOM操作，增删改
增
内后
append()
appendTo()
内前
prepend()
prependTo()
外后
after()
外前
before()
删
empty():掏空
remove():删除
改
replaceWith()
*/
$(function(){
var $li = $("<li>广州</li>");
$("#btn01").click(function(){
//在#city中添加广州节点 [append()]
$("#city").prepend($li);
// $li.appendTo($("#city"));
// $("#city").append($li);
});
$("#btn02").click(function(){
//创建一个"广州"节点,添加到#city下[appendTo()]
});
$("#btn03").click(function(){
//在#city中添加广州节点[prepend()]
});
$("#btn04").click(function(){
//创建一个"广州"节点,添加到#city下[prependTo()]
});
$("#btn05").click(function(){
//在#bj前面插入"广州"节点[before()]
$li.insertBefore($("#bj"));
// $("#bj").before($li);
// $("#bj").after($li);
});
$("#btn06").click(function(){
//将"广州"节点插入到#bj前面[insertBefore()]
});
$("#btn07").click(function(){
//在#bj后面插入"广州"节点[after()]
});
$("#btn08").click(function(){
//将"广州"节点插入到#bj后面[insertAfter()]
});
$("#btn09").click(function(){
//使用"广州"节点替换#bj节点[replaceWith()]
$li.replaceAll($("#bj"));
// $("#bj").replaceWith($li);
});
$("#btn10").click(function(){
//使用"广州"节点替换#bj节点[replaceAll()]
});
$("#btn11").click(function(){
//删除#rl节点[remove()]
$("#rl").empty();
// $("#rl").remove();
});
$("#btn12").click(function(){
//掏空#city节点[empty()]
});
$("#btn13").click(function(){
//读取#city内的HTML代码
var htmlText = $("#city").html();
alert(htmlText);
});
$("#btn14").click(function(){
//设置#bj内的HTML代码
$("#bj").html("abcde");
/*
innerHTML html() <div>dsf</div><p>sdf</p>
innerText text()
value val() <input value="" />
*/
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">在#city中添加广州节点[append()]</button></div>
<div><button id="btn02">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
<div><button id="btn03">创建一个"广州"节点,添加到#city下[prepend()]</button></div>
<div><button id="btn04">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
<div><button id="btn05">在#bj前面插入"广州"节点[before()]</button></div>
<div><button id="btn06">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
<div><button id="btn07">在#bj后面插入"广州"节点[after()]</button></div>
<div><button id="btn08">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
<div><button id="btn09">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
<div><button id="btn10">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
<div><button id="btn11">删除#rl节点[remove()]</button></div>
<div><button id="btn12">掏空#city节点[empty()]</button></div>
<div><button id="btn13">读取#city内的HTML代码</button></div>
<div><button id="btn14">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
* window.onload与$(function(){})区别
* 前者当前文档完全加载后执行，后者是当前文档绘制成功后执行。
* 前者只能书写一次，后者可以书写多次。
* 前者语法只有一种，后者有两种语法。
* $(function(){}):当前文档绘制成功后执行。
* window.onload:当前文档完全加载后执行。
*/
window.onload = function(){
alert("onload1");
}
window.onload = function(){
alert("onload2");
}
$(function(){
alert("jquery1");
});
$(function(){
alert("jquery2");
});
$(document).ready(function(){
alert("3")
});
</script>
</head>
<body>
<img src="img/boss.jpg" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选1(空白)</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
功能需求：
①全选按钮：点击后所有爱好都选中
②全不选按钮：点击后所有爱好都不选中
③反选按钮：点击后所有爱好选中状态反转
④提交按钮：点击后依次弹出选中内容
* checked属性值
* DOM取值:false|true
* jQuery取值:undefined|checked
*/
$(function(){
//①全选按钮：点击后所有爱好都选中
$("#checkedAllBtn").click(function(){
$(":checkbox").attr("checked",true);
});
//②全不选按钮：点击后所有爱好都不选中
$("#checkedNoBtn").click(function(){
$(":checkbox").attr("checked",false);
});
//③反选按钮：点击后所有爱好选中状态反转
$("#checkedRevBtn").click(function(){
var $cb = $(":checkbox");
$cb.each(function(){
//取反
this.checked = !this.checked;
// var cd = this.checked;
// var cd = $(this).attr("checked");
// alert(cd);
// if(cd == true){
// this.checked = false;
// }else{
// this.checked = true;
// }
});
});
//④提交按钮：点击后依次弹出选中内容
$("#sendBtn").click(function(){
$(":checkbox:checked").each(function(){
alert($(this).val());
// alert(this.value);
});
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是：
<br />
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选2(空白)</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
功能需求：
①全选框：点击后让所有爱好的选中状态和自己一致
②爱好框：点满后将全选框选中，否则取消选中
*/
$(function(){
//①全选框：点击后让所有爱好的选中状态和自己一致
$("#checkedAllBox").click(function(){
var ck = this.checked;
$("input[name='items']").attr("checked",ck);
});
//②爱好框：点满后将全选框选中，否则取消选中
$("input[name='items']").click(function(){
//判断爱好框是否全部选中（爱好框个数==选中的爱好框个数）
var alen = $("input[name='items']").length;
//获取选中的爱好框个数
var clen = $("input[name='items']:checked").length;
if(alen == clen){
$("#checkedAllBox").attr("checked",true);
}else{
$("#checkedAllBox").attr("checked",false);
}
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是：<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器(空白)</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//使单选下拉框的'选择3号'被选中
$(":button:first").click(function(){
$("#single").val(["sel03"]);
});
//使多选下拉框选中的'选择2号'和'选择4号'被选中
$(":button:eq(1)").click(function(){
$("#multiple").val(["mul02","mul04"]);
});
//使多选框的'多选2'和'多选4'被选中
$(":button:eq(2)").click(function(){
$(":checkbox").val(["check2","check4"]);
});
//使单选框的'单选2'被选中
$(":button:eq(3)").click(function(){
$(":radio").val(["radio2"]);
});
//打印已经被选中的值
$(":button:last").click(function(){
$("select option:selected,:checked").each(function(){
alert(this.value);
});
});
});
</script>
</head>
<body>
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single">
<option value="sel01">选择1号</option>
<option value="sel02">选择2号</option>
<option value="sel03">选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option value="mul01" selected="selected">选择1号</option>
<option value="mul02">选择2号</option>
<option value="mul03">选择3号</option>
<option value="mul04">选择4号</option>
<option value="mul05" selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多选1
<input type="checkbox" name="c" value="check2"/> 多选2
<input type="checkbox" name="c" value="check3"/> 多选3
<input type="checkbox" name="c" value="check4"/> 多选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//实现删除功能
$("#employeeTable").delegate("a","click",function(){
$(this).parents("tr").remove();
// $(this).parent().parent().remove();
//取消默认行为
return false;
});
// $("a").live("click",function(){
// $(this).parents("tr").remove();
// // $(this).parent().parent().remove();
// //取消默认行为
// return false;
// });
//实现添加员工信息
$("#addEmpButton").click(function(){
//取值
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//将值拼接到$tr
var $tr = $("<tr>"
+ "<td>"+name+"</td>"
+ "<td>"+email+"</td>"
+ "<td>"+salary+"</td>"
+ "<td><a href='deleteEmp?id=001'>Delete</a></td>"
+ "</tr>");
//为a标签绑定click事件
//将$tr追加到table的内后
$("#employeeTable").append($tr);
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
