js选择器有哪些（js选择元素的方法）

本文目录一览：

• 1、jsqueryselector
• 2、js实现日期选择器的两种方法(默认展示为最近一周)
• 3、一款多功能的移动端滚动选择器mobile-select.js
• 4、js?实现picker?选择器示例详解
• 5、Vue.js组件deep选择器的用法和原理详解

jsqueryselector

1、在生产环境中，querySelector相比getElementBy的优势主要体现在查询效率和功能丰富性上：查询效率：querySelectorAll 获取的是“快照”：这意味着一旦查询完成，返回的结果集是静态的，不会随着 DOM 的变化而更新。这在实际应用中往往能提高访问效率，因为不需要在每次访问时都重新执行查询。

2、.querySelector 是一个DOM API函数。具体说明如下：功能：该函数接收一个CSS选择器作为参数，返回文档中匹配该选择器的第一个元素。用途：主要用于精确定位和获取特定的DOM元素。

3、JavaScript中的querySelector和querySelectorAll是两个用于通过CSS选择器获取页面元素的方法。querySelector：功能：用于查找匹配指定CSS选择器的第一个元素。适用范围：可应用于Document和Element实例。返回值：返回匹配的HTML元素，如果没有找到匹配的元素，则返回null。语法：接收一个CSS选择器字符串作为参数。

4、区别：querySelector和querySelectorAll都是用于选择DOM元素的，但它们的工作方式和返回结果有所不同。 querySelector：此方法仅返回文档中与指定选择器匹配的第一个元素。如果不存在匹配的元素，则返回null。这意味着它只选择符合要求的单个元素。

js实现日期选择器的两种方法(默认展示为最近一周)

1、方法二：先读取当前日期，再读取七天前日期。显然，第二种方法简便了很多。

2、这里改动的地方较多，主要增加日期选择和两个按钮事件，期间将一些逻辑单独提取为方法。由于担心讲解时遗漏，所以直接贴出main.js的最终代码。总结 主要实现步骤：到这里，日期选择器组件就完成了。总的来说，实现过程较为复杂，但只要细心、肯思考，编写代码后收获肯定不少。

3、今天与大家分享一个JS版日期区间下拉选择器原型模板。此模板通过调用浏览器内置的下拉列表功能，提供真实的日历体验，包括准确的二月天数判断、日期对应星期的显示等。建议使用谷歌浏览器进行演示，其他浏览器可能存在差异或失效情况。

一款多功能的移动端滚动选择器mobile-select.js

不仅支持移动端的滚动选择，还兼容PC端的拖拽操作，实现跨平台的流畅体验。使用场景： 适用于需要用户进行复杂选择操作的移动端和PC端应用，如用户注册界面中的生日选择、地址选择等。通过mobileselect.js，可以简化选择流程，提升用户体验。

一款高度灵活的移动端滚动选择器，名号为mobile-select.js，它集成了多项实用功能，支持从单选到多选的转换，让你在选择模式间轻松切换。同时，这款选择器还支持多级级联，帮助你在复杂的选择场景中游刃有余。回调函数的加入，使得事件响应更加灵敏，每一次选择都能触发相应的逻辑。

您可以使用react-mobile-datepicker这个轻量级的react移动端日期选择器，它不依赖于moment.js，只有不到4k大小。react-mobile-datepicker可以通过上下滑动来设置年、月、日。另外，您也可以使用VantWeapp提供的日期时间选择器组件DatePicker和TimePicker。

手机端页面切换，页面跟随手势上下/左右滑动，依赖zepto.js。如果工程中同时使用jquery的话，采用如下方式来调用zepto的方法。（function（$）{$（#Marke）.touchSlider（{direction： v，itemSelector：.slide，slidePercent：0.2}）；}）（Zepto）。

在前端开发中，通常涉及对鼠标、键盘等操作的组件主要是针对PC端，而移动端组件则常依赖触摸等事件。然而，业务需求却时常展现出意想不到的复杂性。例如，我们正在开发的一款企业微信内部的H5网页应用，该应用同时支持手机和电脑操作。

js?实现picker?选择器示例详解

columnchange方法：用于监听列的变化，对后续编写js逻辑至关重要，因为它能追踪列变化对视图数据的影响。range变量：定义了用于渲染picker的动态数据，其格式与数据结构设计中的格式相匹配。rangekey：用于指定用于渲染的字段。业务逻辑封装：变量声明：idx：作为多列选择器选择结果的索引号列表。

利用 change 方法监听 picker 发生的变化，以便获取选择结果。columnchange 方法用于监听列的变化，对后续编写 js 逻辑至关重要，因为它能追踪列变化对视图数据的影响。range 变量定义了用于渲染 picker 的动态数据，格式为 `[[第一列数据]， [第二列数据]， [第三列数据]]`。

另一种实现方式是结合vant weapp的DatePicker组件和Popup组件。首先在json文件中引入vant的Picker和Popup组件，然后在wxml文件中使用这些组件，配置合适的参数。在js文件中，通过修改data和attached函数，将日期和时间列表封装成适合vant的格式，并在change函数中处理用户的选择事件。

**禁用日期功能**：- 使用 `picker-options` 属性来设置日期选择器的配置。- 通过 `disabledDate` 函数判断当前日期是否允许被选择。- 官方文档对此功能提供了详细的说明与示例，可参考官方文档以获取更详细的配置选项。

Vue.js组件deep选择器的用法和原理详解

1、scoped作用域scoped原理：加上scoped属性后，在浏览器查看开发工具你会发现，组件模板里的每个DOM元素多了一个属性data-v-xxx，CSS规则也有对应的属性选择器。这些属性名就是组件的唯一ID，每个组件都不一样。配合CSS属性选择器，样式规则就只应用到对应的组件了，这样就能防止互相干扰了。

2、`：deep（）` 函数允许我们在样式选择器前添加一个前缀，从而穿透组件的封装，直接作用于外部元素。这种用法对于需要与第三方 UI 库协作时特别有用，能够确保样式能够正确地应用到预期的目标元素上。 源码解析 在 Vue3 的核心实现中，处理样式穿透的关键在于 `postcss` 插件。

3、在Vue3的开发中，遇到第三方UI库（如element-plus）样式失效的问题时，可以借助：deep（）方法实现样式穿透。首先理解一下 scoped属性的作用，它在组件style标签中设置，能确保样式隔离，避免组件间的样式污染。

4、在 Vue3 中，使用 ：deep（） 方法在 style 标签内实现样式穿透，主要解决第三方 UI 库如 element-plus 引起的样式设置失效问题。scoped 属性确保组件间样式隔离，增强模块化。使用 ：deep（） 函数捕获并作用于第三方库 CSS 选择器。

5、在Vue中使用/deep/这一写法，其实并不属于Vue组件CSS范畴，而是CSS选择器的一种扩展。通常，我们在项目中会使用Scoped CSS来保持样式隔离，避免组件间样式冲突。加入scoped后，样式会自动添加一个哈希值，确保打包后的样式在不同组件间独一无二，避免父组件样式影响子组件。

6、Vue官方建议，当 { color： red } 是scoped时（即与特性选择器结合使用）性能会显著下降。这种写法对程序员来说最为友好。进行渲染测试后，我发现React中使用CSS Modules较为麻烦，需要导入变量，但在其他方面表现完美。Vue同样提供支持，新项目应使用CSS Modules以彻底解决问题。