今日内容
jQuery
jQuery引入
下载链接:[jQuery官网](https://jquery.com/),首先需要下载这个jQuery的文件,然后在HTML文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。
jquery对象和dom对象
jquery找到的标签对象称为 -- jquery对象 原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象)
jQuery选择器
基本选择器
jQuery('#d1') -- $('#d1') 基本选择器(同css) id选择器: $("#id") #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器, //通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象,看我们上面的jQuery对象部分的内容 标签选择器: $("tagName") $('div') class选择器: $(".className") 配合使用: $("div.c1") // 找到有c1 class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className, tagName") 选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法, 意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索 引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
基本筛选器
<ul> <li>蔡世楠</li> <li>尤利阳</li> <li id="l3">张雷</li> <li>申凯琦</li> <li id="l5">程德浩</li> <li>罗新宇</li> <li>曾凡星</li> </ul> :first -- 示例:$('li:first') // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签 :not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
属性选择器
[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标签 #注意这个双引号
表单筛选器
找到的是type属性为这个值的input标签中 :text :password :file :radio :checkbox :submit :reset :button
表单对象属性筛选器
:enabled #可用的标签 :disabled #不可用的标签 :checked #选中的input标签 :selected #选中的option标签
筛选器方法
下一个: $('#l3').next(); 找到下一个兄弟标签 $('#l3').nextAll(); 找到下面所有的兄弟标签 $('#l3').nextUntil('#l5'); #直到找到id为l5的标签就结束查找,不包含它 上一个 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 父亲元素 $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到) $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。 儿子和兄弟元素 $('ul').children(); $('ul').children('#l3'); #找到符合后面这个选择器的儿子标签 $('#l5').siblings(); $('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签 find $('ul').find('#l3') -- 类似于 $('ul #l3') filter过滤 $('li').filter('#l3'); .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('li').not('#l3'); .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素