1、什么是JQuery
JQuery是一个JavaScript框架（是一个js文件），用于动态处理页面。
2、JQuery示例
2.1 JS和JQuery加载的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js与JQuery页面加载的区别</title>
<script type="text/javascript" src="../JQ/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的第二种书写方式：JQ不存在覆盖问题，加载的时候是按顺序执行
$(document).ready(function(){
alert("王五");
});
//JQ的第三种书写方式：推荐这种简写方式
$(function(){
alert("马六");
});
</script>
</head>
<body>
</body>
</html>2.2 JQuery节点的获取
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
hahahahahah
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的获取</title>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js"></script>
<script>
$(function(){
//1、JS方式获取
document.getElementById("btn").onclick=function(){
location.href="index.html";
}
//2、JQ方式获取====>>>$("#btn")
$("#btn").click(function(){
location.href="index.html";
});
});
</script>
</head>
<body>
<input type="button" value="点我" id="btn"/>
</body>
</html>2.3 JQuery中DOM对象的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom与JQ对象的转换</title>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js"></script>
<script>
//1、js的DOM操作
function write1(){
// document.getElementById("span1").innerHTML="萌萌哒";
//DOM对象无法操作JQ对象里面属性和方法
/* document.getElementById("span1").html("萌萌哒"); */
var spanEle=document.getElementById("span1");
//将DOM对象转换成JQ对象,spanEle是变量不是节点所以不用$("#spanEle")
$(spanEle).html("思密达");
}
//2、jq的操作方式
$(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>2.4 定时弹出广告图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
/*#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}*/
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 0px solid red;
width: 1300px;
height: 50px;
background-color: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#clear{
clear: both;
}
#product{
border: 0px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 0px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right{
border: 0px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 0px solid red;
width: 544px;
height: 248px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 248px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="../JQ/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 onload="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: 20px;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>
</div>
<!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%" />
</div>
<!--6.热门商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">热门商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--8.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>2.5 toggle的使用
效果：点击按钮显示，再次点击按钮隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle的使用（显示隐藏标签）</title>
<style>
div{
border:1px solid white;
width:500px;
height:350px;
margin:auto;
text-align:center;
}
</style>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$("#img1").toggle();
});
});
</script>
</head>
<body>
<div>
<input type="button" value="显示/隐藏" id="btn"/><br/>
<img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>2.7 选择器
基本选择器
<!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>层级选择器
<!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="../jQ/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});/* 选择body中的所有的div元素 */
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});/* 选择body中的第一级的孩子(即div为one two three的变色) */
$("#btn3").click(function(){
$("#two+div").css("background-color","gold");
});/* 选择id为two的元素的下一个元素 */
$("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});/* 选择id为one的所有的兄弟元素 */
});
</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>基本过滤选择器
<!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="../JQ/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});/* body中的第一个div元素 */
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});/* body中的最后一个div元素 */
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});/* 选择body中的奇数的div,从0开始算 */
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});/* 选择body中的偶数的div,从0开始算 */
});
</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>属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../jQ/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});/* 选择有id属性的div */
$("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
});/* 选择有id属性的值为two的div */
});
</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>表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="../jQ/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input");//匹配所有 input, textarea, select 和 button 元素
});
$("#btn2").click(function(){
$(":text");//匹配所有的文本框
});
});
$(":")
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" 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 />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>3、JQuery其他基本操作
3.1 JQuery属性操作
属性attr操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_attr</title>
<script type="text/javascript" src="../../JQ/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>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="../../JQ/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>HTML代码操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_html代码</title>
<script type="text/javascript" src="../../JQ/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>文本text操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_文本text</title>
<script type="text/javascript" src="../../JQ/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>值val操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作_值val</title>
<script type="text/javascript" src="../../JQ/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>3.2 文档处理
插入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_插入操作</title>
<script src="../../JQ/jquery-1.8.3.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>复制操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_复制操作</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.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>替换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_替换操作</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.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>删除事件操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理_删除操作</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.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>删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除相关操作的区别</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.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.3 遍历操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用对象访问方式遍历</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.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><!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>3.5 css操作
<!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>3.6 事件操作
页面加载问题
<!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>绑定事件
<!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="../../JQ/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="../../JQ/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>事件移除
<!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="../../JQ/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>事件合成
<!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="../../JQ/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><!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>4、案例
4.1 省市二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成省市二级联动</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js" ></script>
<!-- 二级联动代码 -->
<script>
$(function(){
$("#province").change(function(){
//10、清除第二个下拉列表的内容
$("#city").empty();
//1、获取用户选择的省份
var val=this.value;
//2、创建二维数组用于存储省份和城市
var cities=new Array(3);
cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1]=new Array("长沙市","株洲市","岳阳市","凤凰市");
cities[2]=new Array("石家庄市","邯郸市","廊坊市","保康市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
//3、遍历二维数组中的省份
$.each(cities,function(i,n){//i表示cities数组中的角标，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>
<div>
<!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear">
</div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<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>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.广告图片的div-->
<div id="">
<img src="../img/footer.jpg" width="99%" />
</div>
<!--5.超链接与版权信息的div-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士 </a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright © 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>4.2 隔行换色
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
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;
}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../JQ/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下面的偶数行并设置背景颜色,通过导入css文件设置背景色
$("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>4.3 复选框全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js" ></script>
<!-- 使用jQuery完成复选框的全选和全不选 -->
<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</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>
</body>
</html>4.4 下拉列表左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
<script type="text/javascript" src="../JQ/jquery-1.8.3.js" ></script>
<!-- 下拉列表左右选择 -->
<script>
//1、选中单击去右边
$(function(){
$("#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>华为6s</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>4.5 表单校验（采用validate国际化校验）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate入门案例</title>
<script type="text/javascript" src="../../JQ/jquery-1.8.3.js" ></script>
<!-- 表单校验是建立在JQuery的基础上的，所以得先导入Jquery包 -->
<script type="text/javascript" src="../../JQ/jquery.validate.min.js"></script>
<!-- 引入国际化js文件 -->
<script type="text/javascript" src="../../JQ/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="../JQ/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../JQ/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../JQ/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>
扫一扫
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
