注：所有代码已上传至GitHubhttps://github.com/ujung-20160225/web-learn.git
案例1：入门案例
jquery语法：
jquery()或者$()
获取value值：
js：
js对象.value
jquery:
jquery对象.val()
js对象和jquery对象的转换
js转换为jquery：
$(js对象)
jquery转换为js：
第一种方式：
jquery对象[index]
第二种方式：
jquery对象.get(index)
jquery页面加载成功事件：
js：
onload = function(){}
jquery:
$(document).ready(function(){})
$(function(){})
jquery事件绑定：
js方式：
1通过标签的事件属性进行绑定
2.获取对象
对象.事件属性 = function(){
函数体
}
jquery方式：
获取jquery对象
jquery对象.事件方法(function(){
函数体
})
jquery事件：
submit()
clcik()
focus()
blur()
change()
jquery效果：
显示和隐藏：
show([毫秒值]) 显示
hide([毫秒值]) 隐藏
taggle([毫秒值]) 切换
滑入和滑出：
slidedown([毫秒值]) 滑入
slideup([毫秒值]) 滑出
slideToggle([毫秒值]) 切换
淡出和淡出：
fadeIn([毫秒值]) 淡入
fadeOut([毫秒值]) 淡出
fadeToggle([毫秒值]) 切换
fadeTo()
1.1获得jQuery对象
<!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.0.min.js" ></script>
</head>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//js方式
var usernameObj=document.getElementById("username");
//alert(usernameObj.value);
//jquery
var $username=$("#username");
alert($username.val());
</script>
</html>
1.2DOM和jQuery对象的转换
<!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.0.min.js" ></script>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//js
var usernameObj=document.getElementById("username");
//alert($(usernameObj).val());
var $username=$("#username");
alert($username[0].value);
</script>
</html>
1.3页面加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//js方式
// onload = function(){
// alert("1");
// }
//
onload = function(){
alert("2");
}
//jquery
$(document).ready(function(){
alert("11");
})
$(function(){
alert("22");
})
</script>
</head>
<body>
</body>
</html>
1.4事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//获取按钮对象
$("#bId").click(function(){
alert("我是jquery绑定事件方式");
})
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" />
</body>
</html>
1.5常见事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
案例2：弹出广告
需求：在页面加载成功后，经过4秒显示广告，广告展示2秒，隐藏广告 反复执行三次
步骤分析：
-
1.在页面加载成功后 定义一个周期性定时器 setInterVal(showAd,4000)
-
2.编写显示广告的函数
获取显示广告对象
通过show方法显示广告
定义执行一次的定时器 setTimeOut(hideAd,2000) -
3.完成隐藏广告的函数
获取显示广告的对象
通过hide方法隐藏广告即可jquery选择器： 基本选择器 id： # class： . 标签： *： a,b,c 层次选择器： a b 选择器a选择的区域里面所有为选择器b的后代元素 a>b 选择器a选择的区域里面所有为选择器b的子代元素 a+b 选择器a选择器的区域后面第一个为选择器b的弟弟元素 a~b 选择器a选择器的区域后面所有的为选择器b的弟弟元素 基本过滤选择器： :first 第一个 :last 最后一个 :even 偶数 :odd 奇数 :eq() =index :gt() >index :lt() <index 内容过滤选择器： :has(选择器) 可见性过滤选择器: :visibel 可见 :hidden 不可见 属性选择器： [属性] [属性=属性值] 表单选择器： :input 只要是form的子标签 就会被选中 input 直选中标签为input的元素
2.1效果
<!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>
<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//显示和隐藏
$("#b1").click(function(){
//$("#b1Div").hide(2000);
$("#b1Div").toggle(2000);
})
//滑入和滑出
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);
$("#b2Div").slideToggle(2000);
})
//淡入和淡出
$("#b3").click(function(){
//$("#b3Div").fadeOut(2000);
//$("#b3Div").fadeToggle(2000);
$("#b3Div").fadeTo(1000,0.5,function(){
alert("淡化完成");
})
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html>
2.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>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
$("#one").css("background-color","red");
})
// <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","green");
})
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","yellow");
})
// <input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","blue");
})
// <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
$("span,#two").css("background-color","sandybrown");
})
})
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.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>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background-color","red");
})
// <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background-color","red");
})
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background-color","red");
})
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background-color","red");
})
})
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.4基本过滤选择器
<!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>03-基本过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <input type="button" value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background-color","red");
})
// <input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background-color","red");
})
// <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:even").css("background-color","red");
})
// <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:odd").css("background-color","red");
})
// <input type="button" value="选择索引值等于3的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:eq(3)").css("background-color","red");
})
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
<input type="button" value="选择索引值等于3的div元素." id="btn5"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.5内容过滤选择器
<!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>04-内容过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:has(.mini)").css("background-color","red");
})
});
</script>
</head>
<body>
<h3>内容过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.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>05-可见性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("div:visible").css("background-color","red");
})
$("#b2").click(function(){
$("div:hidden").show(2000);
})
});
</script>
</head>
<body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 选取所有可见的div元素" id="b1"/>
<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
</body>
</html>
2.7属性选择器
<!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>06-属性选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background-color","yellow");
})
$("#btn2").click(function(){
$("div[title=test]").css("background-color","yellow");
})
});
</script>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
</body>
</html>
2.8表单选择器
<!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>09-表单选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert($(":input").length);
})
});
</script>
</head>
<body>
<input type="button" value="选取所有的表单子元素" id="btn1"/><br />
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" src="1.jpg"/><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
<div></div>
</body>
</html>
2.9弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
.cle{
clear: both;
}
/*logo 部分的div*/
.header{
width: 100%;
}
.header div{
float:left;
width:33.33%;
height: 60px;
line-height: 50px;
}
.header a{
padding: 15px;
}
/*菜单部分*/
.menu{
width: 100%;
background-color: #000;
height: 50px;
padding-top:1px
}
.menu ul li{
list-style-type: none;
display: inline;
}
.menu a{
font-size: 25px;
color: #fff;
}
/*轮播图*/
.lunbo{
width:100%;
margin-top:10px;
margin-bottom: 10px;
}
.lunbo img{
width:100%;
}
/*热门商品*/
/*.left,.right{
float:left;
}*/
.left{
float:left;
width: 16%;
height: 500px;
}
.right{
float: left;
width:84%;
text-align: center;
height: 500px;
}
.middle{
float:left;
width: 50%;
height: 250px;
}
.item{
float:left;
width:16.66%;
height: 250px;
}
/*给广告*/
.ad1{
width: 100%;
}
.ad1 img{
width: 100%;
}
/*版权*/
.foot{
width:100%;
}
.foot p{
text-align: center;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
var id=null;
$(function(){
//定义一个周期性定时器
id=setInterval(showAd,4000);
})
var i=0;
//编写显示广告的函数
function showAd(){
i++;
//获取广告对象，使其显示show
$("#ad").show(1000);
//定义执行一次的定时器
setTimeout(hideAd,2000);
if(i==3){
clearInterval(id);
}
}
//完成隐藏广告的函数
function hideAd(){
$("#ad").hide(1000);
}
</script>
</head>
<body>
<div id="ad" style="width:100%;display: none;">
<img src="../img/ad_.jpg" width="100%" />
</div>
<!--
一个大div中放置8个div
-->
<div>
<!--logo
嵌套三个div
-->
<div class="header">
<div>
<img src="../img/logo2.png" height="40px" />
</div>
<div>
<img src="../img/header.jpg" />
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div class="cle"></div>
<!--菜单-->
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<!--轮播图-->
<div class="lunbo">
<img src="../img/1.jpg"/>
</div>
<!--热门
将起划分成两个div
左边放图片
右边的放商品
-->
<div class="hot">
<!--存放热门商品和一张图片-->
<div>
<h2 style="display: inline;">热门商品</h2>
<img src="../img/title2.jpg" />
</div>
<div>
<!--存放左边的图片-->
<div class="left">
<img src="../img/big01.jpg" />
</div>
<!--存放商品图片-->
<div class="right">
<div class="middle">
<img src="../img/middle01.jpg" />
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
</div>
</div>
</div>
<div class="cle"></div>
<!--广告-->
<div class="ad1">
<img src="../img/ad.jpg"/>
</div>
<!--最新-->
<div></div>
<!--广告-->
<div class="ad1">
<img src="../img/footer.jpg"/>
</div>
<!--版权foot-->
<div class="foot">
<p>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</p>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
案例3：隔行换色
需求：奇数行一种颜色 偶数行一种颜色
步骤分析：
-
1.确定事件 页面加载成功事件
-
2.筛选偶数行 为蓝色
-
3.筛选奇数行 为红色
/// jquery对样式的操作 jquery对象.css() 获取： jquery对象.css("属性名") 赋值： jquery对象.css("属性名","属性值") 对多个css属性的操作： jquery对象.css({ "属性1"："属性值1", "属性2"："属性值2" }) 获取位置 var $obj=jquery对象.offset() top left 获取宽和高 width() height() jquery对属性的操作： jquery对象.attr() 获取： jquery对象.attr("属性名") 赋值： jquery对象.attr("属性名","属性值") 对多个attr属性的操作： jquery对象.attr({ "属性1"："属性值1", "属性2"："属性值2" }) 删除属性： jquery对象.removeAttr("属性名"); 对class属性的操作： 增加 jquery对象.addClass("属性值"); 删除： jquery对象.removeClass("属性值");
3.1隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.odd{
background-color: #BCD68D;
}
.even{
background-color: #FFFFCC;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//获取偶数行 为蓝色
$("tr:even:gt(0)").css("background-color","blue");
//获取奇数行 为红色
$("tr:odd").css("background-color","red");
})
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
3.2css-属性
<!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.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.1给username添加title属性
$("[name=username]").attr("title","邪恶小法师");
//1.2获取username的title属性
//alert($("[name=username]").attr("title"));
//1.3给username添加value和class属性
$("[name=username]").attr({
"value":"寒冰",
"class":"textClass"
});
//1.4删除username的class属性
$("[name=username]").removeAttr("class");
//2.1给username添加一个名为textClass的样式
$("[name=username]").addClass("textClass");
//2.2删除username的名为textClass的样式
$("[name=username]").removeClass("textClass");
//4.1 给div添加边框样式
$("div").css("border","1px solid red");
//4.2 获取div的边框样式
//alert($("div").css("border"));
//4.3 给div添加多种样式
$("div").css({
"width":"200px",
"height":"200px"
});
//5 获取div的位置
var $obj=$("div").offset();
//alert($obj.top+" : "+$obj.left);
//6 获取div的高和宽
//alert($("div").width()+" : "+$("div").height());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表单</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td><span>密码</span></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button">普通按钮</button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</td>
</tr>
</table>
</form>
<h3>公告信息</h3>
<div>
未满18慎进
</div>
<span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>
案例4：全选全不选
需求：使列表中复选框的选中状态和表头复选框选中状态保持一致
步骤：
-
1.确定事件 click
-
2.获取表头复选框的选中状态
-
3.获取列表复选框对象
-
4.是列表复选框的选中状态和表头复选框选中状态保持一致
/// 一般情况下推荐使用attr,attr使用起来有限制，如果attr在操作jquery属性的时候不好使，那么改用prop
4.1全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#checkTh").click(function(){
//获取表头复选框选中状态
//var $flag=$(this).prop("checked");
//alert($flag);
//获取列表复选框对象
//$(".itemSelect").prop("checked",$flag);
$(".itemSelect").prop("checked",$(this).prop("checked"));
})
});
</script>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="checkTh" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
案例5：省市联动
需求：选择对应的省份，那么在右侧下拉选中可以实时选择对应省份的城市
技术分析：
- jquery
- 遍历
- 文档操作
步骤分析：
-
1.确认事件 change
-
2.获取省份下拉选中的value值
-
3.通过省份的value值获取对应的市的数组
-
4.遍历市的数组，把每一个市插入到市的下拉选中
遍历： js方式： for(var i=0;i<ele.length,i++){ } jquery方式：[js对象1，js对象2，js对象3......] 1. jquery对象.each(function(index,ele){ //this 遍历后的结果 js对象 //ele 遍历后的结果 js对象 //index 索引 }) 2. $.each(jquery对象,function(index,ele){ //this 遍历后的结果 js对象 //ele 遍历后的结果 js对象 //index 索引 }) 对value-html-text的操作 value： 获取： jquery对象.val() 赋值： jquery对象.val("值") html： 获取： jquery对象.html() 赋值： jquery对象.html("值") text： 获取： jquery对象.text() 赋值： jquery对象.text("值") html和text设置值的区别： html会把标签直接解析到页面上 text会把标签作为文本的形式展示到页面上 html和text获取值的区别： html会把标签体中存在的html标签获取出来 text不会把标签体中存在的html标签获取出来 文档操作： 内部插入： append: a.append(c) 把c插入到a内部的后面 prepend: a.prepend(c) 把c插入到a内部的前面 appendTo: a.appendTo(c) 将a插入到c内部的后面 prependTo; a.prependTo(c) 将a插入到c内部的前面 外部插入： after： a.after(c) 把c插入到a外部的后面 before： a.before(c) 把c插入到a外部的前面 insertAfter： a.insertAfter(c) 将a插入到c外部的后面 insertBefore： a.insertBefore(c) 将a插入到c外部的前面 删除节点： empty 清空 remove：移除
5.1each
<!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>05-可见性过滤选择器.html</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//派发事件
$("#b1").click(function(){
//获取隐藏域对象,遍历
$("[type=hidden]").each(function(index,ele){
//打印value值
//alert($(this).val());
alert(index+" : "+ele.value);
})
})
$("#b2").click(function(){
//获取隐藏域对象,遍历
$.each($("input:hidden"), function(index,ele) {
//alert(this.value);
alert(index+" : "+$(ele).val());
});
})
});
</script>
</head>
<body>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2"/>
<br /><br />
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
</body>
</html>
5.2val-html-text操作
<!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.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//3.1 设置 username的默认值为"许多多"
$("[name=username]").val("许多多");
//3.2获取 username的value属性的值
//alert($("[name=username]").val());
//3.3通过html获取div标签体的内容
//alert($("div").html());
//3.4通过html设置div标签体的内容
$("div").html("如果我们角色互换，我会让你知道什么是残忍！");
//3.5通过text获取div标签体的内容
//alert($("div").text());
//3.6通过text设置div标签体的内容
$("div").text("要来一发吗");
//3.7 两者设置值的区别
//$("#sp1").html("<h1>html方式设置值</h1>");
$("#sp1").text("<h1>text方式设置值</h1>");
//3.8 两者获取值的区别
//alert($("#sp").html());
alert($("#sp").text());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表单</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td><span>密码</span></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button">普通按钮</button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</td>
</tr>
</table>
</form>
<h3>公告信息</h3>
<div>
未满18慎进
</div>
<span id="sp">外span<a href='#'>内超链</a></span>
<span id="sp1"></span>
</body>
<span></span>
<div>
<span></span>
</div>
</html>
5.3内部插入节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01_内部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.在city的内部的后面追加 反恐
$("#fk").appendTo($("#city"));
//2.在city的前面内部插入 反恐
$("#city").prepend($("#fk"));
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
</script>
</html>
5.4外部插入节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_外部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.在 p2 的后面插入 city
$("#p2").after($("#city"));
//2.在 p2 的前面插入 city
$("#city").insertBefore($("#p2"))
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script type="text/javascript">
</script>
</html>
5.5删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_删除节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.清空ul
// $("#city").empty();
//2.移除天津 remove
$("#city").remove();
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京<p>海淀区</p></li>
<li id="tj" name="tianjin">天津<p>河西区</p></li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
</script>
</html>
5.6省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
</script>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//获取省份对象 派发change事件
$("#pro").change(function(){
//清空市的下拉选中的内容
//$("#city").empty();
$("#city").html("");
//获取省份的value值
var $flag=$(this).val();
//alert($flag);
//通过value值获取对应省份的市的数组
var cityArrObj=arr[$flag];
//遍历市的数组
$(cityArrObj).each(function(){
//alert(this);
//把遍历后的市 添加到市的下拉选中
//html的方式会覆盖
//$("#city").html("<option>"+this+"</option>");
//文档操作的时候是追加
$("#city").append("<option>"+this+"</option>");
})
})
});
</script>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007"/>
姓名:<input name="username" value="xuduoduo"/><br>
密码:<input type="password" name="password" value="123" disabled="disabled"><br>
性别:<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好:<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像:<input type="file" name="photo"><br>
籍贯:
<select id="pro">
<option >-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select id="city">
<option >-请选择-</option>
</select>
<br>
自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
案例6：左右选中
需求：
- 点击第一个按钮，把选中的第一个数据移动到右侧
- 点击第二个按钮，把选中的所有数据移动到右侧
- 点击第三个按钮，把所有的数据都移动到右侧(不管选中没选中都会移动)
技术分析：
select
multiple=“true” 可以让下拉选选中多个
size=“10” 下拉选显示的个数
表单对象属性选择器：
- :enabled 可用的
- :disabled 不可用
- :checked 选中 (单选和多选)
- :selected 选中 (下拉选)
步骤分析：
- 1.确定事件 click
- 2.第一个按钮：获取左侧选中的第一个数据，并且把第一个数据移动到右侧的下拉选中
- 3.第二个按钮：获取左侧所有选中的数据，并且把选中的所有数据移动到右侧下拉选中
- 4.第三个按钮：获取左侧所有的数据(不管是否选中)，并且把所有的数据移动到右侧的下拉选中
6.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>08-表单对象属性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("我是可用的");
})
// <button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("我是不可用的");
})
// <button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
alert($("[type=checkbox]:checked").length);
})
// <button id="btn4">获取下拉框选中的个数.</button>
$("#btn4").click(function(){
alert($("option:selected").length);
})
});
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<button type="reset">重置所有表单元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的个数.</button>
<br /><br />
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div id="checkboxDivId"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
</body>
</html>
6.2事件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// $("#divId").mouseover(function(){
// $(this).html("鼠标进入");
// }).mouseout(function(){
// $(this).html("鼠标离开");
// })
// $("#divId").hover(function(){
// $(this).html("鼠标进入");
// },function(){
// $(this).html("鼠标离开");
// })
// var i=0;
// $("#bId").click(function(){
// i++;
// if(i%2==0){
// alert("222");
// }else{
// alert("111");
// }
// })
$("#bId").toggle(function(){
alert("111");
},function(){
alert("222")
})
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>
</html>
6.3左右选中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
//给第一个按钮派发单击事件
$("#toRight1").click(function(){
//把选中的第一个数据移动到右侧
$("#left option:selected:first").appendTo($("#right"));
})
//给第二个按钮派发单击事件
$("#toRight2").click(function(){
//把选中的数据移动到右侧
$("#left option:selected").appendTo($("#right"));
})
//给第三个按钮派发单击事件
$("#toRight3").click(function(){
//把所有的数据移动到右侧
$("#left option").appendTo($("#right"));
})
})
</script>
<style>
input[type='button']{
width:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
案例7：表单校验
需求：对表单数据进行校验
技术：jquery的校验器插件
使用：
-
1.导入jquery.js文件
-
2.导入jquery-validate.js文件
-
3.导入messages_zh.js国际化文件
-
4.对表单进行校验
在页面加载成功后获取表单对象.validate({ rules:{}, //校验规则 messages:{} //自定义提示信息 }) rules写法： 要校验的name属性：{ 校验器1：取值， 校验器2：取值 } 注意：多个校验规则之间 使用,分割 message写法： 要校验的name属性：{ 校验器1："自定义提示信息1"， 校验器2："自定义提示信息2" } 校验器： required true/false 必填校验 number true/false 数字校验 min 数字 最小值 max 数字 最大值 range 数值区间 [最小值,最大值] minLength|maxLength|rangLength 最小值|最大值|长度区间 email: email 邮箱校验 *@* 1@x equalTo: jquery对象 重复性校验 自定义校验器： $.validator.addMethod("校验器的名称",function(value,ele,param){ value:用户录入的值 ele：当前录入的值所在的js对象 param：校验器的取值 return true: 符合校验器规则 return false： 不符合校验器规则 (默认return false) },"提示信息") 正则的用法： 正则表达式.test(要匹配的值) 若匹配：true 不匹配：false
7.1表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
//获取要校验的表单
$("#formid").validate({
rules:{
username:{
required:true
},
password:{
required:true,
number:true
},
repassword:{
equalTo:$("#password")
},
email:{
email:email
}
},
messages:{
username:{
required:"用户名不能为空"
},
password:{
required:"密码不能为空",
number:"密码必须为数字"
},
repassword:{
equalTo:"两次密码必须一致"
},
email:{
email:"请输入格式为：*@* 邮箱"
}
}
})
})
</script>
<style>
</style>
<body>
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="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>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女" />女
<!--<label for="sex" class="error"></label>-->
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
7.2validate使用
<!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>
<!--validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<!--国际化库，中文提示-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script type="text/javascript">
$(function(){
$("#formId").validate({
rules:{
username:{
required:true
},
password:{
required:true,
number:true
},
repassword:{
required:true,
equalTo:$("[name=password]")
},
zuixiaozhi:{
min:3
},
shuzhiqujian:{
range:[10,20]
},
card:{
cardLength:true
}
},
messages:{
username:{
required:"用户名不能为空"
},
password:{
required:"密码不能为空",
number:"输入的必须为数字"
},
repassword:{
required:"确认密码不能为空",
equalTo:"两次密码必须一致"
},
zuixiaozhi:{
min:"输入的数字不能小于3"
},
shuzhiqujian:{
range:"请输入10~20之间的数字"
}
}
})
})
</script>
<script>
//编写校验身份证长度的自定义校验器
$.validator.addMethod("cardLength",function(value,ele,param){
//判断用户录入的值是否为15位或者18位
// if(value.length==15||value.length==18){
// return true;
// }
if(typeof param!="boolean"){
return true;
}
//校验身份证格式
if(value.length==15){
var reg=/^[0-9]{15}$/;
return reg.test(value);
}
if(value.length==18){
var reg = /^([0-9]{18}|[0-9]{17}[X|x])$/;
return reg.test(value);
}
},"身份证格式不正确")
</script>
</head>
<body>
<form id="formId" action="">
必填：<input type="text" name="username"/> <br/>
必填数字：<input type="text" name="password"/> <br />
必填重复：<input type="text" name="repassword"/> <br />
最小值：<input type="text" name="zuixiaozhi"/> <br />
区间：<input type="text" name="shuzhiqujian"/> <br />
身份证：<input type="text" name="card" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
