jquery对象和dom对象
1 jquery找到的标签对象称为 -- jquery对象
2 原生js找到的标签对象称为 -- dom对象
3 dom对象只能使用dom对象的方法,不能使用jquery对象的方法
4 jquery对象也是,它不能使用dom对象的方法
5
6 dom对象和jquery对象互相转换:
7 jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0]
8 dom对象转jquery对象 -- $(dom对象)
jQuery选择器
基本选择器
1 jQuery('#d1') -- $('#d1')
2 基本选择器(同css)
3 id选择器:
4
5 $("#id") #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象,看我们上面的jQuery对象部分的内容
6 标签选择器:
7
8 $("tagName") $('div')
9 class选择器:
10
11 $(".className")
12 配合使用:
13
14 $("div.c1") // 找到有c1 class类的div标签
15 所有元素选择器:
16
17 $("*")
18 组合选择器:
19
20 $("#id, .className, tagName")
21
22 选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
基本筛选器
1 <ul>
2 <li>蔡世楠</li>
3 <li>尤利阳</li>
4 <li id="l3">张雷</li>
5 <li>申凯琦</li>
6 <li id="l5">程德浩</li>
7 <li>罗新宇</li>
8 <li>曾凡星</li>
9 </ul>
10
11 :first -- 示例:$('li:first') // 第一个
12 :last // 最后一个
13 :eq(index)// 索引等于index的那个元素 支持负数$('li:eq(-1))
14 :even // 匹配所有索引值为偶数的元素,从 0 开始计数
15 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数
16 :gt(index)// 匹配所有大于给定索引值的元素
17 :lt(index)// 匹配所有小于给定索引值的元素
18 :not(元素选择器)// 移除所有满足not条件的标签
19 :has(元素选择器)// --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签
20 :not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
属性选择器
1 [attribute]
2 [attribute=value]// 属性等于
3 [attribute!=value]// 属性不等于
4
5 // 示例,多用于input标签
6 <input type="text">
7 <input type="password">
8 <input type="checkbox">
9 $("input[type='checkbox']");// 取到checkbox类型的input标签
10 $("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
1 找到的是type属性为这个值的input标签中
2 :text
3 :password
4 :file
5 :radio
6 :checkbox
7 :submit
8 :reset
9 :button
表单对象属性筛选器 1 :enabled #可用的标签 2 :disabled #不可用的标签 3 :checked #选中的input标签 4 :selected #选中的option标签