jQuery框架學習總結
一、jQuery的下載與使用
下載:http://jquery.com/download/
使用:<script src ="jquery.min.js"></script>
二、jQuery選擇器
基本選擇器
選擇器 | 功能描述 | 示例 |
* | 匹配所有元素 | $("*")選取所有的元素 |
#id | 根據指定id匹配一個元素 | $("#test")選取id為test的元素 |
.class | 根據指定類名匹配所有元素 | $(".test")選取所有class為test的元素 |
element | 根據指定元素名匹配所有元素 | $("div")選取所有的<div>元素 |
selector1,...selectorN | 將每個選擇器匹配到的元素合併後一起返回 | $("div,span,p.test")選取所有標籤為<div>、<span>和<p class="test">的一組元素 |
層次選擇器
選擇器 | 功能描述 | 示例 |
ancestor descendant | 選取祖先(ancestor)元素匹配所有後代(descendant)元素 | $("div span")選取<div>中的所有後代元素<span> |
parent > child | 根據父元素匹配所有的子元素 | $("div > span")選取<div>中的所有子元素<span> |
prev + next | 匹配所有緊接在prev元素後的相鄰元素 | $(".test + div")選取class為test的下一個<div>元素 |
prev ~ next | 匹配所有緊接在prev元素後的相鄰元素 | $("#test ~ div")選取id為test的元素後面的所有<div>兄弟元素 |
過濾選擇器
選擇器 | 功能描述 | 示例 |
:first | 匹配找到的第一個元素 | $("div:first")選取所有<div>元素中的第一個<div>元素 |
:last | 匹配找到的最後一個元素 | $("div:last")選取所有<div>元素中最後一個<div>元素 |
:not(selector) | 匹配所有不匹配給定選擇器的元素 | $("div:not(.test)")選取所有class不是test的<div>元素 |
:even | 匹配索引是偶數的所有元素(從0開始計數) | $("div:even")選取所有索引是偶數的<div>元素 |
:odd | 匹配索引是奇數的所有元素(從0開始計數) | $("div:odd")選取所有索引是奇數的<div>元素 |
:eq(index) | 匹配一個給定索引值的元素(從0開始計數) | $("div:eq(1)")選取一個索引等於1的<div>元素 |
:gt(index) | 匹配所有大於給定索引值的元素(從0開始計數) | $("div:gt(1)")選取所有索引大於1的<div>元素(不包括1) |
:lt(index) | 匹配所有小於給定索引值的元素(從0開始計數) | $("div:lt(1)")選取所有索引小於1的<div>元素(不包括1) |
:header | 匹配所有的標題元素(例如h1,h2,h3等) | $(":header")選取所有的標題元素<h1>、<h2>、<h3>... |
:animated | 匹配所有當前正在執行動畫的元素 | $(":animated")選取所有正在執行動畫的<div>元素 |
內容過濾選擇器
選擇器 | 功能描述 | 示例 |
:contains(text) | 匹配包含給定文字的元素 | $("div:contains('itcast')")選取含有文字"itcast"的<div>元素 |
:empty | 匹配所有不包含子元素或者文字的空元素 | $("div:empty")選取不包含子元素、不包含文字元素的<div>元素 |
:has(selector) | 匹配含有”選擇器所匹配的元素"的元素 | $("div:has(p)")選取含有<p>元素的<div>元素 |
:parent | 匹配含有子元素或者文字的元素 | $("div:parent")選取擁有子元素(包括文字元素)的<div>元素 |
可見性過濾選擇器
選擇器 | 功能描述 | 示例 |
:hidden | 匹配所有不可見的元素 | $(":hidden")選取所有不可見的元素 $("input:hidden")選取所有不可見的input元素 |
:visiable | 匹配所有可見的元素 | $("div:visiable")選取所有可見的<div>元素 |
屬性過濾選擇器
選擇器 | 功能描述 | 示例 |
[attribute] | 匹配擁有此屬性的元素 | $("div[id]")選取擁有屬性為id的<div>元素 |
[attribute=value] | 匹配屬性的值為value的元素 | $("div[it=cast]")選取屬性為it,屬性值為cast的<div>元素 |
[attribute!=value] | 匹配屬性值不是value的元素 | $("div[it!=cast]"選取屬性為it,且值不為cast的<div>元素(沒有it屬性也會被選中) |
[attribute^=value] | 匹配屬性值以value開始的元素 | $("div[it^=cast]")選取屬性為it,屬性值以cast開始的<div>元素 |
[attribute$=value] | 匹配屬性值以value結尾的元素 | $("div[it$=cast]")選取屬性為it,屬性值以cast結束的<div>元素 |
[attribute*=value] | 匹配屬性值含有value的元素 | $("div[it*=cast]")選取屬性為it,屬性值含有cast的<div>元素 |
[selector1][selector2]...[selectorN] | 複合屬性選擇器,需要同時滿足多個條件時使用 | $("div[id][it^=cast]")選取擁有id和it屬性,並且it屬性值為cast的<div>元素 |
子元素過濾選擇器
選擇器 |
功能描述 |
示例 |
:nth-child(index|odd|even) |
匹配父元素下的特定位置(從1開始計數) |
$(“ul li:nth-child(2)”)選取<ul>中的第二個<li>元素 |
:first-child |
匹配父元素下的第一個子元素 |
$(“ul li:first-child”)選取<ul>中的第一個<li>元素 |
:last-child |
匹配父元素下的最後一個子元素 |
$(“ul li:last-child”)選取<ul>中的最後一個<li>元素 |
:only-child |
如果某個元素是父元素中唯一的子元素,則會被匹配 |
$(“ul li:only-child”)選取<ul>中的唯一子元素的<li>元素 |
表單物件屬性過濾選擇器
選擇器 |
功能描述 |
示例 |
: checked |
匹配所有被選中的元素 |
$(“input :checked”)選取所有被選中的<input>元素 |
:selected |
匹配所有被選中的選項元素 |
$(“input :selected”)選取所有被選中的<option>元素 |
:enabled |
匹配所有可用的元素 |
$(“#test :enabled”)選取id為test的表單內所有可用的元素 |
:disabled |
匹配所有不可用的元素 |
$(“#test :disabled”)選取id為test的表單內所有不可用的元素 |
表單選擇器
選擇器 |
功能描述 |
示例 |
:input |
匹配所有的<input>、<textarea>、<select>和<button>元素 |
$(“:input”)選取所有<input>、<textarea>、<select>、<button>元素 |
:text |
匹配所有的單行文字框 |
$(“:text”)選取所有的單行文字框 |
:password |
匹配所有的密碼框 |
$(“:password”)選取所有的密碼框 |
:radio |
匹配所有的單選按鈕 |
$(“:radio”) 選取所有的單選按鈕 |
:checkbox |
匹配所有的複選框 |
$(“:checkbox”) 選取所有的複選框 |
:submit |
匹配所有的提交按鈕 |
$(“:submit”) 選取所有的提交按鈕 |
:image |
匹配所有的影象域 |
$(“:image”) 選取所有的影象域 |
:reset |
匹配所有的重置按鈕 |
$(“:reset”) 選取所有的重置按鈕 |
:button |
匹配所有的按鈕 |
$(“:button”) 選取所有的按鈕 |
:file |
匹配所有的檔案上傳域 |
$(“:file”) 選取所有的檔案上傳域 |
:hidden |
匹配所有的不可見元素 |
$(“:hidden”) 選取所有的不可見元素 |
三、DOM文件操作
元素遍歷
$(selector).each(function(index,element))
index:表示選擇器的索引位置
element:表示當前的元素
元素屬性操作
屬性操作方法
語法 |
說明 |
attr(name) |
取得第一個匹配元素的屬性值,否則返回undefined |
attr(properties) |
將一個鍵值對形式的json物件設定為現有匹配元素的屬性 |
attr(key,value) |
為所有匹配的元素設定一個屬性值 |
attr(key,function) |
為所有匹配的元素設定一個計算的屬性值 |
removeAttr(name) |
從每一個匹配的元素中刪除一個屬性 |
class屬性操作
語法 |
作用 |
說明 |
addClass(class) |
追加樣式 |
為每個匹配的元素追加指定的類名 |
removeClass(class) |
移除樣式 |
從所有匹配的元素中刪除全部或者指定的類 |
toggleClass(class) |
切換樣式 |
判斷指定類是否存在,存在則刪除,不存在則新增 |
value屬性操作
$(selector).Val([value]):根據是否傳遞引數來獲取或設定value屬性
元素內容操作
語法 |
說明 |
html() |
獲取第一個匹配元素的HTML內容 |
html(content) |
設定第一個匹配元素的HTML內容 |
text() |
獲取所有匹配元素包含的文字內容組合起來的文字 |
text(content) |
設定所有匹配元素的文字內容 |
元素樣式操作
語法 |
說明 |
css(name) |
獲取第一個匹配元素的樣式 |
css(properties) |
將一個鍵值對形式的JSON物件設定為所有匹配元素的樣式 |
css(name,value) |
為所有匹配的元素設定樣式 |
width() |
獲取第一個匹配元素的當前寬度值(返回數值型結果) |
width(value) |
為所有匹配的元素設定寬度樣式(可以字串或數字) |
height() |
獲取第一個匹配元素的當前高度值(返回數值型結果) |
height(value) |
為所有匹配的元素設定高度樣式(可以字串或數字) |
文件結點操作
結點追加
關係 |
語法 |
說明 |
父子結點 |
append(content) prepend(content) appendTo(content) prependTo(content) |
向每個匹配的元素內部追加內容 向每個匹配的元素內部前置內容 把所有匹配的元素追加到指定元素集合中 把所有匹配的元素前置到指定元素集合中 |
兄弟結點 |
after(content) before(content) insertAfter(content) insertBefore(content) |
在每個匹配的元素之後插入內容 在每個匹配的元素之前插入內容 把所有匹配的元素插入到指定元素集合的後面 把所有匹配的元素插入到指定元素集合的前面 |
結點替換
語法 |
說明 |
replaceWith(content) |
將所有匹配的元素替換成指定的HTML或DOM元素 |
replaceAll(selector) |
用匹配的元素替換掉所有selector匹配到的元素 |
結點刪除
語法 |
說明 |
empty() |
刪除匹配的元素集合中所有的子結點 |
remove([expr]) |
刪除所有匹配的元素及子結點(可選引數expr用於篩選元素) |
detach([expr]) |
分離所有匹配的元素及子結點 |
結點複製
語法 |
說明 |
clone([false]) |
複製匹配的元素並且選中這些複製的副本,預設引數為false |
clone(true) |
引數設定為true時,複製元素的所有事件處理 |
結點包裹
語法 |
說明 |
wrap(html) |
將每個匹配元素用HTML標記包裹起來 |
wrap(element) |
將每個匹配元素用指定元素包裹起來 |
wrapAll(html) |
將所有匹配元素用一個HTML標記包裹起來 |
wrapAll(element) |
將所有匹配元素用一個指定元素包裹起來 |
wrapInner(html) |
將每個匹配元素用一個HTML標記包裹起來 |
wrapInner(element) |
將每個匹配元素用一個指定元素包裹起來 |
jQuery物件與DOM物件互轉
DOM物件 ---------------------------> jQuery物件
將DOM物件放入$()中即可
e.g $(document.getElementById(“msg”))
DOM物件 <--------------------------- jQuery物件
方法1:由於jQuery物件是一個數組物件,所以通過陣列索引即可得到DOM物件
e.g $(“#msg”)[0]
方法2:使用jQuery提供的get方法也可以得到DOM物件
e.g $(“#msg”).get(0)
四、事件和動畫效果
常用事件方法
語法 |
說明 |
blur([[data],function]) |
當元素失去焦點時觸發 |
change([[data],function]) |
當元素的值發生改變時觸發 |
click([[data],function]) |
當單擊元素時觸發 |
dbclick([[data],function]) |
當雙擊元素時觸發 |
focus([[data],function]) |
當元素獲得焦點時觸發 |
focusin([[data],function]) |
在父元素上檢測子元素獲取焦點的情況 |
focusout([[data],function]) |
在父元素上檢測子元素失去焦點的情況 |
mouseover([[data],function]) |
在滑鼠移入物件時觸發 |
mouseout([[data],function]) |
在滑鼠從元素上離開時觸發 |
scroll([[data],function]) |
當滾動條發生變化時觸發 |
select([[data],function]) |
當文字框(包括input和textarea)中的文字被選中時觸發 |
submit([[data],function]) |
當表單提交時觸發 |
頁面載入事件對比
方法 |
window.onload (DOM物件) |
$(document).ready() (jQuery物件) |
執行時機 |
必須等待網頁中的所有內容載入完成後(包括圖片)才能執行 |
網頁中的所有DOM結構繪製完成後即執行(可能關聯內容並未載入完成) |
編寫個數 |
不能同時編寫多個 |
能夠同時編寫多個 |
簡化寫法 |
無 |
$() |
事件繫結與切換
語法 |
說明 |
on(events,[selector],[data],function) |
在匹配元素上繫結一個或多個事件處理函式 |
off(events,[selector],[function]) |
在匹配元素上移除一個或多個事件處理函式 |
one(type,[data],function) |
為每個匹配元素的事件繫結一次性的處理函式 |
trigger(type,[data]) |
在每個匹配元素觸發某類事件 |
triggerHandler(type,[data]) |
同trigger(),但瀏覽器預設動作將不會被觸發 |
hover([over,]out) |
元素滑鼠移入與移出時間切換 |
toggle() |
元素顯示與隱藏事件切換 |
動畫效果方法
語法 |
說明 |
show([speed],[easing],[function]) |
顯示隱藏的匹配元素 |
hide([speed],[easing],[function]) |
隱藏顯示的匹配元素 |
toggle([speed],[easing],[function]) |
元素顯示與隱藏切換 |
slideDown([speed],[easing],[function]) |
垂直滑動顯示匹配元素(向下增大) |
slideUp([speed],[easing],[function]) |
垂直滑動顯示匹配元素(向上增大) |
slideToggle([speed],[easing],[function]) |
在slideUp()和slideDown()兩種效果間的切換 |
fadeIn([speed],[easing],[function]) |
淡入顯示匹配元素 |
fadeOut([speed],[easing],[function]) |
淡出隱藏匹配元素 |
fadeTo([speed],opacity,[easing],[function]) |
以淡入淡出方式將匹配元素調整到指定的透明度 |
fadeToggle([speed],[easing],[function]) |
在fadeIn()和fadeOut()兩種效果間的切換 |
自定義動畫
使用者只需要指定一個最終樣式,就可以使指定元素以動畫效果變為最終樣式
方法:animate(params,[speed],[easing],[function])
params:一組包含動畫最終屬性值的集合
speed:動畫速度
easing:動畫效果
function:動畫完成後執行的函式
五、jQuery的Ajax操作
jQuery常用的Ajax方法
方法 |
說明 |
load(url,[data],[function]) |
載入遠端HTML檔案程式碼並插入至DOM元素中 |
$.ajax(url,[settings]) |
通用的Ajax方法,可傳送請求並載入資料 |
$.get(url,[data],[function],[type]) |
通過GET方法傳送請求並載入資料 |
$.post(url,[data],[function],[type]) |
通過POST方法傳送請求並載入資料 |
$.getJSON(url,[data],[function]) |
通過GET方法傳送請求並載入JSON資料 |
$.getScript(url,[function]) |
通過GET方法傳送請求並載入JavaScript資料 |
url:請求的URL地址
data:請求時傳送的資料
function:載入成功時執行的函式
type:返回資料的格式
settings:對Ajax的請求設定
相關推薦
jQuery框架學習總結
一、jQuery的下載與使用 下載:http://jquery.com/download/ 使用:<script src ="jquery.min.js"></script> 二、jQuery選擇器 基本選擇器 選擇器 功能描述 示例 * 匹配所有元
jQuery框架學習
如果 selector 2.0 應用 select 沒有 業務 con 體驗 之前也看過jquery庫源碼,網上也有很多對於jquery框架的分析教程,但是最近又想花點時間重新學習。jquery問世以來受到了廣大的前端開發者的青睞,對於很多前端開發者來說,走上前端的道路
Apache的DBUtils框架學習總結
今天一直在學習使用alibaba開發的資料庫連線池技術,按照教程試了好久都有問題,一直搞到晚上才找出問題所在,下面先分享一下今天找到的一篇很有用的部落格: 點選跳轉原部落格 我自己的問題出在配置檔案的格式上,如下 這個屬性一定要單獨寫一行,不要直接跟在URL資料庫名稱後面,否則
Spring框架學習總結
單獨使用 可維護 ava 設置 允許 servlet容器 spec 學習 ogr 1. 什麽是Spring框架? 1.1 概念 SpringFrameWork是輕量級容器,它可以使用Struts和webwork等眾多的web應用程序結合使用,也可以單獨使用。
pytest介面自動化測試框架學習總結
入職已經1個月多了,前段時間一個緊急的專案,用緊急的手段做成介面自動化,框架用的是jmeter+ant+Jenkins,這個框架的優點就是上手快,寫用例快,總之就是越快越好!明天開始新的專案,估計又是996,抽空把今天學習的pytest框架一些知識做下總結: 1,Assert就是斷言,每個測試用
JQuery的學習總結
首先:瞭解一下Jquery和JS的區別,以便於我們更清晰的學習Jquery. 一、本質區別: 1.js都知道是網頁尾本語言,類似java是一種開發常用語言; 2.jQuery是基於js語言封裝出來的一個前端框架; 所以最本質的區別就是js是一種語言,而jQuery是基於該語言
Java IO框架學習總結
Java流操作有關的類或介面: Java流類圖結構: 流的概念和作用 流是一組有順序的,有起點和終點的位元組集合,是對資料傳輸的總稱或抽象。即資料在兩裝置間的傳輸稱為流,流的本質是資料傳輸,根據資料傳輸特性將流抽象為各種類,方便更直觀的進行資料操作
jQuery EasyUI學習總結
jQuery EasyUI 節點樹的使用總結 取消所有節點 //取消所有選中的節點 var node = $('#tree').tree('getRoot');//獲取根節點 $('#tree').tree('uncheck', node.target)
Struts2框架學習總結(從入門到精通)
文章目錄 一、Struts2入門 struts2概述 struts2入門案例 struts2底層執行過程 struts2相關配置 struts2的核心配置檔案struts.xml struts2常量配
LR效能測試框架學習總結
效能目的:使用起來速度快,不崩,穩定 效能分類: 常規效能測試--響應時間、響應速度----正常工作,你的速度有多快 負載測試---持續加壓,目的是找到崩潰的臨界點,目的是使用者使用時能不觸碰到此臨界點---不斷增加工作量使工作飽和度不斷增加,你什麼時候撐不住了 壓力測試-
JAVA集合框架學習總結
做一個JAVA簡單的集合框架的知識總結,只是單純的知識點記錄和自己的表達,更深入或具體的只能自己去查API或原始碼了,以後如果有其他想法再回來補充修正,有錯誤之處請指教。 java集合框架主要分為實現了Collection介面的List和Set、對映介面Map。
SSH框架學習總結
SSH不是一個框架,而是多個框架(struts+spring+hibernate)的整合,是目前較流行的一種Web應用程式開源整合框架,用於構建靈活、易於擴充套件的多層Web應用程式。 整合SSH框架的系統從職責上分為四層:表示層、業務邏輯層、資料持久層和域模組層(實
Activity 工作流框架學習總結
環境的搭建和資料表的瞭解 1. 什麼是工作流? 工作流(Workflow),就是“業務過程的部分或整體在計算機應用環境下的自動化”,它主要解決的是“使在多個參與者之間按照某種預定義的規則傳遞文件、資訊或任務的過程自動進行,從而實現某個預期的業務目標,或者
springmvc+mybatis框架學習總結
7上傳圖片 7.1 需求 7.2 springmvc中對多部型別解析 在頁面form中提交 enctype=”multipart/form-data”的資料時, <form id="itemForm" action=
框架學習總結-----MyBatis--- 對映檔案配置(簡述)
1.名稱空間的配置: mapper 為根元素節點,一個namespace對應一個dao, 格式:<mapper namespace="com.dy.dao.UserDao"> 2.SQL 語句的對映:圖片官方文件:圖片3.SQL這個元素用來定義可
Android MVVM框架學習總結(二)
Android MVVM框架學習總結 4. 資料物件 任何POJO物件都可以用於資料繫結,但是更改POJO物件,並不會引起UI更新。有三種不同的資料更改通知機制:觀察物件,觀察欄位和觀察集合。當其中一個繫結到使用者介面的可觀察的資料物件,觀察到資料
PHP之Yii框架學習總結
Yii 是一個高效能的,適用於開發 WEB2.0 應用的 PHP 框架。 Yii 自帶了豐富的功能 ,包括: 模型-檢視-控制器(MVC)設計模式: Yii在WEB程式設計中採用這一成熟的技術從而可以更好的將邏輯層和表現層分開 與jQuery整合:作為最流
[OSDI 12] PoweGraph: 分散式圖平行計算框架 學習總結
今天要講的文章是OSDI 2012年的一篇文章,PowerGraph:Distributed Graph-Parallel Computation on Natural Graphs。本文主要想解決的問題就是:現有的圖資料,如社交網路、Web網頁等都是一種Po
某智慧家居專案框架學習總結
OpenRemote is software integration platform for residential and commercial building automation. OpenRemote platform is automation protocol agnostic, opera
前端框架學習總結之Angular、React與Vue的比較詳解
近幾年前端的技術發展很快,細分下來,主要可以分成四個方面: 1.開發語言技術,主要是ES6&7,coffeescript,typescript等; 2.開發框架,如Angular,React,Vue.js,Angular2等; 3.開發工具的豐富和前端工程化,像