前端 -＞ js原生选择器,jQuery选择器 基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)
2024-04-28 07:24:00
文章目录
- jQuery基本选择器
- js选择器(原生选择器)
jQuery基本选择器
1. ID选择器ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:$("#id")示例：$("#box") //获取id属性值为box的元素<input id='box'/>
2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：$("element")示例：$("div") //获取所有div元素<div></div>
3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：$(".class")示例：$(".box") //获取class属性值为box的所有元素<p class="box"></p>
4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号","分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：$("selector1,selector2,......,selectorN")selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：$("div,#btn") //要查询文档中的全部的<div>元素和id属性为btn的元素
5.通配符选择器$("*") //取得页面上所有的DOM元素集合的jQuery包装集
js选择器(原生选择器)
JS选择器的主要作用JS选择器主要用来获取HTML页面中的元素，将页面中的元素保存到一个对象中然后就可以对这些对象的属性值进行相应操作以实现一些动态效果，以达到页面的生动，易用。需要注意的一点是操作的一定是对象，直接将元素当做对象使用是不行的。JS选择器是将对象对应的元素的属性直接进行操作，所以其改变的style的值是直接改变行间样式优先级远高于CSS样式，所以使用时应注意与已经完成的CSS样式的取舍。
js中原生的选择器主要有以下四种
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
1.document.getElementById()
Id选择器
通过Id属性来获取对象
HTML部分<div id="div1">这是一个div标签</div>
JS部分var d1 = document.getElementById("div1")2.document.getElementsByClassName()
ClassName选择器
通过ClassName属性获取对象
HTML部分<div class="c1">这是一个div标签</div><p class="c1">这是一个p标签</p><a class="c1">这是一个a标签</a><span class="c1">这是一个span标签</span>
JS部分var c1 = document.getElementsByClassName("c1")类名选择器获取到的是HTMLCollection对象，它是一个类似于数组的对象
如果需要选择具体的某一个Element对象，则需要做类似于取数组元素的操作，如下(以取第一项为例):var c1 = document.getElementsByClassName("div1")[0]
3.document.getElementsByTagName()
TagName选择器
通过元素名称来获取对象
HTML部分<ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul>
JS部分var li = document.getElementsByTagName("li")
TagName选择器获取到的内容与ClassName选择器一样，是HTMLCollection对象
所以，如果需要选择具体的某一个Element对象，也需要做类似于取数组元素的操作，如下(以取第一项为例):var li = document.getElementsByTagName("li")[0]
4.document.getElementsByName()
Name选择器
通过Name属性来获取对象
HTML部分<form action="" name="xx"><input type="radio" name="xx" value="1">1<input type="radio" name="xx" value="2">2<input type="radio" name="xx" value="3">3</form>
JS部分var form = document.getElementsByName('xx')
Name选择器主要用于form标签等需要name属性的标签的获取，获取到的是NodeList对象
此类对象与HTMLCollection对象相似，所要获取的具体对象操作也类似于数组，如下:var form = document.getElementsByName("xx")[0]
前端 -＞ js原生选择器,jQuery选择器 基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)相关推荐
- js原生、jquery单选框radio总结（获取值、设置默认选中值、样式）
单选框 radio总结: 一.页面样式截图: <div class="radio-inline"><input type="radio" na ...
- js原生、jquery获取input为text的输入框（单个/多个） 并清空value（bootstrap 输入框）
一.用bootstrap框架写了一个简单的表单,html结构和效果图如下: <form> <div class="form-row mb-2"><d ...
- js原生实现jquery方法offset()和position()
$(() => {console.log($('p').offset())console.log($('p').position())console.log(offset($('p')[0])) ...
- js原生实现点击事件只创建一个元素
问题:注册点击事件的时候,多次点击则会重复多次的创建元素 要求:不论点击多少次,只创建一次 思路:触发点击事件,若有,则不创建,若无,则创建 基础HTML代码如下: <!DOCTYPE html ...
- CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？
CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一.通配符选择器 通配符选择器常用 '*' 号表示,它是所有选择器里作用范围最 ...
- 前端学习之旅——Jquery
jquery介绍 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- js原生后代选择器_jQuery的后代选择器ancestor descendant介绍和示例解析
jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回. 注意:选择器descendan ...
- js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...
最新文章
- linux路由介绍,Linux的路由表详细介绍
- Windbg调试命令详解
- 利用PIX来搭建×××
- 虚拟化技术—docker容器—私有库篇
- 常见前端数据格式转换
- idea 父文件_万事开头难!最新MyBatis程序配置教程(IDEA版)
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
- linux c 笔记 线程控制（一）
- stm32的命名及选型介绍
- 给大家推荐一个免费职业评测
- vue引用echarts
- windows安全事件id汇总
- 富文本编辑器ueditor 自定义工具栏配置
- 错误提示Incompatible file format错误原因和解决方案
- 信息与计算机科学就业如何,信息与计算科学专业就业情况怎么样
- .net微信公众号或微信打开，静默授权，获取微信登录者的openid
- excel实现分组合并后居中
- Bitvise SSH Client下载
- Android 完美解决9.0的机型，必须请求GPS权限并打开GPS才可以正确获取到WIFI名称
- 永久60服务器消息,魔兽世界怀旧服：永久60级已经成为了另一个游戏，这如你所愿吗？...