选择器是 Jquery 的基础，在 Jquery 中，对事件的处理、DOM 操作、Ajax 操作都是依赖选择器。

1. Jquery 环境配置

• jquery 库文件 jquery-3.2.1.min.js 放于应用中
• 在页面中使用 script 标签引入

图片.png

• 编写一个简单 Jquery 代码

  
  
  图片.png

2. 选择器分类

2.1 基本选择器

• 基础选择器
  • id 选择器
    语法：$("#id值") eg: $("#id"),返回的是单个元素对象
  • 元素选择器
    语法:$("标签名称"); eg:$("div");返回的是集合
  • 类选择器
    语法:$(".class值");eg:$(".class指")；返回的是集合
  • 通配选择器
    语法:$("*");返回的是整个整个元素
  • 群组选择器
    语法:$("选择器的值1,选择器值2,......");eg:$(".c1,p"),返回的是集合

2.2 层次选择器

• 子类选择器
  语法：$(选择器 选择器); eg:$("form input"):找form标签中的input子类元素
• 儿子选择器
  语法:$("选择器 > 选择器"); eg:$("form>input"):找form标签中的input儿子元素
  -next元素选择器
  语法：$(选择器 + 选择器):eg:$("label+input"):找label下一个input元素，有可以能返回多个
  -同辈选择器
  语法：$(选择器_{选择器);eg：$("form}input")，找form同辈(弟弟)的所有input元素

2.3 过滤选择器

• 基础过滤 自己看
  • 查找第一个元素
    语法：$(选择器::first);eg:$(ul li:first).
  • 排除过滤选择器
    语法：$("选择器:not(选择器)")；eg :$("li:not(ul li:first)")
• 子元素过滤
• 内容过滤
• 属性选择器 自己看
  • 带有属性的过滤
    语法：$("选择器[属性名]") eg: $("div[lang]")
  • 带有属性的内容的过滤
    语法：$("div[属性='值']") eg:$("div[lang='d2']")

2.4 表单选择器