js基础知识

js基础知识

JavaScript代码出现的位置：

html中的js代码必须放在script标签里面，script标签可以放在页面中head和body标签中。如：

<script>
        document.write("hello world!");
</script>

（1）在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点。

<script type="text/javascript">
     window.οnlοad=function(){
         var oBtn=document.getElementsByTagName("input")[0];
         oBtn.οnclick=function(){
             alert(123);
         }
     }
</script>

（2）直接在html代码程序里写js。

<input type="button"/>

<script>
     window.οnlοad=function(){
         var oBtn=document.getElementsByTagName("input")[0];
         oBtn.οnclick=function(){
             alert(123);
         }
     }
</script>

JavaScript代码的语法和特征：

（1）注释与Java，C相同，支持单行注释 //；与多行注释/*…*/；

（2）JavaScript区分大小写，a和A是两个不同的变量；

（3）变量是弱类型的，定义变量只用var运算符，可以将它初始化为任意值，也可以随时改变变量所存数据的类型，可以用“,”将多个变量定义在一个var中，如：

<script>
    var color="red";
    var num=25;
    var bon=true;
    var a = "123", b = 123;
</script>

javascript的事件：鼠标事件

主要的鼠标事件：

（1）鼠标左键点击：onclick

（2）鼠标移入：onmouseover

（3）鼠标移出：onmouseout

获取元素的方法：通过ID名称来获取元素，document.getElementById(" ")；配合事件：元素.οnclick=元素在鼠标点击该元素时做什么。

练习：做一个点击时按钮出现一个下拉框

input{width:150px; height:40px;}
div{width:150px; height:400px; background-color:yellow; display:none;}

<input type="button" value="下拉按钮" id="btn"/>
<div id="div1"></div>
<script>
document.getElementById("btn").onclick = function (){
	document.getElementById("div1").style.display = "block";
}
</script>

函数（function）：

由上面事件命令它做一些事（代码块），但是它不会主动执行

我们把完成特定功能的代码块放到一个函数里，再调用这个函数，就省重复输入大量代码的麻烦。函数就是包裹在花括号中的代码块，前面使用了关键词 function：

<script>
function functionName()
{
    这里是要执行的代码
}
</script>

当调用该函数时，会执行函数内的代码。

functionName：是给函数取的名字。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

（1）直接调用函数

function functionName(){
	alert(123);
};
functionName(); 

（2）事件调用函数

function functionName(){
	alert(123);
};
document.getElementById("div1").onclick = functionName; 

（3）匿名函数

function functionName(){
	alert(123);
};
document.getElementById("div1").onclick = function (){
	functionName();
}

修改元素的样式：元素.style.样式="新值"

我们使用该方法给元素的样式赋值，该样式会被加在元素的行间样式中，而若使用该方法获取样式，获取的也是行间样式，它不会判断样式的优先级，因此不要用该方法获取样式。

document.getElementById("div1").onclick = function (){
document.getElementById("div1").style.backgroundColor = "blue";
}

直接就可以将#div1的背景颜色变为蓝的了。