我的HTML学习记录(七)
JQuery語法
*1.JQuery("選擇器").action;通過選擇器調用事件函數
* 但JQuery中,JQuery可以用$代替,即$("選擇器").action();
* ①選擇器,可以直接使用css選擇器,選中元素
* ②.action()表示對元素執(zhí)行的操作
*
* 2.文檔就緒函數:防止了文檔在完全加載(就緒)之前運行JQuery代碼
* $(document).ready(function(){
JQuery代碼
})簡寫:$(function(){});
* [文檔就緒函數與window.onload區(qū)別]
* ①window.onload需在網頁所有內容加載完成后執(zhí)行(包括圖片音頻)
* 文檔就緒函數,只需要網頁DOM結構加載以后就可以執(zhí)行
* ②window.onload只能寫一個,寫多個只能執(zhí)行最后一個
* 文檔就緒函數,可以寫多個,也不會被覆蓋
* 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進行事件委派
* >>> 將原本需要綁定到某元素上的事件,改為綁定在父元素乃至根節(jié)點上,然后委派給當前元素生效;
* 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() 綁定事件,只能執(zhí)行一次
*/
/*$("button").one("click",function(){
alert(1);
})*/
/* .trigger("event"):自動觸發(fā)某元素的事件
*
* $("p").trigger("click",["haha","hehe"]); 觸發(fā)事件時,傳遞參數
*/
/*$("p").click(function(event,arg1,arg2){
alert("觸發(fā)了P的click事件"+arg1+arg2);
})
$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})*/
.show():讓隱藏元素顯示,同時修改元素的寬度、高度、opacity屬性
*
* ① 不傳參:讓隱藏的元素直接顯示,不進行動畫
* ② 傳入時間:多少毫秒之內完成動畫
* ③ 傳入(時間,函數):完成動畫之后,執(zhí)行回調函數
*
* .hide():讓顯示元素隱藏,與show()相反;
*
*
*
* .slideDown(): 讓隱藏元素顯示,效果為從上往下,增加高度
* .slideUp(): 讓顯示的元素隱藏,效果從下往上,減小高度
* .slideToggle():讓顯示的隱藏,讓隱藏的顯示
*
*
* .fadeOut(): 讓顯示元素隱藏,淡出
* .fadeIn(): 讓隱藏元素顯示,淡入
* .fadeToggle(): 讓顯示的隱藏,讓隱藏的顯示。淡入淡出
* .fadeTo(時間,透明度,函數):同fadeToggle,但是多了透明度參數,可以指定顯示的最終透明度
*
*
* .animate({最終的樣式屬性鍵值對},動畫時間,動畫效果("linear" "swing"),回調函數): 自定義動畫
?
* HTTP:超文本傳輸協(xié)議。
*
* URL:統(tǒng)一資源定位符
* 組成: 協(xié)議名://主機名(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位技術專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的我的HTML学习记录(七)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [网络] SOCKET, TCP/UDP
- 下一篇: C++ 字符串操作