jQuery零基礎入門知識點有哪些

這篇“jQuery零基礎入門知識點有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jQuery零基礎入門知識點有哪些”文章吧。

　　jQuery = JavaScript + Query，是輔助JavaScript開發的類庫，它的核心思想是寫的更少，做的更多，注意：使用jQuery一定要先通過script標簽的src屬性引入jQuery庫

　　傳入的參數為函數時，在HTML文檔加載完成之后自動的執行這個函數

　　傳入的參數為HTML語言時，創建標簽對象（jQuery對象）

　　傳入的參數為選擇器字符串時：

　　$（“#屬性值”）：id選擇器，根據id查詢標簽對象（jQuery對象）$（“標簽名”）：標簽名選擇器，根據指定的標簽名查詢標簽對象（jQuery對象）$（“。屬性值”）：類選擇器，根據class屬性值查詢標簽對象（jQuery對象）

　　傳入的參數為DOM對象時，會把這個DOM對象轉換為jQuery對象

　　通過getElement（s）Byxxx或createElement（）得到的標簽對象是DOM對象DOM對象Alert出的效果是：[object HTML標簽名 Element]

　　通過$函數創建的對象是jQuery對象，如二（2）： 通過jQuery包裝的DOM對象是jQuery對象，如二（4）通過$函數查詢到的對象也是jQuery對象，如二（3）jQuery對象Alert出的效果是：[object Object]

　　jQuery對象是DOM對象的數組 + jQuery提供的一系列功能函數

　　DOM對象轉換為jQuery對象：

　　先有DOM對象$（DOM對象）就可轉換為jQuery對象

　　jQuery對象轉換為DOM對象：

　　先有jQuery對象jQuery對象[下標]即可取出對應的DOM對象

　　3.

　　jQuery對象。click（ function（）{} ）；添加點擊響應函數jQuery對象。css（“background-color”，“xxx”）；可設置背景顏色jQuery對象。val（）；可以獲取、賦值表單項的value屬性jQuery對象。each（function（）{}）；遍歷DOM對象數組的方法，function中寫每次遍歷到的對象要執行的方法，function中使用this代表當前遍歷到的DOM對象

　　代碼示例：

　　詳細可參考jQuery文檔，文檔獲取方式在文章末尾

　　#id ：根據id查找標簽對象element ：根據標簽名查找標簽對象。class ：根據class查找標簽對象*：查找所有元素的標簽對象selector1，selector2…selectorN ：合并選擇器1，選擇器2…選擇器N的標簽對象并返回

　　ancestor descendant ：在給定的祖先元素下匹配所有的后代元素parent > child ：在給定的父元素下匹配所有的子元素prev + next ：在同級的情況下匹配所有緊接在prev元素后的next元素prev —— siblings ：在同級的情況下匹配prev元素之后的所有siblings元素

　　注意：標簽名前置，即冒號之前為標簽名

　　：first ：獲取匹配的第一個元素：last ：獲取匹配的最后一個元素：not（selector） ：去除所有與給定選擇器匹配的元素：even ：匹配所有索引值為偶數的元素，從0開始計數：odd ：匹配所有索引值為奇數的元素，從0開始計數：eq（index） ：匹配一個給定索引值的元素（索引從0開始計數）：gt（index） ：匹配所有大于給定索引值的元素（索引從0開始計數）：lt（index） ：匹配所有小于給定索引值的元素（索引從0開始計數）：header ：匹配如h2、h3、h4之類的標題元素：animated ：匹配所有正在執行動畫效果的元素

　　注意：標簽名前置，即冒號之前為標簽名

　　：contains（text） ：匹配包含給定文本的元素：has（selector） ：匹配含有選擇器所匹配的的元素的元素：empty ：匹配所有不包含子元素或文本的空元素：parent ：匹配含有子元素或文本的元素

　　5.屬性過濾選擇器

　　注意：標簽名前置，即中括號之前為標簽名

　　：匹配包含給定屬性的元素 ：匹配給定的屬性是某個特定值的元素 ：匹配所有不含有指定的屬性或屬性不等于特定值的元素：匹配給定的屬性是以某些值開始的元素 ：匹配給定的屬性是以某些值結尾的元素 ：匹配給定的屬性是以包含某些值的元素 ：復合屬性選擇器，需要滿足多個條件時使用

　　注意：標簽名前置，即冒號之前為標簽名

　　：input ：匹配所有input標簽元素，不論type為哪種類型：text \ :password \ :radio \ :checkbox \ :submit \ :image \ :reset \ :button \ :file \ :hidden ：匹配所有input標簽中type為指定類型的元素：enabled ：匹配所有可用元素（disabled屬性設置為disabled為不可用：無法填入內容或選中）：disabled ：匹配所有不可用元素：checked ：匹配所有被選中的元素（復選框、單選框等，不包括select中的option）：selected ：匹配所有選中的option元素

　　詳細可參考jQuery文檔，文檔獲取方式在文章末尾

　　last（）：獲取最后一個元素（功能跟：last一樣）first（）：獲取第一個元素（功能跟：first一樣）eq（）：獲取給定索引的元素（功能跟：eq（）一樣）filter（exp）：留下匹配的元素is（exp）：判斷是否匹配給定的選擇器，只要有一個匹配就返回truehas（exp）：返回包含有匹配選擇器的元素的元素（功能跟：has一樣）not（exp）：刪除匹配選擇器的元素（功能跟：not一樣）children（exp）：返回匹配給定選擇器的子元素（功能跟parent>child一樣）find（exp）：返回匹配給定選擇器的后代元素（功能跟ancestordescendant-樣）next（）：返回當前元素的下一個兄弟元素（功能跟prev + next功能一樣）nextAll（）：返回當前元素后面所有的兄弟元素（功能跟prev—— siblings 功能一樣）nextUntil（）：返回當前元素到指定匹配的元素為止的后面元素parent（）：返回父元素prev（exp）：返回當前元素的上一個兄弟元素prevAll（）：返回當前元素前面所有的兄弟元素prevUnit（exp）：返回當前元素到指定匹配的元素為止的前面元素siplings（exp）：返回所有兄弟元素add（）：把add 匹配的選擇器的元素添加咧當前jquery 對象中

　　不傳參數是獲取，傳遞參數是設置

　　html（）方法：可以設置和獲取起始標簽和結束標簽中的內容（包括兩邊的標簽）text（）方法：可以設置和獲取起始標簽和結束標簽中的文本（不包括兩邊的標簽）val（）方法：可以設置和獲取表單項的value屬性值

　　代碼示例：val（）方法可同時設置多個表單項的選中狀態

　　attr（）方法：可以設置和獲取屬性的值，不推薦操作checked、selected、disabled、readOnly，還可以操作自定義屬性。prop（）方法：可以設置和獲取屬性的值，只推薦操作checked、selected、disabled、readOnly

　　代碼示例：

　　代碼示例：全選、全不選、反選

　　appendTo（）：a.appendTo（b） 把a插入到所有b子元素的末尾，成為最后一個子元素prependTo（）：a.prependTo（b） 把a插入到所有b子元素的前面，成為第一個子元素

　　insertAfter（）：a.insertAfter（b） 同級的情況下得到bainsertBefore（）：a.insertBefore（b） 同級的情況下得到ab

　　replaceWith（）：a.replaceWith（b） 用一個b替換掉所有areplaceAll（）：a.replaceAll（b） 用a替換掉所有b（有幾個b就替換幾次）

　　remove（）：a.remove（） 刪除a標簽及其所有內容（包括文字或子標簽等）empty（）：a.empty（） 清空a標簽的內容（包括文字或子標簽等），標簽留下

　　代碼示例：兩個復選框的內容從左到右、從右到左的練習

　　動態添加、刪除表格記錄

　　addClass（）：添加樣式

　　removeClass（）：刪除樣式

　　toggleClass（）：有則刪除，無則添加樣式

　　offset（）：獲取和設置元素的坐標，設置時必須有兩個屬性top和left

　　設置時的格式：jQuery對象。offset（{top:值，left:值}）；

　　以下動畫方法都可以添加參數：

　　第一個參數是動畫執行的時長，以毫秒為單位

　　第二個參數是回調函數：function（）{}，即動畫完成之后自動執行的函數

　　基本動畫：

　　show（）：將隱藏的元素顯示

　　hide（）：將顯示的元素隱藏

　　toggle（）：顯示則隱藏，隱藏則顯示

　　淡入淡出動畫：

　　fadeIn：淡入fadeOut（）：淡出fadeToggle（）：淡入/淡出切換fadeTo（）：在指定時長內將透明度修改到指定的值，0代表透明，1代表可見，0.5代表半透明

　　第一個參數指定時長（ms），第二個參數設置透明度，第三個參數設置回調函數

　　觸發時間：

　　jQuery是瀏覽器的內核解析完頁面的標簽（如body中的標簽），創建好DOM對象之后就會立馬執行，此時頁面上沒有任何內容JS是瀏覽器的內核解析完標簽創建好DOM對象之后等標簽顯示時的內容（如圖片，網頁等）加載完成之后執行，此時頁面上已經有body中的內容 觸發順序：jQuery先、JS后各有多個時執行的次數：

　　jQuery所有function函數都會按照順序執行JS只會執行最后一個function函數

　　click（）：可以綁定單擊事件（參數中傳function（）{}），可以觸發單擊事件（參數中無function）mouseover（）：鼠標移入事件mouseout（）：鼠標移出事件bind（）：可以給元素一次性綁定一個或多個事件，第一個參數加雙引號，其中放空格隔開的多個事件，第二個參數是function（）{}，即事件響應后的代碼one（）：用法與bind一致，但是one方法綁定的事件只會響應一次unbind（）：與bind方法相反的操作，解除事件的綁定live（）：用來綁定事件，即使這個元素先前并未綁定，而是后面動態創建出來的也自動綁定

　　事件的冒泡是指父子元素綁定同一個事件時，當觸發子元素的事件時，父元素的同一個事件也隨之自動的響應，如：

　　阻止事件的冒泡發生：在子元素的事件函數體內return false;

　　事件對象：包含觸發的事件的所有信息的一個對象獲取事件對象的方式：在給元素綁定事件時函數格式為function（event）{}，參數中的名字可任意，一般取名為event，這個event就是事件對象

以上就是關于“jQuery零基礎入門知識點有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。