HTML+JS-CSDN博客

本文链接：https://blog.csdn.net/anxiangzsq/article/details/131534001

w3school 在线教程

在HTML的项目文件当中有源代码，有注释

1、交互性表单优化补充：即让用户点击1和2都可以使鼠标焦点到输入框当中取

2、表单当中的radio使用时要确保一组有一个相同的名字（同word当中的用法）

4、form表单中的button自带提交效果，所以说如下即可

5、时间戳转化成为时间格式

6、createElement() 方法通过指定名称创建一个元素

7、定时器

学习vue当中遇见的前端知识补充

JavaScript 和 HTML DOM 参考手册 | 菜鸟教程

JavaScript 数据类型 | 菜鸟教程

//数组和对象的常见创建方法
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化，但是这种创建更为简洁直观
var people = {name : 'Tom', age : 21 , 方法名: function(){  }    }
//访问数组直接arr2[2]即可，访问对象的属性和方法则是people.name和people.方法名()

1、交互性表单优化补充：即让用户点击1和2都可以使鼠标焦点到输入框当中取

使用下面的代码即可

<form>
   <label for="demo">周杰伦-18：</label>
   <input type="text" id="demo">
</form>

2、表单当中的radio使用时要确保一组有一个相同的名字（同word当中的用法）

如下：男女的name值都是sex（注意：checkbox复选框没有这个要求）

男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">

3、以下两个分别是下拉框和文本多行输入框

<select v-model="userInfo.city">
	<option value="shanghai">上海</option>
	<option value="shenzhen">深圳</option>
	<option value="wuhan">武汉</option>
</select>
其他信息：<textarea></textarea>

4、form表单中的button自带提交效果，所以说如下即可

<button>提交</button>

5、时间戳转化成为时间格式

在网站BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

搜索dayjs库，点击进入，复制链接，然后搜索，ctrl+s保存在js文件目录下即可

然后需要引入js文件

//引入js文件后，会有一个dayjs函数，this.time就是当前时间，YYYY这些就是年月日，分隔符自己写
//计算属性和函数都能写
computed: {
	fmtTime(){
		return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
	}
},
methods: {
	getFmtTime(){
		return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
	}
}

6、createElement() 方法通过指定名称创建一个元素

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

    <style>
		.demo{
			background-color: orange;
		}
	</style>
	<body>
		<button id="btn">点我创建一个输入框</button>
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				const input = document.createElement('input')

				input.className = 'demo'
				input.value = 99
				input.onclick = ()=>{alert(1)}
				
				document.body.appendChild(input)

				input.focus()
				input.parentElement.style.backgroundColor = 'skyblue'	
			}
		</script>
	</body>

需要注意的是：

上面的代码是先创建DOM元素，然后将其添加到div的button后边。此时对新创建的输入框要写操作需要分时间。例如修改其类名称、初始值、点击事件等可以在渲染到页面上之前就写代码；但是获取焦点、修改其父容器的属性必须在其渲染以后再写代码执行。

7、定时器

js 定时器有以下两个方法：js 定时器 | 菜鸟教程

setInterval() ：重复执行。按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：执行一次。在指定的毫秒数后调用函数或计算表达式。

8、原型对象

prototype：原型

直接在控制台中，用三个引用类型创建三个不同的对象

然后我们关注__proto__的展开

另外的解释：

原型：每个函数都有prototype属性，称之为原型

因为这个属性的值是对象，也称之为原型对象

作用：1、存放要写属性和方法

2、在JavaScript当中实现继承

__proto__：每个对象都有 __proto__属性

作用：这个属性指向它的原型对象

9、display常用属性值和用法

CSS display 属性 | 菜鸟教程

常用的如下

举例：隐藏一个按钮的方法有：

10、hover鼠标悬停和部分扩展

CSS :hover 选择器 | 菜鸟教程

【前端 - CSS】第 16 课 - 伪类选择器（鼠标悬停状态）_鼠标悬停hover样式_Aperion的博客-CSDN博客

11、document对象合集

HTML DOM Document 对象 | 菜鸟教程

querySelectorAll：返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象（类对象数组）

根据class=“example”来获取：var x = document.querySelectorAll(".example");

根据标签名<ul>和<li>来获取：var x = document.querySelectorAll("ul li");

两种方式合并，获取文档中所有 class="example" 的 <p> 元素：var x = document.querySelectorAll("p.example");

获取所有 class="example" 的 <p> 元素，并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:

var x = document.querySelectorAll("p.example"); 
// 设置 class="example" 的第一个 <p> 元素的背景颜色,返回的x是一个类对象数组，当作数组使用
x[0].style.backgroundColor = "red";

x=document.getElementById("demo"); //查找元素,其中demo是原生的id
x.innerHTML="Hello JavaScript"; //改变内容

x.style.color="#ff0000"; //改变样式

12、JS全局属性和函数全局和局部变量

JavaScript 全局属性/函数 | 菜鸟教程

JavaScript let 和 const | 菜鸟教程

看链接更详细

全局函数：

局部 JavaScript 变量

        在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

        您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

        只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

        在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存周期

        JavaScript 变量的生命期从它们被声明的时间开始。

        局部变量会在函数运行以后被删除。

        全局变量会在页面关闭后被删除。

13、转义字符

14、JS == 与 === 区别

详细见JavaScript 比较和逻辑运算符 | 菜鸟教程

1、对于 string、number 等基础类型，== 和 === 是有区别的

a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
b）同类型比较，直接进行 "值" 比较，两者结果一样。

2、对于 Array,Object 等高级类型，== 和 === 是没有区别的

进行 "指针地址" 比较

3、基础类型与高级类型，== 和 === 是有区别的

a）对于 ==，将高级转化为基础类型，进行 "值" 比较
b）因为类型不同，=== 结果为 false

4、!= 为 == 的非运算，!== 为 === 的非运算

var num=1；
var str="1"；
var test=1；
test == num   //true　相同类型　相同值 
test === num  //true　相同类型　相同值 
test !== num  //false test与num类型相同，其值也相同,　非运算肯定是false 
num == str   //true 　把str转换为数字，检查其是否相等。 
num != str   //false  == 的 非运算 
num === str  //false  类型不同，直接返回false 
num !== str  //true   num 与 str类型不同 意味着其两者不等　非运算自然是true啦

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

15、字符串方法

JavaScript String 对象 | 菜鸟教程

HTML+JS

1、交互性表单优化补充：即让用户点击1和2都可以使鼠标焦点到输入框当中取

2、表单当中的radio使用时要确保一组有一个相同的名字（同word当中的用法）

4、form表单中的button自带提交效果，所以说如下即可

5、时间戳转化成为时间格式

6、createElement() 方法通过指定名称创建一个元素

7、定时器

8、原型对象

9、display常用属性值和用法

10、hover鼠标悬停和部分扩展

11、document对象合集

12、JS全局属性和函数 全局和局部变量

13、转义字符

14、JS == 与 === 区别

15、字符串方法

12、JS全局属性和函数全局和局部变量