文档分为三种层：

• 结构层 --html
• 样式层 --css
• 行为层 --js（JavaScript）

使用

• 行内

在开始标签之内，写入js方法，后面跟上表达式（数值和运算符组合成的）

    <div onclick="alert('弹窗')">div>
1
2
3
4
5
6

• 内部

是在html页面内，写入script双标签，所有代码写在这个双标签之间，可以存在页面的任何位置。。

但是，要求放在body内 body结束标签之前，或者是head的结束标签之前，其他的位置，并不推荐使用

<script>
        alert('内部的使用方式')
</script>
1
2
3

• 外部

在外部新建一个js文件，扩展名是.js, 需要使用script双标签的src属性，链接外部的js文件,之间写js代码，不需要双标签

1

总结：

1 不推荐使用行内js，因为可读性或者可维护性较差

2.如果是小型项目，推荐使用内部

3.如果是大型项目，推荐使用外部，可以少量使用内部

4.如果script双标签是用来实现内部js的，那就不能用于链接外部js 反之亦然

注意：超链接–因为超链接自带点击跳转–伪连接

<a href="javascript:;">a>  消除自带行为
1

常用语句

<script>
        // 注意：变量或者数字不需要加引号
        alert(123)
        // 控制台打印语句，用来测试使用的
        console.log('控制台显示');
        // console.log()
        // 是一个用户可以输入的弹窗
        // 带有一个确认和取消按钮，如果点击的确定，返回值是输入框的值
        // 如果是取消，则不保存
        // console.log(prompt('请输入用户名'));
        //如果点击的确定，返回值是true
        // 如果是取消，返回值是false
        console.log(confirm('你好'));
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

语法

js的构成

• ECMAScript ECMA 超级计算机中心 —ES1~EX11 EX12 没有ES4

• DOM – document object model – 文档模型 document object model

• BOM – browser object model --浏览器模型

  • browser object model

变量

• 变量就是用来存储值的容器
• 声明变量（定义和赋值），变量一定是先声明后使用
• 声明变量使用关键字 var (ex5)

变量的声明规则

• 以字母，下划线，$开头

• 由字母，下划线，$开头，数字组成

• 不能使用关键字和保留字

• 见名知意 – 语义话

• 遵循驼峰命名法 – 变量名从第二个单词开始，首字母要大写

事件

解释性语言

通过鼠标或者键盘触发，引发一系列的元素行为，就是事件

事件的三步骤：

• 事件源 – 也就是哪个元素发生的事件 -获取元素
• 发生什么事件 – 把事件绑定给元素
• 干什么事 ---- 事件触发后 ，会引发什么行为

				// 获取元素
        document ：文档
        get 获取   set 设置
        Element  元素 --- 标签
        Id： ID的名字
        .的
        */
        var boxOnClick = document.getElementById('box')
        // console.log(box);
        // 把事件绑定给元素  --  这个函数就是事件函数，只有事件被触发的时候，才可以执行这个函数
        boxOnClick.onclick = function(){
            // 事件触发，会引发什么
            console.log('我是一个好人');
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

事件的种类

				// onclick:单机事件
// 支持冒泡  点击子元素，父元素事件可生效
        // onmouseover:鼠标经过
        // onmouseout:鼠标离开

        // onmouseenter: 鼠标经过
        // onmouseleave:鼠标离开

        // onmousedown:按下
        // onmouseup:抬起

        // onmousemove:移动

        // ondblclick: 双击事件

        // oncontextmenu:鼠标右键
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// window.onload: 是把js代码临时存储起来，等到结构中所有元素都加载完毕，再执行js代码
        window.onload = function(){
            var boxOnClick = document.getElementById("box")
            console.log(box);
        }
1
2
3
4
5

文本操作

单标签和双标签

• 双标签
• 单标签

双标签

• 获取内容----- 元素.innerHTML
• 获取内容 ------ 元素.innerText
• 设置内容 ----- 元素.innerHTML = ‘新内容’
• 设置内容 ----- 元素.innerText = ‘新内容’

				// 获取元素
        var box = document.getElementById('box')
        // 获取元素内容
        console.log(box.innerHTML); 
        console.log(box.innerText); 

        // 设置元素   // 有覆盖作用
        box.innerHTML = '猪又活了'
        box.innerHTML = '猪又死了'

        // 解决覆盖
        //box.innerHTML = box.innerHTML + '到底是活了'
        // '猪又死了' =  '猪又死了' + '到底是活了'
        // 简写
        box.innerHTML += '到底是活了'

        box.innerText = '123'
        box.innerText = box.innerText + '456'
        box.innerText += '456'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

区别

• innerHTML是支持标签的
• innerText不是支持标签的

        box.innerHTML = '
我是识别标签的
'
        box.innerText = '
我是不识别标签的
'
1
2

单标签

input框内容的获取和设置

语法：

元素.value  //获取内容
1

元素.value =  '新内容'  //设置内容
1

        // 单标签
        console.log(pt.value);// 获取文本内容
        pt.value = '新内容'
1
2
3

样式操作

语法：

只要是js操作的样式，一定是行内样式

元素.style.样式名 = 样式值
//比如
元素.style.width = '100px'
1
2
3

不足: 一次只能实现一个样式值

		// 改变样式
    box.style.width = '200px'
    box.style.height = '200px'
    box.style.bacground = 'blue'

    // 注意： 如果是复合词，需要遵循驼峰名命法
    box.style.backgroundColor = 'green'
1
2
3
4
5
6
7

批量修改

语法：

元素.style.cssText = "width:100px; height:100px;"
//没有提示
1
2

		// 不提示
    box.style.cssText = "width:100px; height:100px;background-color:blue;"
    // 是可以覆盖的   ------ 在样式的前面加一个分号 解决非标签浏览器的兼容问题
    box.style.cssText += ";border:2px solid red"
1
2
3
4

属性操作

• 原有属性：标签元素本身自带的属性，比如： id class src href
• 非原有属性：程序员为了实现某些效果，自己添加的属性

属性操作

• 获取属性

语法：
元素,属性名
//比如
元素.id
元素.src

1
2
3
4
5
6

        // 获取id属性
        console.log(box.id); // box
        console.log(box.a); //undefined
        console.log(box.class); //undefined 因为class是一个保留字 属性的操作方式是获取不到的
1
2
3
4

• 设置属性

语法：
元素,属性名
//比如
元素.id = 新id
元素.src = 新的src
1
2
3
4
5

// 设置属性
        box.id = 'box1234567'
1
2

如果一个属性，赋值给了一个变量，那么就要把点的方式，转换成方括号的方式

        var a = 'id'
        console.log(box[a]);
        console.log(box['id']);
1
2
3

class

因为class是一个保留字，需要使用className来操作class

语法

元素.className  // 获取类名
元素.className = ’新的类名‘
1
2

注意： className是可以覆盖原有的类名的

单引号和双引号 只能嵌套 不交叉使用

var pw = '单引号和"双引号"的使用方式'
1