黑马代码基础第四章web004j篇_第1页
黑马代码基础第四章web004j篇_第2页
黑马代码基础第四章web004j篇_第3页
黑马代码基础第四章web004j篇_第4页
黑马代码基础第四章web004j篇_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构第四章 WEB04_jQuery 篇今日任务使用 JQuery 完成页面定时弹出(DOM 转换和选择器)使用 JQuery 完成表格的隔行换色使用 JQuery 完成复选框的全选效果(jQuery 的属性操作)使用 JQuery 完成省市联动效果(jQuery 的遍历和 DOM 操作)使用 JQuery 完成下列列表左右选择(jQuery 的使用 JQuery 完成表单的校验.)教学导航一、使用 JQ 完成首页的定时弹出1.需求分析在首页中(logo 的上方)显示一个图片(页面加载后，间隔 3 秒弹出图片

2、，再间隔 3 秒后隐藏图片)。【使用 jQuery 实现】传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任教学目标掌握 JQuery 的基本使用掌握 JQuery 的基本选择器,层次选择器会使用 JQuery 完成 DOM 的基本操作.教学方法案例驱动法专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构2.技术分析2.1 jquery 相关的知识Ø什么是 jqueryJquery 它是 javascript 的一个轻量级框架，对 javascript 进行，它提供了很多方便的选择器。供你快速到需要操作的元素上面去。还提供了很

3、多便捷的方法。Ø怎么使用 jqueryJquery 它是一个库(框架)，要想使用它，必须先引入！jquery-1.8.3.js：一般用于学习阶段。jquery-1.8.3.min.js：用于项目使用阶段ØJquery 的简单入门所有的 jquery 代码写在页面加载函数$(function() Jquery 代码);传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head><meta charset="UTF-8"><title>jquery入门</title>

4、<script src="././js/jquery-1.8.3.js"></script><script>/整个文档加载完毕后执行/*function init() alert("张三");*/专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构/*window.onload= function()alert("张三");/整个文档加载完毕后(包括图片)执行window.onload= function()alert("老王");/dom树

5、绘制完毕后执行,可能DOM元素关联的东西并没有加载完jQuery(document).ready(function()alert("李四"););/jquery的简写方法(页面加载)$(function()alert(""););*/function init()document.getElementById("a1").onclick= location.href=""function()$(function()document.getElementById("a1").onclick= lo

6、cation.href="");function()$(function()document.getElementById("a2").onclick= location.href="");function()</script></head><body onload="init()"><a href="#" id="a1">ss</a><a href="#" id="a2"

7、;></a>传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构Ø获取元素JS:document.getElementById();JQ:$(“#id”);ØJquery 对象与 DOM 对象转换传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head><meta charset="UTF-8"><title></title><scr

8、ipt type="text/javascript" src="././js/jquery-1.8.3.js" ></script><script>function JSWrite()/document.getElementById("span1").innerHTML="美美哒！" var spanEle = document.getElementById("span1");$(spanEle).html("美美哒！");$(function(

9、)/*document.getElementById("btn1").onclick = function() document.getElementById("span1").innerHTML="哒！"*/$("#btn1").click(function()/JQ对象转换成DOM对象的第式/$("#span1")0.innerHTML="呵呵哒！"/JQ对象转换成DOM对象的第二种方式$("#span1").get(0).innerHTML=&quo

10、t;呵呵哒！"););</script></head><body><input type="button" value="JS写入" onclick="JSWrite()"/><input type="button" value="JQ写入" id="btn1"/><br /><br /><span id="span1">sssss</span&

11、gt;</body></body></html>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构注意：JQ 对象只能操作 JQ 里面的属性和方法JS 对象只能操作 JS 里面的属性和方法。ØJquery 的效果3.实现步骤第一步：引入 jQuery 相关的文件第二步：书写页面加载函数第三步：在页面加载函数中，获取显示图片的元素。第四步：设置定时操作(显示图片的函数)第五步：在显示图片的函数中，使用 jQuery 的方法让图片显示(show()第六步：清除显示图片的定时操作第七步：设置定时操作(隐藏图片的函数

12、)第八步：在隐藏图片的函数中，使用 jQuery 的方法让图片隐藏(hide()第九步：清除隐藏图片的定时操作4.代码实现传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<script type="text/javascript"> var time;$(function() time=setInterval("showAd()",3000);</html>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构5.补充内容Toggle 的使用传智播客致力打造专业的IT 高级培

13、训课程务实、创新、质量、专注、责任<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()$("#img1").toggle();)

14、;);</script></head><body><input type="button" value="显示/隐藏" id="btn1"/><br /><img src="./img/registImg.jpg" id="img1" /></body></html>);function showAd()/$("#img1").show();/$("#img1"

15、).slideDown(3000);$("#img1").fadeIn(3000); clearInterval(time);time = setInterval("hideAd()",5000);function hideAd()/$("#img1").hide();/$("#img1").slideUp(3000);$("#img1").slideUp(3000); clearInterval(time);</script>专业java、php、iOS、C+、网页设计、平面设计、

16、网络、开发、前端与移动开发培训机构6.总结6.1 jquery 的选择器Ø基本选择器id 选择器：$(“#id 名称”); 元素选择器：$(“元素名称”);类选择器：$(“.类名”); 通配符：*多个选择器共用(并集)案例代码：传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head><meta charset="UTF-8"><title>基本选择器</title><link rel="stylesheet" href="././cs

17、s/style.css" type="text/css"/><script type="text/javascript" src="././js/jquery-1.8.3.js" ></script><script>$(function()$("#btn1").click(function()$("#one").css("background-color","pink"););$("#btn2&

18、quot;).click(function()$(".mini").css("background-color","pink"););$("#btn3").click(function()$("div").css("background-color","pink"););$("#btn4").click(function()$("*").css("background-color","p

19、ink"););$("#btn5").click(function()$("#two .mini").css("background-color","pink");););</script></head><body><input type="button" id="btn1" value="选择为one的元素"/><input type="button" id="

20、btn2" value="选择样式为mini的元素"/><input type="button" id="btn3" value="选择所有的div元素"/>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<input type="button" id="btn4" value="选择所有元素"/><i

21、nput 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&

22、quot;> 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&g

23、t;专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构Ø层级选择器ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)> child : 在给定的父元素下匹配所有的子元素(儿子)parentprev + prev next: 匹配所有紧接在 prev元素后的 next 元素(紧挨着的，同桌)siblings: 匹配prev 元后的所有siblings 元素(兄弟)代码演示：传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head>&l

24、t;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(f

25、unction()$("body div").css("background-color","pink"););$("#btn2").click(function()$("body>div").css("background-color","pink"););$("#btn3").click(function()$("#two+div").css("background-color",&qu

26、ot;pink"););$("#btn4").click(function()$("#onediv").css("background-color","pink");););</script></head><body><input type="button" id="btn1" value="选择body中的所有的div元素"/><input type="button" i

27、d="btn2" value="选择body中的第一级的孩子"/><input type="button" id="btn3" value="选择id为two的元素的下一个元素"/><input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构Ø基本过滤选择

28、器$('li').first() 等价于：$(“li:first”)传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<hr/><div id="one"><div class="mini"> 111</div></div><div id="two"><div class="mini"> 222</div><div class="mini"> 333<

29、;/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>专业java、php、iOS

30、、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构代码案例演示：传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head><meta charset="UTF-8"><title>基本过滤选择器</title><link rel="stylesheet" href="././css/style.css" type="text/css"/><script type="text/java

31、script" src="././js/jquery-1.8.3.js" ></script><script>$(function()$("#btn1").click(function()$("div:first").css("background-color","pink"););$("#btn2").click(function()$("div:last").css("background-color&

32、quot;,"pink"););$("#btn3").click(function()$("div:odd").css("background-color","pink"););$("#btn4").click(function()$("div:even").css("background-color","pink");););</script></head><body><i

33、nput 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&quo

34、t; id="btn4" value="选择body中的偶数的div"/>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构Ø属性选择器传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<hr/><div id="one"><div class="mini"> 111</div></div><div id="two"><div class=&qu

35、ot;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

36、="four"></span></body></html>专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构<html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" href="././css/style.css" type="text/css"/>

37、<script type="text/javascript" src="././js/jquery-1.8.3.js" ></script><script>$(function()$("#btn1").click(function()$("divid").css("background-color","pink"););$("#btn2").click(function()$("divid='two&#

38、39;").css("background-color","pink");););</script></head><body><input type="button" id="btn1" value="选择有id属性的div"/><input type="button" id="btn2" value="选择有id属性的值为two的div"/><hr/>&

39、lt;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">

40、444</div><div class="mini"> 555传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任专业java、php、iOS、C+、网页设计、平面设计、网络、开发、前端与移动开发培训机构Ø表单选择器传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任<html><head><meta charset="UTF-8"><title>表单选择器</title><link rel="stylesheet

41、" type="text/css" href="././css/style.css"/><script type="text/javascript" src="././js/jquery- 1.8.3.js" ></script><script>$(function()$("#btn1").click(function()$(":input").css("background-color","p

42、ink"););$("#btn2").click(function()$(":text").css("background-color","pink");</div><div class="mini"> 666</div></div><span id="four"></span></body></html>专业java、php、iOS、C+、网页设计、平面设计、网络、开发

43、、前端与移动开发培训机构二、使用 JQ 完成表格的隔行换色1.需求分析在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用 JQ 实现！传智播客致力打造专业的IT 高级培训课程务实、创新、质量、专注、责任););</script></head><body><input type="button" id="btn1" value="选择所有input元素" /><input type="button" id="btn2" value

44、="选择文本框" /><br/><form><input type="text" /><br /><input type="checkbox" /><br /><input type="radio" /><br /><input type="image" /><br /><input type="file" /><br />&l

45、t;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></

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论