JAVAweb学习笔记——JS-创锋一号

1、JS

(1)核心语法

（a）引入方法

首先是内部脚本：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS学习</title> <script> // 弹窗 alert("hello"); </script> </head> <body> <script> // 弹窗 alert("hello world"); </script> </body> <script> // 弹窗 alert("world"); </script> </html>

会弹出3次！

外部引入：

创建一个后缀为js的文件：

alert("hello world");

以下是全部代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS学习</title> </head> <body> <!--<script>--> <!-- // 弹窗--> <!-- alert("hello world");--> <!--</script>--> <script src="js/learn.js"></script> </body> </html>

结果如下：

总结：

（b）变量

（c）数据类型

（d）函数

（e）自定义对象

<script> let user={ name:'张三', age: 18, sex:'男', sing(){ alert(this.name+'会唱歌'); } } user.sing(); </script>

（f）JSON

将js对象转换成json字符串： <script> let person={ name:'张三', age: 18, sex:'男', } alert(JSON.stringify(person)); </script>

同理，如果想获取JSON下某个属性对应的值时，应该先将其转换成js对象，之后获取

（g）DOM

querySelector获取到的是匹配到的第一个对象：

<body> <h1 id="test1">111</h1> <h1>222</h1> <h1>333</h1> <script> let h1=document.querySelector('#test1'); // innerHTML:设置或返回元素的内容 alert(h1.innerHTML); // 将上述id=test1的输入111改为了下面的内容 h1.innerHTML="输入111"; </script> </body>

返回h1此时的内容

返回修改后的内容

使用querySelectorAll时表示选取的是数组，在下面调用的时候要用数组的格式

（h）事件监听

因此第二种方法不推荐，绑定同一事件容易被覆盖

习题：

<script> let d=document.querySelectorAll('tr'); //为每一个tr标签添加鼠标滑入事件 for(let i=0;i<d.length;i++){ d[i].addEventListener('mouseover',function (){ d[i].style.backgroundColor='#f2e2e2'; }); //为每一个tr标签添加鼠标滑出事件 d[i].addEventListener('mouseout',function (){ d[i].style.backgroundColor='#fff'; }); } </script>

结果和上图一样，鼠标到那一行哪一行就变为红色！

从js文件引入另一个js文件：

将引入的文件先要“暴露”

在要用的文件中进行引入

之后在html引入js时，需要将以上声明为模块化js:

企业官网建设流程全解析

热门文章

文章分类

标签云

需要专业的网站建设服务？

企业官网建设流程全解析

热门文章

文章分类

标签云

相关文章

需要专业的网站建设服务？