jQuery选择器

好好学java的xz

于 2021-10-08 09:45:49 发布

阅读量206

点赞数

文章标签： jquery html css

本文链接：https://blog.csdn.net/m0_51945098/article/details/120632488

版权

这篇博客详细介绍了jQuery的选择器使用，包括基本选择器（标签、类、ID、并集、全局）、层次选择器（后代、子、相邻、同辈）以及属性选择器，并提供了多个示例。此外，还涉及到了过滤选择器（基本过滤和可见性过滤），以及在实际场景中如何应用。同时，文章提到了选择器中特殊符号的转义和空格的严格性问题。

摘要由CSDN通过智能技术生成

总结
jQuery选择器种类
1 通过CSS选择器选取元素
第一种:基本选择器
(1)标签选择器 (2)类选择器
(3)ID选择器 (4)并集选择器 (5)全局选择器

第二种:层次选择器
(1)后代选择器（） (2)子选择器（>）
(3)相邻元素选择器（+） (4)同辈元素选择器（~）

第三种:属性选择器
(1) [attribute] (2) [attribute=value]
(3) [attribute^=value] (4) [attribute$=value]
(5) [attribute*=value]

2 通过过滤选择器选择元素
第一种:基本过滤选择器
(1):eq(index) (2):gt(index) (3):lt(index)

第二种:可见性过滤选择器
(1):visible (2):hidden

详细
1.jQuery选择器语法

jQuery选择器类似于CSS选择器，用来选取网页中的元素

$("h3").css("background","#09F");

获取并设置网页中所有<h3>元素的背景
“h3”为选择器语法，必须放在$()中
$(“h3”) 返回jQuery对象
.css()是为jQuery对象设置样式的方法

2.jQuery选择器种类

2.1通过CSS选择器选取元素（常见）

第一种:基本选择器

(1)标签选择器

$("div").css({"background":"green","color":"yellow"});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $("div").css({"background":"green","color":"yellow"});
            });
        });
    </script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span</span>
    <button>点我</button>
</body>
</html>

button按钮
在这里插入图片描述

(2)类选择器

$("p.test").css("background","yellowgreen");

    <script type="text/javascript">
        $(function(){
            $("p.test").css("background","yellowgreen");
        })
    </script>


<body>
    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落。</p>
    <p>这是另外一个段落。</p>
</body>

在这里插入图片描述

特殊的

采用方法，可以放在最上面，只有触发，方法才会执行。
并且不需要加jquery初始化函数$(function(){});

</script>
    <script type="text/javascript">
        function a(){
            $("h2").css("background","red")
        }
    </script>


<body>
    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <button onclick="a()">点</button>
</body>

在这里插入图片描述

(3)ID选择器

 $("#test").hide();

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>


<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

(4)并集选择器

$("div,span,p.myClass").css("background","green");

<script type="text/javascript">
        $(function(){
            $("div,span,p.myClass").css("background","green");
        });
</script>


<body>
    <div>div</div>
	<p class="myClass">p class="myClass"</p>
	<span>span</span>
	<p class="notMyClass">p class="notMyClass"</p>
</body>

在这里插入图片描述
(5)全局选择器

$("*").css("background","pink");

    <script type="text/javascript">
        $(function(){
            $("*").css("background","pink");//全局变量
            $("p:not(#three)").css("background","red");//部分需求
        });
    </script>


<body>
    <p>a</p>
    <p>b</p>
    <p id="three">c</p>
    <div>DIV</div>
	<span>SPAN</span>
	<p>P</p>
</body>

在这里插入图片描述

第二种:层次选择器

(1)后代选择器（）

<script>
$(function(){
  $("form input").css("background","red");
});
</script>


<body>
 	<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
</body>

在这里插入图片描述
(2)子选择器（>）

    <script type="text/javascript">
        $(function () {
            $("form>input").css("background", "red");
        });
    </script>


<body>
    <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label>
            <input name="newsletter" />
        </fieldset>
    </form>
    <input name="none" />
</body>

在这里插入图片描述
(3)相邻元素选择器（+）

    <script type="text/javascript">
        $(function () {
            $("form+input").css("background", "red");
        });
    </script>


<body>
    <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label>
            <input name="newsletter" />
        </fieldset>
    </form>
    <input name="none" />
    <input name="none" />
</body>

在这里插入图片描述
(4)同辈元素选择器（~）

    <script type="text/javascript">
        $(function () {
            $("form~input").css("background", "red");
        });
    </script>


<body>
    <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label>
            <input name="newsletter" />
        </fieldset>
    </form>
    <input name="none" />
    <input name="none" />
</body>

在这里插入图片描述
第三种:属性选择器

(1) [attribute]
匹配包含给定属性的元素。

    <script type="text/javascript">
        $(function(){
            $("div[name]").css("background","red");
			//查找所有含有 name 属性的 div 元素
        });
    </script>


<body>
    <div>
        <p>Hello!</p>
      </div>
      <div name="test2">123</div>
</body>

在这里插入图片描述
(2)[attribute=value]
匹配给定的属性是某个特定值的元素

    <script type="text/javascript">
        $(function () {
            $("[name=test1]").css("background", "red");
			//查找所有 name 属性是 test1 的元素
        });
    </script>


<body>
    <div>
        <p>Hello!</p>
    </div>
    <div name="test1">123</div>
    <span name = "test2">456</span>
</body>

在这里插入图片描述
(3)[attribute^=value]
(开头)匹配给定的属性是以某些值开始的元素

<script>
$(function(){
  $("input[name^='newsle']").css("background","red");
//查找所有 name 以 'newsle' 开始的 input 元素
});
</script>
</head>

<body>
 	<input name="newsletter" />
	<input name="milkman" />
	<input name="newsboy" />
</body>
</html>

在这里插入图片描述
(5)[attribute$=value]
(结尾)匹配给定的属性是以某些值结尾的元素

<script>
$(function(){
  $("input[name$='boy']").css("background","red");
//查找所有 name 以 'boy' 结尾的 input 元素
});
</script>


<body>
 	<input name="newsletter" />
	<input name="milkman" />
	<input name="newsboy" />
</body>

在这里插入图片描述
(3)[attribute*=value]
(包含)匹配给定的属性是以包含某些值的元素

<script>
$(function(){
  $("input[name*='e']").css("background","red");
//查找所有 name 包含 'e' 的 input 元素
});
</script>


<body>
 	<input name="newsletter" />
	<input name="milkman" />
	<input name="newsboy" />
</body>

在这里插入图片描述
2.2通过过滤选择器选择元素

第一种:基本过滤选择器
index 从 0 开始计数
(1):eq(index)
匹配一个给定索引值的元素

注意点:
返回值:jQueryeq(index|-index)
一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

(2):gt(index)
匹配所有大于给定索引值的元素

(3):lt(index)
匹配所有小于给定索引值的元素

以上案例：

<script>
$(function(){
  $("tr:eq(1)").css("background","red");
  //$("tr:gt(1)").css("background","red");
  //$("tr:lt(1)").css("background","red");
});
</script>


<body>
 	<table>
	  <tr><td>Header 1</td></tr>
	  <tr><td>Value 1</td></tr>
	  <tr><td>Value 2</td></tr>
	</table>
</body>

在这里插入图片描述

第二种:可见性过滤选择器

(1):visible

(2):hidden

    <script type="text/javascript">
        function a(){//隐藏
		 	$("tr:visible").css("display","none");
		 	//把看得见的隐藏起来
		}
		
        function b(){//显示
		 	$("tr:hidden").css("display","block");
		 	//把看不见的显示起来
		}
    </script>


<body>
    <table>
    <tr style="display:none"><td>Value 1</td></tr>
	  <tr><td>Value 2</td></tr>
	  <input type="button" value="隐藏Value2" onclick="a()"/>
	  
      <input type="button" value="显示Value1，value2" onclick="b()"/>
	</table>
</body>

在这里插入图片描述
点隐藏Value2按钮

点显示Value1，value2按钮

3.jQuery选择器常见问题

(1)特殊符号的转义

A.html场景：

<div id="id#a">aa</div>
<div id="id[2]">cc</div>

B.错误写法：

$("#id#a");
$("#id[2]");

C.正确写法：

$("#id\\#a");
$("#id\\[2\\]");

\ 就是简析不和#和 [ ]混淆

(2)选择器中的空格很严格(有无空格的区别)

A.选取class为“test”的元素内部的隐藏元素

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

B.选取隐藏的class为“test”的元素

var $t_b = $(".test:hidden"); //不带空格的

AB的区别
A可以识别子类的隐藏，B只能识别父类的隐藏。

    <script type="text/javascript">
        $(function(){
            alert("看："+$(".test :hidden").text())
            alert("看："+$(".test:hidden").text())
        });
    </script>


<body>
    <div class="test">
        <div style="display: none">123</div>
        <div>234</div>
    </div>
</body>

在这里插入图片描述

题外话：
p标签里面不能嵌套div

----2021.10.07

好好学java的xz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

1.jQuery选择器语法jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");获取并设置网页中所有<h3>元素的背景“h3”为选择器语法，必须放在$()中$(“h3”) 返回jQuery对象.css()是为jQuery对象设置样式的方法2.jQuery选择器种类2.1通过CSS选择器选取元素（常见）第一种:基本选择器(1)标签选择器$("div").css({"background":"green",
复制链接

扫一扫