1.1 使用JQuery完成定时弹出广告:1.1.1 需求:
之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果:
1.1.2 分析1.1.2.1 技术分析:
【JQuery的概述】
Ø 什么是JQuery:JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装.现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发.Ø JS的常用的框架:JQuery,ExtJS,DWR,Prototype...Ø JQ的使用:学习JQuery的语法.【JQuery的入门】Ø 引入Jquery的js文件.<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../js/jquery-1.11.3.min.js"></script>Ø JQuery的入口函数:// 传统的JS的方式:页面加载的事件只能执行一次./*window.onload = function(){alert("aaa");}window.onload = function(){alert("bbb");}*/// JQuery的方式:相当于页面加载的事件,可以执行多次.效率比window.onload要高.// window.onload 等页面加载完成后执行该方法.// $(function(){}):等页面的DOM树绘制完成后进行执行.// $相当于JQuery$(function(){alert("aaa");});$(function(){alert("bbb");});
【JS对象和JQ对象的转换】
window.onload = function(){// 传统JS方式:var d1 = document.getElementById("d1");// JS对象的属性和方法:// d1.innerHTML = "JS对象的属性";// d1.html("aaaaaa");// 将JS对象转成JQ的对象.$(d1).html("JS对象转成JQ对象");} $(function(){var $d1 = $("#d1");// $d1.html("JQ对象的属性");// 转成JS的对象:// 一种方式// $d1[0].innerHTML = "将JQ的对象转成JS对象";// 二种方式:$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";});【JQ显示和隐藏】
Ø JQ的效果操作:* show(); * 使用一:Jq对象.show(); * 使用二:Jq对象.show(“slow”); // slow,normal,fast * 使用三:Jq对象.show(毫秒值); // 1000 * 使用四:Jq对象.show(毫秒值,function(){});* hide(); * 使用一:Jq对象.hide(); * 使用二:Jq对象.hide(“slow”); // slow,normal,fast * 使用三:Jq对象.hide(毫秒值); // 1000 * 使用四:Jq对象.hide(毫秒值,function(){});* slideDown(); --向下滑动 * 使用一:Jq对象.slideDown(); * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast * 使用三:Jq对象.slideDown(毫秒值); // 1000 * 使用四:Jq对象.slideDown(毫秒值,function(){});* slideUp(); --向上滑动 * 使用一:Jq对象.slideUp(); * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast * 使用三:Jq对象.slideUp(毫秒值); // 1000 * 使用四:Jq对象.slideUp(毫秒值,function(){});* fadeIn(); --淡入 * 使用一:Jq对象.fadeIn(); * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast * 使用三:Jq对象.fadeIn(毫秒值); // 1000 * 使用四:Jq对象.fadeIn(毫秒值,function(){});* fadeOut(); --淡出 * 使用一:Jq对象.fadeOut(); * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast * 使用三:Jq对象.fadeOut(毫秒值); // 1000 * 使用四:Jq对象.fadeOut(毫秒值,function(){});* animate(); --自定义动画* toggle(); --单击切换函数 * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
1.1.2.2 步骤分析:
【步骤一】:创建一个HTML的页面.
【步骤二】:在页面中创建一个广告部分的DIV,并且设置DIV是隐藏的.
【步骤三】:设置定时操作,5秒钟执行一个显示的方法.
【步骤四】:在设置一个定时,5秒钟执行一个隐藏的方法.
1.1.3 代码实现
<script>var time ;$(function(){// 设置定时 5秒钟执行一个 显示广告的方法:time = setInterval("showAd()",5000);});function showAd(){// 获得元素://$("#adDiv").show(2000);// $("#adDiv").slideDown(2000);$("#adDiv").fadeIn(3000);clearInterval(time);// 再设置定时 5秒钟隐藏.time = setInterval("hideAd()",5000);}function hideAd(){//$("#adDiv").hide(2000);// $("#adDiv").slideUp(2000);$("#adDiv").fadeOut(3000);clearInterval(time);}</script>
1.1.4 总结:
1.1.4.1 JQuery的选择器:
【基本选择器】(*****)
Ø id选择器* 用法:$(“#id”)Ø 类选择器* 用法:$(“.类名”)Ø 元素选择器* 用法:$(“元素名称”)Ø 通配符选择器* 用法:$(“*”)Ø 并列选择器* 用法:$(“选择器,选择器,选择器”)$(function(){$("#but1").click(function(){// alert("aaaa");$("#one").css("background","#bbffaa");}); $("#but2").click(function(){$(".mini").css("background","#bbffaa");});$("#but3").click(function(){$("div").css("background","#bbffaa");});$("#but4").click(function(){$("*").css("background","#bbffaa");});$("#but5").click(function(){$("#two,span,.mini").css("background","#bbffaa");});});
【层级选择器】:
Ø 后代选择器:使用空格 所有后代包含孙子及以下的元素
Ø 子元素选择器:使用> 第一层的元素(儿子)
Ø 下一个元素:使用+ 下一个同辈元素
Ø 兄弟元素:使用~ 后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){$("body div").css("background","#bbffaa");});// body下的第一层div元素$("#but2").click(function(){$("body > div").css("background","#bbffaa");});// 查找下一个同辈的元素$("#but3").click(function(){$("#three + div").css("background","#bbffaa");});$("#but4").click(function(){$("#two ~ div").css("background","#bbffaa");});});
</script>
【基本过滤选择器】
<script>
$(function(){$("#but1").click(function(){$("#three div:first").css("background","#bbffaa");});$("#but2").click(function(){$("#three div:last").css("background","#bbffaa");});$("#but3").click(function(){$("div:odd").css("background","#bbffaa");});$("#but4").click(function(){$("div:even").css("background","#bbffaa");});$("#but5").click(function(){$("#three div:eq(1)").css("background","#bbffaa");});});</script>
【内容选择器】
$(function(){$("#but1").click(function(){$("div:contains('1')").css("background","#bbffaa");});});</script>
【属性选择器】
【表单选择器】
$(function(){$("#but1").click(function(){$(":input").css("background","#bbffaa");});$("#but2").click(function(){// $(":text").css("background","#bbffaa");$("input[type='text']").css("background","#bbffaa");});});</script>【表单属性选择器】![](http://i2.51cto.com/images/blog/201805/08/9036831fc46f10de46a94ac06b5a4c04.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦