特点:
1,交互性(它可以做的就是信息的动态交互)
2,安全性(不允许直接访问本地硬盘)
3,跨平台性(只要可以解释js的浏览器都可以执行,和平台无关)
使用方式:
1:在head或body使用script标签
<script type="text/javascript">
alert("在吗")
</script>
2,使用script标签引入单独的Javascript代码文件
<script type="text/javascript" src="1.js"></script>
注意: 但是功能只能用一个(意思要么执行标签里面的代码,要么执行js文件的代码)
3,JavaScript的变量类型:
数据类型:number
字符串类型:string
对象类型:object
布尔类型:boolean
函数类型:function
特殊的值:
undefined: 未定义,所有js变量未赋予初始值的时候,默认值都是undefined
null: 空值
NAN: 全称:Not a Number。 非数字。非数值
JS的定义变量格式:
var 变量名;
var 变量名=值;
例子:
<script type="text/javascript">
var i;
alert(i)
i=12;
alert(typeof(i))
</script>
返回NAN
<script type="text/javascript">
var i=12;
var j="asd";
alert(i*j);
</script>
4,关系运算符
<script type="text/javascript">
var i=12;
var j="12";
alert(i==j);
alert(i===j);
</script>
5,数组:
数组会根据最大下标进行扩容
<script type="text/javascript">
var arr=[];
arr[0]=12;
arr[2]="abc"
alert(arr.length);
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
6,函数:
可以使用function关键字来定义函数,也可以var 函数名=function......
使用格式如下:
function 函数名(形参列表){
函数体
}
例:
<script type="text/javascript">
function f() {
alert("在吗")
}
f();
</script>
在JS中,如果要返回值,直接return返回值即可
<script type="text/javascript">
function f(a,b) {
result=a+b;
return result;
}
alert(f(1,2))
</script>
7,重载
不允许重载;如果两个函数名一样,直接覆盖上一次的定义
8,隐形参数arguments(只在function函数内)
就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。
<script type="text/javascript">
function f() {
alert(arguments[0]);
alert(arguments[1]);
alert(arguments.length)
}
f(1,2,3)
</script>
9,对象
Object形式的自定义对象,也可也用{}形式自定义对象:
{}形式定义自定义对象:
var 变量名={
属性名:值,
属性名:值
}
<script type="text/javascript">
var a=new Object();
a.name="Tom"
a.age=12;
alert(a.name+"-----"+a.age);
</script>
10,事件
常用事件:
onload: 加载完成 页面加载完成之后,常用于做页面js代码初始化
onclick:单击事件 常用于按钮点击响应操作
onblur: 失去焦点 常用于输入框失去焦点后验证其输入内容是否合法
onchange:内容改变 常用于下拉列表和输入框内容发生改变后操作
onsubmit:表单提交 常用于表单提交前,验证所有表单项是否合法
事件注册:
静态注册:通过html标签的事件直接赋予事件响应后的代码
<body onload="alert('静态注册事件')">
</body>
动态注册:先通过js标签得到标签的dom对象,然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码
1,获取标签对象
2,标签对象.事件名=function(){}
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function () {
var btn = document.getElementById("btn");
alert(btn);
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
getElementsByName练习:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function oncheck() {
var one = document.getElementsByName("test");
for(var i=0;i<one.length;i++){
one[i].checked=true;
}
}
</script>
</head>
<body>
<input type="checkbox" name="test" checked="false" value="1">
<input type="checkbox" name="test" checked="false" value="2">
<input type="checkbox" name="test" checked="false" value="2">
<button onclick="oncheck()"></button>
</body>
注意:document对象的三个查询方法,如果有id属性,优先使用getElementsById方法进行查询
如果没有id属性,则优先使用getElementsByName方法进行查询
如果没有name和id属性,则最后按标签查询getElementsByTagName
11,节点的常用属性和方法:
方法:
getElementsByTagName():获取当前节点的指定标签名孩子节点
appendChild(onChildNode):可以添加一个子节点,onChildNode是要添加的孩子节点
属性:
childNodes:获取当前节点的所有子节点
firstChild:获取当前节点的第一个子节点
lastChild:获取当前节点的最后一个子节点
parentNode:获取当前节点的父节点
nextSibling:获取当前节点的下一个节点
previousSibling:获取当前节点的上一个节点
className:用于获取或设置标签的class属性值
innerHTML:表示获取/设置起始标签和结束标签中的内容
innerTest:表示获取/设置起始标签和结束标签中的文本