1.声明Js代码域
1.在head标签中使用script声明js代码域
<head>
....
<!--声明js代码域-->
<script type="text/javascript">
function test(){
alert("哈哈,js学习起来很简单!!!");
}
</script>
</head>
2.在head标签中使用script引入外部声明的js文件
<head>
....
<!--声明js代码域-->
<!--引入外部声明好的js文件-->
<script src="js/my.js" type="text/javascript" charset="utf-8">
</script>
</head>
2.js的变量学习:
js的变量学习:
1 js的变量声明
使用var关键字进行变量声明,格式如下:
var 变量名=初始值;
例如: var a="呵呵";
2 js变量的特点
a、变量声明只有var关键字，声明的变量可以存储任意类型的数据。
b、js中的代码可以不适用分号结尾，但是为了提升代码的阅读性，建议使用分号。
c、js中的变量允许出现同名变量，但是后面的会将前面的覆盖。
d、声明不赋值，默认值是undefined
3 js的数据类型
使用换件typeof判断变量的数据类型
number:数值类型
string:字符类型,注意：在js中字符可以使用单引号也可以使用双引号
boolean:布尔类型
object:对象类型
4 js的变量强转
使用Number()函数：将其他数据类型转换为数值类型，转换失败返回NaN(not a number)
使用Boolean()函数：将其他数据类型转换为布尔类型，有值返回true，无值返回false;
5 特殊的值
null object
undefined undefined
NaN number
3.js的运算符和逻辑结构
等值符：==
如果类型一致则直接比较值,如果类型不一致则先使用Number强转为同一类型后再比较值
等同符：===
先判断类型，如果类型一致则再比较内容,如果类型不一致则直接fasle
4.js 的数组
1.js的数组的声明
var arr1=new Array();//声明一个空数组
var arr2=new Array(长度)//声明指定长度的数组。
var arr3=[]//声明一个空数组，也可以在声明时直接赋值，例如：var arr3=["a","b","c"];
2.js数组的使用
数组的赋值
数组名[角标]=值；注意：js中赋值可以跳跃角标赋值，不存在的角标也可以赋值，会对数组的大小进行改变。
3.数组的取值:
var 变量名=数组名[角标名]
注意：如果获取的角标没有数据，则返回undefined;
4.js的数组的特点
特点1：
js中的数组可以存储任意类型的数据。
特点2：
js的数组可以通过length属性动态的改变长度。可以增加，也可以缩短。
注意：
如果是增加，则使用逗号进行占位
如果是缩减则从后往前减少存储的数据。
5.js的数组的遍历：
普通for循环:for(var i=0;i<arr.length;i++){}
增强for循环:for(var i in arr){}
注意：增强for循环中，循环条件声明的变量记录的是角标。
5.js的数组的常用操作方法：
数组名.pop()//移除并返回最后一个元素。
数组名.push(要添加的数据)//在数组最后追加数据，并返回新的长度。
6.js的函数学习：
函数的声明：
第一种声明方式：
function 函数名(形参1,形参2,...){函数体....}
第二种声明方式：
var 变量名=new Function("形参名1","形参名2",....,"函数体"); 注意：在js中函数是作为对象存在的。
第三种声明方式：
var 变量名=function()(形参1,形参2,...){函数体....}
函数的形参:
在js中函数的形参在调用的时候可以不赋值，不报错，但是默认为undefined
在js中函数的形参在调用的时候可以不完全赋值，依次赋值。
注意：js中没有函数重载，只有函数覆盖。
函数的返回值:
在函数内部直接使用return语句返回即可，不需要返回值类型
注意：默认返回undefined;
函数的调用:
1、在加上代码域中直接调用(主要进行页面资源初始化)
2、使用事件机制(主要实现和用户之间的互动)
3、作为实参传递(主要是动态的调用函数)
注意：小括号为函数的执行符，函数名()才会被执行，直接函数名则作为对象使用。
注意：js的代码区域只有一个,包括引入的js代码，浏览器会将引入的js文件和内部声明的js代码解析成一个文件执行。js代码的调用和声明都在一个区域内。
7.js 的事件机制
单双击事件:
单击事件: onclick.
双击事件: ondblclick
鼠标移动事件:
鼠标悬停事件：onmouseover 当鼠标在HTML元素之上时触发
鼠标移出事件：onmouseout 当鼠标移出某个HTML
元素时触发
键盘事件:
键盘下压事件：onkeydown 当键盘被按下时触发
键盘弹起事件：onkeyup 当键盘弹起时触发
焦点事件：
获取焦点:onfocus 当获取焦点时触发
失去焦点:onblur 当失去焦点时触发值改变事件：
专门给select标签使用：
onchange事件当下拉框的值改变时触发
页面加载事件：
专门给body标签使用onload 当页面加载成功后触发
注意：
事件是作为HTML标签的属性来使用的。
一个HTML元素可以同时使用多个事件，但是注意事件之间的相互干扰。
8.js 的常用方法和对象
String对象：操作字符的。
使用：字符串.函数名即可
大小写转换：
toUpperCase() 转换大写
toLowerCase() 转换小写
字符串截取
substr(0,1) 从指定开始位置截取指定
长度的子字符串
substring(0,1) 从指定位置开始到指定的结束位置的子字符串（含头不含尾）
查找字符位置
indexOf 返回指定字符第一次出现的位置。
lastIndexOf 返回指定字符最后一次出现的位置。
Date对象：
使用： var 变量名=new Date();注意：获取的是客户端的时间，不能作为系统功能校验的时间的。
Math对象：
使用：Math.函数名
random()
round()
ceil()
floor()
Global对象
eval() 将字符串转换为js代码执行
isNaN() 判断Number强转后是否是数字
parseInt()
parseFloat()
9.js 的window 对象的常用属性
window对象的属性学习
opener属性
location属性：作用：地址栏属性，该属性是一个对象，封存了浏览器对地址栏的操作信息例如：url
使用：URL操作: window.location.href//返回当前网页的URL信息
window.location.href="资源路径"//跳转指定的URL资源。
页面刷新：作用:重新加载页面资源。window.location.reload();
history属性：
forward()//前进，相当于浏览器中的前进功能
back()//后退，相当于浏览器中的后退功能
go()//跳转指定的历史记录
screen属性：获取分辨率
window.screen.width
window.screen.height
10.js 的document 获取HTML 元素对象
documnet对象学习：
解释:
document对象是浏览器对外提供的封存了当前运行的HTML文档信息的一个对象
通过此对象可以让我们灵活的操作HTML文档，达到修改，完善HTML文档的目的。
使用：
document获取HTML元素对象
直接方式：
通过ID
var 变量名=document.getElementById("uname");//返回指定的HTML元素对象
通过name
var 变量名=document.getElementsByName("name属性值");
通过标签名
var 变量名=document.getElementsByTagName("标签名");
注意：返回的是存储了该网页中指定的标签的所有对象的数组。
间接方式：
父子关系:
先获取父级节点(参照直接方式)通过父级节点获取子节点数组
var 变量名=父节点对象.childNodes;
注意：子节点数组中会包含文本节点，可以使用nodeType属性筛选出来所有的HTML节点(nodeType值为1)
子父关系：
先获取子元素对象(参照直接方式)通过子元素对象获取父元素对象
var 变量名=子元素对象.parentNode
兄弟关系：
先获取当前元素,根据兄弟关系选择对应的获取方式
var 变量名=元素对象.previousSibling; //兄
var 变量名=元素对象.nextSibling; //弟
document操作元素对象的属性
获取：
元素对象.属性名//返回属性值
修改：
元素对象.属性名=值
注意：
不要修改标签的name和id属性
document操作元素内容：
获取HTML元素对象
获取：
元素对象.innerHTML ：返回所有的内容包括HTML标签
元素对象.innerText ：返回所有的文本内容，不包括HTML标签
操作元素的内容
修改：
元素对象.innerHTML="新的内容" HTML标签会被解析，覆盖原有内容
元素对象.innerText="新的内容" HTML标签不会被解析，覆盖原有内容
注意：
如果在修改是需要保留原有内容，则使用：元素对象名+="新的内容";
document操作元素对象的样式
获取HTML元素对象
操作样式：
添加样式：
元素对象名.style.样式名=样式值
修改样式：
元素对象名.style.现有样式名=新的样式值
注意：
还以通过元素对象.className="类选择器名"来添加样式。
document操作元素对象的文档结构
第一种方式：使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点=子节点对象.parentNode
父节点.removeChild(子节点对象)//删除指定的子节点。
第二种方式：获取元素对象
新建节点:
var 变量名=document.createElement("标签名")//返回创建的HTML元素对象
添加节点
节点对象.属性=属性值// 设置节点属性的值
节点对象.appendChild(节点对象);
删除节点
节点对象.removeChild(节点对象);
11.js操作form表单
获取form表单对象
使用id: var fm=document.getElementById("fm");
使用name属性:var frm=document.frm;
获取form下的所有表单元素对象集合
fm.elements
form表单的常用方法
表单对象.submit();//提交表单数据。
form的属性操作：
表单对象名.action="新的值"//动态的改变数据的提交路径
表单对象名.method="新的值"//动态的改变提交方式
js表单元素的通用属性
只读模式:
readonly="readonly"//不可以更改，但是数据可以提交
关闭模式：
disabled="disabled"//不可以进行任何的操作，数据不会提交。
12.js操作form表单元素
js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false;
js操作下拉框：
被选择的option对象在js中selected属性值为true，未选中为false
js校验form表单