JavaWeb04-HTML篇笔记(二)

时间:2021-12-20 13:23:25
1.1 使用JQuery完成定时弹出广告: 1.1.1 需求:
之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果:
JavaWeb04-HTML篇笔记(二)
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 src="../../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>


【内容选择器】
JavaWeb04-HTML篇笔记(二)
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
【属性选择器】
JavaWeb04-HTML篇笔记(二)
【表单选择器】
JavaWeb04-HTML篇笔记(二)
 
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>

【表单属性选择器】
JavaWeb04-HTML篇笔记(二)