jQuery选择器和筛选器方法
2023-06-10 22:01:00 2 举报AI智能生成
jQuery选择器
作者其他创作
大纲/内容
引入jquery
1.官网下载jquery源码，保存为jquery.js文件
https://jquery.com
2.script标签中引入jquery.js文件
<script src="jquery文件路径"></script>
中文文档: https://jquery.cuishifeng.cn/
jquery对象和dom对象
1.jquery对象和dom对象
jQuery对象：jquery找到的标签对象
DOM对象：原生js找到的标签对象
DOM对象只能使用dom对象的方法，不能使用jquery对象的方法；
jQuery对象同样不能使用dom对象的方法;
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对象
如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个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中字符串方法的调用方式
0 条评论
下一页
