JavaWeb的学习之jQuery一
Posted Vanguard
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb的学习之jQuery一相关的知识，希望对你有一定的参考价值。
一、使用JQ完成首页的定时广告弹出
1.需求分析
在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】
2.技术分析
2.1 jquery相关的知识
a. 什么是jquery
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还 提 供了很多便捷的方法。
b. 怎么使用jquery
Jquery它是一个库(框架)，要想使用它，必须先引入！
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段
c. Jquery的简单入门
所有的jquery代码写在页面加载函数
$(function(){
Jquery代码
});
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页面加载</title> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 //整个文档加载完后执行 9 function init() { 10 alert("李四"); 11 } 12 window.onload = function() { 13 alert("张三"); 14 } 15 //整个文档加载完毕后执行 16 window.onload = function() { 17 alert("老王"); 18 } 19 //dom树执行完毕后加载，可能DOM元素关联的东西并没有加载完 20 jQuery(document).ready(function() { 21 alert("王五"); 22 }); 23 //JQuery页面的方法(简写) 24 $(function() { 25 alert("老李"); 26 }) 27 </script> 28 </head> 29 <body onload="init()"> 30 <a href="#">ss</a> 31 <a href="#">ddd</a> 32 </body> 33 </html>
d. 获取元素
JS:document.getElementById();
JQ:$(“#id”);
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQuery对象与DOM对象的转换</title> 6 </head> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 10 //注意：JQ对象只能操作JQ里面的属性和方法 11 // JS对象只能操作JS里面的属性和方法。 12 13 //JS写入 14 function JsWrite() { 15 //document.getElementById("span1").innerHTML = "hello world!"; 16 //DOM对象转换成JQuery对象 17 var spanEle = document.getElementById("span1"); 18 $(spanEle).html("hello world!"); 19 } 20 //JQuery写入 21 $(function() { 22 // $("#btn1").click(function() { 23 // $("#span1").html("hello!"); 24 // }); 25 26 27 $("#btn1").click(function() { 28 //JQuery对象转换成DOM对象的第一种方式 29 // $("#span1")[0].innerHTML = "哈哈"; 30 //JQuery对象转换成DOM对象的第二种方法 31 $("#span1").get(0).innerHTML = "嘿嘿"; 32 }); 33 }); 34 </script> 35 <body> 36 <input type="button" value="JS写入" onclick="JsWrite()" /> 37 <input type="button" value="JQ写入" id="btn1"/> 38 <br /> 39 <span id="span1">sss</span> 40 </body> 41 </html>
e. Jquery的效果
3.实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
4.代码实现
JS代码：
1 <script> 2 //1. 页面加载的函数 3 $(function() { 4 time = setInterval("showAd()", 3000); 5 }); 6 //2. 显示广告的函数 7 function showAd() { 8 //3. 获取广告图片元素,并显示隐藏的匹配元素 show() 9 //$("#imgAd").show(); 10 //有速度的显示 show(speed) 11 // $("#imgAd").show(1000); 12 //淡入效果 fadeIn(speed) 13 $("#imgAd").fadeIn(1000); 14 //4. 清楚显示广告图片的定时操作 15 clearInterval(time); 16 //5. 设置隐藏图片的定时操作 17 time = setInterval("hiddenAd()", 3000); 18 } 19 //6. 隐藏广告图片的函数 20 function hiddenAd() { 21 //7， 获取广告图片元素，并设置隐藏显示的匹配元素 hide() 22 // $("#imgAd").hide(); 23 //有速度的隐藏hide(speed) 24 // $("#imgAd").hide(1000); 25 //淡出效果 fadeOut(speed) 26 $("#imgAd").fadeOut(1000); 27 //8. 清楚隐藏广告的定时操作 28 clearInterval(time); 29 } 30 </script>
html代码：
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="imgAd" />
5.补充内容
5.1 Toggle的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Toggle的使用</title> 6 </head> 7 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function() { 10 $("#btn1").click(function() { 11 //toggle() 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 12 $("#img1").toggle(); 13 }); 14 }); 15 </script> 16 <body> 17 <input type="button" id="btn1" value="显示/隐藏" /><br /> 18 <img src="../img/middle01.jpg" id="img1" /> 19 </body> 20 </html>
6.总结
6.1 JQ的选择器
a. 基本选择器
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
代码演示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <link rel="stylesheet" href="../../css/s1.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function() { 10 $("#btn1").click(function() { 11 //id选择器 12 $("#one").css("background-color", "pink"); 13 }); 14 $("#btn2").click(function() { 15 //类选择器 16 $(".mini").css("background-color", "pink"); 17 }); 18 $("#btn3").click(function() { 19 //元素选择器 20 $("div").css("background-color", "pink"); 21 }); 22 $("#btn4").click(function() { 23 //匹配所有的元素 通配符* 24 $("*").css("background-color", "pink"); 25 }); 26 $("#btn5").click(function() { 27 //多个选择器公用，并集 28 $("#two, .mini").css("background-color", "pink"); 29 }) 30 }); 31 </script> 32 33 </head> 34 <body> 35 <input type="button" id="btn1" value="选择为one的元素"/> 36 <input type="button" id="btn2" value="选择样式为mini的元素"/> 37 <input type="button" id="btn3" value="选择所有的div元素"/> 38 <input type="button" id="btn4" value="选择所有元素"/> 39 <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/> 40 <hr/> 41 <div id="one"> 42 <div class="mini"> 43 111 44 </div> 45 </div> 46 47以上是关于JavaWeb的学习之jQuery一的主要内容，如果未能解决你的问题，请参考以下文章