js day01 变量, 引入, 属性操作, 样式操作
一, 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('我被点击了');
}
1,事件
onclick 单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标离开的事件
onmouseleave 鼠标离开的事件
onmouseenter 鼠标经过事件
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
onmousemove 鼠标的移动的事件
oncontextmenu 鼠标右键事件
2,变量
变量就是用来存储值得一个容器
我们在声明变量的时候,要使用关键字 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;
3,元素属性操作
原有属性:也就是元素本身自带的属性
<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 = '';
}
4,使用中括号的方式操作属性
// 获取元素
var aDiv = document.getElementById('box');
// 把属性名赋值给一个变量 就不可以使用点的方式了,需要使用中括号[]
var d = 'id';
// alert(aDiv[d]);
alert(aDiv['id']); // return返回值的时候,会用到这个
5,样式 通过js操作的样式,全部属于行内样式
操作样式
元素.className
box.className = 'active';
元素.style.样式名 = '样式值’
aDiv.style.width = '100px';
aDiv.style.height = '100px';
aDiv.style.background = 'blue';
// 注意:在js中,不承认 - ; 把横线删除掉,第二个单词开始,首字母大写
aDiv.style.backgroundColor = 'blue';
6,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';
7,测试语句
alert()他是js自带的弹窗,带有一个确定按钮,具有阻塞(如果我不点击确定,后面的代码不会执行)作用,只是用来测试使用 不能用于实际开发
alert(1,2)
// 在控制台打印,可以一次性打印多个
console.log('我是在控制台打印的测试语句',1);
// 对话框
// 有一个输入内容的input框,有一个确定和取消按钮
var a = prompt('请输入内容');
console.log(a)
8,获取标签内容
单标签是没有内容,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>