[知了堂学习笔记] jQuery选择器

jQuery是一个javascript库
jQuery极大简化了javascript操作
兼容不同浏览器下的javascript语法问题

JQuery选择器

• 基本选择器
  
  • ID选择器：$("#ID") <div id="d01"></div>
  • 类选择器：$(".name") <div class="d01"></div>
  • 标签选择器：$("div") <div></div>
  • 群组选择器：$("div,#ID,.name")
• 层次选择器
  
  • 选择直接子元素：$("div>#d01")
  • 选择所有后代子元素：$("div#d01")
  • 选择直接兄弟元素：$("div+#d01"),直接兄弟元素：紧挨着下一个兄弟元素
  • 选择所有兄弟元素：$("div~#d01"),所有兄弟元素：向下找它的所有兄弟元素
• 过滤选择器
  
  • $("div:first")选取所有<div>元素中第1个<div>元素
  • $("div:last")选取所有<div>元素中最后1个<div>元素
  • $(“div:not(.one)”)选取 class 不是 one 的<div>元素
  • $(“div:even”)选取索引是偶数的<div>元素
  • $(“div:odd”)选取索引时奇数的<div>元素
  • $(“div:eq(1)”)选取索引为 1 的<div>元素
  • $(“div:gt(3)”)选取索引大于 3 的<div>元素
  • $(“div:lt(3)”)选取索引小于 3 的<div>元素
  • $(“:header”)选取网页中所有的<h1>、<h2>、<h3>……
  • $(“div:animated”)选取正在执行动画的<div>元素
• 内容选择器
  
  • $(“div:contains(‘你好’)”)：选出含有文本”你好”的<div>元素
  • $(“div:empty”)：选取不包含子元素（包括文本元素）的<div>空元素
  • $(“div:has(p)”)：选取含有<p>元素的<div>元素
  • $(“div:parent”)：选取拥有子元素（包括文本元素）的<div>
• 属性过滤选择器
  
  • $(“div[id]”): 查找含有 id 属性的 div
  • $(“div[id=other]”): 查找含有 id 属性, 且 id 属性值为 other 的 div
  • $(“div[id!=other]”): 查找含有 id 属性, 且 id 属性值不是 other 的 div
  • $(“div[id^=other]”): 查找含有 id 属性, 且 id 属性值以 other 开头的 div
  • $(“div[id$=other]”): 查找含有 id 属性, 且 id 属性值以 other 结尾的 div
  • $(“div[id][title]”): 查找含有 id 属性和 title 属性的 div
• 可见过滤选择器
  
  • $("div:visible”): 查找可见的 div
  • $(“div:hidden”): 查找隐藏的 div
• 表单选择器
  
  • $(":input”)
  • $(“:text”)
  • $(“:password”)
  • $(":checkbox")
  • $(“:radio”)
  • $(“:submit”)
  • $(“:button”)
  • $(“:file”)
  • $(“:reset”)
• 状态选择器
  
  • $(“:checked”)
  • $(“:selected”)

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php