今日内容
使用JQuery完成页面定时弹出广告
使用JQuery完成表格的隔行换色
使用JQuery完成复选框的全选效果
使用JQuery完成省市联动效果
使用JQuery完成下列列表左右选择
使用JQuery完成表单的校验.
今日目标：
掌握JQuery的基本使用
掌握JQuery的基本选择器,层次选择器
会使用JQuery完成DOM的基本操作
定时弹出广告
-
定时器: setInterval setTimeout
clearInterval
style.display : none 隐藏 block显示
注册表单:
事件: onfocus 获焦点 onblur 失去焦点 onkeyup 按键抬起的时候
-
正则表达式校验邮箱. js . <script src=""></script>
<script type="text/javascript" src="../js/check.js" ></script>
onsubmit = "return checkForm()"
表格隔行换色
-
table.rows
row.style.backgroundColor
window.onload
表格全选和全不选:
checked属性:
document.getElementById()
document.getElementsByName() 返回的是一个数组
省市联动:
DOM:
//创建节点: document.createElement()
//创建文本节点: document.createTextNode()
//添加节点: appendChild()
商品左右选择中:
事件:
select改变的时候:
onchange
ondbclick()
1. 使用JQuery完成页面定时弹出广告
1.1 需求分析：
当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
如何定时弹出广告
如何显示广告
如何隐藏广告
1.2 技术分析
【什么是JQuery】
【JQuery的作用是什么】
它封装了很多效果，事件，能够大大的提高我们的开发效率
将我们的页面和Js分离出来
【JQuery的入门】
<script>
window.onload = function(){
alert("window.onload 结束");
}
window.onload = function(){
alert("window onload 2 结束啦")
}
//jQuery的写法
jQuery(document).ready(function(){
alert("jquery ready 结束");
});
jQuery(document).ready(function(){
alert("jqeuery ready 结束啦");
});
//我们发现ready时间可以被多次调用，并且不会像window.onload时间一样被覆盖，执行顺序是按定义顺序执行
// jQuery = $
$(document).ready(function(){
alert("jqeuery ready 结束啦啦啦");
});
//更加简洁的写法
$(function(){
alert("jquery 终极简洁版");
});
</script>
【JQ和JS之间的转换】
JS对象只能调用JS的属性和方法
JQ对象只能调用JQ的属性和方法
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1. 给按钮注册事件， onclick 事件
//2. 实现事件对应的函数
function change(){
//找到span 元素
var span = document.getElementById("span");
// span.innerHTML="我被JS按钮修改了内容";
$(span).html("我调用了JQ的方法");
}
$(function(){
//1.需要找到要绑定事件的元素
$("#jq_btn").click(function(){
//2. 找到我们要操作的元素
//$("#span").html("我被JQ按钮修改啦");
$("#span")[0].innerHTML="我调用的是JS属性";
$("#span").get(0).innerHTML="我通过get(0)调用的是JS属性";
});
});
</script>
【JQ中根据ID查找元素】
$("#ID") JQuery中的ID选择器
【JQ中的动画效果】
show : 控制元素显示
hide : 隐藏元素
toggle : 开关效果，循环调用
slideDown : 向下滑动
slideUp : 向上滑动
slideToggle : 开关上下滑动
animate : 自定义动画
stop : 停止动画
delay : 延迟执行
1.3 步骤分析：
注册一个JQ中ready 事件
3秒之后显示广告， show(3000);
显示5秒钟
隐藏广告
代码实现
/*
1. 确定事件 : onload
2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)
3. 广告显示三秒钟
4. 隐藏广告
* */
$(function(){
function showAD(){
$("#ad").show();
setTimeout(hideAD,3000);
}
function hideAD(){
$("#ad").hide();
}
setTimeout(showAD,1000);
});
JQuery中的选择器
选择器的目的是让我们能够更加精确的找到页面中的元素
基本选择器
-
ID选择器
$("#id") -
类选择器
$(".className") -
元素选择器
$("元素的名称") -
通配符选择器
$("*") -
选择器,选择器
$("#id,.className")
基本选择器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的基本选择器</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(){
//ID选择器
$("#btn_id").click(function(){
$("#one").css("backgroundColor","#bbffaa");
});
//元素选择器
$("#btn_element").click(function(){
$("div").css("backgroundColor","#bbffaa");
});
//类选择器
$("#btn_mini").click(function(){
$(".mini").css("backgroundColor","#bbffaa");
});
//通配符选择器
$("#btn_all").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
//多选择器
$("#btn_selector").click(function(){
$(".mini,span").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择ID为one的元素" id="btn_id" />
<input type="button" value="选择所有div元素" id="btn_element" />
<input type="button" value="选择所有mini类的元素" id="btn_mini" />
<input type="button" value="通配符选择器" id="btn_all" />
<input type="button" value="多选择器" id="btn_selector" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的层级选择器
Ancestor descendant后代选择器
parent > child子元素选择器
prev + next 兄弟元素选择器
prev
~siblings 所有兄弟选择器
JQ中层级选择器案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的层级选择器</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(){
//ancestor descendant 后代选择器
$("#btn1").click(function(){
$("body div").css("backgroundColor","#bbffaa");
});
//parent > child 父子选择器
$("#btn2").click(function(){
$("body > div").css("backgroundColor","#bbffaa");
});
//prev + next 父子选择器
$("#btn3").click(function(){
$("#two + div").css("backgroundColor","#bbffaa");
});
//prev + next 兄弟选择器
$("#btn3").click(function(){
$("#two + div").css("backgroundColor","#bbffaa");
});
//prev ~ next 同辈选择器
$("#btn4").click(function(){
$("#one ~ div").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择body中所有的后代div" id="btn1" />
<input type="button" value="选择body中所有的子div" id="btn2" />
<input type="button" value="选择id为two的下一个元素" id="btn3" />
<input type="button" value="选择id为one的所有同辈" id="btn4" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的基本过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的基本过滤器</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(){
//找到第一个mini div
$("#btn1").click(function(){
$(".mini:first").css("backgroundColor","#bbffaa");
});
//找到最后一个mini div
$("#btn2").click(function(){
$("div .mini:last").css("backgroundColor","#bbffaa");
});
//过滤基数/偶数div
$("#btn3").click(function(){
$("body div:odd").css("backgroundColor","#FFFFEE");
$("body div:even").css("backgroundColor","#bbffaa");
});
//找出所有的div 剔除id为two
$("#btn4").click(function(){
$("body div:not(#two)").css("backgroundColor","#FFFFEE");
});
});
</script>
</head>
<body>
<input type="button" value="找出第一个mini div" id="btn1" />
<input type="button" value="找出最后一个mini div" id="btn2" />
<input type="button" value="过滤基数/偶数div" id="btn3" />
<input type="button" value="找过所有div 剔除Id为two" id="btn4" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的属性选择器</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(){
//选择有title属性的div
$("#btn1").click(function(){
$("div[title]").css("backgroundColor","#bbffaa");
});
//选择有title='bbb'属性的div
$("#btn2").click(function(){
$("div[title='bbb']").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择有title属性的div" id="btn1" />
<input type="button" value="选择有title='bbb'属性的div" id="btn2" />
<hr />
<div id="one">
<div class="mini" title="aaa">
1-111
</div>
</div>
<div id="two">
<div class="mini" title="bbb">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的表单过滤器
<!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(){
$(":text").css("background-color","#E9FBEB")
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="筛选出所有的input" />
<hr />
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
</body>
</html>
定时弹出广告:
slideDown : 必须得指定宽度
show()
hide()
选择器
-
基本选择器:
ID选择器 #
类选择器 .
元素选择器 元素的名称
通配符选择器 *
选择器选择器 选择器1, 选择器2
-
层级选择器:
后代选择器 : 选择器 选择器
子元素选择器: 选择器1 > 选择器2
相邻兄弟选择器: 选择器 + 选择器2
找到所有兄弟选择器: 选择器1
~选择器2
属性选择器
使用JQ完成表格的隔行换色
需求分析:
在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色
技术分析:
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面加载
$(document).ready(function(){
//获取表单
$("tbody tr:odd").css("background-color","#FF0000");
$("tbody tr:even").css("background-color","#FFF38F");
$("tr").click(function(){
var $color = $(this).css("background-color");
var $this = $(this);
$(this).css("background-color","yellow");
$(this).click(function(){
$this.css("background-color",$color);
});
});
//表单的全选与全不选
/*$("#ck1").click(function(){
var v = this.checked;
//alert(v);
$("input[name='ck2']").each(function(index,name){
//alert(this.checked);
this.checked = v;
});
});*/
$("#ck1").click(function(){
//检查id为#ck1是否被选中,选中为true,未选中为false
var flag = $(this).prop("checked");
$("input[name='ck2']").prop("checked",flag);
});
});
</script>
</head>
<body>
<table id="table1" border="1px" width="700px" height="200px" align="center">
<thead>
<tr>
<td>
<input type="checkbox" id="ck1"/>
</td>
<th>
分类ID
</th>
<th>
分类名称
</th>
<th>
分类商品
</th>
<th>
分类描述
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
1
</td>
<td>
手机数码
</td>
<td>
三星NOTE7,IPhone7
</td>
<td>
这里面放的都是最新手机
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
2
</td>
<td>
黄鹤楼,双喜,长白山,白沙
</td>
<td>
分类商品
</td>
<td>
这里面都是香烟
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
3
</td>
<td>
电脑办公
</td>
<td>
MBP,联想
</td>
<td>
电脑
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
4
</td>
<td>
冰箱洗衣机
</td>
<td>
海尔,格力,三菱,美的
</td>
<td>
冰箱洗衣机
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
使用JQuery完成表单的全选全不选功能
需求分析
在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,
技术分析:
通过JQ来修改页面元素的属性, 演示代码如下
$(function(){
$("#bt1").click(function(){
// 获得属性的值
// alert($("#img1").attr("src"));
// 修改属性的值:
$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
});
});
代码实现:
$(function(){
/*
1. 确定事件 onclick
2. 要操作的元素: 顶部全选按钮
3. 实现点击事件
* 获取当前选中的状态
* 使用过滤器,过滤出所有的checkbox
* 改变他们的状态
*/
$("#ckall").click(function(){
// var checked = $("#ckall").prop("checked");
var checked = this.checked;
// alert(checked);
$("tbody input[type='checkbox']").prop("checked",checked);
})
});
使用JQ完成省市联动效果
需求分析:
在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市
技术分析:
-
JQuery中的遍历:
一种方法:
JQ的对象.each(function(i,n){});
第二种方法:
$.each(数组,function(i,n){});
如何使用JQ来添加元素
JQuery的DOM操作
JQ中添加元素:
append(); 添加字节点
appendTo(); 将自己添加到
步骤分析:
定义一个二维数组,用来保存城市的信息
确定事件 onchange事件
找到要操作的select
获取选中的城市
动态添加option节点到城市select中
代码实现:
var provinces = [
["武汉市","黄石市","随州市","荆门市"],
["长沙市","株洲市","邵阳市"],
["广州市","深圳市","东莞市","惠州市"]
];
$(function(){
$("#selectProvince").change(function(){
//alert(this.value);
var cities = provinces[this.value];
// $("#selectCity").empty();
$("#selectCity")[0].options.length = 0;
$(cities).each(function(i,n){
$("#selectCity").append("<option>"+n+"</option>")
});
});
});
使用JQ完成下拉列表左右选择
需求分析
我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品
技术分析
JQuery中的选择器使用,还有文档的增删
步骤分析
引入jquery文件
页面加载完成的事件
在链接上添加一个事件
使用append()函数将选中的option 添加子节点
代码实现
$(function(){
$("#clickOne").click(function(){
// var value = $("#selectLeft>option:selected").val();
$("#selectRight").append($("#selectLeft>option:selected"));
// $("#selectLeft>option:selected").appendTo("#selectRight");
});
$("#clickAll").click(function(){
$("#selectRight").append($("#selectLeft>option"));
});
});
使用JQ完成表单的校验
需求分析
在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示
技术分析
需要用到事件:
blur事件
focus事件
keyup事件
submit事件
步骤分析
为输入框添加blur事件
在blur事件触发的函数中,获得文本框
判断用户输入的值是否为空,如果为空,提示一下
添加submit事件
判断表单上的错误数量
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/style2.css" />
<link rel="stylesheet" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//给所有必填项添加一个小红点
$("form .required").parent().append("<b class='high'>*<b>");
//给所有的框添加一个blur事件
$("form input").blur(function(){
var $parent = $(this).parent();
//移除原有的span
$parent.find(".formtips").remove();
//判断当前在处理的控件
if($(this).is("#username")){
if(this.value == ""){
//<span>用户名不能为空!</span>
$parent.append("<span class='formtips onError'>用户名不能为空!</span>");
}else{
//<span>用户名输入正确!</span>
$parent.append("<span class='formtips onSuccess' >用户名输入正确!</span>");
}
}
if($(this).is("#password")){
if(this.value == ""){
$parent.append("<span class='formtips onError'>密码不能为空!</span>");
}else{
$parent.append("<span class='formtips onSuccess' >密码输入正确!</span>");
}
}
// /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
if($(this).is("#mail")){
if(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(this.value)){
$parent.append("<span class='formtips onSuccess'>邮箱格式正确!</span>");
}else{
$parent.append("<span class='formtips onError' >邮箱格式不对!</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
$("form").submit(function(){
$("form .required").trigger("focus");
//看看哪一行不为0
var length = $("form .onError").length
//alert(length);
if(length > 0){
return false;
}
});
});
</script>
</head>
<body>
<div>
<div>
<div class=top>
<img src="../img/logo2.png" />
</div>
<div class="top">
<img src="../img/header.png" />
</div>
<div class="top" style="padding-top: 20px; height:40px">
<a>登录</a>
<a>注册</a>
<a>购物车</a>
</div>
</div>
<!--定义一个空的div 用于<br />clear浮动-->
<div class="clear"></div>
<!--导航栏-->
<div style="border: 1px black solid; height: 38px;font-size: 15px;color: white;width: 100%; ">
<ul>
<li style="display: inline;">首页</li>
<li style="display: inline;">手机数码</li>
<li style="display: inline;">电脑办公</li>
<li style="display: inline;">鞋靴箱包</li>
<li style="display: inline;">洗漱用品</li>
</ul>
</div>
<div style="background: url(../img/regist_bg.jpg); height: 500px;width: 100%;margin: 10px 0px;">
<div style="border: 5px solid black;width:800px; height: 400px; position: absolute;top: 150px;left: 310px;">
<h3>用戶注册</h3>
<form action="../案例四：网站首页/index.html" method="get" enctype="application/x-www-form-urlencoded">
<table width="100%" height="100%" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" id="username" class="required"/></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" id="password" class="required"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" class="required" id="mail"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" style="background: url(../img/register.gif);" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--信息栏-->
<div>
<img src="../img/footer.jpg" />
</div>
<div align="center">
<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><br /> Copyright © 2005-2016 xx商城 版权所有
</div>
</div>
</body>
</html>