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:超文本傳輸協議。
*
* 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的鍵，必須是字符串。

*

轉載于:https://www.cnblogs.com/lieyancjj/p/6752504.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的我的HTML学习记录（七）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。