欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 选择器

程序员文章站 2022-06-22 12:42:52
测试jQuery模板 简单选择器 元素选择器 获取所有 p 元素并设置字体颜色为红色 ID选择器 ID在页面只允许出现一次 将 id 为 xiu 元素设置字体颜色为红色 class选择器 class 可以多次出现 获取所有 class 为 xiu 元素并设置字体颜色为红色 进价选择器 群组选择器 同 ......
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>

 

获取最后一个元素

 

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

 

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

 

其他方法

 略~~~~~~~~~