================JQuery=========== JQuery 1. jQuery是什么？ 一個js插件， 相比較原生的DOM操作更簡單、開發效率更高 2. jQuery使用 1. jQuery版本 1. 版本號 1.x/2.x/3.x 1.x 兼容IE6/7/8 2. jquery.min.js和query.js的區別 2. jQuery的導入 1. 先導入后使用 2. 導入方式： 1. 自己下載到本地使用 2. 使用CDN方式 3. jQuery的調用 1. $ 2. jQuery 4. jQuery對象和DOM對象 1. 注意事項 jQuery對象才能調用jQuery的方法，DOM對象只能調用DOM方法 2. 互相轉換 1. jQuery對象 --> DOM對象 $("div") --> $("div")[0] 2. DOM對象 --> jQuery對象 this --> $(this) 5. jQuery語法 $("選擇器").方法() 支持鏈式操作 6. jQuery選擇器 1）選擇器 1. 基本選擇器 1. $("div") 2. $("#d1") 3. $(".c1") 4. $("*") 2. 組合選擇器 1. $("div, .c1") --> 找到所有div標簽和有c1樣式類的標簽 3. 層級選擇器 1. $("#d1 span") --> id是d1標簽下面所有的span標簽（子子孫孫） 2. $("#d1>span") --> id是d1標簽下面一層的span標簽（子代兒子） 3. $("label+input") --> 找到緊挨着label標簽的input標簽（緊挨着的兄弟） 4. $(".c1~div") --> 找到c1樣式類下面的div標簽（不挨着也行的兄弟） 4. 屬性選擇器 1. $("[s14]") 2. $("[type='text']") 3. $("[type!='text']") 4.$(“[type!='text’][id=‘name’]”)(通過雙重屬性來篩選) 2）篩選器 5. 基本篩選器 1. :first/:last（拿到一堆中的第一個/最后一個） 2. :eq()/:gt()/:lt()（根據一堆中的索引篩選） 3. :even/:odd（根據索引的奇偶篩選） 4. $("div:not(.c1)") --> 找到沒有c1樣式類的div標簽 5. $("div:has(.c1)") --> 找到后代中有c1樣式類的div標簽 6. 表單篩選器 1. $(":text") 2. $(":password") 3. ... 4. $(":disabled") 5. $("input:checked") 6. $(":selected") 7. 篩選器方法 1. .next()/.prev()/nextAll()/nextUntil()/prevAll()/prevUntil() 2. .parent() (一直向外找) .children()（找兒子這層） .siblings()（所有兄弟上下都找，不包括自己） 3. .find('選擇器條件') --> 在后代查找符合要求的（子子孫孫） 4. .filter('選擇器條件') --> 根據條件對已經找到的結果進行二次過濾 5. .first()/.last() —>一堆中找復合條件的（和基本篩選器一樣） 6. .not()/.has() 7. .eq() 7. jQuery操作樣式 1. 操作class 1. .addClass() 2. .removeClass() 3. .hasClass() 4. .toggleClass() 2. 操作樣式 1. 操作class 2. 操作CSS $("").css("color") --> 獲取選中標簽的顏色值 $("").css("color", "yellow") --> 設置選中標簽的顏色值 3. 位置操作 1. position() --> 獲取相對定位過的祖先元素的偏移 2. offset() --> 獲取相對當前窗口的偏移 3. scrollTop() --> 相對頂部的偏移 4. scrollLeft() --> 相對左側的偏移 返回頂部示例！ 4. 尺寸操作 1. height/width 元素 2. innerHeight/innerWidth 元素 + 內填充 3. outerHeight/outerWidth 元素 + 內填充 + 邊框 5.HTML代碼/文本/值 沒有參數就是獲取對應的值， 有參數就設置對應的值 - .html() 添加html標簽 .html("<span>啦啦啦。</span>") - .text() 添加文本 .text("啦啦啦。") - .val() input :一個參數,獲取的是input框里面的值 checkbox :一個參數，獲取的是value的值 select : 單選：獲取值 多選：得到的是一個數組，設置的時候也要是數組 6. 屬性操作 1. attr (屬性,可以設置值) 2.removeAttr 3. prop （屬性，true/false） 4.removeProp 8. 文檔操作 創建標簽用：document.createElement("div") 1. 內部添加 1. 前面加 1. $(A).prepend(B) 2. $(A).prependTo(B) 2. 后面加 1. $(A).append(B) 2. $(B).appendTo(A) 2. 外部添加 1. 前面加 1. $(A).before(B) 2. $(B).insertBefore(A) 2. 后面加 1. $(A).after(B) 2. $(B).insertAfter(A) 3. 移除和清空 1. remove() --> 把選中過的標簽從文檔樹中移除 2. empty() --> 把選中的標簽內部的元素都移除 4. 替換 1. $(A).replaceWith(B) 2. $(B).replaceAll(A) 5. clone clone()/clone(true) 注意參數true,加上true會把標簽綁定的事件也復制 2. 事件 1. jQuery綁定事件的方式 1. 給標簽綁定事件的方式 1. 在標簽上寫 onclick=函數(); 2. 在js代碼中 標簽對象.onclick = function(){} 2. jQuery綁定事件 1. $("選擇器").click(function(){...}); 2. $("").on("click", "子選擇器", function(){...})--> 事件委托--> 原理是事件冒泡 常用事件 blur([[data],fn]) 失去焦點 focus([[data],fn]) 獲取焦點（ 搜索框例子） change([[data],fn]) 當select下拉框中的元素發生改變的時候觸發change事件(select例子) click([[data],fn]) 點擊 dblclick([[data],fn]) 雙擊 scroll([[data],fn]) 滾動 submit([[data],fn]) 提交 3. 事件委托 原理：事件冒泡 1. 如何阻止事件冒泡（向上傳遞） e.stopPropagation() 目的：解決未來的標簽如何綁定事件！ 語法： $("祖先標簽").on("click", "選擇器", function(){...}) 注： 1. 阻止事件冒泡 event.stopPropagation() 2. 阻止默認事件的執行（通常用於阻止form表單的提交） event.preventDefault() 3. 阻止后續事件的執行 return false 9.動畫效果 基本（隱藏） show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) 滑動 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) - 淡出到0.66透明度 fadeToggle([s,[e],[fn]]) - .fadeToggle(3000, function () { alert("真沒用3"); }); 自定義 animate(p,[s],[e],[fn])1.8* - css屬性值都可以設置 - 圖片變小（漏氣） 10.補充 1. each 1. $.each(要遍歷的對象, function(){...}) 2. $("").each(function(){ // this 是進入循環體的當前標簽 console.log(this); }) 3. 退出本層循環 return 4. 退出each循環 return false 2. .data() 1. .data(key, value) --> 存值 2. .data(key) --> 根據key取值 3. .data() --> 取所有鍵值對 4. .removeData(key) --> 根據key刪除值 5. .removeData() --> 刪除所有鍵值對 3. 擴展 1. $.extend() --> 給jQuery擴展自定義方法 2. $.fn.extend() --> 給jQuery對象擴展自定義方法 用法1、$.xxx() $.extend({ "GDP": function () { console.log("戴小紅花"); } }); - 給jQuery添加擴展 - $.GDP() 用法2、$("").xxx() $.fn.extend({ "BJG": function () { console.log("英語八級就是好！"); } }) - 給jQuery對象添加擴展 - $(":input").BJG() 總結： 1. 頁面加載完之后才執行的JS代碼 1. DOM方式 window.onload = function(){} 2. jQuery方式 $(document).ready(function(){...}) 2.Bootstrap的使用 1. 下載 https://v3.bootcss.com/ 2. 導入 link標簽導入 bootstrap.css或者bootstrap.min.css 3. 圖標 1. Bootstrap內置的： https://v3.bootcss.com/components/ 2. font-awesome圖標：http://www.fontawesome.com.cn/ 3. 阿里圖標： http://iconfont.cn/ 4. 面板 5. ... 4. jS插件 1. 模態框 2. 輪播圖 3. 插件 彈出插件SweetAlert：http://mishengqiang.com/sweetalert/