Javaweb04-html Notes (ii)

1.1 using jquery to complete timed pop-up ads: 1.1.1 Requirements:
Before using the JS way to complete timed pop-up ads, now use jquery to accomplish the same effect:

1.1.2 Analysis 1.1.2.1 Technical Analysis:
"Overview of 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");});

"Conversion of JS objects and JQ objects"

  window.onload = function () {///Traditional JS mode: var D1 = document.getElementById ("D1");//JS Object Properties and methods://d1.innerhtml = "             JS object's Properties ";//D1.html (" aaaaaa ");//Convert JS object to JQ object. $ (D1). HTML (" JS object to the JQ object ");} $ (function () {var $d 1 = $ ("#d1");//$d 1.html ("Properties of the JQ object");//Convert to JS object://A way//$d 1[0].innerhtml = "Convert the JQ object to a JS object";//Two ways: $ D1.get (0). InnerHTML = "How to turn the JQ object into a JS object by two";}); "JQ Show and Hide"  

?    Effect of JQ operation: * Show ();    * Use one: JQ object. Show (); * Use two: JQ object. Show ("slow"); Slow,normal,fast * Use three: JQ object. Show (millisecond value);    1000 * Use four: JQ object. Show (millisecond value, function () {}); * Hide ();    * Use one: JQ object. Hide (); * Use two: JQ object. Hide ("slow"); Slow,normal,fast * Use three: JQ object. Hide (millisecond value);        1000 * Use four: JQ object. Hide (millisecond value, function () {}); * Slidedown ();    --Swipe down * Use one: JQ object. Slidedown (); * Use two: JQ object. Slidedown ("slow"); Slow,normal,fast * Use three: JQ object. Slidedown (millisecond value);        1000 * Use four: JQ object. Slidedown (millisecond value, function () {}); * Slideup ();    --Swipe up * Use one: JQ object. Slideup (); * Use two: JQ object. Slideup ("slow"); Slow,normal,fast * Use three: JQ object. Slideup (millisecond value);        1000 * Use four: JQ object. Slideup (millisecond value, function () {}); * FadeIn ();    -Fade in * Use one: JQ object. fadeIn (); * Use two: JQ object. FadeIn ("slow"); Slow,normal,fast * Use three: JQ object. FadeIn (millisecond value);        1000 * Use four: JQ object. FadeIn (millisecond value, function () {}); * FadeOut ();    -Fade Out * Use one: JQ object. FadeOut (); * Use two: JQ object. FadeOut ("slow"); Slow,normal,fast * Use three: JQ object. FadeOut (millisecond value); 1000 * Use four: JQ object. FadeOut (Millisecond value, function () {}); * Animate ();        --Custom Animation * Toggle (); --click the Toggle function * JQ object. Toggle (Fn1,fn2 ...); Click the first time to execute FN1, click Second to execute fn2 ...

1.1.2.2 Step Analysis:
Step one: Create an HTML page.
Step two: Create a div for the ad section in the page, and set the div to be hidden.
"Step three": Set a timed operation, 5 seconds to perform a display method.
"Step four": In setting a timer, 5 seconds to execute a hidden method.
1.1.3 Code Implementation

<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 Summary:

1.1.4.1 jquery selector:
"Basic Selector" (* * * * *)

? 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");});});

"Hierarchy selector":
? Descendant selector: Use a space all descendants contain grandchildren and the following elements
? Child element selector: Using elements of the > First layer (son)
? Next element: Use + next sibling element
? Sibling element: Use ~ All of the sibling elements behind
<script>
$ (function () {
Descendant selector:

$("#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>
"Basic Filter Selector"

<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>

"Content selector"

$(function(){$("#but1").click(function(){$("div:contains(‘1‘)").css("background","#bbffaa");});});</script>

The property Selector

"Form selector"

$(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=)

Javaweb04-html Notes (ii)