我的HTML學習記錄（七）

標籤：function   span   window   jquery   區別   網頁   覆蓋   地址   font   

JQuery文法
*1.JQuery("選取器").action;通過選取器呼叫事件函數
* 但JQuery中，JQuery可以用$代替，即$("選取器").action();
* ①選取器，可以直接使用css選取器，選中元素
* ②.action()表示對元素執行的操作
*
* 2.文檔就緒函數：防止了文檔在完全載入（就緒）之前運行JQuery代碼
* $(document).ready(function(){
JQuery代碼
})簡寫：$(function(){});

* [文檔就緒函數與window.onload區別]

* ①window.onload需在網頁所有內容載入完成後執行（包括圖片音頻)
* 文檔就緒函數，只需要網頁DOM結構載入以後就可以執行

* ②window.onload只能寫一個，寫多個只能執行最後一個
* 文檔就緒函數，可以寫多個，也不會被覆蓋

* 3.JQuery對象與原生DOM對象互轉
* ①原生DOM對象轉JQuery對象：$(DOM對象);
* var p = doucument.getElementsByTagName("p");
* $(p); //轉換為JQuery對象

 

 
* ②JQuery對象轉原生DOM對象：$("#p").get(0) $("#p")[0]
* $("#p").get(0).style.color ="red";

 

 

// 事件綁定捷徑
/*$("button:first").click(function(){
alert(1);
});*/

/*
* 使用on綁定事件
*/

// ① 使用on進行單事件綁定
/*$("button").on("click",function(){
// $(this) 取到當前呼叫事件函數的對象
console.log($(this).html());
});*/

// ② 使用on同時為多個事件，綁定同一函數
/*$("button").on("mouseover click",function(){
console.log($(this).html())
})*/

// ③ 調用函數時，傳入自訂參數
/*$("button").on("click",{name:"jianghao"},function(event){
// 使用event.data.屬性名稱 找到傳入的參數
console.log(event.data.name);
})*/

// ④ 使用on進行多事件多函數綁定
/*$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});*/

/* ⑤ 使用on進行事件委派
* >>> 將原本需要綁定到某元素上的事件，改為綁定在父元素乃至根節點上，然後委派給當前元素生效；
* eg：$("p").click(function(){});
* ↓
* $(document).on("click","p",function(){});
* >>> 作用：
* 預設的綁定方式，只能綁定到頁面初始時已有的p元素，當頁面新增p元素時，無法綁定到新元素上；
* 使用事件委派方式，當頁面新增元素時，可以為所有新元素繫結事件
*
*
*/
/*$("button").on("click",function(){
var p = $("<p>444444</p>");
$("p").after(p);
});*/

/*$("p").click(function(){
alert(1);
});*/

/*$(document).on("click","p",function(){
alert(1);
});*/




/* off() 取消事件綁定
*
* 1. $("p").off(): 取消所有事件
* 2. $("p").off("click"): 取消點擊事件
* 3. $("p").off("click mouseover"):取消多個事件
* 4. $(document).off("click","p"):取消事件委派
*
*/



/*
* 使用.one() 綁定事件，只能執行一次
*/
/*$("button").one("click",function(){
alert(1);
})*/



/* .trigger("event")：自動觸發某元素的事件
*
* $("p").trigger("click",["haha","hehe"]); 觸發事件時，傳遞參數
*/
/*$("p").click(function(event,arg1,arg2){
alert("觸發了P的click事件"+arg1+arg2);
})

$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})*/

.show()：讓隱藏元素顯示，同時修改元素的寬度、高度、opacity屬性
*
* ① 不傳參：讓隱藏的元素直接顯示，不進行動畫
* ② 傳入時間：多少毫秒之內完成動畫
* ③ 傳入(時間,函數)：完成動畫之後，執行回呼函數
*
* .hide():讓顯示元素隱藏，與show()相反；
*
*
*
* .slideDown(): 讓隱藏元素顯示，效果為從上往下，增加高度
* .slideUp(): 讓顯示的元素隱藏，效果從下往上，減小高度
* .slideToggle():讓顯示的隱藏，讓隱藏的顯示
*
*
* .fadeOut(): 讓顯示元素隱藏，淡出
* .fadeIn()： 讓隱藏元素顯示，淡入
* .fadeToggle(): 讓顯示的隱藏，讓隱藏的顯示。淡入淡出
* .fadeTo(時間，透明度，函數):同fadeToggle，但是多了透明度參數，可以指定顯示的最終透明度
*
*
* .animate({最終的樣式屬性索引值對},動畫時間,動畫效果("linear" "swing"),回呼函數)： 自訂動畫

 

* HTTP:超文字傳輸通訊協定 (HTTP)。
*
* URL：統一資源定位器
* 組成： 協議名://主機名稱(IP地址):連接埠號碼/項目資源地址?傳遞參數索引值對#錨點
* eg: http://127.0.0.1:8080/jd/index.html?name=jianghao
*
* localhost或127.0.0.1表示本機IP
*
*/

/* JSON 對象
*
* 1、JSON對象是索引值對的集合，鍵與值之間用":"分隔，多個索引值對之間，用","分隔

 

* 2、多個JSON對象，可以放到數組中去。JSON對象和數組，可以相互嵌套；
*
* JSON的鍵，必須是字串。

*

我的HTML學習記錄（七）