JQuery
今日任务
- 使用JQuery完成页面定时弹出广告
- 使用JQuery完成表格的隔行换色
- 使用JQuery完成复选框的全选效果
- 使用JQuery完成省市联动效果
- 使用JQuery完成下列列表左右选择
教学导航
|
教学目标 |
掌握JQuery的基本使用 掌握JQuery的基本选择器,层次选择器 会使用JQuery完成DOM的基本操作. |
|
教学方法 |
案例驱动法 |
1.1 使用JQuery完成页面的弹出广告的效果：
1.1.1 需求：
在网站的首页上定时弹出一个广告，过几秒之后，广告会自动消失。
1.1.2 分析：
1.1.2.1 技术分析：
【JQuery的概述】
- 什么JQuery：
- JQuery的版本：
JQuery1.x JQuery2.x(不支持IE6,7,8)
- JQuery的作用：
大大简化的JS的代码编写.
将页面与JS分离
- 常见的JS的库：
JQuery,prototype,dwr,ExtJS...
【JQuery的入门】
<script src="../../js/jquery-1.8.3.js"></script>
<script>
// 页面加载完毕
window.onload = function(){
alert("Hello 王守义");
}
window.onload = function(){
alert("Hello 老王");
}
// DOM树绘制完毕以后就会执行
jQuery(document).ready(function(){
alert("Hello 王如花");
});
// JQ的简写 jQuery = $
/*jQuery(document).ready(function(){
alert("Hello 王凤");
});*/
$(function(){
alert("Hello 王凤");
});
</script>
【JQ和DOM对象的转换】
使用JS写的代码只能调用JS中的属性和方法.
使用JQ写的代码只能调用JQ中的属性和方法．
<script src="../../js/jquery-1.8.3.js"></script>
<script>
// JS
function writeIn(){
// document.getElementById("s1").innerHTML = "Hello 王超杰";
var s1 = document.getElementById("s1");
// 将JS对象转成JQuery的对象
$(s1).html("Hello 王超杰");
}
// JQ
$(function(){
$("#bt2").click(function(){
// $("#s1").html("Hello 王守义");
// 将JQ的对象转成JS的对象。
// $("#s1")[0].innerHTML="Hello 王守义";
// $("#s1").get(0).innerHTML = "Hello 王守义";
});
});
</script>
【JQ的获得元素】
$(“#id”)
【JQ的效果】
* show(); --显示某个元素
* hide(); --隐藏某个元素
* slideDown(); --向下滑动
* slideUp(); --向上滑动
* fadeOut(); --淡出
* fadeIn(); --淡入
* animate(); --自定义动画
* toggle(); --单击事件的切换
1.1.2.2 步骤分析：
- 步骤一：页面加载后，设置一个定时操作.5秒执行一个函数.
- 步骤二：在函数中获得广告的div.显示div.
- 步骤三：清空原来的定时,设置一个定时.5秒后执行一个函数.
- 步骤四：在函数中获得广告的div.隐藏div.
1.1.3 代码实现：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
var time;
$(function(){
// 设置定时 5秒后执行一个显示广告的函数
time = setInterval("showAd()",5000);
});
// 显示广告的函数
function showAd(){
// 获得广告的div，显示
// $("#divAd").show(1000);
// $("#divAd").slideDown(3000);
$("#divAd").fadeIn(3000);
// 清空定时：
clearInterval(time);
// 重新设置定时:
time = setInterval("hideAd()",5000);
}
// 隐藏广告的函数:
function hideAd(){
// 获得广告的div，隐藏
// $("#divAd").hide(3000);
// $("#divAd").slideUp(3000);
$("#divAd").fadeOut(3000);
// 清空定时：
clearInterval(time);
}
</script>
1.1.4 总结：
1.1.4.1 JQuery的选择器：
【基本选择器】
- ID选择器：
$(“#id”)
- 类选择器：
$(“.class”)
- 元素选择器：
$(“元素”)
- 通配符选择器：
$(“*”)
- 选择器,选择器:
$(“#id,.class”)
【基本选择器的案例】
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background","#bbffaa");`
});
$("#btn2").click(function(){
$(".mini").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("div").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
$("#btn5").click(function(){
$("#two,.mini").css("backgroundColor","#bbffaa");
});
});
</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>
【JQ的层级选择器】
- Ancestor descendant2
- Parent >child
- Prev+next
- Prev~sibling
【JQ层级选择器的代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("body>div").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("#two+div").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("#one~div").css("backgroundColor","#bbffaa");
});
});
</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>
【JQ的基本过滤选择器】
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("body div:last").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("body div:odd").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("body div:even").css("backgroundColor","#bbffaa");
});
});
【JQ的属性选择器】
<script>
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("div[title='aaa']").css("backgroundColor","#bbffaa");
});
});
</script>
【JQ的表单选择器】
$(function(){
$("#btn1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#btn2").click(function(){
$(":text").css("background","#bbffaa");
});
});
1.2 使用JQuery完成表格的隔行换色
1.2.1 需求：
制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色．
1.2.2 分析：
1.2.2.1 技术分析：
【JQuery的CSS类】
使用addClass(),removeClass(); 添加或移除样式
1.2.2.2 步骤分析：
- 步骤一：在页面中引入一个jquery的js
- 步骤二：写页面加载的函数.
- 步骤三：使用选择器基本过滤找到奇数行和偶数行
- 步骤四：分别给不同的行添加样式（样式已经由美工制作好的）
1.2.3 代码实现：
<script>
$(function(){
// 找奇数行：
//$("tr:odd").addClass("odd");
// 偶数行:
//$("tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});
</script>
1.3 使用JQuery完成复选框的全选和全不选
1.3.1 需求：
有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.
1.3.2 分析：
1.3.2.1 技术分析：
【JQuery操作某个元素的属性】
<script>
$(function(){
$("#bt1").click(function(){
// 获得属性的值
// alert($("#img1").attr("src"));
// 修改属性的值:
$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
});
});
</script>
1.3.2.2 步骤分析：
- 步骤一：引入jquery的js
- 步骤二：编写加载的方法.
- 步骤三：上面的复选框绑定一个单击事件
- 步骤四：如果上面的被选中，修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.
1.3.3 代码实现：
$(function(){
// 步骤一：为上面的复选框绑定单击事件:
$("#selectAll").click(function(){
/*if(this.checked == true){
// 如果上面的复选框被选中：
$("input[name='ids']").attr("checked",true);
}else{
// 上面的复选框没有被选中
$("input[name='ids']").attr("checked",false);
}*/
// $("input[name='ids']").attr("checked",this.checked);
$("input[name='ids']").prop("checked",this.checked);// this JS的对象
});
});
1.3.4 总结：
低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.
1.4 使用JQuery完成省市联动
1.4.1 需求：
在注册的页面上有省市联动.
1.4.2 分析：
1.4.2.1 技术分析:
【JQuery的遍历】
each的方法进行遍历.
一种用法：
* JQ的对象.each(function(i,n){
});
二种用法
* $.each(数组,function(i,n){
});
【JQuery的DOM的操作】
JS中添加元素：appendChild();
JQ中添加元素：
append();
appendTo();
1.4.2.2 步骤分析：
- 步骤一：引入jquery.js
- 步骤二：加载的方法.
- 步骤三：定义二维数组
- 步骤四：在第一个省份的下拉列表中绑定一个事件change
- 步骤五：在绑定的事件的函数中，获得选中的省份的值.
- 步骤六：遍历数组，省份的值与数组中的值比较.
- 步骤七：获得数组的值.遍历获得的值.
- 步骤八：获得每个值.创建元素，创建文本节点.
- 步骤九：将文本添加到option元素中.将option添加到第二个下拉列表中 .
1.4.3 代码实现：
// 定义二维数组：
var cities = [
["长春市","吉林市","延边市","白山市","松原市"],
["济南市","青岛市","临沂市","烟台市"],
["石家庄","唐山","保定","承德","秦皇岛"],
["南京","苏州","扬州","无锡"]
];
$(function(){
// 获得省份的下拉列表，绑定事件
$("#province").change(function(){
// 获得下拉列表的值:
// alert(this.value);
var val = this.value;
var $city = $("#city");
$city[0].options.length = 0;
$(cities).each(function(i,n){
// alert(i+" "+n);
if( val == i){
$(n).each(function(j,m){
// alert(m);
// 创建option元素
var opEL = document.createElement("option");
// 创建文本节点
var textNode = document.createTextNode(m);
// 将文本添加到option中
// opEL.appendChild(textNode);
$(opEL).append(textNode);
// 将option添加到第二个列表中
$city.append(opEL);
});
}
});
});
});
1.4.4 总结
【JQuery的文档操作】
$(“a”).append(“b”); // 将b添加到a元素中.
$(“a”).appendTo(“b”); // 将a添加到b元素中.
$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前
$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后
$(“a”).remove(); // 将a元素移除
1.5 使用JQuery完成下拉列表的左右选择：
1.5.1 需求：
在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择
1.5.2 分析：
1.5.2.1 技术分析：
JQuery的选择器和文档操作.
1.5.2.2 步骤分析：
- 步骤一：引入jquery的文件
- 步骤二：页面加载的函数
- 步骤三：在链接上添加一个事件.
- 步骤四：使用选择器找到左侧的列表中被选中的元素，添加到右侧.
1.5.3 代码实现：
<script>
$(function(){
// 将左侧选中的option添加到右侧
$("#add").click(function(){
$("#selectLeft option:selected").appendTo("#selectRight");
});
// 将左侧所有的option添加到右侧
$("#addAll").click(function(){
$("#selectLeft option").appendTo("#selectRight");
});
// 双击事件
$("#selectLeft").dblclick(function(){
$("option:selected",this).appendTo("#selectRight");
});
});
</script>
1.5.4 总结：
1.5.4.1 JQuery中常用的事件：