JQuery 學習筆記-2017.05.22

時間  2019-11-09
標籤 jquery 學習 筆記 2017.05.22 欄目 JQuery 简体版
原文   原文鏈接

JQuery

jQuery 是一個 JavaScript 函數庫。javascript

jQuery 庫包含如下特性：css

  • HTML 元素選取
  • HTML 元素操做
  • CSS 操做
  • HTML 事件函數
  • JavaScript 特效和動畫
  • HTML DOM 遍歷和修改
  • AJAX
  • Utilities

JQuery庫下載

官網下載地址：http://jquery.com/download/#Download_jQueryhtml

JQuery安裝

  1. JQuery是一個JavaScript文件，使用

    JQuery語法

    基礎語法： $(selector).action()java

    • 美圓符 定義JQuery
    • 選擇符（selector） 「查詢」和」查找」HTML元素
    • JQuery的action()執行對選中元素的操做

    JQuery選擇器

    1. 元素選擇器jquery

      JQuery使用CSS選擇器來選取HTML元素。web

    $("p") 選取<p>元素

   $("p.intro")選取全部class=「intro」的<p>元素

   $("p#demo")選取全部id="demo"的<p>元素

    1. 屬性選擇器ajax

      使用XPath表達式來選擇帶有指定屬性的元素ruby

    $("[href]")選取全部帶有href屬性的元素

   $("[href='#']")選取全部href值等於"#"的元素

   $("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

   $("[href\$='.jpg']")選取全部 href 值以 ".jpg" 結尾的元素。

    1. CSS選擇器服務器

      改變HTML元素的CSS樣式。app

      $(「p」).css(「background-color」,」red」);

      把全部p元素的背景顏色改成紅色。

    JQuery事件

    jQuery 事件處理方法是 jQuery 中的核心函數。

    事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件「觸發」（或「激發」）常常會被使用。

    一般會把 jQuery 代碼放到部分的事件處理方法中

    JQuery**名稱衝突**

    使用noConflict()解決

    var jq = jQuery.noConflict();

    這一句使用jq來代替美圓符。

    因爲 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循如下原則時，您的代碼會更恰當且更易維護：

    • 把全部 jQuery 代碼置於事件處理函數中
    • 把全部事件處理函數置於文檔就緒事件處理器中
    • 把 jQuery 代碼置於單獨的 .js 文件中
    • 若是存在名稱衝突，則重命名 jQuery 庫

    JQuery效果

    隱藏/顯示

    隱藏——hide()方法

    顯示——show()方法

    $("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

    語法：

    $(selector).hide(speed,callback);

$(selector).show(speed,callback);
//speed參數設定顯示/隱藏的速度，能夠取如下值："fast"、"slow"和毫秒數
//callback參數定義隱藏或顯示完成後所執行的函數名稱

    toggle()——顯示被隱藏的元素，並隱藏已顯示的元素。

    $("button").click(function(){
  $("p").toggle();
})

    語法：

    $(selector).toggle(speed,callback);

    淡入淡出

    fadeIn()——淡入已隱藏的元素，語法：

    $(selector).fadeIn(speed,callback);
//speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒
//callback 參數是 fading 完成後所執行的函數名稱

    fadeOut()——淡出可見元素,語法：

    $(selector).fadeOut(speed,callback);

    fadeToggle()——在 fadeIn() 與 fadeOut() 方法之間進行切換，語法：

    $(selector).fadeToggle(speed,callback);

    fadeTo()——容許漸變爲給定的不透明度（值介於 0 與 1 之間），語法：

    $(selector).fadeTo(speed,opacity,callback);
//必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）

    滑動

    • slideDown()——向下滑動
    • slideUp()——向上滑動元素
    • slideToggle()——slideDown() 與 slideUp() 方法之間進行切換

    語法：

    $(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
//可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒
//可選的 callback 參數是滑動完成後所執行的函數名稱

    實例：

    <!DOCTYPE html>
<html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 領先的 Web 技術教程站點</p> <p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p> </div> <p class="flip">請點擊這裏</p> </body> </html>

    動畫

    animate()方法——建立自定義動畫，語法：

    $(selector).animate({params},speed,callback);
//必須的params參數定義造成動畫的CSS屬性
//可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。
//可選的 callback 參數是動畫完成後所執行的函數名稱。

    提示：默認地，全部 HTML 元素都有一個靜態位置，且沒法移動。如需對位置進行操做，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！

    中止動畫

    stop()方法——中止當前動畫。

    <!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Stop Animate</title> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function () { $("#flip").click(function () { $("#panel").slideDown(5000); }); $("#stop").click(function () { $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">中止滑動</button> <div id="flip">點擊這裏，向下滑動面板</div> <div id="panel">Hello world!</div> </body> </html>

    *注意：*stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

    CallBack函數

    Callback 函數在當前動畫 100% 完成以後執行。

    Chaining

    經過 jQuery，您能夠把動做/方法連接起來。

    Chaining 容許咱們在一條語句中容許多個 jQuery 方法（在相同的元素上）。

    JQuery HTML

    獲取內容和屬性

    text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
attr() 方法用於獲取屬性值

    添加元素

    append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容
before() - 在被選元素以前插入內容

    刪除元素

    remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

    獲取並設置 CSS 類

    addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操做
css() - 設置或返回樣式屬性

    css() 方法
    css() 方法設置或返回被選元素的一個或多個樣式屬性。
    如需返回指定的 CSS 屬性的值，請使用以下語法：
    css(「propertyname」);
    如需設置指定的 CSS 屬性，請使用以下語法：
    css(「propertyname」,」value」);

    如需設置多個 CSS 屬性，請使用以下語法：
    css({「propertyname」:」value」,」propertyname」:」value」,…});

    尺寸
    jQuery width() 和 height() 方法

    width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
    height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。

    jQuery innerWidth() 和 innerHeight() 方法

    innerWidth() 方法返回元素的寬度（包括內邊距）。
    innerHeight() 方法返回元素的高度（包括內邊距）。

    jQuery outerWidth() 和 outerHeight() 方法

    outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
    outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

    jQuery 遍歷

    jQuery parent() 方法

    parent() 方法返回被選元素的直接父元素。
    該方法只會向上一級對 DOM 樹進行遍歷。

    jQuery parents() 方法

    parents() 方法返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 ()。

    jQuery parentsUntil() 方法

    parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素。

    jQuery children() 方法

    children() 方法返回被選元素的全部直接子元素。
    該方法只會向下一級對 DOM 樹進行遍歷。

    jQuery find() 方法
    find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

    jQuery siblings() 方法
    siblings() 方法返回被選元素的全部同胞元素。

    jQuery next() 方法
    next() 方法返回被選元素的下一個同胞元素。
    該方法只返回一個元素。

    jQuery nextAll() 方法
    nextAll() 方法返回被選元素的全部跟隨的同胞元素。

    jQuery nextUntil() 方法
    nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素。

    jQuery first() 方法
    first() 方法返回被選元素的首個元素。

    jQuery last() 方法
    last() 方法返回被選元素的最後一個元素。

    jQuery eq() 方法
    eq() 方法返回被選元素中帶有指定索引號的元素。
    索引號從 0 開始，所以首個元素的索引號是 0 而不是 1。

    jQuery filter() 方法
    filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

    jQuery not() 方法
    not() 方法返回不匹配標準的全部元素。
    提示：not() 方法與 filter() 相反。

    jQuery - AJAX 簡介

    jQuery load() 方法
    jQuery load() 方法是簡單但強大的 AJAX 方法。
    load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
    語法：

    $(selector).load(URL,data,callback);

    必需的 URL 參數規定您但願加載的 URL。
    可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
    可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
    可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：

    responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象

    jQuery .get()方法 .get() 方法經過 HTTP GET 請求從服務器上請求數據。
    語法：

    $.get(URL,callback);

    必需的 URL 參數規定您但願請求的 URL。
    可選的 callback 參數是請求成功後所執行的函數名。

    jQuery .post()方法 .post() 方法經過 HTTP POST 請求從服務器上請求數據。
    語法：

    $.post(URL,data,callback);

    必需的 URL 參數規定您但願請求的 URL。
    可選的 data 參數規定連同請求發送的數據。
    可選的 callback 參數是請求成功後所執行的函數名。

$("[href]")選取全部帶有href屬性的元素

   $("[href='#']")選取全部href值等於"#"的元素

   $("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

   $("[href$='.jpg']")選取全部 href 值以 ".jpg" 結尾的元素。

  1. CSS選擇器

    改變HTML元素的CSS樣式。

    $(「p」).css(「background-color」,」red」);

    把全部p元素的背景顏色改成紅色。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程