jQuery 介绍

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标签 

posted @ 2020-05-29 22:33  竹石2020  阅读(147)  评论(0编辑  收藏  举报