jQuery知識結構

?

*?jQuery入門?
????* js函數庫(DOM/ajax)
????* 特點:
????????* HTML元素選取
????????* HTML元素操作
????????* CSS操作
????????* HTML事件處理
????????* JS動畫效果
????????* 鏈式調用
????????* 瀏覽器兼容
????????* Ajax封裝
????????* 易擴展插件
????* helloworld
????????* 引入庫
????????????* 引入庫文件到項目中
????????????* 在頁面中引入
????????* 使用庫
????????????* 使用jQuery核心函數 : $/jQuery
????????????* 使用jQuery核心對象 : 使用調用$()返回的結果
?????????????$(function(){
????????????????$('#demo').click(function(){
????????????????????//處理點擊響應邏輯
????????????????});
?????????????});
????* 回調函數:
????????* 你定義的
????????* 你沒有調用
????????* 但它最終執行了(一定時機/條件)

*?jQuery的2把利器
????* jQuery核心函數 :
????????* $/jQuery : jQuery庫定義的兩個全局函數
????????* 作為一般函數調用 : $(params)
????????????* callback function : 綁定文檔加載完成的回調
????????????* 選擇器字符串 : 查找所有匹配的dom元素, 并包裝為jQuery對象返回
????????????* 標簽字符串 : 生成dom元素對象, 并包裝為jQuery對象返回
????????????* dom元素對象: 將指定的dom元素包裝為jQuery對象返回 (用得較多的是this)
????????* 作用對象使用(工具方法)
????????????* $.each(arr/obj, function(index, item){})?
????????????* $.trim()
????????????* $.parseJSON()
????????????* $.isArray()
????????????* $.isFunction()
????????????* $.type()
????* jQuery核心對象 :
????????* 調用/執行$()返回的結果: 包含了所有匹配的dom元素對象的偽數組對象
????????* [index] / get(index)
????????* length / size()
????????* each(function(index, domEle){//this}) : 遍歷內部包含的所有dom元素
????????* index() : 得到當前元素在所有兄弟中的索引下標

*?選擇器
????* 是什么? : 有特定語法結構的字符串, 通過調用$(selector)進行查找
????* 分類:
????????* 基本
????????* 層次
????????* 過濾
????????* 表單
????* 基本選擇器:
????????* #id
????????* .class
????????* tagName
????????* *
????????* selector1,selector2,selector3 : 并集
????????* selector1selector2selector3 : 交集
????* 層次選擇器: 查找兄弟/子孫/父元素
????????* selector1 selector2 : 子孫
????????* selector1>selector2 : 子
????* 過濾選擇器: 在左邊的選擇得到的元素進一步查找過濾
????????* :first??:last??:not(seletor)??:gt(index)??:lt(index)
????????* :hide
????????* [attrName]??[attrName=value]
????* 表單
????????* :input
????????* :text :checkbox
????????* :checked
*?屬性: (讀寫二合一)
????* 操作通用屬性
????????* attr() : 設置/讀取指定的屬性
????* 操作class屬性
????* 操作標簽體
????* 操作value屬性
? ??

*?CSS
????* css() : 讀/寫指定的樣式
????* offset() : 讀/寫原點為頁面左上角的坐標對象 : left/top
????* position() : 讀原點為父元素左上角的坐標對象 : left/top
????* height()/innerHeight()/outerHeight(true/false) : content/padding/border/margin
*?文檔處理
????* 對jQuery對象中包含的dom元素進行增刪改的操作
????* 添加元素
????????* 前面 : before()
????????* 前部 : prepend()
????????* 后面 : after()
????????* 后部 : append()
????* 刪除:
????????* remove()
????????* empty()
????* 替換:
????????* replaceWith()
*?篩選
????* 過濾 : 查找內部的dom元素本身
????????* first()
????????* last()
????????* eq(index)
????????* filter(selector)
????????* not(selector)
????* 查找 : 查找內部的dom元素相關的元素(父母兄弟子孫后代)
????????* children(selector)
????????* find(selector)
????????* next()
????????* nextAll()
????????* prev()
????????* prevAll()
????????* siblings()
????????* parent()
*?事件處理
????* on(eventName, function(){})
????* eventName(function(){})
????* off(eventName)
????*父元素jQuery對象.delegate('子孫元素selector', eventName, function(){}) : 事件委托
????* 父元素jQuery對象.undelegate(eventName) : 解除事件委托
*?動畫
????* 原理 : 在指定的時間不斷改變元素的樣式(任意)
????* API
????????* show() : 默認沒有動畫, 只有指定時間才會有動畫
????????* hide()
????????* toggle()
????????* slideDown()/slideUp()/slideToggle()
????????* fadeIn()/fadeOut()/fadeToggle()
????????* animate({最終狀態的樣式對象}, time) : 自定義動畫

*?方法鏈調用:
????* 描述: 通過點可以不斷調用方法
????* 好處: 編碼簡潔
????* 原因: 方法會返回this(jQuery對象)
*?jQuery的dom操作與原生dom操作的比較
????* 查找: jQuery通過強大的選擇器能快速簡單的找到所需要操作的元素
????* 增刪改: 對dom操作進行了很好的封裝
????* 兼容性: jQuery已經解決了
*?事件委托:
????* 過程:
????????1.?將多個子元素(li)的事件監聽委托給父輩元素(ul)處理
????????2.?監聽回調是加在了父輩元素上
????????3.?當操作任何一個子元素(li)時, 事件會冒泡到父輩元素(ul)
????????4.?父輩元素不會直接處理事件, 而是根據event.target得到發生事件的子元素(li), 通過這個子元素調用事件回調函數
????* 好處:
????????1.?減少事件監聽的數量: n--->1
????????2.?添加新的子元素, 自動有事件響應處理

?

*?編寫jQuery插件
????* jQuery插件 : 基于jQuery編寫一個js庫(文件)
????* 擴展核心函數的功能: $.extend({多個方法}) --->內部的方法就會成為$的方法
????* 擴展核心對象的功能: $.fn.extend({多個方法}) --->內部的方法就會成為核心對象的方法

*?多庫共存
????* 問題: 另一個庫也定義了$, 與jQuery沖突了
????* 解決: jQuery可以釋放$的使用權
????* API : jQuery.noConflict()

*?jQuery的整體結構
????(function (window) {
????????var jquery = function () {
????????????return {
????????????????showInfo : function () {
????????????????????console.log('showInfo()');
????????????????????return this;
????????????????},
????????????????sayHello : function () {
????????????????????console.log('sayHello()');
????????????????????return this;
????????????????}
????????????};
????????}
????????window.jquery = window.$$ = jquery;
????})(window);

*?window.onload與$(document).ready() 區別
????1.執行時間
?????????window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
?????????$(document).ready()是DOM結構加載完畢后就執行，不必等到圖片加載完畢。
????2.編寫個數不同
?????????window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
?????????$(document).ready()可以同時編寫多個，并且都可以得到執行
????3.簡化寫法
?????????window.onload沒有簡化寫法
?????????$(document).ready(function(){})可以簡寫成$(function(){});


*?區別函數內部的this到底是誰?
????* 誰調用這個函數, this就是誰
????* 事件回調函數中的this???--->發生事件的dom元素對象
????* jQuery對象遍歷內部元素的回調中的this???--->內部的dom元素對象

*?了解兩個jQuery插件
????* jquery-ui-1.11.4
????* jquery-validation-1.15.0??: 聲明式驗證

轉載于:https://www.cnblogs.com/NimoJCC/p/5883425.html

總結

以上是生活随笔為你收集整理的jQuery基本知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。