首页 web前端 js教程 关于jQuery常用选择器详解

关于jQuery常用选择器详解

Jan 01, 2018 am 10:25 AM
jquery 详解 选择器

本文主要为大家详细介绍了jQuery常用选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下

1、jQuery:(使用jQuery一定标明我们使用的版本号)

  它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题)

2、jQuery中提供的方法

选择器

通过传递对应规则的内容(ID、标签名、样式类名...),获取到页面中指定的元素/元素集合 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id=&#39;p1&#39;>
    <p>
      <span></span>
      <span></span>
      <span></span>
    </p>
    <p></p>
    <p id=&#39;p3&#39;></p>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </p>
  

  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var op = document.getElementById(&#39;p1&#39;)
    op.clientWidth
    op.getAttribute
    //jq获取到的结果是一个jQuery对象,可以使用jQuery里面提供的属性和方法,但是不能直接的使用浏览器内置的属性和方法
    var $op = jQuery("#p1")//$("#p1")
    $op.innerWidth();
    $op.attr

    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(op)
      //2)、jQuery转化成原生:直接通过索引获取对应的元素对象即可
      $op[0]
      $op.get(0)//<==>$op[0]都是通过索引来获取指定位置的元素(JS原生对象)

    //更多的jQuery选择器
    $(&#39;#p1&#39;)
    $(&#39;p&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#p1,p,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起,最后一起获取到
    $(&#39;#p1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#p1>li&#39;)//在子级中进行查找
    $(&#39;#p3+&#39;)//获取它的下一个弟弟
    $(&#39;#p3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#p3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#p3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#p1>p:not(.w100)&#39;)//#p1下的所有子集p样式类名不包含w100的
    $(&#39;#p1>p:eq(0)&#39;)//通过索引获取到集合中的某一个,但是获取到的结果依然是一个jQuery对象(而get方法也是通过索引获取,但是获取到的是一个JS原生对象)
    $(&#39;#p1>p:gt(1)&#39;)//大于索引1的(不包含索引1的)
    $(&#39;#p1>p:lt(1)&#39;)//小于索引1的(不包含索引1的)
    $(&#39;#p1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#p1 p:has(ul)&#39;)//在所有的p中包含ul的
    $(&#39;#p1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#p1>*:eq(1)&#39;)//获取所有的子元素的第二个(索引为1)
  </script>
</body>
</html>
登录后复制

相关推荐:

详解jQuery选择器中的特殊符号如何处理

jQuery UI 日期选择器Datepicker详解

实例详解jQuery表单对象属性筛选选择器

以上是关于jQuery常用选择器详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Win11管理员权限获取详解 Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Windows操作系统是全球最流行的操作系统之一,其新版本Win11备受瞩目。在Win11系统中,管理员权限的获取是一个重要的操作,管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限,以及如何有效地管理权限。在Win11系统中,管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

Oracle SQL中的除法运算详解 Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法运算详解在OracleSQL中,除法运算是一种常见且重要的数学运算操作,用于计算两个数相除的结果。除法在数据库查询中经常用到,因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识,并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

PHP模运算符的作用及用法详解 PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP中的模运算符(%)是用来获取两个数值相除的余数的。在本文中,我们将详细讨论模运算符的作用及用法,并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中,当我们将一个整数除以另一个整数时,会得到一个商和一个余数。例如,当我们将10除以3时,商为3,余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中,使用%符号来表示模

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

如何判断jQuery元素是否具有特定属性? 如何判断jQuery元素是否具有特定属性? Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性?在使用jQuery操作DOM元素时,经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下,我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性,并附上具体的代码示例。方法一:使用attr()方法和typeof操作符//判断元素是否具有特定属

了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库,被广泛用于处理网页中的DOM操作和事件处理。在jQuery中,eq()方法是用来选择指定索引位置的元素的方法,具体使用方法和应用场景如下。在jQuery中,eq()方法选择指定索引位置的元素。索引位置从0开始计数,即第一个元素的索引是0,第二个元素的索引是1,依此类推。eq()方法的语法如下:$("s

See all articles