jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之后又一個優秀的JavaScript代碼庫(或JavaScript框架)。
jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,并且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
搭配視頻效果更佳哦~~~
jQuery從入門到精通
https://www.ixigua.com/6846624275877593611
jQuery 是一款跨主流瀏覽器的JavaScript 庫,封裝了JavaScript 相關方法調用,簡化JavaScript 對HTML DOM 操作
官網地址: https://jquery.com/
官網首頁jQuery 介紹:
原文翻譯:
jQuery 是一個快速,小巧,功能豐富的JavaScript 庫。 它通過易于使用的API 在大量瀏覽器中運行,使得HTML 文檔遍歷和操作,事件處理,動畫和Ajax 變得更加簡單。 通過多功能性和可擴展性的結合,jQuery 改變了數百萬人編寫JavaScript 的方式。
非常重要的理由就是:它能夠兼容市面上主流的瀏覽器, IE 和FireFox, Google 瀏覽器處理 AJAX,創建異步對象是不同的,而jQuery 能夠使用一種方式在不同的瀏覽器創建AJAX 異步對象。
其他優點:
(1) 寫少代碼,做多事情【write less do more】
(2) 免費,開源且輕量級的js 庫,容量很小
(3) 兼容市面上主流瀏覽器,例如 IE,Firefox,Chrome
(4) 能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果, 也能提供異步AJAX 功能
(5) 文檔手冊很全,很詳細
(6) 成熟的插件可供選擇,多種js 組件,例如日歷組件(點擊按鈕顯示下來日期)
(7) 出錯后,有一定的提示信息
(8) 不用再在html 里面通過<script>標簽插入一大堆 js 來調用命令了
例如:使用JavaScript 定位DOM 對象常用的三種方式:
(1) 通過ID 屬性:document.getElementById()
(2) 通過 class 屬性:getElementsByClassName()
(3) 通過標簽名:document.getElementsByTagName()
上面代碼可以看出JavaScript 方法名太長了,大小寫的組合太多了,編寫代碼效率,容易出錯。jQuery 分別使用$(“#id”) , $(“.class 名”) , $(“標簽名) 封裝了上面的 js 方法。
文檔對象模型(Document Object Model,簡稱 DOM),是 W3C 組織推薦的處理可擴展標志語言的標準編程接口。
通過 DOM 對 HTML 頁面的解析,可以將頁面元素解析為元素節點、屬性節點和文本節點,這些解析出的節點對象,即 DOM 對象。DOM 對象可以使用 JavaScript 中的方法。
官網下載地址:https://jquery.com/download/
jQuery 的不同版本中,2.xx 不再支持 IE6/7/8 瀏覽器?,F階段IE6/7/8 已經是淘汰的,非主流。可以不用考慮兼容問題。
對于每一個同一版本號的 jQuery,其庫又分為兩個。一個是未壓縮版,可查看源碼,開發時使用;一個是壓縮版,將注釋、空格均做了刪除,將變量字符數減少,產品上線時使用。
編寫jQuery 的工具很多,能編寫HTML 的工具都支持jQuery. 例如記事本 ,EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.
單獨學習jQuery 庫使用,可以輕量的開發工具,例如EditPlus ,HBuilder,HbuilderX
編寫項目可以使用集成開發工具,例如在IDEA, Eclipse ,MyEclipse ,WebStorm 等
第一個例子完成:瀏覽器完全裝載html 頁面 DOM 后,顯示一個提示信息框
實現步驟:
1. 使用HBuilder 或HbuilderX, idea 都可以,以HbuilderX 為工具,創建一個項目(名稱:jquery-course),給項目選擇一個文件存放目錄。
2. 在項目中再創建一個目錄
右鍵項目名稱—新建—目錄,常用名稱為 js
3. 拷貝下載的jQuery.js 文件到目錄
4. 使用 jQuery,首先要將 jQuery 庫引入。使用如下語句:
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
5. $(document),將 DOM 對象 document 轉換為jQuery 對象。
$(document).ready()函數是當 DOM 對象加載完畢后,馬上執行的函數。
$(document).ready()與$()、jQuery()、window.jQuery()是等價的,所以
$(document).ready()可以寫成 $(function() { alert(“Hello jQuery”) } );
6. 完整代碼
DOM 對象是用JavaScript 語法創建的對象,也看做是 js 對象。
使用$(DOM 對象) 方式,可以 DOM 對象轉換為 jQuery 對象, 轉換為jQuery 對象才可以使用jQuery 中的提供的方法,操作DOM 對象。一般情況下,在命名 jQuery 對象時,為了與 DOM 對象進行區分,習慣性的以$ 開頭,這不是必須的。
例:新建html 頁面文件 domTojQuery.html
1. 頁面加入按鈕 button
2. 轉換 DOM 對象
jQuery 對象本身為數組對象,該數組中的第 0 個元素即為該 jQuery 對象對應 的 DOM
對象。所以有兩種方式可以獲取到 DOM 對象:get(0) 方式與下標[0]
例:新建html 文件 jQueryToDom.html
1. 頁面添加 text ,button
2. jQuery 對象.get(0) 或 jQuery 對象[0] 均可完成 jQuery 對象轉 DOM對象
選擇器: 就是定位條件;通知jquery 函數定位滿足條件的DOM 對象
根據ID,class 屬性,標簽類型名定位HTML 元素,轉為jQuery 對象.
1. id 選擇器
語法:$(“#id”)
2. class 選擇器
語法:$(“.class 名稱”)
3. 標簽選擇器
語法:$(“標簽名”)
例:新建selector.html
1. 在頁面 head 部分加入 css
2. 加入 jQuery 引用
3.body 部分定義div
4.創建 js 函數
4. 所有選擇器
語法:$(“*”) 選取頁面中所有DOM 對象。
5. 組合選擇器
組合選擇器是多個被選對象間使用逗號分隔后形成的選擇器,可以組合 id, class,標簽名等。
語法:$(“#id, .class, 標簽名”)
例:
1. 上面的 selector.html 頁面中加入按鈕
2. 增加 js 函數
表單相關元素選擇器是指文本框、單選框、復選框、下拉列表等元素的選擇方式。該方法無論是否存在表單<form>,均可做出相應選擇。表單選擇器是為了能更加容易地操作表單,表單選擇器是根據元素類型來定義的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":tr"): 不能用,tr 不是input 標簽語法: $(":type 屬性值")
例如:
$(":text")選取所有的單行文本框
$(":password")選取所有的密碼框
$(":radio")選取所有的單選框
$(":checkbox")選取所有的多選框
例:
新建form.html 頁面定義元素:
定義 js 函數:
jQuery 對象中存儲的DOM對象順序與頁面標簽聲明位置關系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
過濾器就是過濾條件,對已經定位到數組中DOM 對象進行過濾篩選,過濾條件不能獨立出現在jquery 函數,如果使用只能出現在選擇器后方。
1. 選擇第一個first, 保留數組中第一個DOM 對象
語法:$(“選擇器:first”)
2. 選擇最后個last, 保留數組中最后DOM 對象
語法:$("選擇器:last")
3. 選擇數組中指定對象
語法:$(“選擇器:eq(數組索引)”)
4. 選擇數組中小于指定索引的所有DOM 對象
語法:$(“選擇器:lt(數組索引)”)
5. 選擇數組中大于指定索引的所有DOM 對象
語法:$(“選擇器:gt(數組索引)”)
1.定義樣式
2. 頁面加入div
3. 定義js 函數
1. 選擇可用的文本框
$(“:text:enabled”)
2. 選擇不可用的文本框
$(“:text:disabled”)
3. 復選框選中的元素
$(“:checkbox:checked”)
4. 選擇指定下拉列表的被選中元素
選擇器>option:selected
例:
創建filterForm.html 頁面:
js 函數
、Coursera:https://www.coursera.org/
最初由美國斯坦福大學兩名計算機科學教授創辦,國際知名在線教育平臺,還可以獲得認證的課程證書,可以申請獎學金,也有很多免費的學習資源。
2、EdX:https://www.edx.org/
麻省理工和哈佛大學聯手創建的大規模開放在線課堂平臺,目前也有許多國內高校的課程,也可以申請課程證書。
3. 菜鳥教程:http://www.runoob.com/
菜鳥教程的 Slogan 為:學的不僅是技術,更是夢想! 記?。涸倥1频膲粝胍驳植蛔∩当扑频膱猿郑【W站包括了HTML、CSS、Javascript、PHP、C、Python等各種基礎編程教程。
4. 中國大學MOOC網:https://www.icourse163.org/
中國大學MOOC是由網易與高教社攜手推出的在線教育平臺,承接教育部國家精品開放課程任務,向大眾提供中國知名高校的MOOC課程。在這里,每一個有意愿提升自己的人都可以免費獲得更優質的高等教育。
5、Udacity:https://www.udacity.com/
盈利性網站,但Udacity提供了一個就業匹配計劃,里面包括Google、Facebook、Twitter等諸多硅谷公司在內,這些公司為Udacity提供獎學金或工作職位。
6、網易公開課:https://open.163.com/
前面說到的Coursera和網易達成視頻托管協議,還有一分部內容就是在網易公開課上設立了Coursera專區,除了不能申請課程證書外,課程內容與Coursera沒有差異。在Coursera之外,上面還有TED、可汗學院、國內外高校公開課免費資源。因為網站上沒有廣告,站內內容完全免費,這個網站絕對擔得起“良心”兩字。
7、超星讀書:http://book.chaoxing.com/
超星讀書-電子書在線免費閱讀網站
這是一個強大的網絡書庫,如果你有學校賬戶的話,別說通俗讀物,即使是學術專著也能在上面免費瀏覽下載。簡直是做研究和寫論文的大殺器。
8、網易云課堂:https://study.163.com/
專業的實用技能學習平臺
9、學堂在線:https://next.xuetangx.com/
學堂在線-最大的中文慕課(MOOC)平臺
清華大學自主研發的MOOC平臺,資源全部免費。
10、iTunes U:https://itunes.tcd.ie/
蘋果設備自帶的網絡公開課軟件,課程以哈佛、麻省理工、牛津等英文課程為主,中文課程比較少,只有香港中文大學、香港科技大學、中山大學、西安交大、國家開放大學等不到十個大學提供中文內容,內容完全免費。
件測試之菜鳥級攻略,抓包工具Charles使用教程如下:
一、安裝步驟
安裝步驟非常簡單
官網下載:https://www.charlesproxy.com/download/,依照自己的電腦系統,下載安裝。
官網下載的版本需要進行破解,破解包根據自己下載的版本下載一個對應版本的破解包
二、證書安裝
charles安裝完成后,就可以抓取電腦上http的請求。但抓取https的時候還需要進行一些設置。windows的設置于mac不太相同,但基本操作都是一樣。這邊以windows為例。
1.電腦安裝證書
a.選擇:Help—SSL Proxying—Install Charles Root Certificate
b.證書安裝完成后,設置SSL Proxying Settings。選擇:Proxy—SSL Proxying Settings…
添加相應的host以及端口,如下圖所示。
c.以上設置完成后,重啟charles和瀏覽器就可以使用charles抓取電腦中的https請求了。
但有時會出現部分網頁打開時,提示“隱私設置”問題。這是可能是由于SSL Proxying Settings中的設置沒有覆蓋全面,可以將無法打開網頁的host以及port添加進去。
2.手機安裝證書
a.選擇:Help—SSL Proxying—Install Charles Root Certificate on a Mobile Devices or Remote Browser
b.打開了如下的窗口
c.手機端打開無線網的設置—代理設置。設置代理服務器、端口為上圖中的主機和端口
d.配置代理信息后,Charles會出現如下窗口,點擊Allow
e.允許鏈接后,在瀏覽器中輸入:chls.pro.ssl下載證書,下載后,直接安裝。安裝后確認證書是否是被信任的證書,打開:通用—關于本機—證書信任設置,將下載的charles證書設置為信任。
f.設置完成后可以使用charles抓取手機發出的https請求
三、快捷菜單欄操作
清除按鈕:點擊該按鈕將清除當前會話中的所有內容
停止按鈕:點擊后Charles將停止抓包
節流按鈕:點擊后將限制請求上傳和下載的速度
斷點按鈕:點擊后將指定的請求打上斷點
撰寫按鈕:可以新建一個請求或者在原有的請求基礎上修改請求
重復請求按鈕:選中請求后點擊按鈕,將所有請求重復請求一次
驗證按鈕:驗證返回的Html信息。將這些返回發送到W3C HTML驗證器、W3C CSS驗證器和W3C Feed驗證器來驗證記錄的相應。
四、常用功能操作
1.模擬慢速網絡:Proxy—Throttle Settings(快捷菜單中的節流按鈕)
適用場景:模擬慢速網絡或者高延遲的網絡。
勾選:Enable Throttling按鈕就可以打開限速。
在Throttle Preset中可以直接選擇已經預設的模式,也可以根據自己需要調整參數。
可以對指定的請求進行單獨的限速,勾選:Only for selected hosts—Add—添加指定的請求地址。
2.斷點功能:Proxy—Breakpoints Settings(快捷菜單中的斷點按鈕)
適用場景:需要修改一次網絡請求或返回結果。一般用于臨時性的修改。當指定的網絡請求發生時,Charles會接獲該請求。
(1)兩種設置的方式:
a.勾選:Enable Breakpoints按鈕,點擊Add按鈕,添加需要打斷點的請求信息
b.選中需要打斷點的請求,右擊—選擇Breakpoints,即可將該請求打上斷點。默認請求和返回都被打斷點,可以通過a的方式進行修改。
指定請求打上斷點后,再次請求,根據設置會攔截相應的請求或者返回,此時修改相應的內容后,點擊Execute按鈕。
3.重寫:Tools—Rewrite
適用場景:需要對請求和相應進行修改時,如添加或更改頭信息、替換響應內容等。該功能跟斷點功能類似,更適用于一個請求需要多次重新的情況。
a.添加指定的請求
b.選擇重寫請求或者返回,然后添加需要重寫的信息
4.代理設置:Proxy—Proxy Settings
HTTP Proxy中設置端口,默認為8888。
5.SSL代理設置:Proxy—SSL Proxying Settings
抓取HTTPS時需要設置訪問的網址,設置如下圖一般可以抓取大部分
6.訪問控制設置:Proxy—Access Control Settings
在抓取手機網絡請求的設置中,會出現是否允許鏈接的提示框,如下
如果選擇了“Allow”按鈕,會自動將手機IP地址填寫到Access Control Settings的窗口中。
如果不小心選擇了“Deny"按鈕,沒有關系,可以自己將IP地址配置到以下窗口中。
7.重復請求:Tools—Repeat
適用場景:后端修改后,需要前段重復請求時,選中指定請求,點擊Tools—Repeat按鈕或者右鍵—Repeat。
8.高級重復請求:Tools—Advanced Repeat
適用場景:可以用于服務器的壓力測試
下圖紅框中輸入循環請求的次數和并發數量
五、其他操作
1.記錄設置:Proxy—Recording Settings
Options:設置記錄請求的限制
Include:當只需要抓取指定網站的請求,可以在該頁面中添加指定的請求方式和地址
Exclude:不抓取該列表中填寫的網絡請求
2.反向代理:Proxy—Reverse Proxies Settings。
適用場景:對于本地開發需要使用域名的情況下非常適用。
勾選:Enable Reverse Proxie。點擊Add按鈕,添加相應的信息
如下圖,將本地端口61087端口映射到www.baidu.com域名的80端口
3.轉發端口:Proxy—Port Forwarding
適用場景:監控TCP數據時,對端口進行轉發
勾選:Enable Port Forwarding。點擊Add按鈕,添加相應的信息4.抓取電腦請求設置:Proxy—Windows Proxy。勾選上該選項后可抓取電腦上的請求
4.抓取電腦請求設置:Proxy—Windows Proxy。勾選上該選項后可抓取電腦上的請求
5.外部代理:Proxy—External Proxy
適用場景:把經過Charles的請求轉到其他代理服務器,適用于特殊情況下需要用到兩個軟件的特點進行開發。
填寫代理服務器的IP和端口后,可以在Charles和代理服務器中同時捕捉到相同的http請求。
6.網絡頁面設置:Proxy—Web Interface Settings
適用場景:清除Session操作,開啟后需要指定匿名可以訪問或者賬號密碼訪問
7.禁用緩存:Tools—No Caching
適用場景:防止客戶端應用程序緩存任何資源。禁用后會始終向遠程網站發出請求,始終獲得最新版本
可以對所有請求禁用緩存,也可以對指定的請求禁用。
8.禁用Cookies:Tools—Block Cookies
適用場景:阻止Cookies的發送和接收,可用于模擬網絡爬蟲網站的視圖。
可以對所有請求禁用,也可以對指定的請求禁用。
9.遠程映射:Tools—Map Remote Settings
將from的站點映射到to的站點,從新站點提供響應。
10.本地映射:Tools—Map Local Settings
適用場景:開發調試時,可以將遠程網站映射到本地文件。本地文件的內容返回給客戶端,跟正常的遠程相應一樣。
11.黑名單設置:Tools—Black List
列入黑名單的域名請求任何頁面時,該請求都將被阻止。
12.白名單設置:Tools—Write List
僅僅允許被輸入的域名。如果一個請求同時存在黑名單和白名單時,該請求會被阻止。
13.DNS欺騙:Tools—DNS Spoofing Settings
將自己的主機名指定給遠程地址映射來欺騙DNS查找。
適用場景:上線前需要在測試環境中驗證,手機客戶端請求的域名不太容易更改,可以通過設置dns方式把域名轉發到測試機上進行測試。
14.鏡像:Tools—Mirror
適用場景:瀏覽指定站點時,把接收的相應內容克隆一份,保存在指定路徑下。如果收到同一個URL的兩次請求,最后一次的請求將覆蓋已經存在的同名文件。
15.自動保存:Tools—Auto Save
按照設置的時間間隔自動保存和清除記錄會話。
16.客戶端進程:Tools—Client Process
可以查看到原始進程的請求,適用于抓取PC端的請求
17.編輯修改請求:Tools—Compose、Tools—Compose New。對應快捷菜單:撰寫按鈕。
a.選中指定的請求,勾選:Tools—Compose;或者右鍵—選擇Compose
b.復制了選中請求的信息,在右邊的框中可以對所有信息進行修改。點擊Execute按鈕執行。
新建一個請求,選擇Compose New:添加請求信息于上圖操作一致
18.驗證:Tools—Validate:與快捷菜單中驗證按鈕功能相同
19.發布要點:Tools—Publish Gist
最后,如果你對軟件測試感興趣,歡迎百度搜索“特斯汀軟件測試騰訊課堂”或關注公眾號“特斯汀軟件測試”,里面涵蓋很多精彩免費視頻或干貨知識。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。