一、jQuery选择器

1. helloworld

• 导入jQuery库 <script type="text/javascript" src=""></script>

   $(function () {
        $("button").click(function () {
            alert("hello world")
        });
    }); 

• $(function(){})相当于window.onload()
• $("button")表示选取button对象，返回的是一个jQuery对象，并且是个数组

2. jQuery对象和Dom对象的相互转化

• 约定变量前加$，表示是jQuery对象
• jQuery对象转为DOM对象，因为是数组对象，所以用可以get()，或者[]
• 隐式迭代，$("button").click()
• DOM对象转为jQuery对象
  
  1. 选取一个DOM对象，document.getElementById("")
  2. 使用$()进行包装即可
• DOM对象不能用jQuery对象的方法，相反jQuery对象也不能使用DOM对象的方法
• 在函数内,this代表DOM对象，用$(this)就变成了jQuery对象
• jQuery对象是一个DOM数组对象。

3. jQuery选择器

3.1 基本选择器

选择器	描述	返回	在CSS中
#id	根据给定的id匹配一个元素	单个元素组成的集合	√
.class	根据给定的类名匹配元素	集合元素	√
element	根据给定的元素名匹配元素	集合元素	√
*	匹配所有元素	集合元素	√
select1，select2...selectN	将每一个选择器匹配到的元素一起返回	集合元素	√

3.2 属性选择器

• 用[],例如$("a[href^='https://']"")选取a标签的href属性为https://开头的元素；$("form[method]")选取form标签含有method属性的元素；[[href^='https://']]默认使用*是一种隐式假定,选取所有href属性是https://开头的元素。

选择器	描述	返回	在CSS中
E[A]	匹配所有标签名为E，具有属性A的元素	集合元素	√
E[A='V']	匹配所有标签名为E，具有属性A，且A的值为V的所有元素	集合元素	√
E[A^='V']	匹配所有标签名为E，具有属性A，且A的值以V开头的元素	集合元素	√
E[A|='V']	匹配所有标签名为E，具有属性A，且A的值等于V或者以V-开头的所有元素	集合元素	√
E[A$='V']	匹配所有标签名为E，具有属性A，且A的值以V结束的所有元素	集合元素	√
E[A!='V']	匹配所有标签名为E，具有属性A，且A的值不等于V的所有元素，或者完全不具备属性A	集合元素	×
E[A~='V']	匹配所有标签名为E，具有属性A，且A的值等于V或者包含V的所有元素	集合元素	√
E[C1][C2]	匹配所有标签名为E，具有属性A，且A的值满足条件的C1和C2的所有元素	集合元素	√

3.3 层次选择器

选择器	描述	返回	在CSS中
${"ancestor descendant"}	选取ancestor的所有descendant(后代)元素	集合元素	√
${"parent > child"}	选取parent元素下的child(子)元素	集合元素	√
${"prev + next"}	选取紧接在prev元素后的下一个next元素	集合元素	√
${"prev ~ siblings"}	选取prev元素后的所有siblings元素(只能是后面的同辈元素)	集合元素	√

• 方法siblings()能选择前后同辈的元素，${"#but1"}.siblings("div")选取id是but1的同辈的div元素

3.4 过滤选择器

3.4.1 位置过滤选择器

选择器	描述	返回	在CSS中
:first	选取第一个元素。li a:first 返回列表元素中的第一个a标签	单个元素组成的集合	×
:last	选取最后一个元素。li a:last 返回列表元素中的最后一个a标签	集合元素	×
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	√
:even	选取索引是偶数的所有元素，索引从0开始。li:even 返回偶数索引元素	集合元素	×
:odd	选取索引是奇数的所有元素，索引从0开始。li:odd 返回奇数索引元素	集合元素	×
:eq(index)	选取索引等于index的元素，索引从0开始	集合元素	×
:gt(index)	选取索引大于index的元素，索引从0开始	集合元素	×
:lt(index)	选取索引小于index的元素，索引从0开始	集合元素	×
:header	选取所有得标题元素，如：h1，h2等	集合元素	×
:animated	选取当前正在执行动画的所有元素	集合元素	×

3.4.2 内容过滤选择器

选择器	描述	返回	在CSS中
:contains(text)	选取含有文本内容为text的元素	集合元素	×
:empty	选取不包含子元素或者文本的空元素	集合元素	√
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	×
:parent	选取含有子元素或者文本的元素	集合元素	×

3.4.3 可见性过滤选择器

选择器	描述	返回	在CSS中
:hidden	选取所有不可见的元素	集合元素	×
:visible	选取所有可见的元素	集合元素	×

• :hidden不仅包含样式属性display为none的元素，也包含文本隐藏域(<input type="hidden" name="">)和visible:hidden之类的元素

3.4.4 子元素过滤选择器

选择器	描述	返回	在CSS中
:first-child	匹配上下文中第一个子元素	集合元素	√
:last-child	匹配上下文中最后一个子元素	集合元素	√
:first-of-type	匹配给定类型的第一个子元素	集合元素	√
:last-of-type	匹配给定类型的最后一个子元素	集合元素	√
:nth-child(n)	匹配第n个子元素	集合元素	√
:nth-child(even|odd)	匹配偶数或奇数	集合元素
:nth-child(Xn+Y)	匹配给定公式计算的第n个子元素，索引从1开始	集合元素
:nth-last-child(n)	匹配倒数第n个子元素	集合元素	√
:nth-last-child(even|odd)	匹配偶数或奇数	集合元素
:nth-last-child(Xn+Y)	匹配给定公式计算的倒数第n个子元素	集合元素
:only-child	只匹配没有兄弟元素的子元素	集合元素	√
:only-of-type	只匹配没有相同类型的兄弟元素的子元素	集合元素	√

选取子元素需要添加空格

3.4.5 表单过滤器

选择器	描述	返回	在CSS中
:checkbox	只选择复选框元素(input[type=checkbox])	集合元素	×
:checked	只选择状态处于被选中的元素，复选框、单选框或者下拉框元素	集合元素	√
:disabled	只选择禁用状态的元素	集合元素	√
:enabled	只选择启动状态的元素	集合元素	√
:file	只选择文件input元素(input[type=file])	集合元素	×
:focus	只选择处于聚焦状态的元素	集合元素	√
:image	只选择图片input元素(input[type=image])	集合元素	×
:input	只选择表单元素(input、select、textarea、button)	集合元素	×
:password	只选择密码元素(input[type=password])	集合元素	×
:radio	只选择单选元素(input[type=radio])	集合元素	×
:reset	只选择重置按钮(input[type=reset])或button[type=reset])	集合元素	×
:selected	只选择处于选中状态的列表元素	集合元素	×
:submit	只选择提交按钮(button[type=submit])或者(input[type=submit])	集合元素	×
:text	只选择文本元素(input[type=text])或者没有指定类型的元素(因为默认是type=text)	集合元素	×

3.4.6 其他过滤器

选择器	描述	在CSS中
:animated	只选择动画模式的元素	×
:header	只选择头元属：<h1>到<h5>	×
:lang(language)	只选择采用特定语言的元素	√
:root	选择文档的根元素	√
:target	通过文档的URL框架标识来选择目标元素	√

4. 总结

本节主要讲述了如何用jQuery选择器来创建和筛选自定义结果集（jQuery集合或者匹配元素的集合），接下来学习如何操作jQuery集合。