jquery的选择器

author author     2022-08-04     666

关键词:

页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。

jQuery内部很多都是使用JavaScript函数来获取元素,几乎支持全部的css1-css3选择器的写法,我就从最简单的说起。

ID选择器:$("#id"),要注意的是,id是唯一的,每个id值在一个页面中只能使用一次,如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。

类选择器:$( ".class" ),类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选。

元素选择器:$( "element" ),搜索指定元素标签名的所有节点,是一个合集的操作。

全选择器:$("*")。

层级选择器:包括:

      子选择器:$("parent>child")--选择指定“parent”元素中指定的直接子元素;

      后代选择器:$("parent child")--选择给定的祖先元素的所有后代元素,一个元素的后代可能是该元素的一个儿子,孙子等;

      相邻元素选择器:$("prev+next"),所有进阶在prev元素后的next元素;

  一般兄弟选择器:$("pre^siblings"),匹配prev元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤选择器。

  匹配第一个元素:$(":first")

  匹配最后一个元素:$(":last")

  除了匹配元素之外:$(":not(selector)")

  根据索引值匹配:$(":eq(index)")

  选择索引大于索引值的元素:$(":gt(index)")

  选择索引小于索引值的元素:$(":lt(index)")

  选择索引值为偶数的元素:$(":even")

  选择索引值为奇数的元素:$(":odd")

  选择所有标题元素:$(":header")

  选择指定语言的所有元素:$(":lang(language)")

  选择该文档的根元素:$(":root")

  选择所有正在执行动画效果的元素:$(":animated")

  选择所有包含指定文本的元素:$(":contains(text)")

  选择所有含有子元素或者文本的元素:$(":parent")

  选择所有没有子元素的元素:$(":empty")

  选择子元素中至少包含指定选择器的元素:$(":has(selector)")

  选择所有显示的元素:$(":visible")

  选择所有隐藏的元素:$(":hidden")

  一些属性筛选选择器:

  技术分享

一些子元素筛选选择器:

选择所有父级元素下的第一个子元素:$(":first-child")

选择所有父级元素下的最后一个子元素:$(":last-child")

选择所有父级元素下的唯一一个子元素:$(":only-child")

选择所有父级元素下的第n个子元素:$(":nth-child")

选择父级元素的第n个子元素:$(":nth-last-chid")

表单元素选择器:

技术分享

表单对象属性筛选选择器:

技术分享

特殊选择器this:

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
以上就是jQuery的全部选择器,如有遗漏,敬请指出。谢谢。

 

jquery选择器

选择器,用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。学会了CSS的选择器就会jQuery的选择器了。jQuery选择器是学习jQuery的基础 DOM如何获取页面中的元素对象? document.getElementById(‘id‘); document.getElementsB... 查看详情

javascript之jquery-2jquery选择器(jquery选择器基本选择器层次选择器过滤选择器表单选择器)

一、jQuery选择器 jQuery选择器简介 -jQuery选择器类似于CSS选择(定位元素,施加样式),能够实现定位元素,施加行为 -使用jQuery选择器能够将内容与行为分离 -学会使用选择器是学习jQuery的基础jQuery选择器的优势 -... 查看详情

jquery常用的选择器

jquery用选择器来得到jquery对象,进而进行一些操作。一.基本选择器1.id选择器2.类选择器3.元素名选择器4.并集选择器5.交集选择器二.层级选择器父元素下的某个子元素或者某些子元素: 三.过滤选择器 查看详情

jquery的选择器

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。本文配合... 查看详情

jquery概述及其选择器(代码片段)

目录jQuery的概述jQuery的使用方式jQuery的选择器基本选择器基本过滤选择器属性过滤选择器内容过滤选择器可见性过滤选择器表单对象属性过滤选择器表单选择器子元素选择器层次选择器jQuery的概述jQuery:是JavaScript的一个函数... 查看详情

第二章jquery选择器

第二章jQuery选择器一.jQuery选择器概述1.什么是jQuery选择器jQuery选择器类似于CSS选择器,用来选取网页中的元素。2.jQuery选择器的优势简洁的写法$()函数在很多javaScript库中都被当成一个选择器函数来使用,在jQuery中也是如此。$(“#... 查看详情

jquery的选择器

     jQuery是JavaScript的一个库,它是一个轻量型的语言。选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法... 查看详情

jquery——jquery选择器(代码片段)

##jQuery选择器先看看w3cschool的对jQuery的概述:jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,... 查看详情

jquery选择器

jQuery选择器1:基本选择器Id选择器:根据给定的ID匹配一个元素。$("#div1");class选择器:根据给定的类匹配元素。$(".div2");元素选择器:根据给定的元素名匹配所有元素。$("div");通配选择器:匹配所有元素。$("*");并集选择器:$("div... 查看详情

jquery选择器(代码片段)

jQuery选择器1jQuery概述2jQuery选择器概述3基本选择器4层次选择器5过滤选择器5.1基本过滤选择器5.2内容过滤选择器5.3可见性过滤选择器5.4属性过滤选择器5.5子元素过滤选择器5.6表单对象属性过滤选择器6表单选择器1jQuery概述jQuery是... 查看详情

jquery常用的选择器有哪些?

jquery 选择器、 css3 选择器各种各样的选择器,作为非常灵活的 jquery 选择器到底如何使用呢?本文和大家分享的就是jquery 常用选择器种类及其原理相关内容,希望对大家 学习jquery有所帮助。 一、对于... 查看详情

优化jquery选择器

优化jQuery选择器选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。jQuery扩展如果可能的话,避免使用jQuery... 查看详情

jquery的一些选择器

jQuery选择器允许对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,它还有一些自定义的选择器。jQuery中所有选择器都以美... 查看详情

jquery中的选择器

jquery中的选择器用于获取文档中的对象。通常的有id选择器,类选择器,element选择器等。其选择器部分与css中的选择器大体上一样,在细微处有点区别。匹配多个元素1,id选择器,累选择器,element选择器,*选择器(4个)//html代... 查看详情

jquery:自学笔记——jquery选择器

jQuery:自学笔记(2)——jQuery选择器基本选择器  说明     jQuery的基本选择器与CSS的选择器相似:      实例    标签选择器    //使用标签选择器更改字体大小      $(div).css(‘font-size‘,‘18px‘) ... 查看详情

jquery选择器

什么是jQuery选择器?能够选择使用网页上的元素,跟css选择器类似jQuery选择器的优势1.相比于JavaScript节点获取元素,更容易控制元素2.内部添加了特有的选择器。如奇数选择器,偶数选择器3.更简单,更容易理解基本选择器标签id... 查看详情

jquery学习一(选择器)

 一直在学习web前端的知识,学习jQuey也有一段时间了,想总结一下。这一章先来学习jQuery选择器的知识。 一、jQuery选择器的介绍     jQuery中的选择器完全继承了css的风格。利用jQuery选择器,可以非常快速... 查看详情

锋利的jquery学习笔记之jquery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器--->一、CSS选择器常见的CSS选择器有以下几种:选择器语法描述示例标签选择器E{CSS规则}以文档元素为选择符td{font-size:10px;}a{tetx-decoration:none;}ID选择器#ID{CSS规则}以文档元素的唯... 查看详情