jQuery选择器

最新推荐文章于 2024-10-16 21:35:12 发布

ℳꪶⅈꪊ劉᭱ꦿ

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量106

点赞数

文章标签：前端 jquery Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_68094927/article/details/128807948

版权

入口函数

第一种

$(document).ready(function(){

})

第二种

$().ready(function(){

})

第三种

$(function(){

})

js与jq入口函数的区别

js的入口函数要等到页面所有的资源加载完成才开始执行

jq的入口函数只会等待文档树加载完成就开始执行，并不会等待图片，文件的加载

dom对象转换 jq对象

只需要用$()包裹

jq对象转换 dom对象

第一种数组[0]

第二种 .get(0)

什么是jQuery 选择器

jQuery 选择器是jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: jQuery 选择器返回的是 jQuery 对象。iQuery 选择器有很多，基本兼容了 CSS 到CSS3 所有的选择器，并且jQuery 还添加了很多更加复杂的选择器。iQuery 选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

ID 选择器 $("#id")获取指定 ID 的元素类选择器

$(".class") 获取同一类 class 的元素

标签选择器 $("div”) 获取同一类标签的所有元素。

并集选择器 $("div,p,li') 使用逗号分隔，只要符合条件之一就可。

交集选择器 $(“div.redClass") 获取 class 为 redClass 的 div 元素

层次选择器

子代选择器 $(“ul>li');使用 >号，获取儿子层级的元素。注意，并不会获取孙子层级的元素

后代选择器 $("ul li): 使用空格，代表后代选择器，获取 ul 下的所有i 元素，包括孙子元素

基本属性选择器

[attribute] $(input[checked]).attr(checked',false)匹配包含给定属性的元素。常用于单选或复选的 checked.[attribute=value]

$(input[name="username”]).val() 匹配给定的属性是某个特定值的元素。常用于选择指定的input 标签

[attribute!=value] $('div[name!="box].html() 匹配给定的属性是不包含某个特定值的元素[attribute^=value] $('div[class^="b"]).css("background","red")匹配给定的属性是以某些值开始的元素[attribute=value] $('div[class="b"T).css("background","red")匹配给定的属性是以包含某些值的元素

操作标签的属性

attr(name) / attr(name, value) 读/写非布尔值的标签属性。标签属性方法 prop(name)/ prop(name, value) 读/写布尔值的标签属性。删除属性方法 removeAttr(name)removeProp(name) 删除指定名字的属性。自定义属性 data0) 读写标签的附加数据 (data- 属性)。

过滤选择器

:eq (index) $(“li:eq(2y).css(“color”,"red") 获取到的 li 元素中，选择索引号为 2 的元素，索引号从 0开始。

:odd $(“li:odd").css(“color", "red") 获取到的 li 元素中，选择索引号为奇数的元素

:even $(“li:even").css(color”,"red) 获取到的 li 元素中，选择索引号为偶数的元素

:first $(tr:first).css(backgroundColor','red”)匹配找到的第一个元素。

:last $(td:last').css( backgroundColor','red) 匹配找到的最后一个元素

:gt(index) $(li:gt(3)).css(backgroundColor','red) 匹配所有大于给定索引值的元素。

:lt(index) $(li:lt(3)).css(backgroundColor,'red') 匹配所有小于给定索引值的元素。

:not(selector) $(li:gt(3):not(":last")).css(backgroundColor',"red)去除所有与给定选择器匹配的元素。

筛选选择器

:contains() $('td:contains(“0).css(backgroundColor','red)匹配包含给定文本的元素:has(selector) $('td:has(“span")).css(backgroundColor','red)匹配包含选择器所匹配的元素的元素:empty $('td:empty).css(backgroundColor','red)匹配所有不包含子元素或者文本的空元素。:parent $('td;parent).css(backgroundColor,'red) 匹配含有子元素或者文本的元素。