首页 > 其他分享 >$ jquery 选择器的使用

$ jquery 选择器的使用

时间:2023-08-16 17:14:19浏览次数:42  
标签:jquery 所有 元素 选取 使用 test div 选择器

一、$()函数【jquery()】用途

  • 包装DOM元素,以便于操作(jquery选择器
  • 作为几个通用的实用工具函数的命名空间前缀,例如,删除字符串前后空格的实用函数,其调用方法如:$.trim(str) ;
  • 文档就绪处理程序:包装文档实例,然后调用ready()方法,当文档为操作准备就绪的时候就执行该函数
  • 创建DOM元素,通过给 $()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素,例如$("

    Hello word

    ")

二、jquery选择器

1.基本选择器

 1、ID选择器            例:$(#test) 选取id为test的元素
 2、class选择器         例:$(“.test”) 选取所有class为test的元素
 3、元素标签选择器    	 例:$(“p”)选取所有的\<p>元素。
 4、通配符选择器         例:$(“*”)选取所有的元素。
 5、群组选择器          例:$(“p a.test”)选取在p元素内 拥有class为test的a元素。

2.层次选择器

层次选择器适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素。

1、后代元素选择器    例:  $(“div span”)选取\<div>里的所有的\<span>元素。
2、子元素选择器       例:$(“div>span”)选取\<div>元素下元素名是\<span>的子元素。
3、相邻元素选择器    例:$(“.one+div”)选取class为one的下一个\<div>兄弟元素。
4、兄弟元素选择器    例:$(“#two~div”)选取Id为two的元素后面的所有\<div>兄弟元素。

3.过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。

1、基本过滤选择器:

1、:first     选取第1个元素        例如:$(“div:first”)选取所有\<div>元素中第1个\<div>元素。
2、:last      选取最后一个元素    例如:$(“div:last”)选取所有\<div>元素中最后1个\<div>元素。
3、:not(selector)  去除所有与给定选择器 匹配的元素      例如:$(“input:not(.myClass)”)选取class不是myClass的\<input>元素。
4、:even    选取索引(从0开始)是偶数 的所有元素   如:$(“input:even”)选取索引是偶数的\<input>元素。
5、:odd    选取索引(从0开始)是奇数 的所有元素     如:$(“input:odd”)选取索引是奇数的<input>元素。
6、:eq(index)   选取索引(从0开始)等于 index的元素    如:$(“input:eq(1)”)选取索引等于1的<input>元素。
7、:gt(index)   选取索引(从0开始)大于 index的元素     如:$(“input:gt(1)”)选取索引大于1的\<input>元素。
8、:lt(index)     选取索引(从0开始)小于 index的元素    如:$(“input:lt(1)”)选取索引小于1的\<input>元素。(不包括1)
9、:header     选取所有的标题元素,即 \<h1>到\<h6>   如:$(“:header”)选取网页中所有的\<h1>,\<h2>,\<h3>...
10、:animated      选取当前正在执行动画的所有元素   如:$(“div: animated”)选取正在执行动画的\<div>元素。

2、内容过滤选择器

1、:contains(text)     $("div:contains('test')")选取含有文本内容为test的\<div>元素
2、:empty      选取不包含子元素或文本的空元素   例:$("div:empty")选取不包含子元素或文本的空\<div>元素
3、:has(selector)  选取含有给定选择器 匹配的元素的元素  例:$("div:has(.myClass)")选取含有class为 myClass的元素的\<div>元素
4、:parent   选取含有子元素或文本的元素  例:$("div:parent")选取含有子元素或文本的\<div>元素

3、可见性过滤选择器

1、:hidden  选取所有不可见的元素   例如:$("div:hidden")选取所有不可见的\<div>元素
2、:visible   选取所有不可见的元素  例如:$("div:visible")选取所有可见的\<div>元素

4、属性过滤选择器

1、[attribute]  选取拥有此属性的元素   例如:$("div[id]")选取拥有属性id的元素
2、[attribute=value]   例如:$("div[title=test]")选取属性 title 为test的\<div>元素
3、[attribute!=value]  例如: 选取属性的值不等于value的元素
4、[attribute^=value]  选取属性的值以value开始的元素   例如:$("div[title^=test]")选取属性 title 以 test 开始的\<div>元素
5、[attribute$=value]    选取属性的值以value结束的元素 例如: $("div[title$=test]")选取属性 title 以 test 结束的\<div>元素
6、[attribute*=value]   选取属性的值含有value的元素   例如:$("div[title*=test]")选取属性 title 含 有 test 的\<div>元素
7、[selector1][selector2]...[selectorN]  选取匹配以上所有属性 选择器的元素  例如:$("div[id][title*=test]")选取拥有属性id, 且属性 title 含有 test 的\<div>元素

5、子元素过滤选择器

1、:nth-child(index/  even/odd/equation)  选取每个父元素下的第index(索引值为奇数/  索引值为偶数/索引值等于某个表达式)个子元  素,index从1开始
例如:$("div:nth-child(1)")选取每个\<div>中第一个子元素
2、:first-child   选取每个父元素下的第1个子元素   例如:$("div :first-child")选取每个\<div>下第一个子元素
3、:last-child   选取每个父元素下的最后1个子元素  例如:$("div :last-child")选取每个\<div>下最后一个子元素
4、:only-child   选取只有唯一子元素的元素的子元素   例如:$("div :only-child")选择只有一个子元素的\<div>元素

6、表单对象属性过滤选择器

1、:enabled   选取所有可用元素  例如:$("body:enabled")选取页面内所有可用元素 
2、:disabled  选取所有不可用元素  例如:$("body:disabled")选取页面内所有不可用元素
3、:checked   选取所有被选中的元素(单选框、复选框)  例如:$("input:checked")选取所有被选中的<input>元素
4、:selected  选取所有被选中的选项元素(下拉列表)   例如:$("select:selected")选取所有被选中的选项元素

4.表单选择器

1、:input            $(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。
2、:text             $(“:text”)选取所有的单行文本框。
3、:password         $(“: password”)选取所有的密码框。
4、:radio            $(“: radio”)选取所有的单选框。
5、:checkbox         $(“:checkbox”)选取所有的复选框。
6、:submit           $(“: submit”)选取所有的提交按钮。
7、:image            $(“: image”)选取所有的图像按钮。
8、:reset            $(“: reset”)选取所有的重置按钮。
9、:button           $(“: button”)选取所有的按钮。
10、:file            $(“: file”)选取所有的上传域。
11、:hidden          $(“: hidden”)选取所有不可见元素。

标签:jquery,所有,元素,选取,使用,test,div,选择器
From: https://www.cnblogs.com/bugDiDiDi/p/17635599.html

相关文章

  • 使用hutool给excel单元格标黄和添加批注
    packagecom.yc.cloud.excel.util;importcn.hutool.poi.excel.ExcelWriter;importlombok.extern.slf4j.Slf4j;importorg.apache.poi.hssf.usermodel.HSSFClientAnchor;importorg.apache.poi.hssf.usermodel.HSSFRichTextString;importorg.apache.poi.ss.usermodel.......
  • 【8月摸鱼计划】cw32f0有浮点计算单元吗?怎么使用矩阵求逆?
    cw32f0是一款基于中国开源项目的芯片,它并不具备浮点计算单元。因此,无法直接进行浮点数运算。然而,您仍然可以通过一些方法来近似实现浮点数的计算。一种常见的方法是使用定点数表示浮点数,并通过手动实现相应的运算算法来达到类似的效果。这需要根据具体的应用场景设计相应的固定点......
  • 记录一个解决方法- 使用editableProTable表头筛选,无法重置,位置偏移
    问题如图:切换原始告警和收敛告警以后,由于二者用到同一个table,切换之后再点击筛选条件,则筛选框的位置发生偏移解决办法:给table一个key属性,改变table中的数据或者列时,去改变这个唯一的key,key值改变,table就可以重新渲染了!......
  • 为什么MySQL innodb的数据达到亿级别,使用‘select count(*) ’将会特别慢?
    当表的数据达到亿级别时,使用SELECTCOUNT(*)FROMtable会变得特别慢,主要是因为以下几个原因:全表扫描:SELECTCOUNT(*)FROMtable通常会导致全表扫描,除非有一些优化手段被应用(例如使用覆盖索引)。当你执行这样的查询,数据库实际上需要读取表中的每一行以计算总......
  • Autodesk Navisworks Manage 2024 (建筑工程项目模拟和协作软件)中文永久使用
    AutodeskNavisworksManage2024是一款强大的协同项目管理软件,旨在帮助建筑、工程和施工行业的专业人士更高效地进行项目协调和冲突检测。下面将详细介绍NavisworksManage2024的功能和特点。点击获取AutodeskNavisworksManage2024 模拟和可视化:NavisworksManage......
  • windows安装使用influxdb
    一、InfluxDB下载InfluxDB的windows(64-bit)下载地址为:https://dl.influxdata.com/influxdb/releases/influxdb-1.7.7_windows_amd64.zip其中,influxd.exe为数据库服务程序,influx.exe为客户端程序,influxdb.conf配置文件;打开influxdb.conf配置文件修改三个路径,如果使用默认路径无需......
  • jquery.ui的bxslider控件在IE下使用的问题
    使用了 bxslider控件进行网页的切换。发现在firefox切换得很稳定,按照设置的切换时间进行切换。但是换成IE浏览器发现,却不是那么回事了。包括IE8和IE10.明明设置了30秒有的时候10分钟都不切换,本以为切换失灵了,结果又在第11分钟切换了。但是刷新页面再来一次,可能又变成5分钟后切换......
  • 【备忘】移动大王卡使用详细
    定向数据流量移动大王卡包含的定向流量,可在优酷视频、腾讯视频、爱奇艺、芒果TV、pptv、西瓜视频APP、咪咕系列APP、头条(含抖音)系列APP、快手、网易云音乐、哔哩哔哩、王者荣耀、阿里系列(包括手机天猫、支付宝、钉钉、口碑、闲鱼、聚划算、蚂蚁财富、手机淘宝(看直播免流,开直播不......
  • Unity UGUI的InputField(输入框)组件的介绍及使用
    UGUI的InputField(输入框)组件的介绍及使用1.什么是UGUI的InputField组件?UGUI的InputField组件是Unity中的一个用户界面组件,用于接收用户的输入。它可以用于创建文本输入框、密码输入框等功能。2.UGUI的InputField组件的工作原理UGUI的InputField组件通过监听用户的输入事件,用......
  • API技术的使用场景
    ​互联网的发展和普及,API技术也变得越来越重要。API是应用程序接口,它是一种连接不同应用程序或系统之间数据交换和通信的方式。API技术不仅提高了不同应用程序之间的互操作性,还加速了应用程序的开发和部署。本文将探讨API技术在不同场景下的应用。一、社交媒体社交媒体是API技......