JS-jQuery选择器

jQuery的选择器

基础选择器 (写法和css一样)

• $(“div”) 标签名选择器
• $("#id") id选择器
• $(".class") 类选择器
• $(“div,#id,.class”) 分组选择器
• $("*") 任意元素选择器

层级选择器

• $(“div span”) 匹配div里面的所有span包括子孙后代
• $(“div>span”) 匹配div里面的span子元素
• $(“div+span”) 匹配div的弟弟span
• $(“div~span”) 匹配div的弟弟们span
• 层级相关的方法:
  1. $("#abc").next(“span”) 匹配id为abc元素的弟弟span元素
  2. $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
  3. $("#abc").prev() 匹配id为abc元素的哥哥元素
  4. $("#abc").prevAll() 匹配id为abc元素的哥哥们元素
  5. $("#abc").siblings() 匹配id为abc元素的所有兄弟元素
  6. $("#abc").parent() 匹配id为abc元素的父元素
  7. $("#abc").children() 匹配id为abc元素的所有子元素们

过滤选择器

• $(“div:first”) 匹配所有div中的第一个
• $(“div:last”) 匹配所有div中的最后一个
• $(“div:eq(i)”) 匹配所有div中下标为i的元素
• $(“div:lt(i)”) 匹配所有div中下标小于i的元素
• $(“div:gt(i)”) 匹配所有div中下标大于i的元素
• $(“div:not(.abc)”) 匹配所有div中class不等于abc的元素
• $(“div:even”) 匹配所有div中下标为偶数的元素
• $(“div:odd”) 匹配所有div中下标为奇数的元素

内容选择器

• $(“div:has(span)”) 匹配包含span子元素的div
• $(“div:empty”) 匹配空的div
• $(“div:parent”) 匹配非空的div
• $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

可见选择器

• $(“div:hidden”) 匹配所有隐藏的div
• $(“div:visible”) 匹配所有显示的div
• 隐藏显示相关的方法:
  • $("#abc").show() 让id为abc的元素 显示
  • $("#abc").hide() 让id为abc的元素 隐藏
  • $("#abc").toggle() 让id为abc的元素显示和隐藏切换

属性选择器

• $(“div[id]”) 匹配包含id属性的div
• $(“div[属性名=‘xxx’]”) 匹配xxx属性值为xxx的div
• $(“div[属性名!=‘xxx’]”) 匹配xxx属性值不等于xxx的div

子元素选择器

• $(“div:first-child”) 匹配是div并且是子元素 并且是第一个子元素
• $(“div:last-child”) 匹配是div并且是子元素 并且是最后一个子元素
• $(“div:nth-child(n)”) 匹配是div并且是子元素 并且是第n个子元素 n从1开始

表单选择器

• $(":input") 匹配表单中所有的控件
• $(":password") 匹配所有密码框
• $(":radio") 匹配所有单选框
• $(":checkbox") 匹配所有多选框
• $(":checked") 匹配所有选中的单选多选和下拉选
• $(“input:checked”) 匹配所有选中的单选和多选
• $(":selected") 匹配所有选中的下拉选