前端-jQuery

来源:https://www.cnblogs.com/lsf123456/archive/2019/08/01/11276805.html
-Advertisement-
Play Games

一、定義 1. 什麼是jQuery <1> jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多 javascript高手加入其team。 <2>jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! < ...


一、定義

1. 什麼是jQuery

<1> jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多 javascript高手加入其team。

<2>jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它相容CSS3，還相容各種瀏覽器

<4>jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。

<5>jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

2. 什麼是jQuery對象

jQuery 對象就是通過jQuery包裝DOM對象後產生的對象。jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那麼它就可以使用 jQuery里的方法: $(“#test”).html();

$("#test").html()    
       //意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法 

       // 這段代碼等同於用DOM實現代碼： document.getElementById(" test ").innerHTML; 

       //雖然jQuery對象是包裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法.亂使用會報錯

       //約定：如果獲取的是 jQuery 對象, 那麼要在變數前面加上$. 

var $variable = jQuery 對象
var variable = DOM 對象

$variable[0]：jquery對象轉為dom對象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基礎語法：$(selector).action()

二、選擇器

1. 基本選擇器

$("*")  選擇所有元素

$("#id")   id選擇器

$(".class")  class選擇器

$("element")  標簽選擇器

$(".class,p,div")  組合選擇器

2. 層級選擇器

$(".outer div")  後代選擇器

$(".outer>div")  子代選擇器

$(".outer+div")  選擇後一個兄弟元素

$(".outer~div")  選擇後面的所有兄弟元素

3. 屬性選擇器

$("[name='aaa']")

$("[name='aaa'][id='div1']")  篩選多個屬性

4. 表單選擇器

$(":text")  註意只適用於input標簽 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <p>hello</p>
 9         <div id="div1" class="outer" name="aaa">outer
10             <div class="inner">inner
11                 <p>p2</p>
12             </div>
13             <p>p1</p>
14         </div>
15         <div>div1</div>
16         <a href="">aaa</a>
17         <div>div2</div>
18         <input type="text" value="123456"/>
19         
20         <script src="js/jquery-3.4.1.js"></script>
21         <script>
22 //            //基本選擇器
23 //            $("*").css("color","red")
24 //            $("#div1").css("color","aqua")
25 //            $(".inner").css("color","beige")
26 //            $("p").css("color","brown")
27 //            $(".inner,p,div").css("color","black")
28             
29 //            //層級選擇器
30 //            $(".outer div").css("color","red")
31 //            $(".outer>div").css("color","red")
32 //            $(".outer+div").css("color","red")
33 //            $(".outer~div").css("color","red")
34             
35             //屬性選擇器
36 //            $("[id='div1']").css("color","red")
37 //            $("[name='aaa'][id='div1']").css("color","red") //篩選多個屬性
38             
39             //表單選擇器
40             $(":text").css("color","red")
41         </script>
42     </body>
43 </html>
示例

三、篩選器

1. 基本篩選器

$("li:first")  $("li:last")

$("li:eq(2)") 

$("li:even")  $("li:odd")

$("li:gt(1)")  $("li:lt(1)")

2. 過濾篩選器

$("li").eq(2) 

$("li").first() 

3. 查找篩選器

$("div").children(".test")

$("div").find(".test") 

$(".test").next()

$(".test").nextAll()

$(".test").nextUntil() 

$("div").prev()

$("div").prevAll()

$("div").prevUntil() 

$(".test").parent()

$(".test").parents()

$(".test").parentUntil() 

$("div").siblings()

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <p>hello</p>
 9         <div id="div1" class="outer" name="aaa">outer
10             <div class="inner">inner
11                 <p id="p2">p2</p>
12             </div>
13             <p>p1</p>
14         </div>
15         <div>div1</div>
16         <a href="">aaa</a>
17         <div>div2</div>
18         <p id="p1">pppp</p>
19         <ul>
20             <li id="li1">1111</li>
21             <li>2222</li>
22             <li>3333</li>
23             <li>4444</li>
24             <li>5555</li>
25         </ul>
26         
27         
28         <script src="js/jquery-3.4.1.js"></script>
29         <script type="text/javascript">
30 //            //基本篩選器
31 //            $("li:first").css("color","red") //選擇第一個li
32 //            $("li:last").css("color","red") //選擇最後一個li
33 //            $("li:eq(2)").css("color","red") //選擇第2個li，從0開始計數
34 //            $("li:even").css("color","red") //選擇偶數行的li，從0開始計數
35 //            $("li:odd").css("color","red") //選擇奇數行的li，從0開始計數
36 //            $("li:gt(2)").css("color","red") //選擇行數大於2的li，從0開始計數
37 //            $("li:lt(2)").css("color","red") //選擇行數小於2的li，從0開始計數
38 
39 //            //過濾篩選器
40 //            $("li").eq(2).css("color","red")
41 //            $("li").first().css("color","red")
42             
43 //            //查找篩選器
44 //            $(".outer").children("p").css("color","red") //查找子代
45 //            $(".outer").find("p").css("color","red") //查找後代
46 
47 //            $(".outer").next().css("color","red") //查找後一個兄弟標簽
48 //            $(".outer").nextAll().css("color","red") //查找後面所有兄弟標簽
49 //            $(".outer").nextUntil("#p1").css("color","red") //查找後面所有兄弟標簽，直到p1(不包含p1)
50 
51 //            $("li").eq(2).prev().css("color","red") //查找前一個兄弟標簽
52 //            $("li").eq(2).prevAll().css("color","red") //查找前面所有兄弟標簽
53 //            $("li").eq(2).prevUntil("#li1").css("color","red") //查找前面所有兄弟標簽，直到li1(不包含li1)
54                 
55 //            $("#p2").parent().css("color","red") //查找父代
56 //            $("#p2").parents().css("color","red") //查找所有祖先
57 //            $("#p2").parentsUntil(".outer").css("color","red") //查找所有祖先，直到".outer"，(不包含".outer")
58 
59 //            $(".outer").siblings().css("color","red") //查找所有兄弟標簽
60         </script>
61     </body>
62 </html>
示例

四、操作元素

1. 屬性操作

--------------------------屬性
$("").attr();   $("").attr("class") 顯示class屬性的值    $("").attr("class","a") 修改class屬性
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見


<script>

//對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
//對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
//像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此
//需要使用prop方法去操作才能獲得正確的結果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手動選中的時候attr()獲得到沒有意義的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

attr和prop
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <button onclick="selectall()">全選</button>
 9         <button onclick="reverse()">反選</button>
10         <button onclick="cancel()">取消</button>
11         <table>
12             <tr>
13                 <td><input type="checkbox" /></td>
14                 <td>111</td>
15             </tr>
16             <tr>
17                 <td><input type="checkbox" /></td>
18                 <td>222</td>
19             </tr>
20             <tr>
21                 <td><input type="checkbox" /></td>
22                 <td>333</td>
23             </tr>
24         </table>
25         
26         <script src="js/jquery-3.4.1.js"></script>
27         <script>
28             function selectall(){
29                 $(":checkbox").each(function(){
30                     $(this).prop("checked",true);
31                 })
32             }
33             function cancel(){
34                 $(":checkbox").each(function(){
35                     $(this).prop("checked",false);
36                 })
37             }
38             function reverse(){
39                 $(":checkbox").each(function(){
40                     if($(this).prop("checked")){
41                         $(this).prop("checked",false);
42                     }
43                     else{
44                         $(this).prop("checked",true);
45                     }
46                 })
47             }
48         </script>
49     </body>
50 </html>
全反選

 jquery迴圈的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>1111</p>
		<p>2222</p>
		<p>3333</p>
		<p>4444</p>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			li=[11,22,33];
			//方式一：
			$.each(li,function(x,y){
				console.log(x,y);//x為索引，y為值
			})
			//方式二：
			$("p").each(function(){
				console.log($(this).html())
			})
		</script>
	</body>
</html>

2. 文檔處理

//創建一個標簽對象
    $("<p>")

//內部插入
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替換
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//刪除
    $("").empty()
    $("").remove([expr])

//複製
    $("").clone([Even[,deepEven]])
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <a href="">click</a>
 9         <div class="c1">
10             <p>PPP</p>
11         </div>
12         <button>add</button>
13         
14         <script src="js/jquery-3.4.1.js"></script>
15         <script type="text/javascript">
16             $("button").click(function(){
17 //                $(".c1").append("<h1>hello</h1>")
18                 var $ele=$("<h1>");
19                 $ele.html("hello");
20 //                //內部插入
21 //                $(".c1").append($ele)
22 //                $ele.appendTo(".c1")
23 //                $(".c1").prepend($ele)
24 //                $ele.prependTo(".c1")
25 
26 //                //外部插入
27 //                $(".c1").after($ele)
28 //                $ele.insertAfter(".c1")
29 //                $(".c1").before($ele)
30 //                $ele.insertBefore(".c1")
31                 
32 //                //替換
33 //                $(".c1").replaceWith($ele)
34                 
35 //                //刪除
36 //                $(".c1").empty()  //清空".c1"的內容
37 //                $(".c1").remove()  //刪除".c1"標簽
38             })
39         </script>
40     </body>
41 </html>
示例 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="outer">
            <div class="item">
                <button onclick="add(this)">+</button>
                <input type="text" />
            </div>
        </div>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            function add(self){
                //var $clone_obj=$(.item).clone();
                if($(self).html()=="+"){
                    var $clone_obj=$(self).parent().clone()
                    $(".outer").append($clone_obj)
                    $clone_obj.children("button").html("
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML基本知識
    1.HTML簡介【瞭解】 1.1Hyper text markup language 超文本標記語言 超文本：可以對文本進行格式化編輯，還有文本的鏈接等等，具有傳統文本不具備的特性 標記：html上所有操作都是通過標記實現，標記就是標簽 語言 ：不需要編譯，運行在瀏覽器上面 1.2HTML基本思想 ...
  • 簡述瀏覽器端的九大緩存
    前言 瀏覽器緩存是瀏覽器端保存數據用於快速讀取或避免重覆資源請求的優化機制，有效的緩存使用可以避免重覆的網路請求和瀏覽器快速地讀取本地數據，整體上加速網頁展示給用戶。瀏覽器端緩存的機制種類較多，總體歸納為九種，這裡詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式——Applicatio ...
  • JavaScript數據結構——鏈表的實現與應用
    鏈表用來存儲有序的元素集合，與數組不同，鏈表中的元素並非保存在連續的存儲空間內，每個元素由一個存儲元素本身的節點和一個指向下一個元素的指針構成。當要移動或刪除元素時，只需要修改相應元素上的指針就可以了。對鏈表元素的操作要比對數組元素的操作效率更高。下麵是鏈表數據結構的示意圖： 要實現鏈表數據結構，關 ...
  • HTML <input> 標簽的 accept 屬性
    accept 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。 accept可以指定如下信息： *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Audio * ...
  • http請求post，文件導出相容IE10+
    1.post的方法里要加responseType: 'blob'參數，不然下載的excel會亂碼 2.使用{type: "application/vnd.ms-excel"}的寫法，可以保存為xls格式的excel文件（相容老版本）。而使用“application/vnd.openxmlformat ...
  • 網站內容設計應註意哪些方面
    當代的年輕人喜歡接收一下新的事物，這老一輩的人眼睛里是不能夠被接受的，完全不能去理解，所謂青出於藍而勝於藍說的就是如此，在原先特別流行的網路語言，長江後浪推前浪，前浪拍死在沙灘上，後生可畏，就像我和我的妹妹，我們4歲只差就有很多的話題說不到一起去，看著4歲並不算多，但其實本是一個層次的人，她所追求的 ...
  • 解決elementui日期時間選擇器提交時與後臺date類型不匹配問題
    問題描述： 在前端使用elementui的日期時間選擇器後，在通過axios進行提交的時候，前端控制台出現了400（數據類型不匹配的錯誤）的錯誤。 錯誤的原因：後臺實體類的註解問題 錯誤前的代碼： 解決之後的代碼： ...
  • 比較好用的移動端適配的兩種方案及flexible和px2rem-loader在webpack下的配置
    移動端適配，目前自己常用的兩種 方案，參考以下兩篇好文 方案一：使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 使用flexible包方式，安裝 lib-flexible 包和 px2 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類