JavaScript 是基于事件与对象驱动的解释性脚本语言。
js的组成
1 ECMAScript :js的语法标准(规则);
2. DOM: Document Object Model 文档对象模型 。
3. BOM:Browser Object Model 浏览器对象模型。
js 的引入方式
1.行间引入
例:<button onclick = "alert ('确定提交‘)”
> `
注意:相同的引号不可以嵌套 。
2.内嵌式
<script>
document.getElementById("btn").onclick = function(){
alert(" YOU ARE BEUITFULEF");
}
</script>
Script标签可以有任意多个,可以存放在任意位置,但一般放在标签内 或body的末尾,不过建议加载body末尾。
-
外链引入
注意:若引入的是外部js文件,script 标签内就不要放其他的。
js执行顺序:从上到下,遇script标签以后会暂停,往下执行,先执行script标签中的额内容,等script标签中的内容执行完以后,才会继续执行。
js的使用
简单三部曲
//通过获取元素的id值获取某个元素
1.找到元素。document.getElementById("id名") ;
2.添加什么事件
单击事件 标签 .onclick
document.getElementById("id名").onclick
3 添加事件后要做的事情
document.getElementById("id名").onclick = function() {}
变量:存储数据的容器
声明变量:var 变量名;
注意:声明了但未赋值则是undefined;
关于变量的命名规则:
1.只能以字母、_、$ 开头。
2.不能使用关键字和保留字。如:var
3见名知意 ,并且遵循驼峰标识,第二个单词开始首字母大写。
4.尽量不要同名,否则会被覆盖。
关于js的鼠标事件
1.onmouseover:鼠标移入;
2. onmouseout :鼠标移出;
3. onmouseenter:鼠标移入;
4. onmouseleave:鼠标移出;
5. onmousemover:鼠标移动;
6. onmousedown:鼠标按下;
7. onmouseup:鼠标抬起;
8. ondblclick:鼠标单击;
9. oncontextmenu:鼠标右击;
注:1、2与 3、4的区别:1、2可以触发父元素事件。
操作内容
1.操作input标签
1)获取:标签.value
2)设置 input 的内容: 标签。value= 值。
<!--单击显示后,将前面的密码框的内容显示到 后面的框-->
<input type="password" id="in" ><button id="btn">显示</button>
<input type="text" id="out" >
<script>
var oIn = document.getElementById("in");
var oOut = document.getElementById("out");
var oBtn= document.getElementById("btn");
oBtn.onclick = function(){
oOut.value = oIn.value;
}
</script>
2.操作双标签内容
1 获取:标签.innerHtml
2.设置:标签.innerHTML = “值”
注意:innerHTML会覆盖,后面的会覆盖前面的 可以用 innerHTML += 标签.
<div id="box"></div>
<input type="text" id="in"/>
<button id="sent" value="发送">发送</button>
<script >
var oDiv = document.getElementById("box");
var oIn = document.getElementById("in");
var oBtn = document.getElementById("sent");
// 单击button按钮后 ,将input内的内容输入到div盒子中
oBtn.onclick = function(){
// oDiv.innerHTML += "老师:";
// oDiv.innerHTML+=oIn.value + "<br>";
oDiv.innerHTML += "老师:" + oIn.value + "<br>";
oIn.value = " ";
}
操作标签属性:
1.获取:标签.属性名
2设置:标签.属性名 = 属性值;
var oImg = document.getElementById("img");
var n = 1;
oImg.onclick = function(){
n++;
oImg.src="./images/2.jpg";
}
操作标签样式:
1.获取:标签.style.属性名
2设置:标签.style.属性名 = 属性值;
注意:标签样式只设置不获取。
若改多种属性是可改class 或
使用 属性名.style.cssText = “要改的属性的类名”;
<p id="p">
如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
4、如果两个值都是true,或者都是false,那么[相等]。
5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
6、如果两个值都是null,或者都是undefined,那么[相等]。
再说 ==,根据以下规则:
</p>
<script>
<!-- 单击加号,字体字体逐渐变大 并且加粗-->
var oBtn = document.getElementById("btn");
var oP = document.getElementById("p");
var n = 12;
var a = 100;
oBtn.onclick = function(){
oP.style.fontSize = n + "px";
oP.style.fontWeight = a;
n ++;
a += 100;
}
</script>