jquery讀後感

jQuery 對象和 dom 對象區分

什麼是 jQuery 對象,什麼是 dom 對象
Dom 對象
1.通過 getElementById()查詢出來的標籤對象是 Dom 對象
2.通過 getElementsByName()查詢出來的標籤對象是 Dom
對象
3.通過 getElementsByTagName()查詢出來的標籤對象是 Dom 對象
4.通過 createElement() 方法創建的對象是 Dom 對象
DOM 對象 Alert 出來的效果是:[object HTML 標籤名 Element] jQuery 對象
5.通過 JQuery 提供的 API 創建的對象,是 JQuery 對象
6.通過 JQuery 包裝的 Dom 對象,也是 JQuery 對象
7.通過 JQuery 提供的 API 查詢到的對象是 JQuery
對象 jQuery 對象 Alert 出來的效果是:[object Object]
jQuery 對象的本質是什麼?
jQuery 對象是 dom 對象的數組 + jQuery 提供的一系列功能函數。 jQuery 對象和 Dom 對象使用區別
jQuery 對象不能使用 DOM 對象的屬性和方法 DOM 對象也不能使用 jQuery 對象的屬性和方法
Dom 對象和 jQuery 對象互轉
在這裏插入圖片描述

層次選擇器

在這裏插入圖片描述

過濾選擇器

基本選擇器
在這裏插入圖片描述
內容過濾器:
在這裏插入圖片描述
在這裏插入圖片描述
屬性過濾器
在這裏插入圖片描述
表單過濾器
在這裏插入圖片描述
表單對象屬性過濾器
在這裏插入圖片描述
$(":text").val()//無參獲取,有參修改
each方法
在這裏插入圖片描述
在這裏插入圖片描述
jQuery 元素篩選
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
jqery的屬性操作
在這裏插入圖片描述
val 可以一次多組用“,”分開,無順序限制
在這裏插入圖片描述

<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { /* // 批量操作單選 $(":radio").val(["radio2"]); // 批量操作篩選框的選中狀態 $(":checkbox").val(["checkbox3","checkbox2"]); // 批量操作多選的下拉框選中狀態 $("#multiple").val(["mul2","mul3","mul4"]); // 操作單選的下拉框選中狀態 $("#single").val(["sin2"]); */$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"] ); }); </script> </head> <body> <body> 單選: <input name="radio" type="radio" value="radio1" />radio1 <input name="radio" type="radio" value="radio2" />radio2 <br/> 多選: <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 <br/> 下拉多選 : <select id="multiple" multiple="multiple" size="4"> <option value="mul1">mul1</option> <option value="mul2">mul2</option> <option value="mul3">mul3</option> <option value="mul4">mul4</option> </select> <br/> 下拉單選 : <select id="single"> <option value="sin1">sin1</option> <option value="sin2">sin2</option> <option value="sin3">sin3</option> </select> </body>
</body> </html>

在這裏插入圖片描述

jquery-dom的增刪改查

在這裏插入圖片描述
內部插入: appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾,成爲最後一個子元素
prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成爲第一個子元素
外部插入:
insertAfter() a.insertAfter(b) 得到 ba
insertBefore() a.insertBefore(b) 得到 ab
替換: replaceWith() a.replaceWith(b) 用 b 替換掉 a replaceAll() a.replaceAll(b) 用 a 替換掉所有 b
刪除:
remove() a.remove(); 刪除 a 標籤
empty() a.empty(); 清空 a 標籤裏的內容
在這裏插入圖片描述

jquery CSS 樣式操作。

在這裏插入圖片描述

jquery的動畫

回調函數
在這裏插入圖片描述
在$(function());中
在這裏插入圖片描述

jQuery 事件操作

一、 $( function(){} ); 和window.onload = function(){} 的區別? 他們分別是在什麼時候觸發?
1、jQuery 的頁面加載完成是瀏覽器的內核解析完頁面的標籤創建好 DOM 對象之後就會馬上執行。 2、原生 js 的頁面加載完成之後,除了要等瀏覽器內核解析完標籤創建好 DOM 對象,還要等標籤顯示時需要的內容加載 完成。
二、他們觸發的順序?
1、jQuery 頁面加載完成之後先執行 2、原生 js 的頁面加載完成之後 三、他們執行的次數?
1、原生 js 的頁面加載完成之後,只會執行最後一次的賦值函數。 2、jQuery 的頁面加載完成之後是全部把註冊的 function 函數,依次順序全部執行

在這裏插入圖片描述

jQuery 中其他的事件處理方法:

click() 它可以綁定單擊事件,以及觸發單擊事件
mouseover() 鼠標移入事件
mouseout() 鼠標移出事件
bind() 可以給元素一次性綁定一個或多個事件。
one() 使用上跟 bind 一樣。但是 one 方法綁定的事件只會響應一次。
unbind() 跟 bind 方法相反的操作,解除事件的綁定
live() 也是用來綁定事件。它可以用來綁定選擇器匹配的所有元素的事件。哪怕這個元素是後面動態創建出 來的也有效

事件的冒泡

什麼是事件的冒泡? 事件的冒泡是指,父子元素同時監聽同一個事件。當觸發子元素的事件的時候,同一個事件也被傳遞到了父元素的事件裏去 響應。
那麼如何阻止事件冒泡呢? 在子元素事件函數體內,return false; 可以阻止事件的冒泡傳遞

javaScript 事件對象

事件對象,是封裝有觸發的事件信息的一個 javascript 對象。 我們重點關心的是怎麼拿到這個 javascript 的事件對象。以及使用。 如何獲取呢 javascript 事件對象呢? 在給元素綁定事件的時候,在事件的 function( event ) 參數列表中添加一個參數,這個參數名,我們習慣取名爲 event。 這個 event 就是 javascript 傳遞參事件處理函數的事件對象

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章