Jquery选择器简明版 Jquery选择器实用版

Jquery选择器简明版

选择器分类

Jquery选择器按照其选择的方式可以分为以下几类：
- 基础选择器
- 层次选择器
- 过滤选择器
- 属性选择器
- 表单选择器

基础选择器

ID选择器

使用#选择ID:

$("#myId")

类选择器

使用.选择class:

$(".myClass")

元素选择器

使用元素名选择元素:

$("div")

元素属性选择器

按照元素的属性选择元素:

$("[name='myName']")

层次选择器

后代选择器

选择某个元素的后代元素:

$("div p")

子元素选择器

选择某个元素的第一层子元素:

$("div > p")

兄弟选择器

选择某个元素的相邻兄弟元素:

$("p + p")

过滤选择器

第N个选择器

选择第n个元素:

$("li:nth-child(3)")

自定义选择器

根据自己的需求编写选择器:

$.expr[':'].customSelector = function(element) {
  return element.property === "custom";
};

$(":customSelector")

属性选择器

简单属性选择器

选择具有某个属性且值为特定值的元素:

$("[name='myName']")

复杂属性选择器

选择具有某个属性且属性值满足特定要求的元素:

$("[name^='my'][name$='Name']")

表单选择器

表单元素选择器

选择表单中的元素:

$(":input")

复选框选择器

选择选中的复选框元素:

$(":checked")

Jquery选择器实用版

示例1

html代码：

<div>
  <p class="text">文本1</p>
  <p class="text">文本2</p>
  <p class="text">文本3</p>
  <p class="image">图片</p>
</div>

选择所有类为text的段落元素:

$("p.text")

示例2

html代码：

<form>
  <label>学号:</label>
  <input type="text" id="studentId"/>
  <label>姓名:</label>
  <input type="text" id="name"/>
  <button type="submit" id="submitBtn">提交</button>
</form>

选择form表单中所有输入框:

$("form :input")