jQuery 选择器

发布日期:2018-02-05    浏览次数:522
jQuery选择器

测试jQuery模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引用在线jQuery文件 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>jQuery 选择器</title>
</head>
<body>
    <!-- 将下面测试代码放在 body 里面 -->
</body>
</html>

简单选择器

  • 元素选择器

获取所有 p 元素并设置字体颜色为红色

<p>让努力成为一种习惯</p>
<script>
    $("p").css("color","red")
</script>
  • ID选择器

ID在页面只允许出现一次

将 id 为 xiu 元素设置字体颜色为红色

<p id="xiu">让努力成为一种习惯</p>
<script>
    $("#xiu").css("color","red")
</script>
  • class选择器

class 可以多次出现

获取所有 class 为 xiu 元素并设置字体颜色为红色

<p class="xiu">让努力成为一种习惯</p>
<script>
    $(".xiu").css("color","red")
</script>

进价选择器

  • 群组选择器

同时选择两个或以上叫群组选择器,每个元素用逗号隔开

将 id 为 xiu,id为 kang 的元素设置字体颜色为红色

<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
    $("#xiu,#kang").css("color","red")
</script>
  • 后代选择器

选择元素的后代元素

将 ul 标签里面的 a 标签设置字体颜色为红色

<ul>
    <li>
        <a href="#">超链接</a>
    </li>
</ul>
<script>
    $("ul a").css("color","red")
</script>
  • 通配选择器

选择所有元素,一般用的并不多,这种方法效率低,影响性能,建议少用

将所有元素设置字体颜色为红色

<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
    $("*").css("color","red")
</script>

层次选择器

  • 后代选择器

 选择元素的后代元素

将 ul 标签里面的 a 标签设置字体颜色为红色

<ul>
    <li>
        <a href="#">超链接</a>
    </li>
</ul>
<script>
    $("ul a").css("color","red")
</script>

jQuery为后代选择器提供了一个等价find()方法

将 ul 标签里面的 a 标签设置字体颜色为红色

<ul>
    <li>
        <a href="#">超链接</a>
    </li>
</ul>
<script>
    $("ul").find("a").css("color","red")
</script>
  • 子选择器

 选择元素的子元素

将 li 标签的子元素 a 标签设置字体颜色为红色

<ul>
    <li>
        <a href="#">超链接</a>
    </li>
</ul>
<script>
    $("li > a").css("color","red")
</script>

jQuery为子选择器提供了一个等价children()方法

将 li 标签的子元素 a 标签设置字体颜色为红色

<ul>
    <li>
        <a href="#">超链接</a>
    </li>
</ul>
<script>
    $("li").children("a").css("color","red")
</script>
  • next选择器

 选择下一个同级节点

选择 id 为 xiu 的第一个同级节点 id 为 kang 的元素设置字体颜色为红色

<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
    $("#xiu+#kang").css("color","red")
</script>

jQuery为next选择器提供了一个等价next()方法

选择 id 为 xiu 后面第一个同级节点 id 为 kang 的元素设置字体颜色为红色

<p id="xiu">让努力成为一种习惯</p>
<p id="kang">让努力成为一种习惯</p>
<script>
    $("#xiu").next("#kang").css("color","red")
</script>
  • nextAll选择器

 选择后面所有同级节点

选择 class 为 xiu 后面所有同级节点 class 为 kang 的元素设置字体颜色为红色

<p class="xiu">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<script>
    $(".xiu ~ .kang").css("color","red")
</script>

jQuery为nextAll选择器提供了一个等价nextAll()方法

选择 class 为 xiu 后面所有同级节点 class 为 kang 的元素设置字体颜色为红色

<p class="xiu">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<p class="kang">让努力成为一种习惯</p>
<script>
    $(".xiu").nextAll(".kang").css("color","red")
</script>

属性选择器

获取属性为 href 的 DOM 对象并设置字体颜色为红色

<a href="#">超链接</a>
<script>
  $("a[href]").css("color","red")
</script>

获取属性为 href  且属性值为 # 的 DOM 对象并设置字体颜色为红色

<a href="#">超链接</a>
<script>
  $("a[href=#]").css("color","red")
</script>

获取属性为 href  且属性值开头为 abc 的 DOM 对象并设置字体颜色为红色

<a href="abcdef">超链接</a>
<script>
  $("a[href ^= abc]").css("color","red")
</script>

获取属性为 href  且属性值开头为 abc(连接符'-'前面的) 的 DOM 对象并设置字体颜色为红色

<a href="abc-def">超链接</a> 
<script>
  $(
"a[href |= abc]").css("color","red")
</script>

获取属性为 href  且属性值结尾为 def 的 DOM 对象并设置字体颜色为红色

<a href="abcdef">超链接</a>
<script>
  $("a[href $= def]").css("color","red")
</script>

获取属性为 href  且属性值不是 xx 的 DOM 对象并设置字体颜色为红色

<a href="#">超链接</a>
<script>
  $("a[href != xx]").css("color","red")
</script>

获取属性为 href  且属性值为 # 的 DOM 对象并设置字体颜色为红色

<a href="#">超链接</a>
<script>
  $("a[href ~= #]").css("color","red")
</script>

获取属性为 href  且属性值包含 xx 的 DOM 对象并设置字体颜色为红色

<a href="abxxcd">超链接</a>
<script>
  $("a[href *= xx]").css("color","red")
</script>

获取属性为 href  和属性为 title 且值为 xx 的 DOM 对象并设置字体颜色为红色

<a href="#" title="xx">超链接</a>
<script>
  $("a[href][title=xx]").css("color","red")
</script>

基本过滤器

 选择第一个 p 元素并设置字体颜色为红色

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:first").css("color","red")
</script>

选择最后一个 p 元素并设置字体颜色为红色

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:last").css("color","red")
</script>

选择第3个 p 元素并设置字体颜色为红色(选择索引从0开始)

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:eq(2)").css("color","red")
</script>

选择索引小于3的所有 p 元素并设置字体颜色为红色(选择索引从0开始)

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
    $("p:lt(3)").css("color","red")
</script>

选择索引大于0的所有 p 元素并设置字体颜色为红色(选择索引从0开始)

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
    $("p:gt(0)").css("color","red")
</script>

选择 class 不是 xiu 的 p 元素并设置字体颜色为红色

<p class="xiu">让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:not(.xiu)").css("color","red")
</script>

选择索引为偶数的 p 元素并设置字体颜色为红色

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:even").css("color","red")
</script>

选择索引为奇数的 p 元素并设置字体颜色为红色

<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<p>让努力成为一种习惯</p>
<script>
  $("p:odd").css("color","red")
</script>

选择所有标题元素(h1~h6)

<h1>让努力成为一种习惯</h1>
<h3>让努力成为一种习惯</h3>
<h5>让努力成为一种习惯</h5>
<script>
  $(":header").css("color","red")
</script>

将正在执行的动画背景元素设置为蓝色

<div class="xiu" style="width : 100px;height : 100px;background : red"></div>
<script>
    $(".xiu").hide(10000);
    $(":animated").css("background","blue")
</script>

选择当前获取焦点的文本框添加文本 "让努力成为一种习惯"

<input type="text">
<script>
  // 让文本框获取焦点
  $("input").focus();
  $(":focus").val("让努力成为一种习惯"); 
</script>

内容过滤器

选择p标签的不为空元素修改文本()

<p></p>
<p>让努力成为一种习惯</p>
<script>
    $("p:parent").html("修改")
</script>

 

选择p标签的空元素添加文本()

<p></p>
<p>让努力成为一种习惯</p>
<script>
  $("p:empty").html("添加文本")
</script>

选择包含文本 "习惯" 的 p 元素设置字体颜色为红色

<p>让努力成为一种</p>
<script>
  $("p:contains('习惯')").css("color","red")
</script>

获取子元素class为xiu的元素设置字体颜色为红色

没有效果

<a href="#"><p class="xiu">文本</p></a>
<script>
  $("a:has(.xiu)").css("color","red")
</script>

可见性过滤器

 选择所有不可见元素

<script>
    $(":hidden")
</script>

 

 选择所有可见元素

<script>
    $(":visible")
</script>

子元素过滤器

 获取第一个元素

<p>文章1</p>
<p>文章2</p>
<p>文章3</p>
<script>
    $("p:first-child").css("color","red")
</script>

 

获取最后一个元素

 

获取只有一个子元素的元素

 

获取每个自定义子元素的元素

 

其他方法

 略~~~~~~~~~

本文网址:https://www.wyxxw.cn/blog-detail-1-5-29.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:https://www.cnblogs.com/xiukang/p/8404675.html 。 转载人:momo