jQuery四种选择器使用及示例

前端技术 2023/09/03 JavaScript

 jQuery 元素选择器

 jQuery 使用 CSS 选择器来选取 HTML 元素。

 $(\"p\") 选取 <p> 元素。

 $(\"p.intro\") 选取所有 class=\"intro\" 的 <p> 元素。

 $(\"p#demo\") 选取所有 id=\"demo\" 的 <p> 元素。

 示例代码：

jquery 部分

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


function tagName(){
  $(\'p\').addClass(\'heighlight\');
}

function idName(){
  $(\'#div\').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>
    <div id=\"div\">
      <p>this is my name!!</p>
      <p class=\"pClass\">class is import!</p>
      <a href=\"#\">you cai!!</a>
    </div>
  </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(){
  $(\'[href=\"#\"]\').addClass(\'heighlight\'); 
}

jQuery CSS 选择器

.addClass()或者是.css()

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

function cssName(){
  $(\'p\').css(\"background-color\",\"pink\");
}

jQuery  自定义选择符

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

function custom(){
  $(\'tr:odd\').addClass(\'alt\');
}

附表

选择器 实例 选取
* $(\"*\") 所有元素
#id $(\"#lastname\") id=\"lastname\" 的元素
.class $(\".intro\") 所有 class=\"intro\" 的元素
element $(\"p\") 所有 <p> 元素
.class.class $(\".intro.demo\") 所有 class=\"intro\" 且 class=\"demo\" 的元素
     
:first $(\"p:first\") 第一个 <p> 元素
:last $(\"p:last\") 最后一个 <p> 元素
:even $(\"tr:even\") 所有偶数 <tr> 元素
:odd $(\"tr:odd\") 所有奇数 <tr> 元素
     
: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\") 所有标题元素 <h1> - <h6>
:animated   所有动画元素
     
:contains(text) $(\":contains(\'W3School\')\") 包含指定字符串的所有元素
:empty $(\":empty\") 无子（元素）节点的所有元素
:hidden $(\"p:hidden\") 所有隐藏的 <p> 元素
: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\") 所有 <input> 元素
:text $(\":text\") 所有 type=\"text\" 的 <input> 元素
:password $(\":password\") 所有 type=\"password\" 的 <input> 元素
:radio $(\":radio\") 所有 type=\"radio\" 的 <input> 元素
:checkbox $(\":checkbox\") 所有 type=\"checkbox\" 的 <input> 元素
:submit $(\":submit\") 所有 type=\"submit\" 的 <input> 元素
:reset $(\":reset\") 所有 type=\"reset\" 的 <input> 元素
:button $(\":button\") 所有 type=\"button\" 的 <input> 元素
:image $(\":image\") 所有 type=\"image\" 的 <input> 元素
:file $(\":file\") 所有 type=\"file\" 的 <input> 元素
     
:enabled $(\":enabled\") 所有激活的 input 元素
:disabled $(\":disabled\") 所有禁用的 input 元素
:selected $(\":selected\") 所有被选取的 input 元素
:checked $(\":checked\") 所有被选中的 input 元素

本文地址：https://www.stayed.cn/item/6621

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案