[TOC]

笔记

引入js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 JS 方式一 -->
    <script>
        function innerShow(){
            alert("Inner Show");
        }
        innerShow();
    </script>
    <!-- 引入 JS 方式二 -->
    <script src="basic.js">
        // 这里不能再写 js 代码,无效
    </script>
    <script>
        // 引入外部文件的 script 标签中 不能再写代码
        innerShow();
    </script>
</head>
<body>

</body>
</html>

document.write(“JavaScript输出内容”); 在浏览器输出”JavaScript输出内容”


        <script>
        document.write("这是通过write写入页面的内容");
        document.write("<h1>这是通过 write 写入页面的标题标签</h1>")
    </script>

鼠标点击事件

<标签 onclick=”JavaScript代码”></标签>鼠标单击左键时执行JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function btnFunc1(){
            alert("我是按钮一叫出来的")
        }
        function btnFunc2(num){
            alert("我是按钮二叫出来的" + num)
        }
        function pFunc(){
            alert("我是P标签叫出来的")
        }
        function divFunc(){
            alert("我是Div标签叫出来的")
        }
    </script>
</head>
<body>
    <input type="button" value="OK1" onclick="btnFunc1()">
    <input type="button" value="OK2" onclick="btnFunc2(100)">
    <p onclick="pFunc()">我是一个P标签,也绑定了点击事件</p>
    <div onclick="divFunc()">我是一个Div标签,也能绑定点击事件</div>
</body>
</html>

<标签 onmousedown=”JavaScript代码”></标签>鼠标按钮被按下时执行JavaScript代码。

onclick	鼠标单击
ondblclick	鼠标双击
onmousedown	按下鼠标按键
onmouseup	松开鼠标按键
onmouseover	鼠标指针移动到标签上
onmouseout	鼠标从标签上移开
onmousemove	鼠标被移动
onkeydown	按下键盘按键
onkeyup	松开键盘按键
onkeypress	敲击键盘按键
onchange	用户改变域的内容
onfocus	标签获得焦点
onblur	标签失去焦点
onsubmit	提交按扭被点击
onreset	重置按扭被点击
onresize	窗口尺寸被调整
onload	页面加载完成
onunload	用户退出页面

document.getElementById(“id名称”);
通过 id 找到 HTML 元素。
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

document.getElementsByClassName(“class名称”);
通过类名找到 HTML 元素。
一个文档中的 class属性可能不唯一，getElementsByClassName() 方法返回的是元素的数组，而不是一个元素。

document.getElementsByName(“名称”);
通过查询元素的 name 属性，获取页面元素。
一个文档中的 name 属性可能不唯一，getElementsByName()方法返回的是元素的数组，而不是一个元素。

document.getElementsByTagName(“标签”);
通过标签名查找 HTML 元素。

作业

1、请写出HTML页面嵌入JavaScript代码的方式？

2、请说明script标签在使用时，有哪些注意事项？
js文件从上向下运行，未在函数里且在HTML寻找标签的js代码最好放在body最底部
引入外部文件的 script 标签中不能再写代码
3、请写出常用的鼠标事件都有哪些？作用分别是什么？（至少写出6个）

onclick	鼠标单击
ondblclick	鼠标双击
onmousedown	按下鼠标按键
onmouseup	松开鼠标按键
onmouseover	鼠标指针移动到标签上
onmouseout	鼠标从标签上移开
onmousemove	鼠标被移动
onkeydown	按下键盘按键
onkeyup	松开键盘按键
onkeypress	敲击键盘按键
onchange	用户改变域的内容
onfocus	标签获得焦点
onblur	标签失去焦点
onsubmit	提交按扭被点击
onreset	重置按扭被点击
onresize	窗口尺寸被调整
onload	页面加载完成
onunload	用户退出页面

4、请写出给HTML标签，添加事件的两种方式？

5、请简单介绍document文档对象以及他的作用是什么？
通过document文档JavaScript 能够访问和改变 HTML 文档的所有元素。
6、请列出document对象常用的属性和方法？（至少写出6个）

document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

7、请说明驼峰命名规则的特点？
1、大驼峰：如果名字由多个单词组成的话，那么每一个单词的首字母必须大写
MovePlane 、UserName、Person
2、小驼峰：如果名字由多个单词组成的话，从第二个单词开始，每个单词的首字母必须大写
movePlane、userName、person

大驼峰：类名
小驼峰：变量名、函数名、数组名、属性名、方法名
全部大写：常量名
8、请写出JS操纵标签属性的语法格式？
var变量 = 标签对象.属性名;
用于获取标签的某个属性的值。
标签对象.属性名 = 值;
用于设置标签的某个属性值。
9、请写出标签所有offset属性以及作用分别是什么？
var 变量 = 标签对象.offsetWidth;
var 变量 = 标签对象.offsetHeight;
var 变量 = 标签对象.offsetLeft;
var 变量 = 标签对象.offsetTop;
offsetWidth 获取标签对象的宽
offsetHeight获取标签对象的高
offsetLeft获取标签对象的宽左边距
offsetTop获取标签对象的上边距
10、请写出设置双标签显示内容的两个JS属性，以及这两个属性的区别是什么？
标签对象.innerHTML
标签对象.innerText
innerHTML设置或获得标签内部html内容
innerText设置或获得标签内容text内容
11、请写出JS操纵标签样式的语法格式？（包括：操纵style、操纵class）
标签对像.style.样式名 = 值;
标签对像.className = 类名;
document.getElementById(‘id名’).style.属性=””;
document.getElementById(‘id名’).className=””;
12、请简单说明JS中this关键字的作用及特点？
this 表示当前对象的一个引用。
13、请简单说明什么是事件冒泡？以及如何阻止事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

event.stopPropagation(); 在子标签的方法中设置阻止事件冒泡
事件对象的stopPropagation() 方法，该方法可以取消事件的进一步冒泡。
14、请写出JS操纵video标签时，都有哪些常用的属性和方法？

视频标签对像.play() 开始播放视频。
视频标签对像.pause() 暂停当前播放的视频。
视频标签对像.currentTime 设置或返回视频中的当前播放位置（以秒计）。
视频标签对像.muted 设置或返回是否关闭声音。
视频标签对像.pause(); 视频暂停
视频标签对像.currentTime =秒数; 设置播放时间从几秒开始

HTML5前端网页制作

鼠标控制（20210930）

笔记

作业