专栏首页零基础自学Java【JavaWeb】85:jQuery的各种选择器

【JavaWeb】85:jQuery的各种选择器

今天是刘小爱自学Java的第85天。

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

选择器的作用是什么?

可以快速准确地定位我们所需要的标签。

刚学CSS的时候,觉得CSS选择器也太多了吧,直到今天学了jQuery选择器……

一、基本选择器

初学jQuery有个非常令人苦恼的地方:时常会把jQuery语法和js语法搞混。

事实上它们之间的语法有一定的相似度,但基本都不是一样的。

就比如说点击事件(匿名函数注册):

  • js语法:js.onclick=function(){}。
  • jQuery语法:jQuery.click(function(){})。

通俗一点理解就是:

  • js对象对应的是属性给属性赋值
  • jQuery对象对应的是方法给方法一个参数

CSS中基本选择器有3种,在jQuery中比CSS还多一种,依次分析:

为了观看更直接,将每个选择器和一个按钮绑定,通过触发点击事件完成对应的操作。

①id选择器

格式为:$("#myId01")。

通过它可以操作对应id的标签。

②类选择器

格式为:$(".divClass")。

通过它可以操作对应类名的标签。

jQuery语法的简洁之处就是在于此:如果是使用js语法,得到的元素为一个数组,所以要使用for循环依次赋值。

事实上jQuery对象本身就是一个js数组,相当于将for循环遍历赋值这个步骤简化了。

我们做一个对比:

③标签选择器

格式为:$("div")。

通过它可以操作对应标签名的标签,其效果和类选择器很相似。

④全选选择器

格式为:$("*")。这是jQuery中多于CSS的。

通过它可以操作所有标签,在数据库中:“*”也代表了查询所有元素的意思。

二、层级选择器

层级选择器一共有4中,逐一说明:

①层级选择器:ancestor descendant

格式为:$("body div"),选择器之间用空格隔开。

ancestor是祖先,descendant是子孙,这个的意思就是选择body标签中的所有div标签。

②层级选择器:parent > child

格式为:$("body>div"),选择器之间用大于号隔开。

parent是父母,child是子女,这个的意思就是body标签中的下一级div标签。

  • 祖先是有很多代的,对应多级子标签。
  • 父母只有一代,对应下一级子标签。

③层级选择器:prev+next

格式为:$("#DivId01+div"),选择器之间用加号隔开。

prev:上一个,id选择器,id为DivId01。

next:下一个。所以是id为DivId01的下一个Div标签。

④层级选择器:prev~siblings

格式为:$("#DivId01~div"),选择器之间用~隔开。

prev:上一个,规则同上。

siblings:兄弟姐妹的意思,但是在这里只是弟弟妹妹。

也就是id为DivId01的后面所有Div标签。

值得注意的是:这两种都是同级之间操作的,不涉及到它们的子标签。

三、属性选择器

在标签中是有各种各样的属性的,比如style属性,name属性,value属性,title属性…等等。

可以通过属性查找到对应的标签。

attribute,属性的意思,可简写为attr。因为太多了,就没有选全。

①属性选择器:[attribute]

格式为:$("div[name]"),这里也就是div标签里的name属性。

②属性选择器:[attribute=value]

格式为:$("div[name='twoName']"),这里也就是div标签里的name属性值为“twoName”。

③属性选择器:[attribute!=value]

格式为:$("div[name!='twoName']"),除去name值为twoName以外的所有div标签。

④属性选择器:[attribute^=value]

格式为:$("div[name^='t']"),这里也就是div标签里的name属性值以“t”开头。

⑤属性选择器:[attribute$=value]

格式为:("div[name

⑥属性选择器:[attribute*=value]

格式为:$("div[name*='four']"),这里也就是div标签里的name属性值包含‘four’。

⑦属性选择器:[attrSel1][attrSel2][attrSelN]

也就是多个属性选择器相结合。

格式为:$("div[id='oneId'][name*='twoName']"),前面是id为“oneId”的标签,后面是name属性值包含name.。

四、基本过滤选择器

一共太多种了,说几种常见的:

HTML中有很多个div标签,其每个标签对应一个索引,从0索引位开始。

①过滤选择器::first

格式:$("div:first")。也就是指0索引位的div标签。

②过滤选择器::last

格式:$("div:last")。也就是指最后一个索引位的div标签。

③过滤选择器::not

格式:$("div:not(#oneId)")。

#oneId即指id为oneId的标签,前面有一个not就是表示除了该标签外其它的所有标签。

④过滤选择器::even

格式:$("div:even")。也就是指偶数索引位的div标签。

⑤过滤选择器::odd

格式:$("div:odd")。也就是指奇数索引位的div标签。

⑥过滤选择器::gt(索引位)

格式:$("div:gt(2)")。也就是指索引位大于2的div标签。

⑦过滤选择器::lt(索引位)

格式:$("div:lt(2)")。也就是指索引位小于2的div标签。

没有写全,还有:

  • :eq(索引位),等于对应索引位的标签。
  • :header,$(":header")选取文档中所有的标题(也就是h标签)
  • :animated,$(":animated")选取文档中执行动画的元素。

五、表单对象属性选择器

表单标签,前段时间专门学习过,其基本属性就不赘述了。

学几个表单对象属性,首先看一个页面:

需要达到如下效果:

①可用元素

点击该按钮,能选取可用元素,同时给文本框赋值。

②不可用元素

要求规则同①。

③多选框选中元素

点击该按钮,能选取多选框中已经被选中的元素,同时将选中的值在控制台上打印。

④下拉框选中元素

点击该按钮,能选取下拉框中已经被选中的元素,同时将选中的值在控制台上打印。

如何达到这些要求?就需要对应的选择器了:

①表单对象属性选择器:可用元素

格式:$("input:enabled")。即选中所有可用的input标签。

②表单对象属性选择器:不可用元素

格式:$("input:disabled")。即选中所有不可用的input标签。

其中上述两种选择器中:

使用val方法可以给对应元素赋值。

例子都是文本框,其实按钮也是可以的。

③表单对象属性选择器:选中元素

格式:$("input:checked")。即匹配所有被选中的元素 。

例子中是多选框,其实单选框,下拉框也都可以使用该选择器。

  • 使用each()方法可以遍历多个元素。
  • 使用attr("属性名")也可以获取对应属性值。

④表单对象属性选择器:下拉框选中元素

格式:$("select option:selected")。即匹配所有被选中的元素 。

例子中是多选框,其实单选框,下拉框也都可以使用该选择器。

  • 使用each()方法可以遍历多个元素。
  • 使用attr("属性名")也可以获取对应属性值。

六、总结

选择器之间是可以叠加使用的。比如层级选择器中可以包含基本选择器。

jQuery中的选择器实在是太多了,通过网络查询到jQuery对应里的选择器:

遇到不会的就可以查看下文档,讲解也很详细,还有案例分析。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】78:CSS的学习

    CSS,全称是Cascading Style Sheet,翻译过来就是层叠样式表。

    刘小爱
  • 【JavaWeb】86:jQuery的属性、文档、动画以及事件

    昨天学习了jQuery中的选择器,有一些还没有学完全,只能说等到以后遇到了再查文档了。

    刘小爱
  • 【JavaWeb】75:写一个登录案例

    关于数据库这一块暂时也告一段落了,其中后续会做一个思维导图的总结。想把数据库完全学清楚,几天的学习肯定是远远不够的。毕竟要知道数据库在大学可是一门课,要花一整学...

    刘小爱
  • CSS高级选择器

    小小咸鱼YwY
  • 《RUN!MOUSE!》Scratch声控游戏案例

    昨天晚上突然想到如果用声音控制一款游戏会是什么感觉。虽然手机APP已经有了声音控制火柴人跳高的先例,但想想通过积木编程Scratch实现更加丰富的效果也是一件让...

    一石匠人
  • 闲扯设备厂商的转型

    (昨天看球,再加上自己一直在思考一个问题,根本停不下来,所以今天暂停更新「途客们的旅行梦」) 周三Juniper新CEO Shaygan访问sale offic...

    tyrchen
  • 小程序 rich-text 不支持 section 标签的情况

    泥豆芽儿 MT
  • AI 时代,如何革新交警执法业务

    据不完全统计,2018 年底, 全国机动车保有量超过3.27 亿辆, 机动车驾驶人达4.09 亿, 车多、交通拥堵已成为目前我国城市的显著特征,虽然许多城市都在...

    AI掘金志
  • SpringBoot开发案例之打造十万博文Web篇

    通过 Python 爬取十万博文之后,最重要的是要让互联网用户访问到,那么如何做呢?

    小柒2012
  • 卷积神经网络的经典结构(二)

    正文部分系《解析卷积神经网络——深度学习实践手册》基础理论篇部分,本次将详细介绍卷积神经网络中经典网络模型案例分析,包括Alex-Net、VGG-Nets、Ne...

    用户1386409

扫码关注云+社区

领取腾讯云代金券