jQuery語法、選擇器、效果等使用

来源:https://www.cnblogs.com/sweetgao/archive/2018/09/18/9669732.html
-Advertisement-
Play Games

1．jQuery語法 1.1 基礎語法：$(selector).action( ) 美元符號定義 jQuery 選擇符（selector）“查詢”和“查找” HTML 元素 jQuery 的 action() 執行對元素的操作 示例： $(this).hide() - 隱藏當前元素 $(".test ...


1．jQuery語法

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

  • 美元符號定義 jQuery
  • 選擇符（selector）“查詢”和“查找” HTML 元素
  • jQuery 的 action() 執行對元素的操作

示例：

$(this).hide() - 隱藏當前元素

$(".test").hide() - 隱藏所有 class="test" 的所有元素

$(“ul li:first”) - 每個<ul>的第一個<li>元素

$(“div#intro .head”) - id=”intro”的<div>元素中所有class=”head”的元素

 1.2 文檔就緒函數

$(document).ready(function(){

--- jQuery function go here ---

});

這是為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼。

如果在文檔沒有完全載入之前就運行函數，操作可能失敗。下麵是兩個具體的例子：

    • 試圖隱藏一個不存在的元素
    • 獲得未完全載入的圖像的大小

2．jQuery選擇器

jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇。

在 HTML DOM 術語中： 選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。

 

 

2.1 元素選擇器

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

$("p.intro") 、$("p#demo")   選取所有 class="intro" 或id="demo"的 <p> 元素。

 

 

2.2 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href='#']")或$("[href!='#']")   選取所有帶有 href 值等於（或不等於） "#" 的元素。

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

 

 2.3 css選擇器

jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

例：$("p").css("background-color","red");

 

3．jQuery效果

3.1 影藏/顯示：hide/show

語法：$(selector).hide(speed,callback);     影藏

           $(selector).show(speed,callback);    顯示

           $(selector).toggle(speed,callback);   切換（顯示被隱藏的元素，並隱藏已顯示的元素）

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是hide()或show()或toggle()完成後所執行的函數名稱。

 

 

3.2 淡入/淡出：fade

fadeIn().............淡入已隱藏的元素

fadeOut()...........淡出可見元素

fadeToggle().......在 fadeIn() 與 fadeOut() 方法之間進行切換

fadeTo().............允許漸變為給定的不透明度（值介於 0 與 1 之間）

 

語法：$(selector).fadeIn(speed,callback);   

　　　　　可選的 speed 參數規定效果的時長

          $(selector).fadeTo(speed,opacity,callback); 

必需的speed 參數規定效果的時長,

必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）

實例：

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.5);

$("#div3").fadeTo("slow",0.7);

});

 

  

 3.3 滑動：slide

slideDown().............向下滑動元素

slideUp().................向上滑動元素

slideToggle()............在 slideDown() 與 slideUp() 方法之間進行切換。

 

 3.4 動畫：animate( )

 

語法：$(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。

實例：

$("button").click(function(){

$("div").animate({left:'250px'});

});

............................................................................................................................

<button>開始動畫</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 

提示：預設地，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！

 

 ① 操作多個屬性

$("div").animate({

left:'250px',

opacity:'0.5',

width:'150px'

});

提示：animate() 方法幾乎可以操作所有CSS屬性，但必須使用Camel標記法書寫所有額屬性名，比如，必須使用paddingLef而不是padding-left。

並且，色彩動畫不包含在核心jQuery庫中，如果需要生成顏色動畫，需要從jQuery.com下載Color Animations插件。

② 使用相對值

該值相對於元素的當前值，需要在值的前面加上 +=或 -=

$("div").animate({

left: '250px',

height: '+=150px',

width: '+=150px'

});

③ 使用預定義的值

可以把屬性的動畫值設置為”show”、”hide”或”toggle”

$("div").animate({

height: 'toggle'

});

這裡的效果相當於：$("div").slideToggle();

④ 使用隊列功能

預設的，jQuery提供針對動畫的隊列功能。這意味著若果在彼此之後編寫了多個animate()調用，jQuery會創建包含這些方法調用的“內部”隊列。然後逐一運行這些animate調用。

$("button").click(function(){

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

上面的例子把 <div> 元素移動到右邊，然後增加文本的字型大小。

 3.5 停止動畫：stop( )

jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。stop() 方法適用於所有jQuery效果函數，包括滑動、淡入淡出和自定義動畫。

語法：$(selector).stop(stopAll, goToEnd);

stopAll：可選，規定是否應該清除動畫隊列。預設是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。

goToEnd：可選，規定是否立即完成當前動畫。預設是 false。

因此，預設地，stop()會清除在被選元素上指定的當前動畫。

 3. 6 鏈接：Chaining( )

Chaining( )允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）。

例：$("#p1").css("color","red").slidUp(2000).slideDown(2000);

"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動

提示：1、這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個動作，只需簡單地把該動作追加到之前的動作上。

    2、當進行鏈接時，代碼行會變得很差。不過，jQuery 在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮進。

 

 4．jQuery HTML

4.1 獲取內容和屬性

提示：DOM = Document Object Model（文檔對象模型）

⑴ 獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

      • text()    設置或返回所選元素的文本內容
      • html()   設置或返回所選元素的內容（包括 HTML 標記）
      • val()     設置或返回表單欄位的值

實例1：

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

............................................................................................................................

<p id="test">這是段落中的<b>粗體</b>文本。</p>

<button id="btn1">顯示文本</button>

<button id="btn2">顯示 HTML</button>

實例2：

$("button").click(function(){

alert("Value: " + $("#test").val());

});

............................................................................................................................

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button>顯示值</button>

 ⑵ 獲取屬性 - attr()

實例3：

$("button").click(function(){

alert($(“#w3s”).attr(“href”));

});

............................................................................................................................

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>顯示 href 值</button>

 4.2 設置內容和屬性

⑴ 設置內容 - text()、html() 以及 val()

實例1：

$("#btn1").click(function(){ $("#test1").text("Hello world!"); });

 

text()、html() 以及 val() 的回調函數：

上面的三個 jQuery 方法同樣擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字元串。 

實例2：

$("#btn1").click(function(){

$("#test1").text(function( i , origText ){

return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 

});

});

$("#btn2").click(function(){

$("#test2").html(function( i , origText ){

return "Old html:" + origText + " New html: Hello <b>world!</b> (index:" +  i + ")";

});

});

............................................................................................................................

<p id="test1">這是<b>粗體</b>文本1。</p>

<p id="test2">這是<b>粗體</b>文本2。</p>

<button id="btn1">顯示舊/新文本</button>

<button id="btn2">顯示舊/新 HTML</button>

⑵ 設置屬性 - attr()

實例3：

$("button").click(function(){

$("#w3s").attr({

"href" : "http://www.w3school.com.cn/jquery/",

"title" : "W3School jQuery 教程"

});

});

attr()的回調函數：

attr()也提供回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字元串。

實例4：

$("button").click(function(){

$("#w3s").attr("title", function( i , origValue ){

return i + "/" + origValue; 

});

}); 

 4.3 添加元素

添加新的HTML內容：

append()--------在被選元素的結尾插入內容

prepend()-------在被選元素的開頭插入內容

after()-----------在被選元素之後插入內容

before()---------在被選元素之前插入內容

實例1：

function appendText() {

var txt1="<p>HTML.</p>";              // 以HTML創建新元素

var txt2=$("<p></p>").html("<b>jQuery.</b>"); //以jQuery創建新元素

var txt3=document.createElement("i");

txt3.innerHTML="DOM.";               // 通過 DOM 來創建斜體文本

①    $("body").append(txt1,txt2,txt3);        // 追加新元素

②   $("button").after(txt1,txt2,txt3);        // 追加新元素

③   $("button").append(txt1,txt2,txt3);        // 追加新元素

}

............................................................................................................................

<p>This is a paragraph.</p>

<button onclick="appendText()">追加文本</button>

結果：

①等效於②，都是在<button></button>後追加新元素（在</body>前）；

③是在<button>後追加新元素（<在/button>前）。

 

 4.4 刪除元素

一般可使用以下兩個 jQuery 方法：

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

empty()  - 從被選元素中刪除子元素

註：remove() 方法也可接受一個參數，對被刪元素進行過濾。

例：$(“p”).remove(.italic); // 刪除 class="italic" 的所有 <p> 元素

 

 4.5 CSS類

jQuery操作CSS：

addClass()---------向被選元素添加一個或多個類

removeClass()-----從被選元素刪除一個或多個類

toggleClass()------對被選元素進行添加/刪除類的切換動作

css()---------------設置或返回一個或多個樣式屬性

 

樣式:

.important {

font-weight: bold;

font-size: xx-large;

}

.blue {

color: blue;

}

...................................................................................................................................

<h1>標題 1</h1>

<h2>標題 2</h2>

<p>這是一個段落。</p>

<div>這是非常重要的文本！</div>

<button>向元素添加類</button>

...................................................................................................................................

(1) addClass( )方法:

例 4.5.1：

$("button").click(function(){

$("h1, h2, p").addClass("blue");------------------// 向不同的元素添加 class 類

$("div").addClass("important blue");-----------// 給同一元素添加多個class 類

});

(2) removeClass( )方法：

例 4.5.2：

$("h1, h2, p").removeClass("blue");------------------// 從不同的元素刪除 class 類

(3) toggleClass( )方法：

例 4.5.3：

$("h1, h2, p").removeClass("blue");----------// 對被選元素進行添加/刪除類的切換操作

 

(4) css( )方法：

1. 返回css屬性：css(“propertyname”);

2. 設置css屬性：css(“propertyname”, “value”);

3. 設置多個css屬性：css({“propertyname”:“value”, “propertyname”:“value”,...});

例 4.5.4：

$("p").css("background-color");-----------// 返回匹配元素的background-color值

$("p").css("background-color", “pink”);---// 為所有匹配元素設置background-color

$("p").css({"background-color":“pink”, “font-size”:”200%”});----//設置多個屬性

 

註： 當要返回background-color時，若果匹配的P元素不止一個，此時返回的是第一個p的背景色。

.........................................................................................................................................

<p style="這是一個段落。</p>

<p style="這是一個段落。</p>

<p style="這是一個段落。</p>

<button>返回 p 元素的背景色</button>

此時：

$("button").click(function(){

alert("Background color = " + $("p").css("background-color"));

});

結果：返回第一個p的背景色

 4.6 尺寸

jQuery 提供多個處理尺寸的重要方法：

    • width()---------------設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
    • height()--------------設置或返回元素的高度（不包括內邊距、邊框或外邊距）
    • innerWidth()---------返回元素的寬度（包括內邊距）
    • innerHeight()--------返回元素的高度（包括內邊距）
    • outerWidth()---------返回元素的寬度（包括內邊距和邊框）
    • outerHeight()--------返回元素的高度（包括內邊距和邊框）
    • outerWidth(true)----返回元素的寬度（包括內邊距、邊框和外邊距）
    • outerHeight(true)---返回元素的高度（包括內邊距、邊框和外邊距）

 

實例1：

<div id="div1" style="height: 100px; width: 300px;

  padding: 10px; margin: 3px; border: 1px solid blue;

font-size: 10.5000pt;" style="line-height: 1.571428em; font-family: 宋體; font-size: 10.5pt;"> lightblue;">

</div>

<button>顯示div的尺寸</button>

...................................................................................................................................

 結果：        W：300                  H：100          width() 與 height()

                   iW：320                   iH：120         innerWidth()：     width + padding

                  oW：322                  oH：122        outerWidth()：     width + padding + border

          oW(true)：328          oH(true)：128      outerWidth(true)：width + padding + border + margin

...................................................................................................................................

實例2：

返迴文檔（HTML 文檔）和視窗（瀏覽器視口）的寬度和高度：

$("button").click(function(){

var txt="";

txt+="Document width/height: " + $(document).width();

txt+="x" + $(document).height() + "\n";

txt+="Window width/height: " + $(window).width();

txt+="x" + $(window).height();

alert(txt);

});

實例3：

設置指定元素的寬度和高度:  $(“#div1”).width(500).height(500);


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS----------適配iOS12
    library not found for -lstdc++.6.0.9 原因是蘋果在XCode10和iOS12中移除了libstdc++這個庫，由libc++這個庫取而代之，蘋果的解釋是libstdc++已經標記為廢棄有5年了，建議大家使用經過了llvm優化過並且全面支持C++11的libc++庫 ...
  • 微信分享大圖遇到的問題（Android）
    起因： 要做一個微信圖片分享的功能，但是對於大圖會如下問題： 當時沒有仔細查看錯誤日誌，單純的以為是圖片太大的問題。 分享圖片代碼： 解決過程： 想法一： 查看微信的文檔，發現如下信息： 初步判定是略縮圖過大導致的，準備對略縮圖進一步壓縮。 但是在調試過程中發現略縮圖並沒有超過32K，於是這種想法不 ...
  • Android 圖片載入框架 Glide4.x
    概述 Glide是一個圖片載入框架，使得我們可以輕鬆的載入和展示圖片 Glide4.x新增apply()來進行設置，apply可以調用多次，但是如果兩次apply存在衝突的設置，會以最後一次為準 新增RequestOptions對象，用來存放設置 添加依賴 Gilde的圖片載入 基本實例 with( ...
  • javascript基礎修煉(6)——前端路由的基本原理
    【造輪子】是筆者學習和理解一些較複雜的代碼結構時的常用方法，它很慢，但是效果卻勝過你讀十幾篇相關的文章。為已知的API方法自行編寫實現，遇到自己無法復現的部分再有針對性地去查資料，最後當你再去學習官方代碼的時候，就會明白這樣做的價值，總有一天，你也將有能力寫出大師級的代碼。 一. 前端路由 現代前端 ...
  • jquery分頁條（基於pagehelper）
    function getbookinfo(pageNum,pageSize) { var datas='default'; var realUrl="/ssm/book/findALL/"+pageSize+"/"+pageNum+""; var realType="POST"; jQuery.aj... ...
  • 重溫JavaScript獲取CSS樣式的方法（相容各瀏覽器）
    眾所周知，CSS樣式有三種類型：行內樣式、內部樣式和外部樣式，JavaScript獲取CSS樣式時分為兩種情況：行內樣式獲取法 和 非行內樣式獲取法 。 一、行內樣式獲取相對簡單，通過element.style.attr（元素.style.屬性）即可獲取，示例： 運行： 通過element.styl ...
  • 正則去除html字元串中的註釋、標簽、屬性
    var str = 'ProsperLee'; document.write(str.replace(//gmi, '')); // 去除HTML中的註釋 document.write(str.replace(/]+>/g,"")); // 去除HTML標簽 document.write(str.r... ...
  • JavaScript 交換數組元素位置的幾種方式
    前言 交換數組元素位置是開發項目中經常用到的場景，總結下用過的幾種方式。 第三方變數 最基礎的方式，創建一個變數作為中轉。 splice方法 splice() 方法用於插入、刪除或替換數組的元素。如果是刪除時，會返回被刪除的元素數組。參數如下： 可使用splice方法來交換數組的位置，如下： arr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類