

首页  思维导图  详情



jQuery选择器和筛选器方法

2023-06-10 22:01:00   2  举报





AI智能生成

jQuery选择器

jQuery

模版推荐

作者其他创作

大纲/内容

引入jquery

1.官网下载jquery源码，保存为jquery.js文件

https://jquery.com

2.script标签中引入jquery.js文件

中文文档: https://jquery.cuishifeng.cn/

jquery对象和dom对象

1.jquery对象和dom对象

jQuery对象：jquery找到的标签对象

DOM对象：原生js找到的标签对象

DOM对象只能使用dom对象的方法，不能使用jquery对象的方法； jQuery对象同样不能使用dom对象的方法;

注意: jquery对象[索引]，会变成dom对象, 需要再用 $()包起来才会变成jquery对象

2.dom和jquery对象之间的转换

jquery对象转dom对象：jquery对象[索引]

$('#d1')[0]

dom对象转jquery对象: $(dom对象)

$(document.getElementById('d1'));

3.jquery选择器

固定语法：$(‘选择器’)

基本选择器(同CSS)

id选择器

$('#d1')

类选择器

$('.c1')

标签选择器

$('div')

标签选择器配合其他选择器

$('div.c1')

$('div#d1')

通用选择器

$('*')

组合选择器

$('#d1, #d2')

选择器对象中某个标签设置成jquery对象

$($('选择器')[索引])

注意: 选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法，对标签进行统一设置。 如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本筛选器

:first

选择器数组中的第一个元素

:last

选择器数组中的最后一个元素

:eq(index)

选择器数组中指定索引值的元素

:even

选择器数组中索引值为偶数的元素

:odd

选择器数组中索引值为奇数的元素

:gt(index)

匹配所有大于给定索引值的元素

:lt(index)

匹配所有小于给定索引值的元素

:not(选择器)

移除所有满足not条件的元素

:has(选择器)

保留包含特定后代的元素，去掉那些不含指定后代的元素

:not(:has(选择器))

排除掉满足has筛选器的后代标签

属性选择器

语法

[attribute]

属性

[attribute=value]

属性=value

[attribute!=value]

属性!=value

场景

多用于input标签的type属性

$('input[type='checkbox']')

获取checkbox类型的input标签

$('input[type='text]')

获取类型非text的input标签

表单筛选器(from表单)

:text

单行文本输入框

:password

密码输入框

:file

文件选择

:radio

单选

:checkbol

多选

:submit

提交按钮

:reset

重置按钮

:button

按钮

:textarea

多行文本

语法:

$(":text")

表单对象属性筛选器

支持属性：

:enabled

可用的标签

:disabled

不可用的标签

:checked

选中的input标签

:selected

选中的option标签

4.jquery筛选器方法

下一个

.next()

找到下一个兄弟标签

.nextAll()

找到下面所有的兄弟标签

.nextUntil(选择器)

往下找兄弟标签，直到找到某个兄弟标签为止，不包含作为终止条件的标签

上一个

.prev()

找到上一个兄弟标签

.prevAll()

找到所有的兄弟标签

注意：找到标签的顺序是倒着往上依次往上找的

.prevUntil(选择器)

往上找兄弟标签，直到找到某个兄弟标签为止，不包含作为终止条件的标签

父标签

.parent()

父标签

.parents()

当前元素的所有父辈标签

.parentsUntil(选择器)

选中标签的所有父辈标签，直到遇到某个标签为止 parentsUntil(选择器)

儿子

.children()

所有的儿子标签

.children(选择器)

找到符合后面这个选择器的儿子标签

兄弟

.siblings()

所有的兄弟标签

.siblings(选择器)

找到符合后面这个选择器的兄弟标签

find

查找某个标签的后代

.find(选择器)

filter

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

filter(expr|obj|ele|fn)

其他方法

.first()

获取匹配的第一个元素

.last()

获取匹配的最后一个元素

.not(选择器)

从匹配元素的集合中删除与指定表达式匹配的元素

.has(选择器)

保留包含特定后代的元素，去掉那些不含指定后代的元素

.eq(index)

选择器数组中指定索引值的元素

.val()

获取或设置文本框的值

$("input").val();

$("input").val("hello world!");

注意：jquery筛选器方法支持链式表达式，可以组合搭配使用，类似于python中字符串方法的调用方式

 Collect

Get Started

传感器

 Collect

Get Started

训练分类器

 Collect

Get Started

CSS3选择器

 Collect

Get Started

创建规则-选择触发器设备





0 条评论

下一页