jQuery選擇器:header的使用詳解-js教程-PHP中文網

首頁

web前端

js教程

jQuery選擇器:header的使用詳解

Jun 23, 2017 am 10:47 AM

header jquery 使用詳解選擇器

概述

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

範例

描述:

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

HTML 程式碼:

&lt;h1&gt;Header 1&lt;/h1&gt; &lt;p&gt;Contents 1&lt;/p&gt; &lt;h2&gt;Header 2&lt;/h2&gt; &lt;p&gt;Contents 2&lt;/p&gt;

登入後複製

jQuery 程式碼:

$(&quot;:header&quot;).css(&quot;background&quot;, &quot;#EEE&quot;);

登入後複製

結果:
##

[ &lt;h1 style=&quot;background:#EEE;&quot;&gt;Header 1&lt;/h1&gt;, &lt;h2 style=&quot;background:#EEE;&quot;&gt;Header 2&lt;/h2&gt; ]

登入後複製

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

語法結構:

$(&quot;:header&quot;)

登入後複製

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

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

$(&quot;.qiantai:header&quot;).css(&quot;color&quot;,&quot;blue&quot;)

登入後複製

以上程式碼能夠將類別名稱為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