jQuery选择器基础知识梳理

jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。

工厂函数指的是这些内建函数都是类对象,当你调用他们时,实际就是创建了一个类实例。

一.jQuery基本选择器包括:ID选择器,元素选择器,类名选择器,多种匹配条件选择器,通配符选择器。

1.ID选择器(#id)

jQuery中的id选择器相当于JavaScript中的document.getElementById()方法;

JavaScript只能调用DOM方法,jQuery可以调用DOM方法,也可以调用jQuery封装的方法。

页面中如果出现了两个相同的id的属性值,程序运行时会报出JS运行错误的对话框,所以要保证id属性值唯一。

2.元素选择器(element)

元素选择器是根据元素名称匹配相应的元素,元素选择器匹配的是一组元素。它是jQuery包装集,是一组Object对象,需要使用索引器来获取单独的文本信息。

eq()和 get(),默认都是从0开始计数

eq()方法返回的是一个jQuery包装集,所以只能调用jQuery方法

get()方法返回的是一个DOM对象,所以调用DOM对象的方法

3.类名选择器(.class)

类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素

4.复合选择器(select1,select2,select3,selectN)

复合选择器将多个选择器组合在一起,用逗号分隔开,只要符合任何一个筛选条件就会匹配,返回的是一个jQuery包装集,利用索引器可以获取集合中的对象。

5.通配符选择器(*)

二.层级选择器

层级选择器就是根据页面上的DOM元素之间父子关系作为匹配的筛选条件。

jQuery提供的层级选择器的有:

1.ancestor descendan选择器

用于给定的祖先元素下匹配的所有后代元素

2.parent  > child选择器

该选择器只能选择父元素下直接的子元素

3.prev+next选择器

用于匹配所有紧接在prev后面的next元素,pre与next是两个相同的元素

4.prev~sibling选择器

用于匹配prev之后的所有sibling元素,其中prev和sibling是两个同辈元素

三.过滤选择器

过滤选择器包括

1.简单过滤器

以冒号开头,通常实现简单过滤效果的过滤器

2.内容过滤器

通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

:contains(text)匹配包含给定文本的元素

:empty匹配不包含子元素或者文本的元素

:has(selector)匹配含有选择器匹配元素的元素

:parent匹配含有子元素或者文本的元素

3.可见性过滤器

可见性过滤器就是利用元素的可见状态匹配元素,因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配不可见元素的:hidden过滤器

在应用:hidden过滤器的时候,display属性是none以及input元素的type属性为:hidden的元素都会被匹配到

4.表单对象的属性过滤器

表单对象的过滤器是通过表单元素的状态属性匹配元素,包括:

1.checked过滤器:匹配所有被选中的元素

2.disabled过滤器:匹配所有不可用的元素

3.enabled过滤器:匹配所有可用的元素

4.selected过滤器:匹配所有选中的option元素

5.子元素选择器

子元素选择器就是筛选给定某个元素的子元素,具体过滤条件由选择器的种类而定

:first-child匹配所有给定元素的第一个元素

:last-child匹配所有给定元素的最后一个元素

:only匹配元素中唯一的子元素

:nth-child匹配父元素下的第N个子或奇偶元素,index从1开始,而不是从0开始

四.属性选择器

属性选择器就是通过元素的属性作为过滤条件进行筛选

五.表单选择器

表单选择器就是匹配经常在表单中出现的元素,但是匹配的元素不一定在表单中。

说明:类名选择器和元素选择器获取的都可能使一组jQuery包装集,不止一个

jQuery方法:

val():获取文本框的值

ready():当页面元素载入完成时就自动执行程序,自动为按钮绑定单击事件

html():设置元素的文本内容,jQuery方法

innerHTML():设置元素的文本内容,DOM对象的方法

addClass():为元素添加CSS类

removeClass():移除元素的CSS类

猜你喜欢

转载自blog.csdn.net/qq_41357573/article/details/81429038
今日推荐