JS培训笔记

JS:它是一个客户端脚本语言，运行在客户端.
Netsape 网景
javascript主要功能：
1、实现表单验证（客户端）
2、页面动态效果

ajax的基础
使用：
内部：页面的任何为使用下面的标签
<script language="javascript"></script>

外部引用：
<script language="javascript" src=""></script>

注意：多个js要分开去写

java中：变量的类型决定了变量中能放什么样的值
js中：变量中的值决定了此时该变量是什么样的类型

变量：js中变量是弱类型的变量 由值决定 统一用var定义
变量数据类型：number string boolean object undefined 可用typeof判断

'abc' 是字符串类型
var v=null; //object
var v; //undefined

var a,b,c=10; //c=10  a，b是未定义

js中变量可以不定义直接使用，但是不推荐

常量：关键字const 不一定所有浏览器支持

alert(""); //弹出警告对话框
typeof(变量); //获取变量的类型

注释：
单行注释  //
多行注释  /* */

var num1="12";
var num2=12;
alert(num1==num2); //true ==  仅仅比较数值
alert(num1 === num2);  //false === 不仅仅比较数值 还比较类型
// 类似  != !==(比较类型和数值)

运算符：类型转换
NaN:not a number
10+true=11;  //true=1 false=0;
10+false=10;
3+"1"=31;
3*"1"=3;
3*"b"=NaN;

逻辑控制：
if/else
switch/case
for、while
foreach
JS中的if-else结构和java中基本保持一致。
 条件应该是一个boolean型表达式

注意：
if中的条件为假的情况有：false 0 null undefined
var num=5;
if(num="1") //恒真的  永远成立
{
	alert("if");
}
else 
{
	alert("else");
}

内置函数：
---------
数据类型转换
parseInt parseFloat
部分转换：
parseInt("8a") = 8  
parseInt("a8") = NaN //NaN 数据类型是 number
parseInt(类型，进制);
parseInt(a);  //默认认为a是10进制（特殊，a表示的数据以0或者0x开头）
parseInt(a,b); //a是要转换的数据，b是当前数据的进制
八进制：0
十六进制：0x

注意：从前向后截取到第一个无效的字符为止
特定计算表达式
eval
eval("8*(10-2)/2");
判断数值类型
isNaN  判断为true时 不带表不能通过parseInt()转换
isFinite
alert(isFinite("1ac")); //NaN
alert(isFinite(Number.NEGATIVE_INFINITY)); // 负无穷 false
alert(isFinite(Number.POSITIVE_INFINITY)); // 正无穷 false

JS中函数的定义语法：
 function 函数名（参数列表）{函数体};
注意：有时不执行函数 可能是函数名的问题

注册：onclick中调用函数传值，不能用双引号，可以用单引号

DOM模型：Document Object Model
-----------
W3C定义的一套规范
Document-Html
同一层的是相邻元素
根节点：当前这个文档document
根元素节点：元素节点 html
DOM：将文档转换成一颗倒挂的树
    文档中的元素，属性，文本，转换成树上的节点

innerHTML：表示是元素之间的内容，不仅仅是文本，还可以是子元素
document.getElemenetById();

BOM模型：浏览器对象模型
----------
window-history(历史记录)/document(link/form/anchor(超链接))/location(地址栏)

window对象:
属性：status,screen,history,location,document
status:右下角状态栏
FF默认关闭状态：about:config--dom.disable-window-status-change双击该属性
screen:屏幕的分辨率，性能的信息
var width = window.screen.width;
var height = window.screen.height;
alert("屏幕分辨率："+width+"*"+height+"像素");

常用的方法：
alert (text) 显示一个带有提示信息和确定按钮的警告对话框 
confirm(text) 弹出带有确定，取消按钮的提示框  询问对话框 返回的是boolean 类型
prompt(text,val) 显示一个带有提示信息、确定和取消按钮以及文本输入框的对话框
open (url,name, options) 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档，
----------------------------------------
//后面两个参数是可选的
options 选项有：channerlmode fullscreen width,height top left 
location menubar status toolbar titlebar resizable scrollbars
//在窗口选项属性设置中，有一个被设置为0（no）时，其它都不可见。
//如果想显示莫个窗口特性，则需要显示的写出该特性的值为yes（1）
open("js21.html","新窗口","menubar=no,location=1,width=200,height=200");
--------------------------------------------------
//后面两个参数是可选的
//模式窗口
//特点：焦点会落在模式窗口上，只有关闭子窗口才能操作父窗口
showModalDialog( ) 在一个模式窗口中显示指定的HTML文档 
---------------
close() 关闭当前窗口（FF与IE规则不同）
//FF要设置一下  dom.allow_scripts_to_close_windows;true
---------------------------
setTimeout(func,delay) 设置定时器：经过指定毫秒值后执行某个函数
setInterval(func,delay) 设置循环定时器
//setTimeout("showMe()",3000); //经过多少毫秒后调用（仅一次）
//setInterval("showMe()",3000);//每经过指定毫秒后调用一次（循环多次）
----------------------------------------------
clearTimeout(timer)/ clearInterval(timer)  清除定时器
//var timer=setTimeout(); 
//clearTimeout(timer);
------------------------------

注意：
//window可以省略 因为window是最外层的对象 可以省略
//通常一个方法被直接调用，那么该方法肯定是window对象的方法（除自己自定义的方法）


常用事件：
onload：事件是在页面主体加载完成后触发的事件
onscroll 窗口滚动条滑动
onclick 窗口点击（仅FF）
onbeforeunload 窗口关闭前发生
onunload 窗口关闭以后发生
oncontextmenu 弹出右键菜单时发生（仅FF）

history对象
----------
back():加载上一个url 后退==go(1);
forward()：加载下一个url 前进==go(-1);

//<a href="javascript:history.forward()">前进</a>
//<a href="javascript:goForward()">第二个前进</a>

location对象
----------
属性：host hostname href
location.href="";  //就是改变地址栏的地址

方法：assign("url") reload() replace("url")
reload() //页面刷新
assign() //加载一个新页面，并保存历史记录
replace() //加载一个新页面，不保存历史记录

document对象：
--------------
属性：bgColor //背景色
方法：
getElementByID() //获取唯一(第一个)的元素对象
getElementsByName() //获取一组的元素对象
getElementsByTagName() //根据元素的标签名获得一组元素对象（对象数组）


===============特效=============
document.body.scrollTop //获取滚动条滚动的距离
display：none  //图片关闭， 也就是隐藏
display:
block(按快显示，默认)
none(隐藏)
inline(按行显示)
复选框：全选checked=true;全不选 checked=false;
if(schools[i].type == "checkbox"){
 schools[i].checked = !schools[i].checked;
}

document.body.clientWidth   //窗口的宽度

===================================
事件：onmouseover onmouseout
案例：选项卡切换

js修改样式：
οnmοuseοver="this.style.borderColor='blue'" //this表示当前对象
οnmοuseοver="this.className='over'" //修改class="xxx" xxx的值
οnmοuseοver="this.id='over'" //修改id="xxx" xxx的值


内置对象
-----------
数组类型：Array
字符串：String
数学运算类型：Math
日期类型：Date
选项类型：Option

数组：
---------
 Java：例如 int[] nums = new int[10];
 Js:使用Array  var arrs = new Array(10);  //其中一种定义语法
	var arr = []; var arr = new Array[];
 js中的数组下标可以使用标识符
var arr3 = new Array();
arr3["江苏省"] = "南京市";
arr3["浙江省"] = "杭州市";
arr3["安徽省"] = "合肥市";


注意：js中的数组更类似于java的集合，数组能动态的扩容

Js中foreach循环的语法：for(var 下标 in 数组){}
for(var i in arr)
{
	document.write(arr[i]+"<br/>");
}
java中的foreach循环的语法：for(数据类型 元素名称：数组或者集合){}

数组中的方法：
-------------
sort:排序
reverse：反转  数组前后调换 
push、pop 对数组中的元素进行栈操作
push 在尾部添加一个
pop 取出数组中最后一个元素
join 对数组中的元素实现拼接 默认以","拼接  arr.join(“-”);
concat 实现两个数组的拼接

String
-----------
var s1 = new String("xiaosi"); //object类型
var s2 = "xiaosi"; //String 类型
	数组	字符串  （length）
java	属性	方法
js	属性	属性

属性：length
方法：
charAt 返回指定位置的字符
indexOf lastIndexOf 下标从0开始 找不到返回-1
toLowerCase toUpperCase
substr
//var s = s2.substr(2); //从指定的下标向后截取
//var s = s2.substr(2,3); //从指定下标截取指定个数的字符
substring
//var s = s2.substring(2); //从指定的下标向后截取
//var s = s2.substring(2,3); //从指定下标截取到下一个下标的位置，包含小的，不包含大的
split 字符串的分割
fromCharCode 用于将一个/组字符编码转换成一个字符串 //根据ASCII码值获取对应的字符

anchor()：创建 HTML 锚 
big()：用大号字体显示字符串
blink()：显示闪动字符串   
bold()：使用粗体显示字符串
fixed()：以打字机文本显示字符串
fontcolor()：使用指定的颜色来显示字符串
fontsize()：使用指定的尺寸来显示字符串
italics()：使用斜体显示字符串
link()：将字符串显示为链接
small()：使用小字号来显示字符串
strike()：使用删除线来显示字符串
sub()：把字符串显示为下标
sup()：把字符串显示为上标

Data对象
-------------
getFullYear()
getMonth()
getDate()
getHours()
getMinutes()
getSeconds()
getDay() 星期
getMilliseconds() 毫秒
getTime() 距离1970的毫秒

Option
-----------
//onchange 事件
<select name="pro" οnchange="changeCity()">

//层次访问结构 得到每个选项的索引 selectdeIndex--选中项的值 0开始
var index = document.myForm.pro.selectedIndex;

//得到value值
//var value = document.myForm.pro.value;


//options 下拉列表框中所有列表项的集合
document.myForm.city.options.length = 0; //清空之前的元素
document.myForm.city.options.add(city1);
document.myForm.city.options.add(city2);

Math
-----------
abs：求绝对值，如Math.abs(-5)得到5
exp：求E的n次方，如Math.exp(3)得到E的3次方
pow：求数的n次方，如Math.pow(2,3)得到2的3次方，即8
sqrt：求数的平方根，如Math.sqrt(9)得到3

ceil：向上取整，不小于
floor：向下取整，不大于
round：四舍五入，注意负数

alert(Math.round(-5.5)); //-5
alert(Math.round(-5.4)); //-5
alert(Math.round(-5.6)); //-6

max、min：取2个数的较大、小值
log：返回以E为底的自然对数
random：产生一个0-1之前的随机数

键盘事件
-------
onkeydown onkeypress onkeyup

鼠标事件中 事件对象 event.clientX  clientY

======表单=========
事件：omsubmit 
onblur：失去焦点
onfocus:获得焦点
//js 中手动提交表单
document.myform.submit();  //submit()是表单对象特有的方法
display:inline  取消自动换行
document.myForm.username.select(); //对象文本被选中

//让用户名文本框自动再获得焦点【FF不行】
document.myForm.username.focus();

=================正则表达式===============
正则表达式：被用于匹配一个字符串，查看此字符串是否满足特定的规则
正则表达式就是该规则的一个描述。
正则表达式其实就是一个模板。

定义：
var r = /pattern/attribute
var r = new RegExp(/pattern/attribute);

正则表达式包含：
匹配模式pattern：一个用于指定匹配规则的字符串
匹配特性attribute：一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
元字符：具有特殊含义的字符
量词：指定字符出现的次数
特殊符号：具有特定含义的符号
属性和方法：属性用于表示匹配状态，方法用于匹配操作


属性：
global：RegExp对象是否具有标志 g
ignoreCase：RegExp对象是否具有标志i
multiline：RegExp对象是否具有标志 m
source：正则表达式的源文本
lastIndex：下一次匹配的字符位置 
方法：
complie：编译正则表达式
test：检索字符串中指定的值，返回 true 或 false
exec：检索字符串中指定的值，返回找到的值，并确定其位置  //找不到返回null
regExp.exec(s) //返回一个数组 有三个属性 input index lastIndex
//alert(regExp.exec(s).lastIndex); //FF不支持


String类型提供了以下四个支持RegExp的方法
search：检索与正则表达式相匹配的子字符串，返回第一个与regexp相匹配的子串的起始位置，若找不到则返回-1
match：检索与正则表达式相匹配的子字符串，返回第一个匹配结果(无全局标志g)或存放所有匹配结果的数组(有全局标志g)
replace：检索与正则表达式相匹配的子字符串，然后用第二个参数来替换这些子串，全局标志g有效
split：按照与正则表达式匹配的字符作为分隔符


字符类
[abc] 	a、b 或 c（简单类）
[^abc] 	任何字符，除了 a、b 或 c（否定）
[a-zA-Z] 	a 到 z 或 A 到 Z，两头的字母包括在内（范围）
[a-d[m-p]] 	a 到 d 或 m 到 p：[a-dm-p]（并集）
[a-z&&[def]] 	d、e 或 f（交集）
[a-z&&[^bc]] 	a 到 z，除了 b 和 c：[ad-z]（减去）
[a-z&&[^m-p]] 	a 到 z，而非 m 到 p：[a-lq-z]（减去）

预定义字符类
. 	任何字符（与行结束符可能匹配也可能不匹配）
\d 	数字：[0-9]
\D 	非数字： [^0-9]
\s 	空白字符：[ \t\n\x0B\f\r]
\S 	非空白字符：[^\s]
\w 	单词字符：[a-zA-Z_0-9]
\W 	非单词字符：[^\w]

POSIX 字符类（仅 US-ASCII）
\p{Lower} 	小写字母字符：[a-z]

边界匹配器
^ 	行的开头
$ 	行的结尾
\b 	单词边界
\B 	非单词边界
\A 	输入的开头
\G 	上一个匹配的结尾
\Z 	输入的结尾，仅用于最后的结束符（如果有的话）
\z 	输入的结尾

Greedy 数量词
X? 	X，一次或一次也没有
X* 	X，零次或多次
X+ 	X，一次或多次
X{n} 	X，恰好 n 次
X{n,} 	X，至少 n 次
X{n,m} 	X，至少 n 次，但是不超过 m 次
注意：量词只对紧挨着的子模式起限制作用

===================================补充====================================
自定义类型
-----------
在js中，除了内置的一些对象类型外，我们还可以自定义对象类型

//自定义对象类型
function User(name,pwd)
{
	this.name = name;
	this.pwd = pwd;
}

//为User添加方法
User.prototype.introduce = function(){
	alert("我叫："+this.name);
}


var user = new User(userName,pwd);
//显示属性信息
alert(user.name);
alert(user.pwd);
user.introduce();


//为String添加一个trim方法
String.prototype.trim = function(){
	return this.replace(/^\s*/,"").replace(/\s*$/,"");
};

//为StringBuffer添加两个方法
StringBuffer.prototype.append = function(str){
	this.arr.push(str);
}
StringBuffer.prototype.toString = function()
{
	return this.arr.join("");
}

setAttribute getAttribute 方法
-----------
function changePic()
{
var img = document.getElementById("a");
img.setAttribute("src","ad-02.jpg") //属性名 属性值
alert(img.getAttribute("src"));
}

创建一个元素对象
----------------
function createNew()
{
 //创建一个元素对象
 var img = document.createElement("img");
 //给元素属性赋值
 img.setAttribute("src","ad-03.jpg");
 //将元素对象添加到body中  追加在body最后
 //document.body.appendChild(img);
 
 //将新创建的元素插入到莫个元素前面
 var oldImg = document.getElementById("a");
 document.body.insertBefore(img,oldImg);
}

删除一个元素对象
----------------
function deleteE()
{
	//获得要删除的元素对象
	var img = document.getElementById("a");
	//删除
	document.body.removeChild(img);
}

替换一个元素对象
----------------
function replaceE()
{
	//创建一个新的元素对象
	var text = document.createElement("input");
	//为属性赋值
	text.setAttribute("type","text");
	//获得旧元素
	var img = document.getElementById("a");
	document.body.replaceChild(text,img);
}

复制一个元素
----------------
function copyE()
{
	//获得要复制的元素对象
	var img = document.getElementById("a");
	//复制 cloneNode(boolean)
	//boolean：false:浅克隆 true:深克隆
	var newImg = img.cloneNode(false);
	//添加到body中
	document.body.appendChild(newImg);
}

function copyTable()
{
	//获得表格对象
	var table = document.getElementById("b");
	//复制表格
	var newTable = table.cloneNode(true);//false 不行 浅克隆不行
	//放入body中
	document.body.appendChild(newTable);
}

表格添加行，删除行
//为表格添加行
function addRow()
{
	//获得表格对象
	var table  = document.getElementById("b");
	//rows:表格中所有行的集合
	//alert(table.rows.length);
	var index = table.rows.length;
	//为表格新增一行 row:新增的行的对象
	var row = table.insertRow(index);
	//为行添加单元格
	var cell1 = row.insertCell(0);
	//cell1.colspan = "2"; //不行
	cell1.setAttribute("colspan", 2,0); //IE下需要0 标识下
	//cell1.innerHTML = "欢迎";
	//innerHTML会解析标签 innerText不解析标签
	cell1.innerHTML = "<input type='button' value='HH' />";
	//var cell2 = row.insertCell(1);
	//cell2.innerHTML = "光临";
}

function deleteR()
{
	//获得表格对象
	var table = document.getElementById("b");
	table.deleteRow(0);
}