? 什麽是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>

【內容選擇器】

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

JavaWeb04-HTML篇筆記（二）