jquery选择器
时间: 2023-06-30 08:24:52 浏览: 92
jQuery选择器是一个功能强大的工具,用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法,以下是其中的一些:
1. ID选择器:
使用“#”符号,后跟ID名称,如下所示:
```
$("#myId")
```
2. 类选择器:
使用“.”符号,后跟类名称,如下所示:
```
$(".myClass")
```
3. 元素选择器:
使用元素名称,如下所示:
```
$("div")
```
4. 属性选择器:
使用元素属性名称和值,如下所示:
```
$("[name='myName']")
```
5. 后代选择器:
使用空格来选择后代元素,如下所示:
```
$("div p")
```
6. 索引选择器:
使用索引号来选择元素,如下所示:
```
$("div:eq(2)")
```
以上是jQuery常用的选择器方法,可以根据自己的需求来选择使用哪种方法。
相关问题
jquery 选择器
jQuery选择器是一种用于选择HTML元素的语法。它可以根据元素的ID、类、类型、属性、属性值等进行选择。以下是一些常见的jQuery选择器:
1. 根据元素类型选择:$("p") 选取所有 <p> 元素。
2. 根据元素ID选择:$("#id") 选取 ID 为 "id" 的元素。
3. 根据元素类选择:$(".class") 选取所有 class 为 "class" 的元素。
4. 根据元素属性选择:$("[attribute]") 选取带有 attribute 属性的元素。
5. 根据元素属性值选择:$("[attribute=value]") 选取 attribute 属性值为 "value" 的元素。
6. 根据元素属性值选择(部分匹配):$("[attribute*=value]") 选取 attribute 属性值包含 "value" 的元素。
7. 根据元素属性值选择(以某个值开头):$("[attribute^=value]") 选取 attribute 属性值以 "value" 开头的元素。
8. 根据元素属性值选择(以某个值结尾):$("[attribute$=value]") 选取 attribute 属性值以 "value" 结尾的元素。
9. 根据元素属性值选择(以某个值开头且包含某个值):$("[attribute|=value]") 选取 attribute 属性值以 "value" 开头且包含 "value" 的元素。
10. 根据元素的位置选择:$("selector:first") 选取第一个匹配的元素,$("selector:last") 选取最后一个匹配的元素,$("selector:even") 选取偶数位置的元素,$("selector:odd") 选取奇数位置的元素,$("selector:eq(index)") 选取索引为 index 的元素,$("selector:gt(index)") 选取索引大于 index 的元素,$("selector:lt(index)") 选取索引小于 index 的元素。
11. 根据元素的关系选择:$("parent > child") 选取 parent 元素的直接子元素 child,$("prev + next") 选取 prev 元素后面的第一个同辈元素 next,$("prev ~ siblings") 选取 prev 元素后面的所有同辈元素 siblings。
以下是一个例子:
```javascript
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
```
当用户点击按钮时,所有的段落元素都会被隐藏起来。
jquery选择器大全
以下是一些常用的 jQuery 选择器:
1. 基本选择器
- 通过元素名选取元素:`$('element')`
- 通过类名选取元素:`$('.class')`
- 通过 id 选取元素:`$('#id')`
- 通过属性选取元素:`$('[attribute]')`
- 通过属性值选取元素:`$('[attribute=value]')`
- 通过属性值前缀选取元素:`$('[attribute^=value]')`
- 通过属性值后缀选取元素:`$('[attribute$=value]')`
- 通过属性值包含选取元素:`$('[attribute*=value]')`
2. 层次选择器
- 后代选择器:`$('ancestor descendant')`
- 子元素选择器:`$('parent > child')`
- 相邻兄弟选择器:`$('prev + next')`
- 兄弟选择器:`$('prev ~ siblings')`
3. 过滤选择器
- :even:选取偶数位置的元素
- :odd:选取奇数位置的元素
- :eq(index):选取指定位置的元素
- :gt(index):选取位置大于指定位置的元素
- :lt(index):选取位置小于指定位置的元素
- :not(selector):选取不符合选择器的元素
- :header:选取标题元素
- :animated:选取正在执行动画的元素
4. 表单选择器
- :input:选取所有表单元素
- :text:选取所有文本框
- :password:选取所有密码框
- :radio:选取所有单选框
- :checkbox:选取所有复选框
- :submit:选取所有提交按钮
- :image:选取所有图像按钮
- :reset:选取所有重置按钮
- :button:选取所有按钮
- :file:选取所有文件域
5. 内容过滤选择器
- :contains(text):选取包含指定文本的元素
- :empty:选取没有子元素的元素
- :has(selector):选取包含指定元素的元素
- :parent:选取有子元素的元素
6. 可见性过滤选择器
- :visible:选取可见的元素
- :hidden:选取隐藏的元素
7. 属性过滤选择器
- [attribute]:选取带有指定属性的元素
- [attribute=value]:选取指定属性值的元素
- [attribute!=value]:选取不等于指定属性值的元素
- [attribute^=value]:选取属性值以指定值开头的元素
- [attribute$=value]:选取属性值以指定值结尾的元素
- [attribute*=value]:选取属性值包含指定值的元素
8. 子元素过滤选择器
- :first-child:选取第一个子元素
- :last-child:选取最后一个子元素
- :only-child:选取唯一的子元素
9. 表单对象属性过滤选择器
- :checked:选取被选中的表单元素
- :selected:选取被选中的选项元素
- :enabled:选取可用的表单元素
- :disabled:选取不可用的表单元素