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
对象
- 选取一个DOM对象,
document.getElementById("")
- 使用
$()
进行包装即可
- 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
集合。