選擇器是 Jquery 的基礎(chǔ)，在 Jquery 中，對(duì)事件的處理、DOM 操作、Ajax 操作都是依賴選擇器。

1. Jquery 環(huán)境配置

• jquery 庫文件 jquery-3.2.1.min.js 放于應(yīng)用中
• 在頁面中使用 script 標(biāo)簽引入

圖片.png

• 編寫一個(gè)簡(jiǎn)單 Jquery 代碼

  
  
  圖片.png

2. 選擇器分類

2.1 基本選擇器

• 基礎(chǔ)選擇器
  • id 選擇器
    語法：$("#id值") eg: $("#id"),返回的是單個(gè)元素對(duì)象
  • 元素選擇器
    語法:$("標(biāo)簽名稱"); eg:$("div");返回的是集合
  • 類選擇器
    語法:$(".class值");eg:$(".class指")；返回的是集合
  • 通配選擇器
    語法:$("*");返回的是整個(gè)整個(gè)元素
  • 群組選擇器
    語法:$("選擇器的值1,選擇器值2,......");eg:$(".c1,p"),返回的是集合

2.2 層次選擇器

• 子類選擇器
  語法：$(選擇器 選擇器); eg:$("form input"):找form標(biāo)簽中的input子類元素
• 兒子選擇器
  語法:$("選擇器 > 選擇器"); eg:$("form>input"):找form標(biāo)簽中的input兒子元素
  -next元素選擇器
  語法：$(選擇器 + 選擇器):eg:$("label+input"):找label下一個(gè)input元素，有可以能返回多個(gè)
  -同輩選擇器
  語法：$(選擇器_{選擇器);eg：$("form}input")，找form同輩(弟弟)的所有input元素

2.3 過濾選擇器

• 基礎(chǔ)過濾 自己看
  • 查找第一個(gè)元素
    語法：$(選擇器::first);eg:$(ul li:first).
  • 排除過濾選擇器
    語法：$("選擇器:not(選擇器)")；eg :$("li:not(ul li:first)")
• 子元素過濾
• 內(nèi)容過濾
• 屬性選擇器 自己看
  • 帶有屬性的過濾
    語法：$("選擇器[屬性名]") eg: $("div[lang]")
  • 帶有屬性的內(nèi)容的過濾
    語法：$("div[屬性='值']") eg:$("div[lang='d2']")

2.4 表單選擇器