js中跟this.$refs一样的

时间: 2023-10-20 12:27:30 浏览: 72

js ref

3星 · 编辑精心推荐

根据提供的文件信息，我们可以梳理出一系列与JavaScript相关的知识点。这些知识点涵盖了从基本语法到文档对象模型（DOM）操作，以及一些常用的内置函数和方法。接下来，我们将对这些知识点进行详细的解释。 ### JavaScript基础 1. **`document.write("")`**：这是一个简单的输出语句，用于在网页上显示文本。它会将括号内的字符串输出到浏览器窗口。 2. **JS注释为 `//`**：这是单行注释的一种表示方式，任何跟在 `//` 后面的内容都将被浏览器忽略。 3. **HTML文档结构**：`document->html->(head,body)` 描述了HTML文档的基本结构，其中`document`代表整个文档对象，`html`元素是文档的根元素，而`head`和`body`则是`html`元素下的两个主要子元素。 4. **浏览器窗口对象模型**：`window->(navigator,screen,history,location,document)` 表示浏览器窗口对象(`window`)及其主要属性，如`navigator`（提供浏览器信息）、`screen`（提供屏幕尺寸等信息）、`history`（提供历史记录信息）、`location`（提供当前页面的URL信息）和`document`（表示当前页面的文档对象）。 ### DOM操作 5. **获取元素并设置其属性值**：`document.getElementById("元素的ID").name(value)` 用于获取页面中的某个元素，并可以修改该元素的某些属性或内容。 6. **简单数据类型转换**：例如，将输入框的值转换为大写：`document.getElementById("output").value = document.getElementById("input").value.toUpperCase();`。这里利用了 `toUpperCase()` 方法来将字符串转为全大写。 7. **JavaScript的数据类型**：包括`String`、`Number`、`Boolean`、`Null`、`Object` 和 `Function`。 8. **类型转换函数**：`parseInt()` 和 `parseFloat()` 分别用于将字符串转换为整数或浮点数。 9. **字符串拼接**：使用 `( + )` 进行字符串拼接。例如：`var str = "Hello" + " World";`。 10. **获取字符串长度**：使用 `.length` 属性来获取字符串的长度，如 `var len = str.length;`。 11. **比较运算符**：`==`、`!=`、`>`、`>=`、`<`、`<=` 用于比较两个值是否相等、不相等、大于、大于等于、小于、小于等于。 12. **变量声明**：使用 `var` 关键字来声明变量，如 `var myVar = 10;`。 13. **条件语句**：`if (condition) {} else {}` 用于执行基于不同条件的不同代码块。 14. **循环结构**：`for ([初始化表达式]; [条件]; [更新表达式]) { 循环体 }` 是一种常见的循环结构，用于重复执行一组语句直到指定的条件不再满足。 15. **循环控制**：`break` 关键字用于立即退出循环。 16. **函数定义**：`function functionName([参数列表]) { 函数体 }` 用于定义一个函数，可以接收参数并返回结果。 17. **表单操作**：通过 `document.forms[0]` 或 `document.forms[1]` 等方式可以访问页面上的表单元素。 18. **窗口操作**：`window.open()` 用于打开新窗口；`window.close()` 用于关闭当前窗口；`self` 表示当前窗口自身。 19. **设置状态栏文本**：`window.status = "文本";` 可以设置浏览器状态栏的文本。 20. **弹出消息框**：`window.alert("文本");` 用于显示一个包含文本的消息框。 21. **确认对话框**：`window.confirm()` 显示一个带有确认和取消按钮的对话框。 22. **提示对话框**：`window.prompt()` 显示一个对话框，允许用户输入文本。 23. **设置和获取页面位置**：`window.location.href = "URL"` 可以设置或获取当前页面的URL。 24. **获取表单数量**：`document.forms.length` 返回页面上所有表单的数量。 25. **结束文档加载**：`document.close();` 结束文档的加载过程。 26. **字符串连接运算符**：`+=` 用于连接两个字符串。 27. **创建DOM元素**：`document.createElement()` 和 `document.createTextNode()` 用于创建新的DOM元素和文本节点。 28. **获取DOM元素**：`document.getElementById()` 用于根据ID获取页面中的DOM元素。 29. **重置表单元素**： ```javascript var form = window.document.forms[0]; for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].type == "text") { form.elements[i].value = ""; } } ``` 30. **复选框的选中状态**：`document.forms[0].checkThis.checked` 用于检查某个复选框是否被选中。 31. **单选按钮的处理**：可以通过 `document.forms[0].groupName.length` 来获取一组单选按钮的数量。 32. **下拉列表的选项值**：`document.forms[0].selectName.options[n].value` 用于获取下拉列表中某个选项的值。 33. **字符串操作**：创建字符串实例 `var myString = new String("This is lightsword");`，并提供了多种方法来进行字符串操作，如 `toUpperCase()`、`toLowerCase()`、`indexOf()` 等。 34. **数学计算**：`Math` 对象提供了多种数学常量和方法，如 `Math.PI`、`Math.SQRT2`、`Math.max()`、`Math.pow()`、`Math.round()` 等。 35. **日期和时间**：`var today = new Date();` 创建一个新的日期对象，并提供了多种方法来获取日期和时间的信息，如 `getTime()`、`getYear()`、`getFullYear()`、`getMonth()`、`getDate()`、`getDay()`、`getHours()`、`getMinutes()`、`getSeconds()` 等。以上就是从给定文件信息中整理出来的JavaScript相关知识点，涵盖了从基础知识到进阶操作的多个方面。这些知识点对于初学者理解和掌握JavaScript是非常有帮助的。

在JavaScript中，类似于Vue中的this.$refs的功能是通过使用getElementById或querySelector来获取DOM元素的引用。这些方法可以根据元素的id或选择器来获取对应的DOM元素。例如，使用document.getElementById("elementId")可以获取具有给定id的DOM元素的引用。同样地，使用document.querySelector("selector")可以根据选择器获取满足条件的第一个DOM元素的引用。123 #### 引用[.reference_title] - *1* [Vue 解决通过this.$refs来获取DOM或者组件报错问题](https://download.csdn.net/download/weixin_38649315/12924679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [2022/6/21 今日好用方法整理](https://blog.csdn.net/Zhang_aichi/article/details/125395146)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文

js中跟this.$refs一样的

相关推荐

Vue 解决通过this.$refs来获取DOM或者组件报错问题

vue列表单项展开收缩功能之this.$refs的详解

this.$refs.

this.$refs

this.$refs.scrollContainer.$refs.wrap

this.$refs.video.$watch(() => { this.videoIndex = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

this.$refs.admintable.$refs.qwtable.getSelection

this.$refs.video.$watch(() => { this.videoIndex2 = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

this.$emit,this.$refs

this.$parent.$refs

this.$refs.upload.

this.$refs.forms.

this.$refs.table.

this.$refs.form

this.$refs. undefined

uniapp this.$refs.

this.$refs.kindergarlog

this.$refs.myChart

this.$refs.tree

最新推荐

Vue 解决通过this.$refs来获取DOM或者组件报错问题

解决vue里碰到 $refs 的问题的方法

关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界