cari

Rumah >hujung hadapan web >tutorial js >jQuery四种选择器使用及示例

jQuery四种选择器使用及示例

巴扎黑
巴扎黑asal
2017-06-20 16:31:311127semak imbas

本文给大家汇总介绍了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(){
  $('p').addClass('heighlight');
}

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

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;);
}

附表

选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 e388a4556c0f65e1904146cc1a846bee 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一个 e388a4556c0f65e1904146cc1a846bee 元素
:last $("p:last") 最后一个 e388a4556c0f65e1904146cc1a846bee 元素
:even $("tr:even") 所有偶数 a34de1251f0d9fe1e645927f19a896e8 元素
:odd $("tr:odd") 所有奇数 a34de1251f0d9fe1e645927f19a896e8 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
     
:header $(":header") 所有标题元素 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc
:animated   所有动画元素
     
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 e388a4556c0f65e1904146cc1a846bee 元素
: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 $(":input") 所有 d5fd7aea971a85678ba271703566ebfd 元素
:text $(":text") 所有 type="text" 的 d5fd7aea971a85678ba271703566ebfd 元素
:password $(":password") 所有 type="password" 的 d5fd7aea971a85678ba271703566ebfd 元素
:radio $(":radio") 所有 type="radio" 的 d5fd7aea971a85678ba271703566ebfd 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 d5fd7aea971a85678ba271703566ebfd 元素
:submit $(":submit") 所有 type="submit" 的 d5fd7aea971a85678ba271703566ebfd 元素
:reset $(":reset") 所有 type="reset" 的 d5fd7aea971a85678ba271703566ebfd 元素
:button $(":button") 所有 type="button" 的 d5fd7aea971a85678ba271703566ebfd 元素
:image $(":image") 所有 type="image" 的 d5fd7aea971a85678ba271703566ebfd 元素
:file $(":file") 所有 type="file" 的 d5fd7aea971a85678ba271703566ebfd 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

Atas ialah kandungan terperinci jQuery四种选择器使用及示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：对jQuery选择器element用法介绍Artikel seterusnya：介绍有关jQuery的选择器中的通配符使用方法

Artikel berkaitan

Lihat lagi