位置: 编程技术 - 正文

jQuery中的基本选择器用法学习教程(jquery中的基本选择器有哪些)

编辑:rootadmin

推荐整理分享jQuery中的基本选择器用法学习教程(jquery中的基本选择器有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery的基本选择器,jquery 选择,jquery的基本选择器,jquery的基本选择器,jquery的基本选择器有哪些,jquery的基本选择器有哪些,jquery中的基本选择器有哪些,jquery中的基本选择器,内容如对您有帮助,希望把文章链接给更多的朋友!

一.简单选择器在使用jQuery 选择器时,必须使用“$()”函数来包装CSS 规则。而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象。随后,就可以对这个获取到的DOM 节点进行行为操作了。

在jQuery 选择器里,我们使用如下的方式获取同样的结果:

那么除了ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class): 选择器 CSS 模式 jQuery 模式 描述 元素名 div {} $('div') 获取所有div 元素的DOM 对象 ID #box {} $('#box') 获取一个ID 为box 元素的DOM 对象 类(class) .box{} $('.box') 获取所有class 为box 的所有DOM 对象

为了证明ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。

同理,也可以直接使用jQuery 核心属性来操作:

警告:有个问题特别要注意,ID 在页面只允许出现一次,一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次,并且在CSS 使用样式,那么这三个元素还会执行效果。但如果,你想在jQuery 这么去做,那么就会遇到失明的问题。所以,开发者必须养成良好的遵守习惯,在一个页面仅使用一个ID。

jQuery 选择器的写法与CSS 选择器十分类似,只不过功能不同。CSS 找到元素后添加的是单一的样式,而jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而jQuery 选择器在添加CSS 样式的时候却不必为此烦恼。

jQuery 选择器支持CSS1、CSS2 的全部规则,支持CSS3 部分实用的规则,同时它还有少量独有的规则。所以,对于已经掌握CSS 的开发人员,学习jQuery 选择器几乎是零成本。而jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

因为jQuery 内部进行了判断,而原生的DOM 节点获取方法并没有进行判断,所以导致了一个错误,原生方法可以这么判断解决这个问题:

那么对于缺失不存在的元素,使用jQuery 调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery 对象,可能会导致不存在元素存在与否,都会返回true。

除了这种方式之外,还可以用转换为DOM 对象的方式来判断,例如:

二.进阶选择器在简单选择器中,了解了最基本的三种选择器:元素标签名、ID 和类(class)。那么在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素。 选择器 CSS 模式 jQuery 模式 描述 群组选择器 span,em,.box {} $('span,em,.box') 获取多个选择器的DOM 对象 后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象 通配选择器 * {} $('*') 获取所有元素标签的DOM 对象

目前介绍的六种选择器,在实际应用中,可以灵活的搭配,使得选择器更加的精准和快速:

警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$('*'),这种使用方法效率很低,影响性能,建议竟可能少用。还有一种选择器,可以在ID 和类(class)中指明元素前缀,比如:

jQuery中的基本选择器用法学习教程(jquery中的基本选择器有哪些)

类(class)有一个特殊的模式,就是同一个DOM 节点可以声明多个类(class)。那么对于这种格式,我们有多class 选择器可以使用,但要注意和class 群组选择器的区别。

多class 选择器是必须一个DOM 节点同时有多个class,用这多个class 进行精确限定。而群组class 选择器,只不过是多个class 进行选择而已。

警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery 内部的选择器引擎处理字符串的时间就越长。比如:

三.高级选择器在前面六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有DOM 节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等。在早期CSS 的使用上,由于IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着jQuery 兼容,这些选择器的使用频率也越来越高。 层次选择器 选择器 CSS 模式 jQuery 模式 描述 后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象 子选择器 div > p {} $('div p') 只获取子类节点的多个DOM 对象 next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM 对象 nextAll 选择器 div ~ p {} $('div ~ p') 获取某节点后面所有同级DOM 对象 在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持IE6 的,而jQuery却是兼容IE6 的。

jQuery 为后代选择器提供了一个等价find()方法

jQuery 为子选择器提供了一个等价children()方法:

jQuery 为next 选择器提供了一个等价的方法next():

jQuery 为nextAll 选择器提供了一个等价的方法nextAll():

层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到,孙子节点和重孙子节点都无法选择到。next 和nextAll 选择器,必须是同一个层次的后一个和后N 个,不在同一个层次就无法选取到了。在find()、next()、nextAll()和children()这四个方法中,如果不传递参数,就相当于传递了“*”,即任何节点,不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

为了补充高级选择器的这三种模式,jQuery 还提供了更加丰富的方法来选择元素:

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果,及上下相邻的所有元素进行选定:

警告:切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式,因为prevAll('p')返回的是已经上方所有指定元素,然后再nextAll('p')选定下方所有指定元素,这样必然出现错误。理论上来讲,jQuery 提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同,高级选择器是通过解析字符串来获取节点对象,而jQuery 提供的方法一般都是单个选择器,是可以直接获取的。但这种快慢的差异,对于客户端脚本来说没有太大的实用性,并且速度的差异还要取决了浏览器和选择的元素内容。比如,在IE6/7 不支持querySelectorAll()方法,则会使用“Sizzle”引擎,速度就会慢,而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。选择器快慢分析:

综上所属,最快的是find()方法,最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值,那么jQuery 就对其变量进行缓存,那么速度会进一步提高。

注意:使用哪种方案呢?其实,使用哪种都差不多。这里,推荐使用jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快,并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next 和nextAll 更加语义化,更加清晰,jQuery 的方法更加丰富,提供了相对的prev 和prevAll。毕竟jQuery 是编程语言,需要能够灵活的拆分和组合选择器,而使用CSS 模式过于死板。所以,如果jQuery 提供了独立的方法来代替某些选择器的功能,推荐优先使用独立的方法。 属性选择器 CSS 模式 jQuery 模式 描述 a[title] $('a[title]') 获取具有这个属性的DOM 对象 a[title=num1] $('a[title=num1]') 获取具有这个属性=这个属性值的DOM 对 象 a[title^=num] $('a[title^=num]') 获取具有这个属性且开头属性值匹配的 DOM 对象 a[title|=num] $('a[title|=num]') 获取具有这个属性且等于属性值或开头属 性值匹配后面跟一个“-”号的DOM 对象 a[title$=num] $('a[title$=num]') 获取具有这个属性且结尾属性值匹配的 DOM 对象 a[title!=num] $('a[title!=num]') 获取具有这个属性且不等于属性值的 DOM 对象 a[title~=num] $('a[title~=num]') 获取具有这个属性且属性值是以一个空格 分割的列表,其中包含属性值的DOM 对 象 a[title*=num] $('a[title*=num]') 获取具有这个属性且属性值含有一个指定 字串的DOM 对象 a[bbb][title=num1] $('a[bbb][title=num1]') 获取具有这个属性且属性值匹配的DOM 对象 属性选择器也不支持IE6,所以在CSS 界如果要兼容低版本,那么也是非主流。但jQuery却不必考虑这个问题。

jQuery遍历DOM元素与节点方法详解 本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考,具体如下:一、向上遍历--祖先元素①$(selector).parent([filter]):返回selector匹配元素

jquery.cookie.js实现用户登录保存密码功能的方法 本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法。分享给大家供大家参考,具体如下:需要导入的js有jquery.js和jquery.cookie.jsscripttype="text/ja

jQuery通过写入cookie实现更换网页背景的方法 本文实例讲述了jQuery通过写入cookie实现更换网页背景的方法。分享给大家供大家参考,具体如下:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

标签: jquery中的基本选择器有哪些

本文链接地址:https://www.jiuchutong.com/biancheng/384935.html 转载请保留说明!

上一篇:jQuery遍历DOM节点操作之filter()方法详解(jquery中遍历指定的对象和数组是哪个方法)

下一篇:jQuery遍历DOM元素与节点方法详解(jquery遍历div子元素)

  • 进口洋酒能存放多少年
  • 增值税分录及账务处理如何做?
  • 商会费用会计分录
  • 债权人豁免债务的账务
  • 高速公路上的机电一体化有哪些
  • 委托代征税务
  • 房地产开发企业预缴增值税
  • 旧设备用于投资是否应按视同销售处理
  • 固定资产按什么价值入账
  • 个税生产经营申报流程
  • 应纳出口关税怎么算
  • 收到某公司发票会计分录
  • 外币账户的银行信息在哪查询
  • 个人所得税退税多久到账
  • 企业法人个人帐户是什么
  • 会务费 发票
  • 铲车费属于劳务费吗
  • 我是小规模企业客户要求开专票不开投诉
  • 企业预缴所得税
  • 对外投资公司经营范围
  • 来料加工的生产企业
  • 资产转让税费哪方承担
  • 基地建设费归哪个会计科目
  • 废旧物资回收企业税收管理
  • 电脑怎么搜索文档
  • 休眠文件大小设置
  • 买点肥料
  • 进项税税额抵扣
  • 工程在建期间土地税滞纳金
  • 5000以下的固定资产当月一次性扣除怎么申报
  • win11安卓子系统教程
  • 在windows 7中
  • linux系统中如何查看日志
  • php调用sql
  • linux的ps命令用法
  • 资金拆借需防范哪些风险
  • 外购货物应抵扣的进项税额
  • 如何使用微信公交付款
  • 建筑保温材料施工工艺
  • 图卷积神经网络原理
  • 资本金什么时候可以退回
  • 现金流量的折现值
  • 研发费用的范围和加计扣除比例
  • 未开票要交增值税吗
  • 建筑劳务公司适应什么工程
  • mysql查询缓慢
  • 小规模开工程款几个点
  • 完税证明能作为抵扣凭证吗
  • SQL Server 2005与sql 2000之间的数据转换方法
  • 个人开咨询费 有哪些税
  • 以前年度损益调整在利润表中怎么填
  • 上一年度主营业务成本多计提了
  • 装修费摊销会计准则
  • 公司突然改变工资结构
  • 支付宝如何打印付款凭证
  • 内部无形资产交什么税
  • 设备的验证服务包括
  • ubuntu的系统设置在哪里
  • WIN8系统安装教程
  • win7防病毒设置在哪
  • win8.1系统安装
  • ctfmon.exe成功怎么解决
  • win10激活界面打不开
  • win8程序和功能在哪
  • 隐藏网络怎么连接电脑连不上
  • 单线程语言有哪些
  • linux中的shell命令
  • python3利用smtplib通过qq邮箱发送邮件方法示例
  • python不能用
  • 模拟新浪微博用户注册程序设计
  • nodejs实现文件下载
  • androidui框架
  • redis基础教程
  • JQuery绑定事件的函数是
  • android基础教程第三版电子版
  • 水电费加1
  • 东城国税局局长
  • 税务局冬季作息时间
  • 2018年小微企业所得税优惠政策
  • 提高税务管理水平,降低税务风险
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设