jquery选择器大于等于_从零开始学前端 30. JS选择器
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正
由于微信公众号对英文的排版十分困难 以获得更好的阅读体验类似于 CSS选择器,如果我们想要使用 JS 来对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,必须先通过选择器来获得该元素,然后在对它进行相应的操作,选择器的种类有很多,但它们的目的是一样的,那就是把想要的元素选中,需要我们根据不同的情况选择相应的选择器。
一、原生JS选择器
1. ID选择器
概述:根据 ID
获取元素,该方法返回的是一个符合条件的元素对象语法:document.getElementById(ID);
实例:document.getElementById("div1");
作用:匹配页面中 id="div1"
的标签概述:根据 ID
获取元素,该方法返回的是一个符合条件的元素对象
id="div1">可以被选中的标签
id="div2">不可以被选中的标签
•ID
应具有唯一性,同一个页面应不能出现相同的 ID
;•如果一个页面存在多个相同 ID
,则只会获取到第一个元素;•IE8
以下版本浏览器不区分 ID
的大小写;•低版本浏览器会将表单的 name
属性当做 ID
来识别;
2. 标签选择器
概述:根据标签名获取元素,该方法返回的是一个类数组对象,由所有符合条件的标签对象组成。语法:document.getElementsByTagName(tagName);
实例:document.getElementsByTagName("div");
作用:匹配页面中所有 div
标签
<div id="div1">可以被选中的标签div><div id="div2">可以被选中的标签div><h1>不可以被选中的标签h1>
•返回的是一个类数组 NodeList
对象,按照在页面中的顺序排列;•由于 HTML
文档不区分大小写,所以该选择器也不会区分大小写;•通过通配符 *
可以获得页面的所有元素;
3. class类选择器
概述:根据类名获取元素,该方法返回的是一个类数组对象,由所有符合条件的标签对象组成。语法:document.getElementsByClassName(className);
实例:document.getElementsByClassName("div1");
作用:匹配页面中所有 的标签
class="div1">可以被选中的标签
class="div2">不可以被选中的标签
•与标签选择器相同,返回的是一个类数组 NodeList
对象;•可以通过空格将类名分开以获得同时具有两个类名的元素,类名的顺序与选择器无关;•IE8
以下版本浏览器未显示该方法;•怪异模式不区分类名大小写,标准模式区分大小写;
4. name选择器
概述:根据标签的 name
属性来获取元素,该方法返回的是一个类数组对象,由所有符合条件的标签对象组成。语法:document.getElementsByName(nameValue);
实例:document.getElementsByName("btn1");
作用:匹配页面中所有 name="btn1"
的标签
name="btn1">可以被选中的标签 name="btn2">不可以被选中的标签
•name
最初设计给表单标签,但同样可以添加给其他标签;•form
、img
等标签的 name
属性会在 window
对象中创建对应值,可以使用window.名字
或 document.名字
来获取对应元素;•IE
浏览器会将 name
识别为 ID
,应注意兼容性问题;
5. document.all 获取所有元素
概述:获得页面所有的元素。语法:document.all;
作用:匹配页面中所有标签
•古老时代的选择器,不推荐使用,目前已经被其他选择器所取代;•可以通过 document.all.tags()
来获取相应元素,目前大部分浏览器并不支持,低版本 IE
中使用;
6. querySelector选择器
概述:通过给定的 CSS 选择器匹配元素,返回与该模式匹配的第一个元素。语法:document.querySelector(selector);
// ID 选择器 等价于 document.getElementById("div1")document.querySelector("#div1"); // 标签选择器 等价于 document.getElementsByTagName("div")document.querySelector("div"); // 类选择器 等价于 document.getElementsByClassName("div1")document.querySelector(".div1"); // 属性选择器 等价于 document.getElementsByName("btn1")document.querySelector("[name='btn1']");// 组合选择器 匹配所有类名为 div1 的 div 标签document.querySelector("div.div1");
•selector
指的是 CSS 选择器,#
代表 ID
,.
代表 class
,与 CSS 保持一致;•只返回第一个符合条件的标签元素;•IE8
以下版本的浏览器不支持;
7. querySelectorAll选择器
概述:通过给定的 CSS 选择器匹配元素,返回的是一个 NodeList
,由所有符合条件的标签对象组成。语法:document.querySelectorAll(selector);
•除了返回的内容外,语法等与 querySelector
一致;•只要传入的选择器正确,就会返回一个 NodeList
,哪怕是空的;•IE8
以下版本的浏览器不支持;
8. 组合选择器
和 CSS 一样,所有的组合器可以相互搭配进行使用:
var oForm = document.getElementsByName("formName"); // 先获取 name="formName" 的标签oForm.getElementsByClassName("btn1"); // 在获取其中类名为 btn1 的标签
针对 querySelector
和 querySelectorAll
选择器,可以通过 CSS 选择器来实现各种操作:
分组选择器
document.querySelectorAll("ul , dl"); // 获取页面上所有 ul 和 dl 标签,通过一个列表返回;document.querySelectorAll(".div1 , .div2"); //获 取页面上所有包含btn和txt样式类名的元素
属性选择器
document.querySelectorAll("div[data-id]"); // 获取页面上所有带有data-id 属性的 div 元素document.querySelectorAll("div[data-id='test']"); // 获取页面上所有 data-id 属性且值为 test 的 div 元素
后代选择器
document.querySelectorAll("ul li"); // 获取页面上所有 ul 标签中的 li 标签// 等价于document.getElementsByTagName("ul").getElementsByTagName("li");
其他还包括子元素选择器、兄弟选择器、伪类选择器等等符合 CSS 选择器语法的内容,具体内容可以点击链接查看之前的文章第四部分的九种选择器:从零开始学前端 - 4. CSS 基础[1]
二、jQuery选择器
jQuery
是一个简单而强大的 JS 库,它的学习成本极低,且极大地简化了编写 JS 代码的难度。它所提供的选择器十分丰富,基本囊括了所有根据元素特点进行匹配的选择器,主要可以分为以下几类:
1. 基本选择器
1.1 ID选择器
概述:根据 ID
获取元素,该方法返回的是一个符合条件的元素对象,等价于 document.getElementById();
语法:$(#ID)
实例:$("#div1")
作用:匹配页面中 id="div1"
的标签
id="div1">可以被选中的标签
id="div2">不可以被选中的标签
1.2 标签选择器
概述:根据标签名获取元素,等价于document.getElementsByTagName();
语法:$(tagName)
实例:$("div");
作用:匹配页面中所有 div"
标签
id="div1">可以被选中的标签
id="div2">可以被选中的标签
不可以被选中的标签
1.3 class类选择器
概述:根据指定类名获取元素,等价于getElementsByClassName();
语法:$(.className)
实例:$(".div1");
作用:匹配页面中所有 的标签
1.4 获取所有元素
概述:根据当前页面的所有元素,等价于 document.all;
语法:$("*")
作用:匹配页面中所有标签
1.5 组合选择器
概述:将所有符合条件的元素放在一个数组中返回;语法:$(selector1,selector2...)
实例:$("div, h1");
作用:匹配页面中所有的 div
和 h1
标签
id="div1">可以被选中的标签
可以被选中的标签不可以被选中的标签
•注意选择器之间使用逗号分开;
2. 层级选择器
2.1 后代选择器
概述:在给定的祖先元素下匹配所有的后代元素语法:$(selector1 selector2...)
实例:$("div p");
作用:匹配页面中所有的 div
下的 p
标签
id="div1">
不可以被选中的标签
可以被选中的标签
•注意选择器之间使用空格分开;
2.2 子元素选择器
概述:在给定的父元素下匹配所有的子元素语法:$(parent > child)
实例:$("div > p");
作用:匹配页面中所有的 div
下的子元素 p
标签
id="div1">
可以被选中的标签
不可以被选中的标签
可以被选中的标签
•注意选择器之间使用大于号分开;
2.3 相邻元素选择器
概述:匹配所有紧接在 prev
元素后的 next
元素语法:$(prev + next)
实例:$("div + h1");
作用:匹配页面中所有的 div
后的 h1
标签
id="div1">不可以被选中的标签
可以被选中的标签
不可以被选中的标签
•注意选择器之间使用加号分开;•只会匹配 prev
后的第一个,且符合条件的元素;
2.4 通用兄弟选择器
概述:匹配 prev
元素之后的所有 siblings
元素语法:$(prev ~ siblings)
实例:$("div ~ h1");
作用:匹配页面中所有的 div
后的 h1
标签
id="div1">不可以被选中的标签
可以被选中的标签
可以被选中的标签
•注意选择器之间使用波浪线分开;
3. 筛选选择器
筛选选择器可以说是 jQyery
选择器的重点部分,熟练使用筛选器对选取元素有很大的帮助。
// 重点基本筛选器$("div:first"); // 获取第一个 div$("div:last"); // 获取最后一个 div$("div:not(#div1)"); // 获取除了 id="div1" 的所有 div$("div:even"); // 获取所有下标索引为偶数的 div$("div:odd"); // 获取所有下标索引为奇数的 div$("div:eq(1)"); // 获取所有下标索引为 1 的 div$("div:gt(1)"); // 获取所有下标索引大于 1 的 div$("div:lt(1)"); // 获取所有下标索引小于 1 的 div$(":animated"); // 获取所有正在执行动画的元素$(":focus"); // 获取当前获取焦点的元素// 其他基本筛选器$(":header"); // 获取所有的标题元素 h1~h6$(":root"); // 获取当前页面的根元素,HTML 文档中永远是 $("div:target"); // 假设当前地址为 https://example.com/#foo ,则 $("div:target")会匹配 id 为 foo 的 div // 内容筛选器$("div:contains('test')"); // 获取所有内容为 test 的 div $("div:empty"); // 获取所有内容为空(不包含子元素或者文本)的 div $("div:has(p)"); // 获取所有包含 p 标签的 div $("div:parent"); // 获取 div 的父元素// 可见性筛选器$("div:hidden"); // 获取所有不可见的 div$("div:visible"); // 获取所有可见的 div
4. 属性选择器
$("button[name]"); // 获取所有具有 name 属性的 button$("button[name='btn1']"); // 获取所有 name='btn1' 的 button$("button[name!='btn1']"); // 获取所有 name!='btn1' 的 button , 推荐使用 :not 来代替 [attribute!=value]$("button[name^='btn']"); // 获取所有 name 值以 btn 开头的 button$("button[name$='btn']"); // 获取所有 name 值以 btn 结尾的 button$("button[name*='btn']"); // 获取所有 name 值包含 btn 的 button$("button[id][name]"); // 获取所有具有 id 和 name 属性的 button
5. 伪类选择器
$("ul li:first-child"); // 获取所有 ul 下的第一个元素,且这个元素是 li $("ul li:last-child"); // 获取所有 ul 下的最后一个元素,且这个元素是 li $("ul li:first-of-type"); // 获取所有 ul 下的第一个出现的 li 元素$("ul li:last-of-type"); // 获取所有 ul 下的最后一个出现的 li 元素$("ul li:nth-child(event)"); // 获取所有 ul 下所有下标为偶数的 li 元素 下标从 1 开始 $("ul li:nth-child(2n-1)"); // 可以传入任意数列作为参数,例如传入 2n-1 获取下标为奇数的 li 元素$("ul li:nth-last-child(event)"); // 获取所有 ul 下所有下标为偶数的 li 元素 下标从 1 开始且从后向前计算$("ul li:nth-of-type(event)"); // 获取 ul 下所有下标为偶数的 li 元素 下标从 1 $("ul li:nth-last-of-type(2n-1)"); // 获取 ul 下所有下标为奇数的 li 元素 下标从 1 开始且从后向前计算$("ul li:only-child"); // 获取 ul 下唯一一个( 没有任何兄弟元素 ) li 元素
6. 表单选择器
$(":input"); // 获取所有 input 标签$(":text"); // 获取所有 type = "text" 的 input 标签$(":password"); // 获取所有 type = "password" 的 input 标签$(":radio"); // 获取所有 type = "radio" 的 input 标签$(":checkbox"); // 获取所有 type = "checkbox" 的 input 标签$(":submit"); // 获取所有 type = "submit" 的 input 和 button 标签,未声明 type 属性的 button 默认为 submit$(":image"); // 获取所有 type = "image" 的 input 标签$(":reset"); // 获取所有 type = "reset" 的 input 和 button 标签$(":button"); // 获取所有 type = "button" 的 input 和 button 标签$(":file"); // 获取所有 type = "file" 的 input 和 button 标签// 针对状态进行筛选$("input:enabled"); // 获取所有未被禁用 input 标签$("input:disabled"); // 获取所有被禁用(disabled="disabled")的 input 标签$("input:checked"); // 获取所有被选中的 input 标签(指单选框,多选框,下拉框中的 option)$("select option:selected") // 匹配所有被选中 option
要注意使用 jQuery
选择器返回的是 jQuery
对象,与原生选择器返回的对象并不一致,需要进行转化之后才能调用各自的方法:
// 原生 JS 对象转化为 jQuery 对象// 对于一个 DOM 对象,只需要用 $() 把 DOM 对象包装起来即可获得一个 jQuery 对象var oDiv1 = document.getElementById("div1");var $oDiv1 = $(oDiv1); // jQuery 对象转化为原生 JS 对象// 对于一个 jQuery 对象,可以使用 [index] 或者 .get(index) 方法来获取 DOM 对象var oDiv2 = $oDiv1[0];var oDiv3 = $oDiv1.get(0);
感谢大家的观看,点赞和收藏,我们下篇博客再见,麻烦动动您的小手帮忙点个赞和收藏,这对博主而言十分重要,谢谢!。
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
点击查看原文跳转到 博客 点下再看,少个BUG
jquery选择器大于等于_从零开始学前端 30. JS选择器相关推荐
- 从零开始学前端 - 16. JS对象Object介绍及常用方法
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 从零开始学前端:jQuery官网 --- 今天你学习了吗?(CSS:Day26)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录 从零开始学前端:程序猿小白也可以 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端:标签渐变和媒体查询 --- 今天你学习了吗?(CSS:Day25)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录 从零开始学 ...
- 从零开始学前端:CSS背景颜色 --- 今天你学习了吗?(CSS:Day09)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端:CSS引入 --- 今天你学习了吗?(CSS:Day07)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 从零开始学前端:表单制作 --- 今天你学习了吗?(CSS:Day05)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 从零开始学前端:定时器、Math对象 --- 今天你学习了吗?(JS:Day12)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录 从零开始学前端 ...
- 从零开始学前端:if判断,for循环,,switch判断 --- 今天你学习了吗?(JS:Day4)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 - 今天你学习了吗?(JS:Day3) 文章目录 从零开始学前端 ...
最新文章
- 经典推荐:《Silverlight揭秘》和《ASP.NET 3.5高级程序设计(第2版)》
- Swift URL含有中文的处理
- python实现字符串中中文在前,数字在后且按从小到大排序
- hive中存Array类型的数据的案例,将字符串的数组格式转成数组的字符串,自定义函数方式处理‘[12,23,23,34]‘字符串格式的数据为array<int>格式的数据。
- 深度学习之Windows下安装caffe及配置Python和matlab接口
- 第五章 循环结构课后反思
- java gui 控制台_在GUI面板中创建Java控制台
- WP8开发札记(一)WP8应用生命周期管理
- Web 服务器远程控制硬件(Arduino)
- linux关闭自动更新,Ubuntu开启系统自动升级与取消自动更新的方法,
- android四大组件之Activity以及常见的view处理
- C#中对 XML节点进行添加,删除,查找和删除操作
- bzoj 5369 最大前缀和
- redhat7 scl 源_redhat 系使用 scl 工具临时使用高级开发工具
- 键盘怎么按出计算机,怎么在电脑键盘上打出艾特@键? 原来是这样的
- 文件上传和OSS上传至阿里云
- 从安装过程品国产Linux操作系统的技术来源与异同之处
- Linux服务器如何添加永久路由
- 欧姆龙自动化小型连接器端子台XW2K系列
- 神气的 iOS 打包