JavaEE 传智28期day04JQuery参考.docx

1、JavaEE 传智28期day04JQuery参考JQuery今日任务 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择教学导航教学目标掌握JQuery的基本使用掌握JQuery的基本选择器,层次选择器会使用JQuery完成DOM的基本操作.教学方法案例驱动法使用JQuery完成页面的弹出广告的效果：需求：在网站的首页上定时弹出一个广告，过几秒之后，广告会自动消失。分析：技术分析：【JQuery的概述】 什么JQuery： JQuery的版本：JQuery1.x

2、 JQuery2.x(不支持IE6,7,8) JQuery的作用：大大简化的JS的代码编写.将页面与JS分离 常见的JS的库：JQuery,prototype,dwr,ExtJS.【JQuery的入门】 / 页面加载完毕 window.onload = function() alert(Hello 王守义); window.onload = function() alert(Hello 老王); / DOM树绘制完毕以后就会执行 jQuery(document).ready(function() alert(Hello 王如花); ); / JQ的简写 jQuery = $ /*jQuery(

3、document).ready(function() alert(Hello 王凤); );*/ $(function() alert(Hello 王凤); ); 【JQ和DOM对象的转换】使用JS写的代码只能调用JS中的属性和方法.使用JQ写的代码只能调用JQ中的属性和方法 / JS function writeIn() / document.getElementById(s1).innerHTML = Hello 王超杰; var s1 = document.getElementById(s1); / 将JS对象转成JQuery的对象 $(s1).html(Hello 王超杰); / JQ

4、 $(function() $(#bt2).click(function() / $(#s1).html(Hello 王守义); / 将JQ的对象转成JS的对象。 / $(#s1)0.innerHTML=Hello 王守义; / $(#s1).get(0).innerHTML = Hello 王守义; ); ); 【JQ的获得元素】$(“#id”)【JQ的效果】* show(); -显示某个元素* hide(); -隐藏某个元素* slideDown(); -向下滑动* slideUp(); -向上滑动* fadeOut(); -淡出* fadeIn(); -淡入* animate(); -自

5、定义动画* toggle(); -单击事件的切换步骤分析： 步骤一：页面加载后，设置一个定时操作.5秒执行一个函数. 步骤二：在函数中获得广告的div.显示div. 步骤三：清空原来的定时,设置一个定时.5秒后执行一个函数. 步骤四：在函数中获得广告的div.隐藏div.代码实现： var time; $(function() / 设置定时 5秒后执行一个显示广告的函数 time = setInterval(showAd(),5000); ); / 显示广告的函数 function showAd() / 获得广告的div，显示 / $(#divAd).show(1000); / $(#divA

6、d).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); 总结：JQuery的选择器：【基本选择器】 ID选择器：$(“#id

7、”) 类选择器：$(“.class”) 元素选择器：$(“元素”) 通配符选择器：$(“*”) 选择器,选择器:$(“#id,.class”)【基本选择器的案例】 $(function() $(#btn1).click(function() $(#one).css(background,#bbffaa); ); $(#btn2).click(function() $(.mini).css(backgroundColor,#bbffaa); ); $(#btn3).click(function() $(div).css(backgroundColor,#bbffaa); ); $(#btn4).

8、click(function() $(*).css(backgroundColor,#bbffaa); ); $(#btn5).click(function() $(#two,.mini).css(backgroundColor,#bbffaa); ); ); 111 222 333 444 555 666 【JQ的层级选择器】 Ancestor descendant2 Parent child Prev+next Prevsibling【JQ层级选择器的代码】 $(function() $(#btn1).click(function() $(body div).css(background,

9、#bbffaa); ); $(#btn2).click(function() $(bodydiv).css(backgroundColor,#bbffaa); ); $(#btn3).click(function() $(#two+div).css(backgroundColor,#bbffaa); ); $(#btn4).click(function() $(#onediv).css(backgroundColor,#bbffaa); ); ); 111 222 333 444 555 666 【JQ的基本过滤选择器】$(function() $(#btn1).click(function(

10、) $(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的属性选择器】 $(function()

11、 $(#btn1).click(function() $(divtitle).css(background,#bbffaa); ); $(#btn2).click(function() $(divtitle=aaa).css(backgroundColor,#bbffaa); ); ); 【JQ的表单选择器】 $(function() $(#btn1).click(function() $(:input).css(background,#bbffaa); ); $(#btn2).click(function() $(:text).css(background,#bbffaa); ); );使用

12、JQuery完成表格的隔行换色需求：制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色分析：技术分析：【JQuery的CSS类】使用addClass(),removeClass(); 添加或移除样式步骤分析： 步骤一：在页面中引入一个jquery的js 步骤二：写页面加载的函数. 步骤三：使用选择器基本过滤找到奇数行和偶数行 步骤四：分别给不同的行添加样式（样式已经由美工制作好的）代码实现： $(function() / 找奇数行： /$(tr:odd).addClass(odd); / 偶数行: /$(tr:even).addClass(even); $(tbody

13、tr:odd).addClass(odd); $(tbodytr:even).addClass(even); ); 使用JQuery完成复选框的全选和全不选需求：有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.分析：技术分析：【JQuery操作某个元素的属性】 $(function() $(#bt1).click(function() / 获得属性的值 / alert($(#img1).attr(src); / 修改属性的值: $(#img1).attr(src,././img/f001a62f-a4

14、9d-4a4d-b56f-2b6908a0002c_g.jpg); ); ); 步骤分析： 步骤一：引入jquery的js 步骤二：编写加载的方法. 步骤三：上面的复选框绑定一个单击事件 步骤四：如果上面的被选中，修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.代码实现： $(function() / 步骤一：为上面的复选框绑定单击事件: $(#selectAll).click(function() /*if(this.checked = true) / 如果上面的复选框被选中： $(inputname=ids).attr(checked,

15、true); else / 上面的复选框没有被选中 $(inputname=ids).attr(checked,false); */ / $(inputname=ids).attr(checked,this.checked); $(inputname=ids).prop(checked,this.checked);/ this JS的对象 ); );总结：低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.使用JQuery完成省市联动需求：在注册的页面上有省市联动.分析：技术分析:【JQuery的遍历】each的方法进行遍历.一种用法：* JQ的对象.each(

16、function(i,n);二种用法* $.each(数组,function(i,n);【JQuery的DOM的操作】JS中添加元素：appendChild();JQ中添加元素：append();appendTo();步骤分析： 步骤一：引入jquery.js 步骤二：加载的方法. 步骤三：定义二维数组 步骤四：在第一个省份的下拉列表中绑定一个事件change 步骤五：在绑定的事件的函数中，获得选中的省份的值. 步骤六：遍历数组，省份的值与数组中的值比较. 步骤七：获得数组的值.遍历获得的值. 步骤八：获得每个值.创建元素，创建文本节点. 步骤九：将文本添加到option元素中.将option

17、添加到第二个下拉列表中 .代码实现： / 定义二维数组： var cities = 长春市,吉林市,延边市,白山市,松原市, 济南市,青岛市,临沂市,烟台市, 石家庄,唐山,保定,承德,秦皇岛, 南京,苏州,扬州,无锡 ; $(function() / 获得省份的下拉列表，绑定事件 $(#province).change(function() / 获得下拉列表的值: / alert(this.value); var val = this.value; var $city = $(#city); $city0.options.length = 0; $(cities).each(function

18、(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); ); ); ); )

19、;总结【JQuery的文档操作】$(“a”).append(“b”); / 将b添加到a元素中.$(“a”).appendTo(“b”); / 将a添加到b元素中.$(“a”).insertBefore(“b”); / 将a元素插入到b元素之前$(“a”).insertAfter(“b”); / 将a元素插入到b元素之后$(“a”).remove(); / 将a元素移除使用JQuery完成下拉列表的左右选择：需求：在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择分析：技术分析：JQuery的选择器和文档操作.步骤分析： 步骤一：引入jquery的文件 步骤二：页面加载的函数 步骤三：在链接上添加一个事件. 步骤四：使用选择器找到左侧的列表中被选中的元素，添加到右侧.代码实现： $(function() / 将左侧选中的option添加到右侧 $(#add).click(function() $(#selectLeft option:selected).appendTo(#selectRight); ); / 将左侧所有的option添加到右侧 $(#addAll).click(function()