jQuery四種選擇器使用及範例-js教程-PHP中文網

首頁

web前端

js教程

jQuery四種選擇器使用及範例

巴扎黑

Jun 20, 2017 pm 04:31 PM

jquery使用範例選擇器

本文為大家總結了jQuery的四種選擇器的使用方法以及範例，非常的簡單實用，希望對大家學習jquery能夠有所幫助。

jQuery 元素選擇器

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

$("p") 選取

元素。

$("p.intro") 選取所有 class="intro" 的

元素。

$("p#demo") 選取所有 id="demo" 的

元素。

範例程式碼：

jquery 部分

$(document).ready(function(){//页面加载完成后执行
  tagName();
// idName();
// className();
});


function tagName(){
  $(&#39;p&#39;).addClass(&#39;heighlight&#39;);
}

function idName(){
  $(&#39;#p&#39;).addClass(&#39;heighlight2&#39;);
}
function className(){
  $(&#39;p.pClass&#39;).addClass(&#39;heighlight2&#39;);
}

html部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/select.js" ></script>
    <link rel="stylesheet" href="css/select.css" />
  </head>
  <body>
    <p id="p">
      <p>this is my name!!</p>
      <p class="pClass">class is import!</p>
      <a href="#">you cai!!</a>
    </p>
  </body>
</html>

css部分

.heighlight {
  background-color: blue;
  
}
.heighlight2 {
  background-color: red;
}

.alt{
  background-color:#ccc;
}

jQuery 屬性選擇器

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

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

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

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

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

jquery部分，其他部分同上。

$(document).ready(function(){
  attribute();
});

function attribute(){
  $(&#39;[href="#"]&#39;).addClass(&#39;heighlight&#39;); 
}

jQuery CSS 選擇器

.addClass()或是.css()

$(document).ready(function(){
 cssName();
});

function cssName(){
  $(&#39;p&#39;).css("background-color","pink");
}

jQuery 自訂選擇符

$(document).ready(function(){
 custom();
});

function custom(){
  $(&#39;tr:odd&#39;).addClass(&#39;alt&#39;);
}

附表

###.$(".intro.demo")所有class="intro" 且class="demo" 的元素 # 元素##$("tr:odd")#所有奇數元素##$(" ul li:eq(3)")清單中的第四個元素（index 從0 開始）:gt($("ul li:gt(3)")列出index 大於3 的元素:lt($("ul li:lt(3)")列出index 小於3 的元素##$(":empty")無子（元素）節點的所有元素:hidden$("p:hidden")所有隱藏的

元素

#####$(":input") #所有元素############:text#######$(":text")######所有type="text" 的元素### ########################### #:checkbox######$(":checkbox")######所有type="checkbox" 的元素############:submit## ####$(":submit")######所有type="submit" 的元素############:reset######$ (":reset")######所有type="reset" 的元素############################# #:image######$(":image")######所有type="image" 的元素############:file## ####$(":file")######所有type="file" 的元素############ ###### ### ### ########$(":selected")所有被選取的input 元素:checked$(":checked")所有被選取的input 元素

選擇器	實例	選取
*	$(" *")	所有元素
#id	$("#lastname")	# id="lastname" 的元素
.class	$(".intro")	所有class="intro" 的元素
element	$("p")	所有元素
class.class

:first	$("p:first")	#第一個元素
:last	$("p:last")	最後一個元素
:even	$(" tr:even")	所有偶數
#:odd


#:eq(index)
no )
no)
:not(selector)	$("input:not(:empty)")	所有不為空的input 元素

:header	$(":header")	所有標題元素 -
#:animated		所有動畫元素

#:contains(text)	$(" :contains('W3School')")	包含指定字串的所有元素
:empty

:visible	$("table:visible")	所有可見的表格

s1,s2,s3	$("th,td,.intro")	所有帶有匹配選擇的元素
	#	#
[attribute]	$("[href]")	所有帶有href 屬性的元素
[attribute=value]	#$("[href='#']")	所有href 屬性的值等於"#" 的元素
[attribute!=value]	$("[href!=' #']")	所有href 屬性的值不等於"#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有href 屬性的值包含以".jpg" 結尾的元素

#:input


:radio	$(":radio")	所有type="radio" 的元素



:button	$(":button")	所有type="button" 的元素



:enabled	$(":enabled")	所有啟動的input 元素
:disabled	#$(":disabled")	所有已停用的input 元素
#:selected

以上是jQuery四種選擇器使用及範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。