【JQuery語法】
1、JQuery("選擇器").action();通過選擇器,調用時間函數
但JQuery中,JQuery中可以用$代替,即$("選擇器").action();
①選擇器,可以直接使用css選擇器,選中元素
②.action() 表示對元素執行的操作;
2、文檔就緒函數:防止文檔在完全加載(就緒)之前,運行JQuery代碼
$(document).ready(function(){
//JQuery代碼
});
簡寫:$(function(){ });
3、[文檔就緒函數&window.onload區別]
① window.onload需在網頁所有內容加載完成后執行(包括圖片音頻)
文檔就緒函數,只需要在網頁DOm結構加載以后便會執行
② window.onload,只能寫一個,寫多個只會執行最后一個;
文檔就緒函數,可以寫多個,也不會被覆蓋
4、JQuery與原生DOM互轉
①原生DOM對象轉JQuery對象: $(DOM對象)
var p = document.getElementsByName("p");
$(p) 轉換為JQwery對象
②JQuery對象轉原生DOM對象: $("#p").get(0) $("#p")[0]
$("#p").get(0).style.color = "red";
//事件綁定快捷方式
/* $("button:first").click(function(){
alert(1);
})*/
/*
【使用on綁定事件】
①使用on進行單事件綁定
②使用on進行多事件綁定同一函數
③調用函數時,傳入自定義參數
使用event.data.屬性名; 找到傳入參數
$("button").on("click",{name:"liuyongqi"},function(event){
console.log(event.data.name)
}
)
④使用on,進行多事件多函數綁定
$("button").on({
click:function(){
console.log("click");
},
mouseover:function(){
console.log("mouseover");
}
})
⑤使用on進行事件委派
>>>將原本需要綁定到某元素上的事件,改為綁定到父元素乃至根節點上,然后委派給當前元素生效;
$(document).on("click","button",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").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
*/
/*
hover(over,out)
over:鼠標移到元素上要觸發的函數
out:鼠標移出元素要觸發的函數
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
*/
/*——————————————————————華麗分割線——————————————————————————————*/
/*
【動畫效果】
.show()
①不傳參:讓隱藏元素直接顯示,不進行動畫
②傳入事件:多少毫秒之內完成動畫
③傳入(時間,函數):完成動畫之后,執行回調函數
show()動畫執行效果:同時修改元素的寬度、高度、和opacity(透)屬性 ;
.hide():讓顯示的元素隱藏,與show相反;
.slidedown:讓隱藏元素顯示,效果為從上往下,增加高度;
.slideUp:讓顯示元素隱藏,效果為從下往上,減小高度;
.slideToggle():讓顯示元素隱藏,讓隱藏元素顯示;
.fadeOut:讓顯示元素隱藏,淡出;
.fadeIn:讓隱藏元素顯示,淡入;
fadeToggle():讓顯示元素隱藏,讓隱藏元素顯示。淡入淡出;
fadeToggle(時間,透明度,函數):作用同fadeToggle(),但是多了透明參數,可以指定顯示的最終透明度;
.animate({一組包含作為動畫屬性和終值的樣式屬性和及其值的鍵值對},
表示動畫時長的毫秒數值(如:1000),
使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing",
回調函數)
Http:超文本傳輸協議
URL:統一資源定位符
組成:協議名://主機名(IP地址):端口號/項目資源地址?傳遞的參數鍵值對#錨點;
eg:http://127.0.0.1:8080/jd/index.html?name=name1;
localhost或127.0.0.1代表本機IP;
【Json對象】
1、JSON對象是鍵值對的集合,鍵與值之間用冒號分隔;多個鍵值對之間用逗號分隔
2、多個JSON對象,可以放到數組中去。JSON對象和數組可以相互嵌套;
JSON對象的鍵,必須是字符串;
parseJSON():將JSON字符串轉化為JSON對象;