jQuery基礎–總結
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script> //jquery:簡單、粗暴 //jq和js的關係 //js是什麼？ js是一門編程語言 //jq僅僅是基於js的一個庫，jq可理解為就是開發js的一個工具。 //概念 //1. 為什麼要學jquery ？ 簡單，粗暴 沒有兼容性問題 //2. 什麼是jquery？js庫，說白了就是js文件，裏面有一大堆的方法 //3. 使用jquery的步驟： 1. 引入jquery文件 2. 入口函數 功能實現 //4. 版本：1.x 2.x 3.x 1.x 壓縮版和未壓縮版 //5. 入口函數： $(document).ready(function) $(function(){}) //6. jQuery對象與DOM對象 //區別：方法不能混用 //聯繫： DOM-->jq 花錢 jq-->dom [0] get(0) //$的實質：function // console.log($ === jQuery); // $(function () { // // }); //選擇器 //基本選擇器 標籤 類 id選擇器 交集 並集 //層級選擇器： 子代 後代 //過濾選擇器： //:odd:奇數 even:偶數 :eq：指定下標 //:first :last :gt :lt //篩選選擇器 //children():找兒子 //find():找後代 //parent():找爹 //siblings():找兄弟，不包括自己 //next:下一個兄弟 //prev:上一次兄弟 //eq:指定下標 //index()：返回的當前元素在所有兄弟裏面的索引。 </script> </body> </html>
//1. 操作樣式 (5) //1.1 css操作 //設置單個樣式 //設置多個樣式 //獲取樣式 //1.2 class操作 //addClass(name):添加類 //removeClass(name):移除類 //hasClass(name):判斷類 //toggleClass(name):切換 //2. 操作屬性(3) //2.1 attr //設置單個屬性 //設置多個屬性 //獲取屬性 //2.2 prop //對於布爾類型的屬性，disabled，selected，checked，只能用prop //2.3 removeAttr(name):移除某個屬性 //3. 動畫 (10) //3.1 三組基本動畫 //show/hide slideDown/slideUp/slideToggle fadeIn/fadeOut/fadeToggle //3.2 自定義動畫 //animate(prop, [speed], [swing/linear], [callback]) //3.3 停止動畫 //stop //4. 操作節點(10) //4.1 創建節點: $("<span></span>") //4.2 添加節點 append appendTo prepend prependTo after before //4.3 清空內容 empty //4.4 刪除節點 remove //4.5 克隆節點 clone
