JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译
JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法:
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有
写在script标签
JS的数据类型:
- 基本类型
- string
- number
- boolean
- undefine
- null
- 引用类型
- 对象, 内置对象
- 类型转换
- js内部自动转换
JS的运算符和语句:
- 运算符和java 一样
- “===” 全等号: 值和类型都必须相等
- == 值相等就可以了
- 语句和java 一样
JS的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log() 向控制台输出
- innerHTML: 向页面输出
JS声明变量: var 变量的名字;
JS声明函数: function 函数的名称(参数的名字){}
JS开发的步骤:
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
以下通过案例来学习：
1.切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
1. 事件: 点击事件 onclick
2. 事件要触发函数: changeImg
3. 在函数中
*/
function changeImg(){
// alert("要切换了")
var img = document.getElementById("img1");
img.src = "img/2.jpg";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()" />
<br />
<img src="img/1.jpg" id="img1" />
</body>
</html>
2.定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//window 对象是一个最顶层对象
// window.setInterval("alert('123');",2000);
function test(){
console.log("setInterval 调用了");
}
// setInterval("test()",2000);
// setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
// timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}
function stopDingshiqi(){
// clearInterval(timerID);
clearTimeout(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
</body>
</html>
3.图片自动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<script>
var index = 0;
function changeImg(){
//1. 获得要切换图片的那个元素
var img = document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2
img.src="img/"+curIndex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="img/1.jpg" width="100%" id="img1"/>
</body>
</html>
4.显示和隐藏图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//文档加载顺序
// var img = document.getElementById("img1");
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()" />
<input type="button" value="隐藏" onclick="hideImg()" /><br />
<img src="img/1.jpg" id="img1" />
</body>
</html>
5.定时弹出广告：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="img/1.jpg" width="100%" style="display: none;"/>
</body>
</html>
6.表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显示校验结果
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="jstest3.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
7.表格隔行换色和实现全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "blue";
}else{
row.bgColor = "red"
}
}
}
/*
全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" onclick="checkAll()" id="check1" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>体育用品</td>
<td>篮球,足球,网球</td>
<td>大品牌</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>棉质</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
8.简单的DOM添加节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*动态添加 : <p>文本</p> */
function dianwo(){
var div = document.getElementById("div1");
//创建元素节点
var p = document.createElement("p"); // <p></p>
//创建文本节点
var textNode = document.createTextNode("p段落文本内容");// 文本内容
//将p 和文本内容关联起来
p.appendChild(textNode); // <p>文本</p>
//将P添加到目标div中
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我,添加P" onclick="dianwo()" />
<!--一会动态的往这个Div中添加节点-->
<div id="div1">
</div>
</body>
</html>
9.省市下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince(){
var province = document.getElementById("province");
//得到当前选中的是哪个省份
//alert(province.value);
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); // <option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText) ;// 东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
// 添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--选择省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
</html>
10.左右选择项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果</option>
<option>三星</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
JQuery
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
Jquery它是一个库(框架)，要想使用它，必须先引入:
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段
1.Jquery入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS与JQ页面加载区别</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("张三");
}
//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
window.onload = function(){
alert("老王");
}
//JQ的几种表达方式
//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//简写方式
$(function(){
alert("汾九");
});
</script>
</head>
<body>
</body>
</html>
加载顺序：李四-王五-汾九-老王
2.JS和Jquery的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.JS方式获取
/*document.getElementById("btn").onclick= function(){
location.href="jstest.html";
}*/
//2.JQ方式获取=====>>>$("#btn")
$("#btn").click(function(){
location.href="jstest.html"
});
});
</script>
</head>
<body>
<input type="button" value="点我" id="btn"/>
</body>
</html>
3.Dom与JQ对象之间的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
document.getElementById("span1").innerHTML="萌萌哒！";
//DOM对象无法操作JQ对象里面属性和方法
//document.getElementById("span1").html("萌萌哒！");
var spanEle = document.getElementById("span1");
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");
}
$(function(){
$("#btn").click(function(){
//JQ对象无法操作JS里面的属性和方法！！！
//$("#span1").innerHTML="呵呵哒！"
$("#span1").html("呵呵哒！");
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒！";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长：<span id="span1">你好帅！</span>
</body>
</html>
4.Jquery页面定时弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time = setInterval("showAd()",3000);
});
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片，并让其显示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//4.清除显示图片定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取广告图片，并让其隐藏
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(6000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body>
<!--定时弹出广告图片位置-->
<img src="img/1.jpg" width="100%" style="display: none" id="img2"/>
</body>
</html>
5.toggle的使用（显示和隐藏）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$("#img1").toggle();
});
});
</script>
</head>
<body>
<input type="button" value="显示/隐藏" id="btn" /><br />|
<img src="img/1.jpg" width="100%" height="100%" id="img1"/>
</body>
</html>
6.选择器
1）基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
2）层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("body div").css("background-color", "gold");
});
$("#btn2").click(function() {
$("body>div").css("background-color", "gold");
});
$("#btn3").click(function() {
$("#two+div").css("background-color", "gold");
});
$("#btn4").click(function() {
$("#one~div").css("background-color", "gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素" />
<input type="button" id="btn2" value="选择body中的第一级的孩子" />
<input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" />
<hr />
<div id="one">
<div class="mini">111</div>
</div>
<div id="two">
<div class="mini">222</div>
<div class="mini">333</div>
</div>
<div id="three">
<div class="mini">444</div>
<div class="mini">555</div>
<div class="mini">666</div>
</div>
<span id="four"> </span>
</body>
</html>
3）基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("body div:first").css("background-color", "red");
});
$("#btn2").click(function() {
$("body div:last").css("background-color", "red");
});
$("#btn3").click(function() {
$("body div:odd").css("background-color", "red");
});
$("#btn4").click(function() {
$("body div:even").css("background-color", "red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素" />
<input type="button" id="btn2" value="body中的最后一个div元素" />
<input type="button" id="btn3" value="选择body中的奇数的div" />
<input type="button" id="btn4" value="选择body中的偶数的div" />
<hr />
<div id="one">
<div class="mini">111</div>
</div>
<div id="two">
<div class="mini">222</div>
<div class="mini">333</div>
</div>
<div id="three">
<div class="mini">444</div>
<div class="mini">555</div>
<div class="mini">666</div>
</div>
<span id="four"> </span>
</body>
</html>
4）属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("div[id]").css("background-color", "red");
});
$("#btn2").click(function() {
$("div[id='two']").css("background-color", "red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为two的div" />
<hr />
<div id="one">
<div class="mini">111</div>
</div>
<div id="two">
<div class="mini">222</div>
<div class="mini">333</div>
</div>
<div id="three">
<div class="mini">444</div>
<div class="mini">555</div>
<div class="mini">666</div>
</div>
<span id="four"> </span>
</body>
</html>
5）表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function() {
$(":input").css("background-color","#FF0000");
});
$("#btn2").click(function() {
//$(":password"),$(":radio"),$(":checkbox"),$(":submit"),$(":image"),$(":reset"),$(":file"),$("input:hidden")同理
//$(":button")满足<input type="button" />,<button></button>
$(":text").css("background-color","#FF0000");
});
$("#btn3").click(function(){
$("select option:selected").css("background-color","chartreuse");
alert($("option:selected").size());
});
})
</script>
</head>
<body>
<!-- 以下所有都满足 -->
<input type="button" id="btn1" value="选择所有input元素" />
<!-- <input type="text" />满足 -->
<input type="button" id="btn2" value="选择文本框" />
<input type="button" id="btn3" value="选择下拉框" />
<br/>
<form>
文本框：<input type="text" /><br />
复选框：<input type="checkbox" /><br />
单选框：<input type="radio" /><br />
图片：<input type="image" /><br />
文件：<input type="file" /><br />
提交：<input type="submit" />
重置:<input type="reset" /><br />
密码：<input type="password" /><br />
按钮：<input type="button" /><br />
隐藏：<input type="hidden" /><br />
<select multiple="multiple">
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select><br/>
<textarea>多行文本框</textarea><br />
<button>按钮</button>
</form>
</body>
</html>
7.JQuery完成表格隔行换色
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//1.页面加载
$(function() {
/*//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").css("background-color","yellow");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").css("background-color","green");*/
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").addClass("even");
$("tbody tr:even").removeClass("even");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("odd");
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl"
id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
8.JQuery完成复选框的全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#select").click(function() {
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked", this.checked);
});
$("#checkAll").click(function() {
var ischecked = this.checked;
$("input[name='hobby']").each(function(){
this.checked = ischecked;
});
});
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<td colspan="4"><input type="button" value="添加" /> <input
type="button" value="删除" /></td>
</tr>
<tr>
<th><input type="checkbox" id="select"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
<input type="checkbox" id="checkAll"/>全选<br/>
<input type="checkbox" name="hobby" value="足球"/>足球<br/>
<input type="checkbox" name="hobby" value="篮球"/>篮球<br/>
<input type="checkbox" name="hobby" value="网球"/>网球<br/>
</body>
</html>
9.省市下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");
$("#province").change(function() {
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities, function(i, n) {
//alert(i+":"+n);
//4.判断用户选择的省份和遍历的省份
if (val == i) {
//5.遍历该省份下的所有城市
$.each(cities[i], function(j, m) {
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
</head>
<body>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</body>
</html>
10.JQuery实现左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码"/>
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋体">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>华为note4</option>
</select>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
</table>
</body>
</html>
11.表单验证
validate.js常用来表单验证，validate.js是JQuery的一个插件
简单的表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate入门案例</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:6
}
},
messages:{
username:{
required:"用户名不能为空!",
minlength:"用户名不得少于6位！"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password"/><br />
<input type="submit"/>
</form>
</body>
</html>
检验方式：
表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier {
border: 0px solid white;
width: 1300px;
margin: auto;
}
#top {
border: 0px solid white;
width: 100%;
height: 50px;
}
#menu {
border: 0px solid white;
height: 40px;
background-color: black;
padding-top: 10px;
margin-bottom: 15px;
margin-top: 10px;
}
.top {
border: 0px solid white;
width: 405px;
height: 100%;
float: left;
padding-left: 25px;
}
#top1 {
padding-top: 15px;
}
#bottom {
margin-top: 13px;
text-align: center;
}
#form {
height: 500px;
padding-top: 70px;
background-image: url(img/regist_bg.jpg);
margin-bottom: 10px;
}
a {
text-decoration: none;
}
label.error {
background: url(img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family: georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success {
background: url(img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}
#father {
border: 0px solid white;
padding-left: 307px;
}
#form2 {
border: 5px solid gray;
width: 660px;
height: 450px;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$(function() {
$("#registForm").validate({
rules : {
user : {
required : true,
minlength : 3
},
password : {
required : true,
digits : true,
minlength : 6
},
repassword : {
required : true,
equalTo : "[name='password']"
},
email : {
required : true,
email : true
},
username : {
required : true,
maxlength : 5
},
sex : {
required : true
}
},
messages : {
user : {
required : "用户名不能为空!",
minlength : "用户名不得少于3位!"
},
password : {
required : "密码不能为空!",
digits : "密码必须是整数!",
minlength : "密码不得少于6位!"
},
repassword : {
required : "确认密码不能为空!",
equalTo : "两次输入密码不一致!"
},
email : {
required : "邮箱不能为空!",
email : "邮箱格式不正确!"
},
username : {
required : "姓名不能为空!",
maxlength : "姓名不得多于5位!"
},
sex : {
required : "性别必须勾选!"
}
},
errorElement : "label", //用来创建错误提示信息标签,validate插件默认的就是label
success : function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<div id="contanier">
<div id="top">
<div class="top">
<img src="img/logo2.png" height="47px" />
</div>
<div class="top">
<img src="img/header.png" height="45px" />
</div>
<div class="top" id="top1">
<a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a>
</div>
</div>
<div id="menu">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
</div>
<div id="form">
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center"
cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2">
<font
size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label
for="user">用户名</label>
</td>
<td><em style="color: red;">*</em> <input
type="text" name="user" size="35px" id="user" /></td>
</tr>
<tr>
<td>
密码</td>
<td><em style="color: red;">*</em> <input
type="password" name="password" size="35px" id="password" /></td>
</tr>
<tr>
<td>
确认密码</td>
<td><em style="color: red;">*</em> <input
type="password" name="repassword" size="35px" /></td>
</tr>
<tr>
<td>
Email</td>
<td><em style="color: red;">*</em> <input
type="text" name="email" size="35px" id="email" /></td>
</tr>
<tr>
<td>
姓名</td>
<td><em style="color: red;">*</em> <input
type="text" name="username" size="35px" /></td>
</tr>
<tr>
<td>
性别</td>
<td><span style="margin-right: 155px;"> <em
style="color: red;">*</em> <input
type="radio" name="sex" value="男" />男 <input type="radio"
name="sex" value="女" />女<em></em> <label for="sex"
class="error" style="display: none;"></label>
</span></td>
</tr>
<tr>
<td>
出生日期</td>
<td><em style="color: red;">*</em> <input
type="text" name="birthday" size="35px" /></td>
</tr>
<tr>
<td>
验证码</td>
<td><em style="color: red;">*</em> <input
type="text" name="yanzhengma" /> <img
src="../img/yanzhengma.png" style="height: 18px; width: 85px;" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit"
value="注 册" height="50px" />
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
<div>
<img src="img/footer.jpg" width="100%" />
</div>
<div id="bottom">
<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a> <a href="#">联系我们</a>
<a href="#">招贤纳士</a> <a href="#">法律声明</a> <a
href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a> <a href="#">支付方式</a>
<a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a>
<p>Copyright © 2005-2016 商城 版权所有</p>
</div>
</div>
</body>
</html>
JQuery总结：
1.JQuery属性操作
1）属性操作_attr
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_attr</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 需求：
* 1.获取图片的路径
* 2.设置图片的高度属性
* 3.给图片设置多个属性(宽度和高度)
* 4.移出图片的高度属性
*/
/**
* 方法分析：
* 1.attr(name):读(获)取属性的值
* 2.attr(key,value)：设置属性值
* 3.attr(properties)：同时设置多个属性
* 4.removeAttr(name)：删除某个属性
*
* 所有方法注意查看运行显示结果，查看其中的某个方法时，请注释其它方法，后面的案例不再说明！
*/
/*
* 代码实现
*/
$(function(){
//1.attr(name):该方法用于获取属性的值(根据属性的名称)
var srcEle = $("img").attr("src");
alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg
//2.attr(key,value):该方法用于设置属性和值
$("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化
//3.attr(properties)：同时设置多个属性值
//$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)
//4.removeAttr(name)：删除某个属性和值
$("img").removeAttr("width");//清除width属性后，图片变回其自身原有的大小
});
</script>
</head>
<body>
<img src="../../img/1.jpg" width="800px" />
</body>
</html>
2）属性操作_CSS类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_CSS类</title>
<style type="text/css">
.divclass {
color: red;
}
.div1 {
background-color: yellow;
}
#div1 {
border: 1px solid black;
width: 400px;
height: 250px;
margin: auto;
}
#father {
border: 1px solid white;
width: 450px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击button，使一个div的背景颜色变为 黄色
* 2.点击button，清空之前设置的背景颜色
* 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
*/
/**
* 方法分析：
* 1.addClass(class) 添加一个class属性
* 2.removeClass([class]) 移除一个class属性
* 3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
*/
/**
*代码实现
*/
$(function() {
// 1.点击button，使一个div的背景颜色变为黄色
$("#button1").click(function() {
$("#div1").addClass("div1");
});
// 2.点击button，清空之前设置的背景颜色
$("#button2").click(function() {
$("#div1").removeClass("div1");
});
// 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
$("#button3").click(function() {
$("#div1").toggleClass("divclass");
});
});
</script>
</head>
<body>
<div id="father">
<div id="div1">AAAAAA</div><br />
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="背景颜色清空" id="button2" />
<input type="button" value="字体颜色开关" id="button3" />
</div>
</body>
</html>
3）属性操作_html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_html代码</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击按钮获取div中 html
* 2.点击按钮设置div中html
*/
/**
* 方法分析
* 1.html()方法用于读取innerHTML
* 2.html(val)方法用于设置innerHTML
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获取div中 html
$("#btn1").click(function(){
var divEle = $("div").html();
alert(divEle);//<p>传智播客</p>
});
//2.点击按钮设置div中html
$("#btn2").click(function(){
$("div").html("Java学院");//覆盖之前此位置的内容
});
})
</script>
</head>
<body>
<div><p>传智播客</p></div>
<input type="button" value="获取html" id="btn1" />
<input type="button" value="设置html" id="btn2" />
</body>
</html>
4）属性操作_文本text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_文本text</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击按钮获取div中text
* 2.点击按钮设置div中text
*/
/**
* 方法分析
* 1.text()方法用于读取文本内容
* 2.text(val)方法用于设置文本内容
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获取div中 text
$("#btn1").click(function(){
var divEle = $("div").text();
alert(divEle);//传智播客
});
//2.点击按钮设置div中text
$("#btn2").click(function(){
$("div").text("Java学院");//覆盖之前此位置的内容
});
})
</script>
</head>
<body>
<div><p>传智播客</p></div>
<input type="button" value="获取text" id="btn1" />
<input type="button" value="设置text" id="btn2" />
</body>
</html>
5）属性操作_值val
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_值val</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击按钮获得文本框、下拉框、单选框选中的value
* 2.点击按钮设置用户名的默认值为“老王”
*/
/**
* 方法分析
* 1.val()方法用于读取元素value属性
* 2.val(val)方法用于设置元素value属性
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获得文本框、下拉框、单选框选中的value
$("#btn1").click(function(){
alert($("#username").val());
alert($("#city").val());
alert($("input[type='radio']:checked").val());
});
//2.点击按钮设置用户名的默认值为“老王”
$("#btn2").click(function(){
$("#username").val("老王");
});
})
</script>
</head>
<body>
用户名 <input type="text" id="username" /> <br/>
性别 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked="checked"/> 女<br/>
城市
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select> <br/>
<input type="button" value="获取val" id="btn1" />
<input type="button" value="设置val" id="btn2" />
</body>
</html>
2.JQuery文档处理
1）文档处理_插入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_插入操作</title>
<script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 需求
* 在id=edu下增加<option value="大专">大专</option>
*/
/**
* 方法分析：
* 内部插入
* 1.append(content):内部结尾处，将B追加到A里面去
* 2.appendTo(content):内部结尾处，将A追加到B里面去
* 3.prepend(content):内部开始处，将B追加到A里面去
* 4.prependTo(content):内部开始处，将B追加到A里面去
* 外部插入
* 1.after(content):外部，将B追加到A后面
* 2.before(content):外部，将A追加到B前面
* 3.insertAfter(content):外部，将A追加到B后面
* 4.insertBefore(content)::外部，将A追加到B前面
*/
$(function() {
// 追加 option 内容大专
// 创建元素
var $newNode = $("<option value='大专'>大专</option>");
//内部插入
//$("#edu").append($newNode); // 内部结尾，将B追加到A里面去
//$("#edu").prepend($newNode); // 内部开始，将B追加到A里面去
//外部插入
//$("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('硕士')"));
});
</script>
</head>
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
</body>
</html>
2）文档处理_复制操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_复制操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 需求
* 1.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾
* 2.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾，要求复制后的内容也具有复制的能力
*/
/**
* 方法分析：
* 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
* 2.clone()：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
*/
$(function(){
//点击li列表项，将当选点击的li内容追加到ul末尾
$("ul li").click(function(){
//$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
$(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件
})
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
3）文档处理_替换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_替换操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//将B的内容替换掉A处的内容
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
4）文档处理_删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_删除操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/**
* 需求
* 分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
*/
/**
* 方法分析
* 1.remove()：删除节点后，事件也会删除
* 2.detach()：删除节点后，事件会保留 从1.4新API
* 3.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
*/
/**
* 代码实现
*/
$(function() {
$("p").click(function() {
alert($(this).text());
});
// 使用remove方法删除 p元素，连同事件一起删除
//var $p = $("p").remove();
// 使用detach删除，事件会保留
var $p = $("p").detach();
$("div").append($p);
});
</script>
</head>
<body>
<p>AAA</p>
<div>BBB</div>
</body>
</html>
5）删除相关操作的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除相关操作的区别</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//清空第二个li元素节点的所有后代节点(此处是文本节点橘子)，通过firebug查看html源码验证
//$("ul li:eq(1)").empty();
//删除第一个li元素节点
$("ul li:eq(0)").remove();
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
3.JQuery遍历操作
1）使用对象访问方式遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用对象访问方式遍历</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用对象访问的方式进行遍历，语法：$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
});
</script>
</head>
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
</body>
</html>
2）使用工具类遍历方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用工具类遍历方式</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 说明：两种遍历方式，掌握其中一种即可，个人觉得此种方式较容易理解!
*/
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
$.each($("input[name='hobby']"), function(i,j) {
j.checked = isChecked;
});
});
});
</script>
</head>
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
</body>
</html>
4.JQuery的CSS操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_CSS类</title>
<style type="text/css">
.divclass {
color: red;
}
.div1 {
background-color: yellow;
}
#div1 {
border: 1px solid black;
width: 400px;
height: 250px;
margin: auto;
}
#father {
border: 1px solid white;
width: 450px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击button，使一个div的背景颜色变为绿色
* 2.点击button，使一个div的背景颜色变为绿色以及里面内容的字体颜色变成红色
*/
/**
* 方法分析：
* 1.css(name, value) 设置一个CSS样式属性
* 2.css(properties) 传递key - value对象， 设置多个CSS样式属性
*/
/**
* CSS操作方法汇总：
* 1.通过attr属性设置 / 获取 style属性
* attr('style', 'color:red'); // 添加style属性
* 2.设置CSS样式属性
* css(name, value) 设置一个CSS样式属性
* css(properties) 传递key - value对象， 设置多个CSS样式属性
* 3.设置class属性
* addClass(class) 添加一个class属性
* removeClass([class]) 移除一个class属性
* toggleClass(class) 如果存在(不存在)就删除(添加) 一个类
*/
/**
*代码实现
*/
$(function() {
// 1.点击button，使一个div的背景颜色变为绿色
//方式一
/*$("#button1").click(function() {
$("#div1").css("background-color","green");
});*/
//方式二：
$("#button1").click(function() {
$("#div1").attr("style","background-color:green");
});
// 2.点击button，使一个div的背景颜色变为绿色，内容字体颜色变成红色
$("#button2").click(function() {
$("#div1").css({"background-color":"green","color":"red"});
});
});
</script>
</head>
<body>
<div id="father">
<div id="div1">AAAAAA</div><br />
<input type="button" value="背景颜色变为绿色" id="button1" />
<input type="button" value="背景颜色变为绿色内容字体变成红色" id="button2" />
</div>
</body>
</html>
5.JQuery事件
1）页面未加载执行失败
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面未加载执行失败</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*
执行错误，为什么？
因为dom还未加载完毕。
*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>
解决：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-1-2</title>
</head>
<!--解决办法：
方式一：将JS代码移到需要操作的html代码后面，一般建议放到body的外面
方式二：将JS代码放到一个页面加载函数中去-->
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>
2）事件绑定
点击展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击展开</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#panel h5.head").bind("click", function() {
var $content = $(this).next();
if($content.is(":visible")) {
$content.hide();
} else {
$content.show();
}
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
鼠标滑过
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
3）事件移除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件移除</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#btn').bind("click", function() {
$('#test').append("<p>我的绑定函数1</p>");
});
$('#delAll').click(function() {
$('#btn').unbind("click");
});
})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
</body>
</html>
4）合成事件
合成事件hover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合成事件hover</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
合成事件toggle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合成事件toggle</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").toggle(function() {
$(this).next().hide();
}, function() {
$(this).next().show();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
Ajax：异步JavaScript和XML
Ajax并不是新的技术，只是把原有的技术，整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
Ajax的GET请求：
1.创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2.发送请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
// http://localhost:8080/jsdemo/ajaxtest.jsp
//http://localhost:8080/jsdemo/ajaxServlet01
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
// request.open("GET" ,"/jsdemo/ajaxServlet01" ,true );
request.open("GET" ,"/jsdemo/ajaxServlet01?name=aa&age=18" ,true );
request.send();
}
发送请求的同时，获取响应数据：
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("GET" ,"/jsdemo/ajaxServlet01?name=aa&age=18" ,true );
//3. 获取响应数据
//注册监听的意思。 一会准备的状态发生了改变，那么就执行等号右边的方法
request.onreadystatechange = function(){
//前半段表示已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
</script>
</head>
<body>
<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>
</body>
补充：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
Ajax的POST请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
//执行post请求
function post() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求,无参
request.open("POST" ,"/jsdemo/ajaxServlet01" ,true );
//request.send();
//发送请求,带参
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=my&age=19");
}
</script>
</head>
<body>
<h3><a href="" onclick="post()">使用Ajax方式发送POST请求</a></h3>
</body>
</html>
获取响应数据方式和GET请求一致。
Ajax验证用户名是否已存在：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function checkUserName() {
//获取输入框的值 document 整个网页
var uname = document.getElementById("uname").value;
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/jsdemo/checkUserNameServlet" , true );
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("uname="+uname);
}
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="uname" id="uname"
onblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
</html>
package com.xdh.servlet;
import java.io.IOException;
import java.sql.SQLException;
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.xdh.dao.UserDao;
import com.xdh.dao.UserDaomImpl;
/**
* Servlet implementation class CheckUserNameServlet
*/
@WebServlet("/checkUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CheckUserNameServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("uname");
System.out.println("uname="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面，到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
$.ajax()案例：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
$.ajax({
url:"/jsdemo/ajaxServlet",
type:"post",
data:{
name:$("#name").val(),
age:20
},
dataType:"text",
success:function(data){
alert(data);
},
error: function(){
alert("出现异常");
}
})
})
})
</script>
</head>
<body>
<form action="servlett" method="get">
<input type="text" name="name" id="name">
<input type="button" id="submit" value="注册">
</form>
</body>
</html>
JQuery Ajax
JQuery Ajax 的load()方法：
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript">
function load() {
//直接赋值
//$("#aaa").val("test");
//把aaa.txt文件内容赋值
$("#aaa").load("aaa.txt");
//把ajaxServlet响应回的内容赋值
//$("#aaa").load("/jsdemo/ajaxServlet");
//$("#aaa") --- document.getElementById("aaa");
//$("#aaa").load("/jsdemo/ajaxServlet" , function(responseText , statusTXT , xhr) {
//alert("jieguo:"+responseText);
//找到id为aaa的元素， 设置它的value属性值为 responseText 对应的值
//$("#aaa").val(responseText);
//});
}
</script>
</head>
<body>
<h3><input type="button" onclick="load()" value="使用JQuery执行load方法"> </h3>
<!-- <input type="text" id="aaa"> -->
<div id = "aaa"></div>
</body>
</html>
JQuery三种赋值：
val():只能放标签带有value属性
html();如果想进行样式处理，用html()
text():
load()方法底层是用get请求，赋值用text(),所以上述代码改用input将返回不了值
jQuery - AJAX get() 和 post() 方法：
GET:
语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
callback回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript">
function get() {
$.get("/jsdemo/ajaxServlet", function(data, status) {
alert("返回结果是：" + data);
alert("返回状态是：" + status);
$("#div01").html("html="+data);
//$("#div01").val(data);//val 用于设置 元素里面有values 的属性值
//$("#div01").text("text=" + data);
//$("#div01").html(data); // <font>
});
}
</script>
</head>
<body>
<input type="button" onclick="get()" value="使用JQuery演示 get方法">
<div id="div01"></div>
</body>
</html>
带参：
$.get("/jsdemo/ajaxServlet?name=my&age=25", function(data, status) {})
POST:
语法：$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript">
function post() {
$.post("/jsdemo/ajaxServlet", {
name : "zhangsan",
age : 18
}, function(data, status) {
//想要放数据到div里面去。 --- 找到div
$("#div01").html(data);
});
}
</script>
</head>
<body>
<input type="button" onclick="post()" value="使用JQuery演示 post方法">
<div id="div01"></div>
</body>
</html>
post带参用json传
案例：仿百度搜索
首页：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript" src="../js/baidu.js"></script>
</head>
<body>
<center>
<h2>百度</h2>
<input type="text" name="word" id="word" style="width: 600px ; height: 50px ;font-size: 20px;">
<input type="button" value="百度一下" style="height: 55px ; width: 100px ; ">
<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border: 1px solid blue; display: none"></div>
</center>
</body>
</html>
外部js:
//1. 捕捉到键盘弹起的事件
//在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
/*$(document).ready(function(){
})*/
$(function(){
$("#word").keyup(function() {
//2。 获取输入框的值
//var word = $("#word").val();
//this 对应就是执行这个方法的那个对象， $("#word")
var word = $(this).val();
//alert(word);
if(word == ""){
$("#div01").hide();
}else{
//3. 请求数据。
$.post("/jsdemo/baiduServlet",{word:word} ,function(data , status){
//alert(data);
$("#div01").show();
$("#div01").html(data);
});
}
})
});
baiduServlet:
package com.xdh.servlet;
import java.io.IOException;
import java.sql.SQLException;
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.xdh.dao.WordsDao;
import com.xdh.dao.WordsDaoImpl;
import com.xdh.entity.WordBean;
/**
* Servlet implementation class BaiduServlet
*/
@WebServlet("/baiduServlet")
public class BaiduServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BaiduServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
try {
//1. 先获取参数
String word = request.getParameter("word");
System.out.println("word="+word);
//2. 让dao执行查询
WordsDao dao = new WordsDaoImpl();
List<WordBean> list = dao.findWords(word);
for (WordBean wordBean : list) {
System.out.println("==="+wordBean.toString());
}
request.setAttribute("list", list);
//3. 返回数据
response.setContentType("text/html;charset=utf-8");
//response.getWriter().write("数据是：");
// 响应这个jsp的页面，全部把它返回给请求者 ， 请求： 浏览器请求 ， 浏览器 看到jsp
//$jquery ,来请
request.getRequestDispatcher("/ajaxtest/listBaidu.jsp").forward(request, response);
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request,response);
}
}
返回的结果先放进listBaidu.jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<table style="width: 100%">
<c:forEach items="${list }" var="wordBean">
<tr>
<td>${wordBean.words}</td>
</tr>
</c:forEach>
</table>
dao层查询语句：
String sql = "select * from baidu where words like ? limit ?";
return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class) , word+"%" , 5);
使用JQuery实现省市联动：
服务器和客户端数据传输的方式：xml和json
XML：
首页：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.3.min.js"></script>
<script type="text/javascript" src="../js/city_xml.js"></script>
</head>
<body>
省份: <select name="province" id ="province">
<option value="" >-请选择 -
<option value="1" >江苏
<option value="2" >山东
<option value="3" >安徽
<option value="4" >浙江
</select>
城市:
<select name="city" id="city">
<option value="" >-请选择 -
</select>
</body>
</html>
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();
/*<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>南京</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>苏州</cname>
</city>
</list>*/
$.post( "/jsdemo/cityXmlServlet",{pid:pid} ,function(data,status){
alert("回来数据了:"+data);
//先清空以前的值：
$("#city").html("<option value='' >-请选择-")
//遍历：
//从data数据里面找出所有的city ， 然后遍历所有的city。
//遍历一个city，就执行一次function方法
$(data).find("city").each(function() {
//遍历出来的每一个city，取它的孩子。 id , cname
var id = $(this).children("id").text();
var cname = $(this).children("cname").text();
$("#city").append("<option value='"+id+"' >"+cname)
});
} );
});
});
.find() ：获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
cityXmlServlet：
package com.xdh.servlet;
import java.io.IOException;
import java.sql.SQLException;
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.thoughtworks.xstream.XStream;
import com.xdh.dao.CityDao;
import com.xdh.dao.CityDaoImpl;
import com.xdh.entity.CityBean;
/**
* Servlet implementation class CityXmlServlet
*/
@WebServlet("/cityXmlServlet")
public class CityXmlServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CityXmlServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
try {
//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
XStream xStream = new XStream();
//想把id做成属性
//xStream.useAttributeFor(CityBean.class, "id");
//设置别名
xStream.alias("city", CityBean.class);
//转化一个对象成xml字符串
String xml = xStream.toXML(list);
System.out.println(xml);
//xml转对象
// Object bean = xStream.fromXML(xml);
// System.out.println("bean----"+bean.toString());
//返回数据
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request,response);
}
}
返回的数据以xml格式传给前端接收，需导包：
xml转对象时需要增加jar包：
JSON：
json导包：
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();
/*[
{
"cname": "南京",
"id": 1,
"pid": 1
},
{
"cname": "苏州",
"id": 2,
"pid": 1
}
...
]*/
$.post( "/jsdemo/cityJsonServlet",{pid:pid} ,function(data,status){
//先清空
$("#city").html("<option value='' >-请选择-");
//再遍历，追加
$(data).each(function(index , c) {
$("#city").append("<option value='"+c.id+"' >"+c.cname)
});
},"json" );
});
});
注意：
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。
cityJsonServlet：
package com.xdh.servlet;
import java.io.IOException;
import java.sql.SQLException;
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 net.sf.json.JSONArray;
import com.xdh.dao.CityDao;
import com.xdh.dao.CityDaoImpl;
import com.xdh.entity.CityBean;
/**
* Servlet implementation class CityJsonServlet
*/
@WebServlet("/cityJsonServlet")
public class CityJsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CityJsonServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
try {
//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 把list ---> json数据
//JSONArray ---> 变成数组 ， 集合 []
//JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request,response);
}
}
注意：
json用：
response.setContentType(“text/html;charset=utf-8”);
xml用：
response.setContentType(“text/xml;charset=utf-8”);
补充一个Json工具类：
package com.xdh.util;
import java.util.List;
import java.util.Map;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.CycleDetectionStrategy;
import net.sf.json.xml.XMLSerializer;
/**
* 处理json数据格式的工具类
*
* @Date 2013-3-31
* @version 1.0
*/
public class JsonUtil {
/**
* 将数组转换成String类型的JSON数据格式
*
* @param objects
* @return
*/
public static String array2json(Object[] objects){
JSONArray jsonArray = JSONArray.fromObject(objects);
return jsonArray.toString();
}
/**
* 将list集合转换成String类型的JSON数据格式
*
* @param list
* @return
*/
public static String list2json(List list){
JSONArray jsonArray = JSONArray.fromObject(list);
return jsonArray.toString();
}
/**
* 将map集合转换成String类型的JSON数据格式
*
* @param map
* @return
*/
public static String map2json(Map map){
JSONObject jsonObject = JSONObject.fromObject(map);
return jsonObject.toString();
}
/**
* 将Object对象转换成String类型的JSON数据格式
*
* @param object
* @return
*/
public static String object2json(Object object){
JSONObject jsonObject = JSONObject.fromObject(object);
return jsonObject.toString();
}
/**
* 将XML数据格式转换成String类型的JSON数据格式
*
* @param xml
* @return
*/
public static String xml2json(String xml){
JSONArray jsonArray = (JSONArray) new XMLSerializer().read(xml);
return jsonArray.toString();
}
/**
* 除去不想生成的字段（特别适合去掉级联的对象）
*
* @param excludes
* @return
*/
public static JsonConfig configJson(String[] excludes) {
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(excludes);
jsonConfig.setIgnoreDefaultExcludes(true);
jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
return jsonConfig;
}
}
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
