javascript
从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）...
jQuery語法
?
（1）引用jquery文件及下載庫：
http://jquery.com/download/
下載
Download the compressed, production jQuery 2.2.2
這個是用戶版的，已經被精簡和壓縮。
然后使用
<script src="jquery.js"></script>
來啟動這個庫文件，記得將下載的文件重命名為jquery.js
也可以使用谷歌和微軟的CDN，不過這里略。
?
（2）jQuery語法
$ (selector).action()
其中$是必須的，表示使用jQuery語法；
selector表示你要對哪個進行操作；
action()表示進行的操作；
例如：$(“div”).hide() 其表示對所有div標簽包含的內容進行隱藏，如果是<”p”>則表示對p標簽包含的東西進行隱藏。
其他：
$(this) 表示對當前HTML元素進行操作
$(“#abc”) 表示對id為abc的元素進行操作
$(“.abc”) 表示對class=”abc”的進行操作
?
?
（3）$(document).ready
這個存在的意義在于，只有當文檔加載完畢（不確定是指所有文檔，還是指使用的文檔的那一部分），才能運行jQuery代碼
?
?
（4）選擇器
①$(“p”) 選擇元素為<p>的
②$(“p.abc”) 選擇class=”abc”的<p>元素
③$(“p#abc”) 選擇id=”abc”的<p>元素
?
④$(“[href]”) 選擇所有帶有href屬性的元素
⑤$(“[href=’#’]”) 選擇所有帶href值等于“#”的元素
⑥$(“[href!=’#’]”) 選擇所有帶href值不等于“#”的元素
⑦$(“[href$=’.jpg’]”) 選擇所有帶href，末尾以.jpg結尾的元素
more：
| 語法 | 描述 |
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
?
?
?
（5）事件觸發條件
①ready是完成后觸發，一般用于文檔。$(document).ready(執行的命令)
②click是點擊后觸發，一般用于按鈕，也可以用于點擊文檔某區域。$(selector).click(執行的命令)
③dclick是雙擊后觸發。$(selector).dclick(執行的命令);
④focus是元素獲得焦點時觸發的事件；
⑤mouseover是鼠標懸停后觸發的事件；
更多事件觸發參考：
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
?
?
（6）名稱沖突
例如jQuery和某個庫名稱沖突了（例如同樣適用$符號作為開始），那么使用這個命令；
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
?
?
（7）解釋
$(document).ready(function(){
??$(".ex .hide").click(function(){
????$(this).parents(".ex").hide("slow");
??});
});
第一行是，當文件準備好了，執行函數，函數內容是后面的：
第二行是，class=”ex”的元素中的class=”hide”元素，點擊后觸發函數，函數內容為第三行；
第三行是，當前元素（this）的所有祖先元素（parents，一直到根元素html為止）中class=”ex”的元素，被隱藏（hide），速度為緩慢（slow）
疑問：
當有兩個同樣的東西時，為什么只隱藏自己當前這個，不隱藏另外一個？
推測是因為只遍歷其祖先，不包含自己（且祖先中符合class=”ex”要求的）
?
?
（8）隱藏和顯示
隱藏是hide()，而顯示對應的是show()，
只要將隱藏的hide()改為顯示的show()即可。
?
還可以規定速率：
速率有三種，slow（慢），fast（快），數字（毫秒）。
例如hide(“slow”); ??show(“fast”); ???hide(2000);
需要注意的是：無參數為瞬間完成，fast為快（但比瞬間慢），slow為慢，數字無需加引號。
?
另有toggle，用法同show和hide，效果是，如果是隱藏，點擊后顯示，如果是顯示，點擊后隱藏。也可以加時間和速度參數。
問題：假如多次點擊，他會執行完每一次的行為，而不是只執行最近一次
?
?
（9）淡入和淡出
注意大寫，對大小寫是敏感的。
fadeIn(); //淡入（顯示）
fadeOut(); //淡出（隱藏）
fadeToggle(); //類似toggle，如果隱藏則顯示，如果顯示則隱藏
fadeTo(速度, 透明度0~1, 返回函數); //可以調整不透明度，注意，不能大于1
?
如：
$("#img_1st").fadeTo(1000,0.3);
以1000ms的速度，將id=”img_1st”的東西設置為透明度30%
?
注：
假如有多個淡入同時執行，則分別執行自己的，而不是逐個執行。除非有設置設置其執行順序。
?
更多特效參考；
http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
?
?
（10）滑動
說明：非隱藏的情況下，滑動后就是隱藏了，隱藏的情況下，相反的滑動就是顯示。
向上滑動：slideUp();
向下滑動：slideDown();
切換滑動（先向上，再點擊則向下）：slideToggle()
其他效果：
http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
?
?
?
（11）顯示
display:none;
在css的style設置，這種設置為初始不顯示。
?
?
（12）動畫
$(selector).animate({params},speed,callback);
第一個是必須是，表示形成動畫的CSS屬性，簡單的來說，例如初始字號大小為10px，然后這里填寫50px，那么字體就會自動變為50px（這個變化的過程就是動畫）
?
注意：
①這個可以操縱塊，但是似乎是不能操作<p>標簽。
②可以操縱CSS屬性；
③移動位置的話，需要在style里這么設置：position:fixed
?
一些使用：
$(document).ready(function(){
??$("#b_3rd").click(function(){
????$("#a_3rd").animate(
????{left:'550px', //左邊的位置變為550px
???? width:'100px', //寬度變為100px
???? top:'-=200px', //向上的位置減少200px
???? fontSize:'50', //設置字體大小（注意沒有-），并且S大寫
???? });
??});
});
并且由于top使用的是相對位置，因此每次點擊top，都會移動位置
還可以設置為屬性，例如：
width:’toggle’ //寬度形式的隱藏和顯示切換
hide隱藏show顯示。
不過貌似不能淡入淡出和改變透明度，是因為淡入淡出本身就是動畫么？
?
隊列：
$(document).ready(function(){
??$("#b_3rd").click(function(){
????$("#a_3rd").animate({left:'550px'}); //左邊的位置變為550px
????$("#a_3rd").animate({width:'100px'});//寬度變為100px
?????$("#a_3rd").animate({top:'-=200px'});//向上的位置減少200px
??????$("#a_3rd").animate({fontSize:'50'});//設置字體大小（注意沒有-），并且S大寫
??});
});
這種寫法就是讓其按順序執行先移動位置，然后寬度變化，然后往上移動，再字體變大
?
（13）停止動畫
語法：
$(selector).stop(stopAll,goToEnd);
?
假如有動畫隊列1、2、3、4，正在執行1；
默認無參數是1停止，下來執行2，3，4；
第一個參數存在表示1、2、3、4都停止；
第二個參數表示1停止，但是立刻出結果
?
參數用true和false來表示。
①false, false表示1停止，執行2、3、4；
②false, true表示直接完成1，然后執行2，3，4；
③true, false表示1停止，234取消；
④true,true 表示1直接出結果，然后其他停止；
?
如代碼：
<div?style="position:fixed"?id="a_3rd">
<p>用于測試動畫的文字</p>
</div>
<div>
<p?style="text-align:center">
????????<button?id="b_3rd"?align="center">點擊后左面的文字會移動</button>
<button?id="b_4th"?align="center">點擊停止旁邊按鈕的動畫</button>
</p>
</div>
?
以下是對其進行操作：
$(document).ready(function(){
??$("#b_3rd").click(function(){
????$("#a_3rd").animate({left:'550px'},2000); //左邊的位置變為550px
????$("#a_3rd").animate({width:'100px'},2000);//寬度變為100px
?????$("#a_3rd").animate({top:'-=200px'},2000);//向上的位置減少200px
??????$("#a_3rd").animate({fontSize:'50'},2000);//設置字體大小（注意沒有-），并且S大寫
??});
??$("#b_4th").click(function(){
?? $("#a_3rd").stop(true); //停止其的一切動畫隊列
??});
});
?
?
?
（14）CallBack函數
稱為回調函數，
其作用是，當前動畫執行完100%后，執行該函數。
?
可以理解為，當某條件滿足之后，執行該函數。
?
?
（15）AJAX方法（異步請求）
具體來說，是load()方法，語法是：
$(selector).load(URL,data,callback);
?
例如讀取某個鏈接或者本地文件：
??$("#a_3rd").load("a.txt"); //這是標簽為#a_3rd的讀取文本文檔a.txt
?
①URL是希望加載的URL（鏈接）；
②data參數規定與請求一同發送的查詢字符串鍵/值對集合（不懂，感覺是說這個是查詢的時候順便發個信息給對方）；
③callback是結束請求后執行的函數；
?
可以在URL里面加入選擇器（例如#是選擇id的，.是選擇class的），來選擇某一部分的內容（例如js文件的某個標簽的）。
如：
load('/example/jquery/demo_test.txt #p1') //讀取id=”p1”的標簽內的
也可以把#p1改為h2，讀取h2標簽內的
?
load的返回值（注意大小寫）：
responseTxt 包含調用成功時的結果內容
statusTxt 包含返回狀態，如果成功是success，如果失敗是error
xhr 包含XMLHttpRequest對象（不懂）
?
?
（16）get和post——兩種http請求方法
get——從指定的資源請求數據；
post——向指定的資源提交要被處理的數據；
?
GET方法：
查詢字符串（名稱/值 對）是在GET請求的URL中發送的；
①GET請求可被緩存；
②GET請求保留在瀏覽器歷史記錄中；
③GET請求可被收藏為書簽；
④GET請求不應在處理敏感數據時使用；
⑤有長度限制；
⑥只應當用于取回數據；
?
POST方法：
①不會被緩存；
②不會被保存在瀏覽器記錄中；
③不能被收藏為書簽；
④對數據長度沒有要求；
| ? | GET | POST |
| 后退按鈕/刷新 | 無害 | 數據會被重新提交（瀏覽器應該告知用戶數據會被重新提交）。 |
| 書簽 | 可收藏為書簽 | 不可收藏為書簽 |
| 緩存 | 能被緩存 | 不能緩存 |
| 編碼類型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。為二進制數據使用多重編碼。 |
| 歷史 | 參數保留在瀏覽器歷史中。 | 參數不會保存在瀏覽器歷史中。 |
| 對數據長度的限制 | 是的。當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。 | 無限制。 |
| 對數據類型的限制 | 只允許 ASCII 字符。 | 沒有限制。也允許二進制數據。 |
| 安全性 | 與 POST 相比，GET 的安全性較差，因為所發送的數據是 URL 的一部分。 在發送密碼或其他敏感信息時絕不要使用 GET ！ | POST 比 GET 更安全，因為參數不會被保存在瀏覽器歷史或 web 服務器日志中。 |
| 可見性 | 數據在 URL 中對所有人都是可見的。 | 數據不會顯示在 URL 中。 |
?
?
GET語法：
$.get(URL,callback);
?
?
URL是必須有的，表示鏈接；
callback是 請求成功 后執行的回調函數；
?
?
POST語法：
$.post(URL,data,callback);
?
data是連通請求發送的數據。
?
?
以下是收集的資料：
（1）GET用于信息獲取，而且應該是安全的和冪等的。
“安全”大概意思是：
①不安全的信息（敏感的信息）不應該由GET獲取；
②GET主要用于獲取信息，而非修改信息；
③GET請求一般不應產生副作用；
?
“冪等”大概意思是：
①對同一個URL的多次請求的結果是相同的。
例如想要獲得一個信息，多次請求，應該總能獲得這個信息（而非突然變為另外一個信息）；
?
GET請求的數據會附在URL之后（把數據放在HTTP協議頭中），以“?”分割URL和傳輸數據，參數之間以“&”相連，如：
login.action?name=hyddd&password=idontknow&%E4%BD%A0%E5%A5%BD
如果數據是英文字母/數字，則原樣發送；
如果是空格，則轉換為+；
如果是中文/其他字符，則把字符串用BASE64加密，得出%E4%BD%A0%E5%A5%BD，其中%XX中的XX為該符號以16進制表示的ASCII值
?
?
?
（2）POST表示可能改變服務器上的資源請求
①例如對某論壇的帖子進行回帖，服務器上的該貼多了一個回帖。因此應該通過POST來實現；
?
POST把提交的數據放置在HTTP包的包體之中。
?
（3）因此，POST的安全性（關于丟失敏感信息）比GET高，傳輸的數據更多一些，但是更復雜一點（因為data屬性，要發一個表單）。
?
?
?
?
總結
以上是生活随笔為你收集整理的从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS开发之网络编程--6、NSURLS
- 下一篇： 高性能JavaScript-JS脚本加载