jQuery
jquery对象和dom对象
jquery找到的标签对象为jquery对象
原生js找到的标签对象为dom对象
dom对象,只能用dom对象的方法
jquery对象,只能用jquery对象的方法
转换
jquery对象转dom对象--jquery对象[0]
dom对象转jquery对象---$(dom对象)
jquery选择器
基本选择器(同css)
id选择器:
$("#id") #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象,看我们上面的jQuery对象部分的内容
标签选择器:
$("tagName")
class选择器:
$(".className")
配合使用:
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器:
$("*")
组合选择器:
$("#id, .className, tagName")
选择器找到的可能是多个标签,会放在数组里面,但还是jquery对象.能够直接使用jquery方法,意思找到所有标签进行统一设置,如果要单独设置选中的 所有标签的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签是个dom对象
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素 支持负数
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
找到的任然是li标签
$("li:first") --->找到的是所以li标签中的第一个
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子:
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
层级选择器
x和y可以为任意选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(':checkbox') #找到所以的checkbox
表单对象属性筛选器
:enabled 可用的标签
:disabled 不可用的标签
:checked 选中的标签
:selected 选中的下拉框
$("input:enabled") #找到可用的input标签
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
$(":selected") // 找到所有被选中的option
筛选器方法
下一个元素:
$("#id").next() 找到下面的兄弟标签
$("#id").nextAll() 找到下面所有的标签
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找,不包含它
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选
find标签
$("div").find("p") 等价于$("div p")
筛选(过滤)
$("div").filter(".c1") 找到div值并且div的calss值为c1的标签
筛选方法:
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素