- A+
今天内容
1、javascript历史 了解
2、javascript引入 重点
3、变量 重点
4、样式操作 重点
javascript引入
1、行内 不建议使用
是在开始标签内 写入js的代码
注意:我们一般不使用行内，因为会降低服务器或者浏览器的性能，增加维护的难度
<!-- 需求：在开始标签内写入一个点击事件，然后弹出一个框 --> onclick：单击事件名称 alert（）：他是js自带的弹窗，带有一个确定按钮，具有阻塞（如果我不点击确定，后面的代码不会执行）作用,只是用来测试使用不能用于实际开发 <div onclick="alert('我是行内js')"></div> 2、内部（内嵌）
- 在使用内部的js的时候，需要使用script双标签，所有的js代码必须放在这个script双标签之间
- 这个script双标签可以放在页面的任何位置，但是建议放在head和body的结束标签之前
<script> alert('我是内部的js使用'); </script> 3、外部
使用外部js需要在外部建立一个外部的js文件，扩展名.js
在页面中使用script双标签，使用属性src链接外部js的路径
可以放在页面的任何位置，但是建议放在head和body的结束标签之前
<script src="./index.js"></script> 4、伪协议
这个伪协议是针对超链接 只要用到js操作超链接
就需要在超链接的属性href写入javascript:;
<a href="javascript:;"></a> // document:文档 // get：获取 // set:设置 // Element：元素 // By:通过 // Id:id // 通过id获取这个元素 document.getElementById('a').onclick = function(){ alert('123') } 放置位置的问题
window.onload :
原因：代码的加载顺序是从上到下，从左到右，找不到元素的
window.onload就是先去加载页面的资源（标签，文本，图片等等）在去加载window.onload里面的js代码
注意：一个页面中，只能有一个window.onload，如果有多个，后面的会覆盖前面的
// 使用window.onload window.onload = function () { document.getElementById('box').onclick = function () { // 事件触发后，元素执行的动作代码块 alert(123); } } 注释
单行： // 只能注释一行代码 ctrl+/
块注释：/*注释的代码*/ 可以注释多行代码 ctrl+ /
文件 - 首先项 - 键盘快捷方式
引号
单引号和双引号的作用是一样的
使用：不管是单引号还是双引号必须成对出现，不能交叉使用
// 如果外面是双引号，里面必须使用单引号 反之亦然 alert("我是单引号'和'双引号结合使用"); javascript入门三部曲
// 需求：单击span，弹出“我被点击了” // 1、谁发生事件 找元素 获取到 // document.getElementById('span') // 2、确定发生什么事件 // 单击事件 onclick // 3、干什么事 弹出“我被点击了” document.getElementById('span').onclick = function(){ alert('我被点击了'); } 事件
onclick 单击事件 onmouseover 鼠标经过事件 onmouseout 鼠标离开的事件 onmouseleave 鼠标离开的事件 onmouseenter 鼠标经过事件 onmousedown 鼠标按下事件 onmouseup 鼠标抬起事件 onmousemove 鼠标的移动的事件 oncontextmenu 鼠标右键事件 变量
变量就是用来存储值得一个容器
我们在声明变量的时候，要使用关键字 var
注意：先声明后使用
// 在js里面，一个变量的数据类型，是有等号右边的值来决定的 var a = 10; var b = 0.2; 变量的声明规则
1、使用字母、下划线、$开头
2、使用字母、下划线、$、数字组成
3、不能使用关键字和保留字（就是现在不是关键字，但是将来会成为关键字的字）
4、遵循驼峰命名法(当变量名由两个单词或者两个以上的代词构成的时候，从第二个单词开始，首字母要大写)
5、有语义化
// 变量的声明规则 var userName= '张三'; var passWord = '123'; 变量的声明方式
- 声明一个变量，并赋值
var a = 10; - 同时声明多个变量并赋值，多个变量之间用逗号隔开
var a = 10, b = 20, c = 30, d = 40; - 同时声明多个变量，并分开赋值
var sum,num,str,start; sum=10; num=20; str=30; start=40; 元素属性操作
原有属性：也就是元素本身自带的属性
<img src="路径"> <a href=''></a> 非原有属性：是我们通过外部的方式给重新起名，并且重新赋值
<div abvc="123"></div> - 使用点
.的方式操作属性 只能拿原有属性- 获取属性 元素.属性名
- 设置属性 元素.属性名 = ‘新的属性值’
// 获取属性 // 元素.属性名 var box = document.getElementById('box'); alert(box.id); alert(box.class); // undefined alert(box.title); // 设置属性 // 元素.属性名='新属性值' box.id = 'box1'; alert(box.id); 注意：class是一个保留字，和其他的属性操作方式不一样，必须使用className
// // 获取元素 // var box = document.getElementById('box'); // 获取属性 // alert(box.className); // 需求：点击按钮，给div元素添加类名'active' // 1、谁发生事件 button 获取这个按钮 // 2、发生什么事件 onclick 点击事件 // 3、干什么事 把active这个类，添加给div这个元素 var btn = document.getElementById('btn'); var box = document.getElementById('box'); btn.onclick = function(){ // 设置类名 // box.className = 'active'; box.className = ''; } 使用中括号的方式操作属性
// 获取元素 var aDiv = document.getElementById('box'); // 把属性名赋值给一个变量 就不可以使用点的方式了，需要使用中括号[] var d = 'id'; // alert(aDiv[d]); alert(aDiv['id']); // return返回值的时候，会用到这个 样式 通过js操作的样式,全部属于行内样式
操作样式
元素.className
box.className = 'active'; 元素.style.样式名 = ‘样式值’
aDiv.style.width = '100px'; aDiv.style.height = '100px'; aDiv.style.background = 'blue'; // 注意：在js中，不承认 - ; 把横线删除掉，第二个单词开始，首字母大写 aDiv.style.backgroundColor = 'blue'; cssText
语法:元素.style.cssText = '样式名：样式值；..............'
覆盖的问题，当使用多个的时候，后面的会覆盖前面的
// 语法:元素.style.cssText = '样式名：样式值；..............' // 获取元素 var aDiv = document.getElementById('box'); aDiv.style.cssText = 'width: 100px; height: 100px; border:2px solid blue'; // 解决方式：使用原来的样式 + 新的样式 aDiv.style.cssText = aDiv.style.cssText + 'background:red'; // 不兼容ie 6 7 8 aDiv.style.cssText +='background:red'; // 解决兼容:在样式的前面，引号的里面加 分号 ; aDiv.style.cssText +=';background:red'; 测试语句
alert()他是js自带的弹窗，带有一个确定按钮，具有阻塞（如果我不点击确定，后面的代码不会执行）作用,只是用来测试使用 不能用于实际开发
alert(1,2) // 在控制台打印，可以一次性打印多个 console.log('我是在控制台打印的测试语句',1); // 对话框 // 有一个输入内容的input框，有一个确定和取消按钮 var a = prompt('请输入内容'); console.log(a) 获取标签内容
单标签是没有内容，input标签除外 双标签也是有内容的
单标签input
获取内容：元素.value
设置内容：元素.value = '新内容'
// 获取元素 var pt = document.getElementById('pt'); // 获取内容 元素.value console.log(pt.value); // 设置内容 元素.value = '新内容' pt.value = '我是改变后的内容'; 双标签内容
获取内容:元素.innerHTML / 元素.innerText
设置内容:元素.innerHTML = ‘新内容' / 元素.innerText = ‘新内容'
// 获取元素 var box = document.getElementById('box'); // 获取内容 元素.innerHTML / 元素.inerText console.log(box.innerHTML); console.log(box.innerText) // 设置内容 元素.innerHTML = '新内容'/ 元素.inerText = '新内容' box.innerHTML = '我是改变后的新内容1233' box.innerText= '我是改变后的新内容1233888888' 区别：
innerHTML可以识别标签
innerText 不可以识别标签
box.innerHTML = '<h2>我是改变后的新内容1233</h2>' box.innerText= '<h2>我是改变后的新内容1233</h2>' 案例- 留言板
<div id="box"></div> <input type="text" name="" id="pt"><button id="btn">按钮</button> <script> // 需求：在输入框内输入内容，点击按钮，把内容发送到上面的内容区域 // 1、是发生事件 button 获取这个元素 // 2、发生什么事件 onclick 单击事件 // 3、干什么事 // 1、获取input的内容 元素.value // 2、给div设置内容 元素.innerHTML = '新内容'（元素.value） // 获取元素 var btn = document.getElementById('btn'); var pt = document.getElementById('pt'); var box = document.getElementById('box'); // 添加事件 btn.onclick = function () { var ptrValue = pt.value; box.innerHTML += ptrValue + '<br />'; pt.value = ''; } </script> 
