首頁 >web前端 >js教程 >jQuery四種選擇器使用及範例

jQuery四種選擇器使用及範例

巴扎黑原創: 2017-06-20 16:31:311125瀏覽

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

jQuery 元素選擇器

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

$("p") 選取 e388a4556c0f65e1904146cc1a846bee 元素。

$("p.intro") 選取所有 class="intro" 的 e388a4556c0f65e1904146cc1a846bee 元素。

$("p#demo") 選取所有 id="demo" 的 e388a4556c0f65e1904146cc1a846bee 元素。

範例程式碼：

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")#所有奇數a34de1251f0d9fe1e645927f19a896e8 元素##$(" ul li:eq(3)")清單中的第四個元素（index 從0 開始）:gt($("ul li:gt(3)")列出index 大於3 的元素:lt($("ul li:lt(3)")列出index 小於3 的元素##$(":empty")無子（元素）節點的所有元素:hidden$("p:hidden")所有隱藏的e388a4556c0f65e1904146cc1a846bee 元素#####$(":input") #所有d5fd7aea971a85678ba271703566ebfd 元素############:text#######$(":text")######所有type="text" 的 ######################## #:checkbox######$(":checkbox")######所有type="checkbox" 的d5fd7aea971a85678ba271703566ebfd 元素############:submit## ####$(":submit")######所有type="submit" 的d5fd7aea971a85678ba271703566ebfd 元素############:reset######$ (":reset")######所有type="reset" 的d5fd7aea971a85678ba271703566ebfd 元素############################# #:image######$(":image")######所有type="image" 的d5fd7aea971a85678ba271703566ebfd 元素############:file## ####$(":file")######所有type="file" 的d5fd7aea971a85678ba271703566ebfd 元素############ ###### ### ### ########$(":selected")所有被選取的input 元素:checked$(":checked")所有被選取的input 元素

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

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

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

:header	$(":header")	所有標題元素4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc
#: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" 的d5fd7aea971a85678ba271703566ebfd 元素



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



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

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

陳述：

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

上一篇：對jQuery選擇器element用法介紹下一篇：對jQuery選擇器element用法介紹

看更多