【JavaWeb-jQuery】筆記（1）--- jQuery概述；dom對象和jquery對象；jQuery選擇器；jQuery過濾器

来源:https://www.cnblogs.com/Burning-youth/archive/2022/03/29/16072839.html
-Advertisement-
Play Games

過濾器就是過濾條件，對已經定位到數組中的 DOM 對象進行過濾篩選，過濾條件不能獨立出現在 jquery 函數，如果使用只能出現在選擇器後方 ...


1、介紹：

  • jQuery 是一個快速，小巧，功能豐富的 JavaScript 庫， 它通過易於使用的 API 在大量瀏覽器中運行，使得 HTML 文檔遍歷和操作，事件處理，動畫和 Ajax 變得更加簡單。 通過多功能性和可擴展性的結合，jQuery 改變了數百萬人編寫 JavaScript 的方式。

 

2、dom 對象和 jquery 對象：

  • dom 對象，使用 javascript 的語法創建的對象叫做 dom 對象， 也就是 js 對象。
//obj是dom對象，也叫做js對象
var obj = document.getElementById("txt1");  
  • jquery 對象，使用 jquery 語法表示對象叫做 jquery 對象， 註意 ---> 所有 jquery 表示的對象都是數組。
//jobj就是使用jquery語法表示的對象。 也就是jquery對象，它是一個數組，現在數組中就一個值
var jobj = $("#txt1");
  • dom 對象可以和 jquery 對象相互轉換。

           dom 對象可以轉為 jquery ，語法： $(dom對象);

           jquery 對象也可以轉為 dom 對象，語法： 從數組中獲取第一個對象，第一個對象就是 dom 對象， 使用[0]或者get{0)。

  • 為什麼要進行 dom 和 jquery 的轉換，目的是要使用 jquery / dom 的方法。

 

3、選擇器：

  • 選擇器就是一個字元串， 用來定位 dom 對象的，定位了 dom 對象，就可以通過 jquery 的函數操作 dom

常用的選擇器：

1）id 選擇器，通過 dom 對象的 id 定位 dom 對象的，通過 id 找對象

$("#dom對象的id值");

2）class 選擇器，class 表示 css 中的樣式，使用樣式的名稱定位 dom 對象

$(".class樣式名);

3）標簽選擇器，使用標簽名稱定位 dom 對象的 

$("標簽名稱");

 

代碼練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery選擇器練習</title>
	
		<style type="text/css">
			div{
				background: #808080;
				width: 150px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//id選擇器
				var obj = $("#one");
				//使用jQuery中可以改變樣式的函數
				obj.css("background","red");
			}
			
			function fun2(){
				//樣式選擇器
				var obj = $(".two");
				obj.css("background","blue");
			}
			
			function fun3(){
				//標簽選擇器
				var obj = $("div");
				obj.css("background","orange");
			}
			
			
		</script>
	</head>
	<body>
		<div id="one"></div><br />
		<div class="two"></div><br />
	 
		<input type="button" value="將第一個div變為紅色" onclick="fun1()" />
		<input type="button" value="將第二個div變為藍色" onclick="fun2()"/>
		<input type="button" value="將所有div變為橙色" onclick="fun3()"/>
	</body>
</html>

 

4、表單選擇器：

  • 使用 <input> 標簽的 type 屬性值，定位 dom 對象的方式
$(":type屬性值");
$(":text");//選擇的是所有的單行文本框
$(":button");//選擇的是所有的按鈕

 

代碼練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單選擇器練習</title>
	
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表單選擇器
				var obj = $(":text");
				//輸出文本框value屬性的值,val()是jQuery中的函數,讀取value的值
				alert(obj.val());
			}
			
			function fun2(){
				var obj = $(":radio");
				for(var i=0;i<obj.length;i++){
					//將jQuery對象轉為dom對象
					var dom = obj[i];
					alert(dom.value);
				}
			}
			
			function fun3(){
				var obj = $(":checkbox");
				for(var i=0;i<obj.length;i++){
					alert(obj[i].value);
				}
			}
		</script>
	</head>
	<body>
		<input type="text" /><br />
		<input type="radio" value="man" />男<br />
		<input type="radio" value="woman" />女<br />
		
		<input type="checkbox" value="dijia" />迪迦奧特曼<br />		
		<input type="checkbox" value="oubu" />歐布奧特曼<br />
		<input type="checkbox" value="gaiya" />蓋亞奧特曼<br />
		
		<input type="button" value="讀取text的值" onclick="fun1()"/>
		<input type="button" value="讀取radio的值" onclick="fun2()"/>
		<input type="button" value="讀取checkbox的值" onclick="fun3()"/>
		
		
	</body>
</html>

 

5、過濾器：

  • 過濾器就是過濾條件，對已經定位到數組中的 DOM 對象進行過濾篩選，過濾條件不能獨立出現在 jquery 函數，如果使用只能出現在選擇器後方。 
$("選擇器:first"): //第一個dom對象
$("選擇器:last"): //數組中的最後一個dom對象
$("選擇器:eq(數組的下標)");//獲取指定下標的dom對象
$("選擇器:lt(下標)");//獲取小於下標的所有dom對象
$("選擇器:gt(下標)");//獲取大於下標的所有dom對象

 

代碼練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery過濾器練習</title>
		
		<style type="text/css">
			div{
				background: grey;
				width: 150px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				//當頁面中的dom對象載入成功後,會執行ready(),相當於window.onload()
				$(document).ready(function(){}): //正常寫法
				$(function(){})//簡寫版
			*/
		   $(function(){
			   //當頁面中所有的dom對象載入後,才能給button對象綁定事件
			   $("#btn1").click(function(){
				   $("div:first").css("background","red");
			   })
			   
			   $("#btn2").click(function(){
			   		$("div:last").css("background","blue");
			   })
			   
			   $("#btn3").click(function(){
			   		$("div:gt(3)").css("background","green");
			   })
			   
			   $("#btn4").click(function(){
			   		$("div:lt(3)").css("background","purple");
			   })
			   
			   $("#btn5").click(function(){
			   		$("div:eq(3)").css("background","white");
			   })
			   
		   })
		</script>
	</head>
	<body>
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		
		<input type="button" value="作用第一個div(紅)" id="btn1"/>
		<input type="button" value="作用最後一個div(藍)" id="btn2"/>
		<input type="button" value="作用下標大於3的div(綠)" id="btn3"/>
		<input type="button" value="作用下標小於3的div(紫)" id="btn4"/>
		<input type="button" value="作用下標等於3的div(白)" id="btn5"/>
		
	</body>
</html>

 

6、表單屬性過濾器：

  • 根據表單中 dom 對象的狀態情況，定位dom對象
  • 選擇可用的文本框：
$(“:text:enabled”);
  • 選擇不可用的文本框： 
$(“:text:disabled”);
  • 覆選框選中的元素：
$(“:checkbox:checked”);
  • 選擇指定下拉列表的被選中元素：
選擇器>option:selected;

 

代碼練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單過濾器</title>
	
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				$(document).ready(函數);//當頁面中的所有dom對象載入成功後,會執行ready()，相當於window.onload()
				$(function(){});//也可以簡寫為這種形式
			*/
		   $(function(){
				$("#btn1").click(function(){
					//獲取所有可以使用的文本框
					var obj = $(":text:enabled");
					//修改jQuery數組中所有dom對象的value值
					obj.val("就無語~~");
				})
				
				$("#btn2").click(function (){
					//獲取所有選中的checkbox
					var obj = $(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
						//alert(obj[i].value);也可以這麼寫
						alert($(obj[i]).val());
					}
				})
				
				$("#btn3").click(function (){
					//獲取下拉列表已被選中的值
					//var obj = $("select>option:selected");
					var obj = $("#language>option:selected");
					alert(obj.val());
				})
				
		   })
		</script>
	</head>
	<body>
		<input type="text" value="本博主王狗蛋帥氣逼人" disabled /><br />
		<input type="text" value="你同意嗎？" disabled /><br />
		<input type="text" value="我非常認可王先生的看法"/><br />
		<input type="text" value="滾啊,普信男..."/><br />
		
		<input type="checkbox" value="老八蜜汁小漢堡" checked />老八蜜汁小漢堡<br />
		<input type="checkbox" value="老壇酸菜牛肉麵" />老壇酸菜牛肉麵<br />
		<input type="checkbox" value="雙匯澱粉腸" />雙匯澱粉腸<br />
		
		<select id="language">
			<option value="java">java語言</option>
			<option value="go" selected>go語言</option>
			<option value="python">python語言</option>
		</select>
		
		<input type="button" id="btn1" value="將可以修改的文本框的vulue修改為 就無語~~"/>
		<input type="button" id="btn2" value="顯示已被選中的覆選框的值"/>
		<input type="button" id="btn3" value="顯示已被選中的下拉列表框的值"/>
		
		
	</body>
</html>

 


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

-Advertisement-
Play Games
更多相關文章
  • 集合（模擬鬥地主發牌）
    思路： * A:創建一個HashMap集合 * B:創建一個ArrayList集合 * C:創建花色數組和點數數組 * D:從0開始往HashMap裡面存儲編號，並存儲對應的牌 * 同時往ArrayList裡面存儲編號即可。 * E:洗牌(洗的是編號) * F:發牌(發的也是編號，為了保證編號是排序 ...
  • 彈幕全是“二刷”，這部劇有多好看？Python爬取騰訊視頻1.1W彈幕，做詞雲分析
    《獵罪圖鑒》可以說是國產懸疑劇之光了，上線首周熱度不斷飆升。該劇講述了因一起塵封舊案而結怨的模擬畫像師沈翊和刑警隊長杜城，在機緣巧合下被迫搭檔，兩人聯手偵破多起離奇疑案，共同追蹤謎底真相的故事。今天就用Python爬取該劇彈幕，做詞雲圖 環境介紹 python 3.8pycharmrequests ...
  • 10行代碼實現一個值班提醒應用
    圖論 圖論是數學的一個分支。它以圖為研究對象。圖論中的圖是由若幹給定的點及連接兩點的線所構成的圖形，這種圖形通常用來描述某些事物之間的某種特定關係，用點代表事物，用連接兩點的線表示相應兩個事物間具有這種關係。 樹 樹是一種數據結構，它是由n(n≥1)個有限節點組成一個具有層次關係的集合。把它叫做“樹 ...
  • java實現稀疏矩陣的壓縮與解壓
    任務要求 把棋盤當作一個稀疏矩陣，0表示沒棋，1表示黑棋，2表示藍棋。 把該稀疏矩陣壓縮以三元組形式表示並以文件形式保存，再寫另一個程式讀取文件中的信息把壓縮後的三元組還原成原來的稀疏矩陣。 其中三元組的第一行用來存儲原始稀疏矩陣的行數、列數和有效的數據個數，其餘行用來存儲有效的非0數據 思路分析 ...
  • Python requests 爬取淘寶商品數據，並連接資料庫，保存數據
    前言 開發環境 python 3.8pycharm 2021.2 專業版 代碼實現 發送請求 獲取數據 解析數據(篩選數據) 保存數據 連接資料庫 對於本篇文章有疑問的同學可以加【資料白嫖、解答交流群：910981974】 開始代碼 請求數據 # 偽裝 headers = { 'cookie': ' ...
  • 第2章 Java基本程式設計結構
    一個簡單的Java程式 // HelloJava.java public class HelloJava { public static void main(String[] args) { System.out.println("Hello Java!"); } } Java是區分大小寫的 關鍵字 ...
  • 背包問題（1）：基本模型和解法
    finally的特點 finally:被finally控制的語句體一定會執行 * 註意：如果在執行到finally之前jvm退出了，就不能執行了。 * * A:格式 * try...catch...finally... * B:用於釋放資源，在IO流操作和資料庫操作中會見到 package cn.i ...
  • Java思考——如何使用Comparable按照我們指定的規則排序？
    練習： 存儲學生對象並遍歷，創建TreeSet集合使用無參構造方法，並按照年齡從小到大的順序排序，若年齡相同再按照姓名的字母順序排序 分析： 1.創建學生類，成員變數name,age;無參構造，帶參構造；get\set方法； 2.創建測試類，添加數據併進行排序;直接排序會報錯 3.需要Student ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類