jQuery:jquery是一個js框架(代碼庫),為用戶提供了很好的瀏覽器兼容和大量的dom操作接口。(它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互)
API:應用程序編程接口(Application Programming Interface)
jQuery框架默認為外部環境提供兩個變量 jQuery 和 $(簡寫形式),jQuery本質是一個函數
jQuery本質是一個函數,所有jQuery的使用都圍繞該函數對象進行(jquery將js中dom節點封裝成對象)
jQuery的優勢:(寫更少的代碼,做更多的事情) write Less,Do More.
jQuery為我們提供了良好的瀏覽器兼容和豐富的dom操作API。
選擇器: 字符串形式的查找 過濾:二次篩選 查找:基于集合查找新的東西
jQuery選擇器
加載順序:從上到下 從外到內
單詞:hide隱藏 show顯示 end結束 find發現
方法:slideDown向下滑動 slideUp向上滑動
jQuery底層屬性 camelCase 自動裝換- 如:$("div").css("border-color","red") 底層$.camelCase("border-color")--結果為:borderColor 所以$("div").css("borderColor","red") ;寫時最好就是駝峰式
迭代即循環 隱士迭代即背后循環處理
jQuery函數傳入的參數: 可對象 字符串 如:$(dom) $("#box")
節點獲取 所指dom對象是一致的 vae dom1=document.getElementById("box");var dom2=document.getElementById("box"); dom1 === dom2 /true
而jQuery對象不一致 $("#box") === $("#box") /false 相當于函數jQuery()每次創建jQuery對象傳入選擇器表達式時開辟一個空間
將jQuery對象轉化為dom對象
var domObj=document.getElementById("third");
var jqObj=$("#third");
1.jqObj.get(0) 2.jqObj[0]
將domObj轉化為jQuery對象 $(dom)
$(domObj)
display:flex; 彈性布局
$(callback)
$(document).ready(function(){
$(".inner").on("mouseover", function(){
$(this).css("background-color", "pink");
})
});
//以上函數可以簡寫成
$(function(){
$(".inner").on("mouseover", function(){
$(this).css("background-color", "pink");
})
});
當 DOM(文檔對象模型) 已經加載,并且頁面(包括圖像)已經完全呈現時,會發生 ready 事件。
由于該事件在文檔就緒后發生,因此把所有其他的 jQuery 事件和函數置于該事件中是非常好的做法。正如上面的例子中那樣。
ready() 函數規定當 ready 事件發生時執行的代碼。
ready() 函數僅能用于當前文檔,因此無需選擇器。
語法三種:
$(document).ready(function)
$().ready(function)
$(function)
ready() 函數不應與 <body onload=""> 一起使用。