首頁 web前端 js教程 jQuery選擇器:header的使用詳解

jQuery選擇器:header的使用詳解

Jun 23, 2017 am 10:47 AM
header jquery 使用 詳解 選擇器

概述

符合如h1, h2, h3之類的標題元素

範例

描述:

給頁內所有標題加上背景色

HTML 程式碼:

<h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p>
登入後複製

jQuery 程式碼:

$(":header").css("background", "#EEE");
登入後複製

結果:
##

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
登入後複製

此選擇器能夠匹配標題元素,即(h1-h6)。

語法結構:

$(":header")
登入後複製

此選擇器一般也要和其他選擇器配合使用,例如

類別選擇器元素選擇器等等。例如:

$(".qiantai:header").css("color","blue")
登入後複製

以上程式碼能夠將類別名稱為qiantai的標題元素中的字體顏色設定為藍色。

如果不和其他選擇器配合使用,則預設狀態是和*選擇器一起使用,例如$(":header")等同於$("*: header")。

實例程式碼:

實例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    $(&quot;.qiantai:header&quot;).css(&quot;color&quot;,&quot;blue&quot;); 
  })
})
</script> 
</head> 
<body> 
<ul> 
  <h1 class="qiantai">前台专区版块</h1> 
  <li>html专区</li> 
  <li>div+css专区</li> 
  <li>jQuery专区</li> 
  <li>Javascript专区</li> 
</ul> 
<ul> 
  <h1>后台专区版块</h1> 
  <li>ASP专区</li> 
  <li>php专区</li> 
</ul> 
<button id="btn">点击查看效果</button> 
</body> 
</html>
登入後複製

#以上程式碼可以class屬性值為qiantai的標題元素中的文字顏色設定為藍色。

實例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    $(&quot;:header&quot;).css("color","blue"); 
  })
})
</script> 
</head> 
<body> 
<ul> 
  <h1 class="qiantai">前台专区版块</h1> 
  <li>html专区</li> 
  <li>div+css专区</li> 
  <li>jQuery专区</li> 
  <li>Javascript专区</li> 
</ul> 
<ul> 
  <h1>后台专区版块</h1> 
  <li>ASP专区</li> 
  <li>php专区</li> 
</ul> 
<button id="btn">点击查看效果</button> 
</body> 
</html>
登入後複製


由於以上程式碼並沒有指定與:header選擇器相符使用的選擇器,所以就預設與*選擇器搭配使用,於是以上程式碼可以將目前文件中所有元素中的標題元素的文字顏色設定為藍色。

以上是jQuery選擇器:header的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用?

foob​​ar2000怎麼下載? -foobar2000怎麼使用 foob​​ar2000怎麼下載? -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foob​​ar2000怎麼下載? -foobar2000怎麼使用

Win11管理員權限取得詳解 Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Win11管理員權限取得詳解

網易信箱大師怎麼用 網易信箱大師怎麼用 Mar 27, 2024 pm 05:32 PM

網易信箱大師怎麼用

百度網盤app怎麼用 百度網盤app怎麼用 Mar 27, 2024 pm 06:46 PM

百度網盤app怎麼用

Oracle SQL中的除法運算詳解 Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

Oracle SQL中的除法運算詳解

教你使用 iOS 17.4「失竊裝置保護」新進階功能 教你使用 iOS 17.4「失竊裝置保護」新進階功能 Mar 10, 2024 pm 04:34 PM

教你使用 iOS 17.4「失竊裝置保護」新進階功能

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? Apr 26, 2024 am 09:40 AM

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包?

See all articles