js初识
js起源
1.js最初是由布兰登·艾奇开发 LiveScript =》JavaScript
微软:发布了一个浏览器IE3.0,搭载了一个克隆版JScript
2.ECMA:欧洲计算机制造商协会 =》 制定标准
ECMAScript1.0:(标准) =》 ECMAScript9.0
js的引入方式
A:行间引入
onclick : 点击事件
alert(“警告信息”) : 在页面弹出警告信息
注意:相同引号不能嵌套
B:内嵌<script>
(1)script标签可以有任意多个,可以存放在任意的位置。
(2)一般放在head标签中或者body的末尾,建议加在body的末尾。
(3)执行顺序:从上到下执行,遇到script标签以后会暂停往下执行,先执行script标签中的内容等script标签中的内容执行完以后,才会继续往下执行。
C:外链引入
<script type src='地址'></script>
注意:
<script src="script.js">
alert("兄弟,蹦迪吗?"); //如果引入的是外面的js文件,script标签中就不要再放其他的js代码,不会执行
</script>
js注释
单行注释:Ctrl+/
多行注释:Ctrl+Shift+/
js的应用
1、简单三部曲:
A:找到谁:document.getElementById(“id名”)
在文档中 获取 标签 通过 id
document.getElementById("id名")
document.getElementById("btn");
alert(document.getElementById("btn"));
B:添加什么事件:onclick
标签.事件
document.getElementById("btn").onclick
C:要做什么事情
标签.事件 = function (){ 要做的事情 }
document.getElementById("btn").onclick = function(){
alert("小可爱,你好帅");
}
2、js在head里要写window.onload(等文档和资源都加载完成后调用)。
<script>
//window.onload :等文档和资源都加载完成后调用
window.onload = function () {
/*
Cannot set property 'onclick' of null/of undefined
标签错了
*/
alert(document.getElementById("btn"));//null
document.getElementById("btn").onclick = function(){
alert("饿了...........");
};
}
console.log("212");
</script>
2.变量 :储存数据的容器。
声明变量:var 变量名 = 值
var a = 10;
变量的命名规则:
A:只能以字母、_ 、$开头
B:不能使用关键字和保留字
C:见名知意,遵循驼峰标识
D:不要重名
(1)声明一个变量。
var a = 10;
alert(a);
(2)先声明,后赋值。
var b;
alert(b); //undefined 未初始化 声明了没有赋值
b = 10;
alert(b); // 10
(3)多个变量同时声明
var a,b,c,d;
(4)连等
var a = b = 20;
3.调试:看出值得多少,值的变化
alert(); 在页面弹,一次只能弹一个
console.log(); 在控制台打印
鼠标事件
//1.获取元素
var oDiv = document.getElementById("box");
//2.点击事件
oDiv.onclick = function () {
console.log("点击事件");
}
//3.onmousedown
oDiv.onmousedown = function () {
console.log("鼠标按下");
}
//4.onmouseup
oDiv.onmouseup = function () {
console.log("鼠标抬起");
}
//5.onmouseover
oDiv.onmouseover = function () {
console.log("鼠标移入");
}
//6.onmouseout
oDiv.onmouseout = function () {
console.log("鼠标移出");
}
//7.onmousemove
oDiv.onmousemove = function () {
console.log("鼠标移动");
}
//8.ondblclick
oDiv.ondblclick = function () {
console.log("双击");
}
//9.oncontextmenu
oDiv.oncontextmenu = function () {
alert("右击");
}
/*onclick : 点击事件
onmouseover : 鼠标移入 / onmouseenter
onmouseout : 鼠标移出 / onmouseleave
onmousemove : 鼠标移动
onmousedown : 鼠标按下
onmouseup : 鼠标抬起
ondblclick : 双击
oncontextmenu : 右击*/
// onmouseover/onmouseout :子元素可以触发父元素的事件(冒泡)
// onmouseenter/onmouseleave :子元素不会触发父元素的事件
操作标签内容
/*
1.操作标签内容:开始标签和结束标签中间的都是内容
操作input标签内容:
获取:标签.value
设置:标签.value = 值
操作闭合标签内容
获取:var i = 标签.innerHTML
设置:标签.innerHTML = 值
特点:
1.innerHTML会覆盖,后面的会覆盖前面
2.可以识别标签
innerText:不能识别标签
*/
//1.获取input的内容 标签.value
var oIn = document.getElementById("in");
var v = oIn.value;
console.log(v);
//2.设置input的内容 标签.value = 值
oIn.value = "666666";
操作标签属性
<!--
操作标签属性 <div id="box" class="active"> id class
获取:var c = 标签.属性名
设置:标签.属性名 = 属性值
特殊:class--标签.className
-->
//1.获取标签
var oDiv = document.getElementById("box");
//2.获取var c = 标签.属性名
var id = oDiv.id;
console.log(id);
var cl = oDiv.className
//1.获取标签
var oImg = document.getElementById("img");
var n = 1;
//2.点击图片 切换图片
oImg.onclick = function () {
n++; //+1
console.log(n);
//标签.属性名 = 属性值 +连接
oImg.src ="img/" + n + ".jpg" ; //引号中的内容,原样输出
}
操作标签样式
<!--
样式:style标签中的
获取:标签.style.属性名
设置:标签.style.属性名 = 属性值
注意:只设置,不获取
特殊:js中不允许出现- font-size使用驼峰标识
-->
cssText
var oDiv = document.getElementById("box");
oDiv.onmouseover = function () {
//操作class
//oDiv.className = "active";
oDiv.style.width = "200px";
//相当于是一个style属性,设置cssText会覆盖掉之前行间的style属性
oDiv.style.cssText ="width:200px;background:skyblue;font-size:26px;";
}
oDiv.onmouseout = function () {
//oDiv.className = "";
oDiv.style.cssText ="width:100px;background:orange;font-size:16px;";
}