javascript 学习笔记

偶尔翻出以前学习JavaScript做的一些笔记，大体是当时觉得有必要留心的一些东西，怕一不留心删了又错过了，就贴在这里，做个纪念。

javascript手册--同步

1、doucument.write("");输出里面内容要加双引号或单引号
2、<a href="javascript:alert('sssss');">点击显示</a> ----双引号里面要使用单引号，使用双引号无法显示。
3、js区分大小写
4、数组用中括号[]包起来;
5、变量定义用var i，其他地方都不用加上var符号，常量定义使用都直接用i；
6、<条件表达式> ? 第一语句：第二语句表达式为true执行第一条语句，false执行第二条语句。
7、注释用//和/* */
8、js调用类里面的方法是实例化后直接点加方法。var a=new Date(); var b=a.getHour();
9、js默认对象和方法--直接调用，不用定义和引用。
（1）日期对象，Date(),日期对象的方法getHour（）等等。
（2）数组对象，Array（），属性：length 方法：join/toString/reverse(反转)/valueOf
（3）字符串对象，属性：length 方法bold(),fontsize(),replace();search()等
（4）布尔对象方法：toString/valueOf
（5）数学对象属性：Math.方法（参数）。ceil/floor/round/min/max/pow/random/sqrt等，例如：document.write(Math.round(3.14));取3.14整数部分--3
（6）自定义对象

10、js里面字符串length是属性不是方法，调用的时候后面不用加括号（），length数组调用是计算数组元素个数，字符串调用是计算字符串长度。js调用属性都不用加（）如：name,value,type；
11、默认函数
（1）非字母、数字字符<---escape()/unescape()--->ASCII码
（2）eval() 求值函数，可以求出字符串里的确切值，已知的两个地方用得上1.如eval("1+2")--3, 2、如function show(obj){var str=eval("document.form."+obj+".value");alert(str);}---调用函数show("name")若未加eval，输出document.from.name.value，调用eval会输出该表达式document.from.name.value对应的值。即若没有eval，上面str只是一个字符串。
（3）isNaN() 是否为数值，返回布尔值。
（4）parseInt()，将其他进制数转化成十进制。parseInt("11",2);2进制转化成10进制，得到3
（5）parseFloat(),将数值转化成浮点型数据。
12、所有触发事件,Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove、Blur/Focus、Change（适用t/pw/ta/select）、DragDrop/move（适用窗口拖拽/移动）、Reset/Submit(适用表格)、Abort（图像未加载完）、Error（加载图像或文件出现错误）
13、给font、span文字加上跳转，可以是on事件="location='http://www.baidu.com'"
14、font、span的属性有 location（链接）、status（文字信息）、color（字体颜色）、face（字体）。
15、定时器（1）毫秒后执行表达式一次setTimeout("表达式",毫秒); 终止该定时器clearTimeout(对象名);
（2）每隔毫秒执行表达式一次，无限循环setInterval(); clearInterval(对象名)终止该定时器。
16、图像对象--- 属性：border complete height hspace lowsrc name src vspace width
选择器：document.image[i]
17、navigator对象--浏览器、mime、外挂程序信息 navigator.appName --- navigator.plugins[i].name ---navigator.mimeTypes[i].description
18、窗口对象-- 方法：alert/confirm/prompt/back/forward/open/focus/blur/stop/close/ 例：open("1.hmtl","窗口名","窗口特点")
19、历史对象---history.属性：current/length/next/previous 方法：back/forward/go(整数或url)
20、文件对象---document.属性：lastModified/title/width/forms/images/linkColor/等。方法：write/等。
21、锚点对象---document.anchors[i] 属性：name/text
22、链接对象---document.links[i] 属性：hash/href/port/search/text/x/y。方法：handleEvent（）。
23、表单对象---document.forms[i]或document.表名，属性：action/elements/encoding/length/name/target,方法：reset/submit/handleEvent
24、表单对象里面文版对象---document.forms[i].elements[i].属性(elements[i]中的i表示在表单中的顺序位置)-或-document.表名.文本名.属性，，方法blue/focus/hangleEvent/select
25、表单对象里面单选键/复选框对象---多了属性checked
26、获取option里面的值（非value值）得方法。a=document.forms[i].weekday; b=a.options[a.selectedIndex].text; return b;其中weekday是select里面的name属性。value可以document.form[i].weeked.value;

js疑问：
1、document.write("<pre>未满十八岁不得进入！</pre>")，为毛放在<pre>里面这样可以另起一行，其他不可以？？？
2、var now=new Date(); var hour = now.getHour(); Date()类和getHour（）方法并没有定义和引用，是系统默认定义的么。
3、为什么if (day = 0) dayName = "星期日";else if (day = 1) dayName = "星期一";和if (day == 0) dayName = "星期日";else if (day == 1) dayName = "星期一";的区别=和==？？？
4、现在js修改font、span的status为何不生效了，还有什么其他属性？？？
5、js选择器--剩余的选择器呢？？
document.form.name.value --- form/name都是name属性
document.all['news'].style.display --- news是id属性
xuan.innerHTML --- xuan是id属性
6、js数值转化---字符串？？--数值
7、onkeyup？？？什么事件。。。光标转移么？？
8、地区联动做一个简单版的。。。
9、<script>
function chuan(){
jx =["南昌","吉安","赣州"];
hn = ["长沙","德兴","湖南市"];
var bb = document.xuan.zhu.value;
for(var i=0;i<bb.length;i++){
var cc = new Option(bb[i]);
document.xuan.fu.options[i]=cc;
}
}
</script>
1、这里我循环出来是j和x，或h和n，而不是数组里面的元素，为什么？这边赋值给bb的事字符串“jx”或“hn”，怎么把它弄成可识别的数组常量并循环输出里面的元素。
2、function createOptions(){
var option = new Option(document.fo.select1.value)
document.fo.select2.options[2] = option;
document.fo.select2.options[2].value = eval(option);
}为什么options[i].value赋值返回[object HTMLOptionElement]

<form name="xuan">
<select name="zhu" onchange=chuan()>
<option value="jx">江西
<option value="hn">湖南

</select>
<input type="button" value="-->" >
<select name="fu">
<option>选择项目

</select>
</form>

1、变量
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。开头不
能数字和（_$）以外的其他特殊符号，中间不能用（_$）以外的其他特殊符号。
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字（break else if for 之类的）和保留字
（int/char/import/public之类的）做变量名。

2、优先级：
算术操作符(*/+-) → 比较操作符（><=） → 逻辑操作符（&& ||） → "="赋值符号

3、定义数组两种方式：
var newarr = new Array(8);虽然指定长度，超过仍然可以使用。
var newarr = [1,2,3,4];

（2）myarray.length; 计算数组元素数量----注意：length是属性、属性，不是方法，不用
括号。
案例：var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
（3）创建并输出二维数组
<script type="text/javascript">

var myarr = new Array();

for(var i=0;i<3;i++){

myarr[i] = new Array();

for(var j=0;j<6;j++){

myarr[i][j] = i*j;

document.write(myarr[i][j]);

}

document.write("<br/>");

}

</script>

4、if(){} else if(){}else{} (else if中间间隔)
5、switch（）{case: break; default:}
6、for()
7、while()
8、for(){if(){break;}} break;跳出当前循环
9、for(){if(){continue;}} break;跳过本次执行，继续执行下次循环

js对象：
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和
方法。
对象关键词首字母要大写。如 Array/Date/Math

(1)如字符串对象：var a = 'abcd';
属性:length
方法：
toUpperCase()/toLowerCase()、charAt(位置是哪个字符)、indexOf(参数1是要查找的字符，
参数2是开始位置，默认0，首次出现位置)
split('通过什么区分',多少段) 拆分字符串成数组
substring(开始，结束) 截取字符串
substr(开始，长度) 截取字符串

(2)var d = new Date(); 输出星期月日时分秒时区年
日期两种写法，Date(2001,10,1); Date('Oct 1,2001')
getFullYear/getDay(星期，0-6,0位周日)/getTime(时间戳)

(3)Math对象
abs(绝对值) / ceil(上舍入 3.2->4) 、floor（下舍入 3.2->3）、round(四舍五入，注意负
数时候-3.5->-3)min/max（比较a,b）/ random()

(4)Array数组对象
属性：length
方法：
concat(连接几个数组);
join(数组合并成字符串);经常和字符串对象方法split()结合使用。
reverse(颠倒数组里面元素)
sort() 默认unicode码,若指定方法另外。

(5)计时器 setTimeout()执行一次 setInterval() 循环执行
(6)调用函数 clock
setInterval("clock()",1000) 或 setInterval(clock,1000)
setTimeout(sid是先前对应设置好的)要停止要先设置var sid = setInterval();
(7)history()对象
属性：length
方法：back()/go(-1)、forward()/go(1)
(8)location 对象
属性：href(链接) 、hostname(域名)/hash/host/pathname/port/protocol/search
方法：assign()/reload()/replace()
(9)Navigator对象浏览器
属性： appCodeName/appName/appVersion/platform/ userAgent(区别火狐、谷歌、ie 浏览
器)
(10)screen对象
属性：可用宽高availHeigh/availWigth/colorDepth/pixeDepth/宽高height/width

(11)DOM对象
选择器：getElementsByName/getElementsByTagName/getElementById(id唯一，element没有
s) 获取后也有长度属性length. 方法：setAttribute()/getAttribute() 设置、获取属性
注意：Tag 和 Name方式获取的dom节点可能有多个，若要操作获取后要添加位置如 dom[0],Id
方式唯一不需要如此。
案例：
var hobby = document.getElementsByTagName("input");

for(var i=0;i<hobby.length;i++){

if(hobby[i].type=='checkbox'){

hobby[i].checked='checked';
//或true选择 / false取消选择
}

}

for(var i=0;i<mychk.length;i++){
mychk[i].checked = false;
}

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

子节点操作childNodes：
*子节点 document.getElementsByTagName('div')[0].childNodes;
*首末节点：document.getElementsByTagName('div')[0] --- 1、firstChild 2、lastChild

*父节点parentNode：上一级节点

*兄弟节点 sibling: nextSibling / previousSibling （当前上一个、下一个节点）

*插入节点 appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点。
fu节点.appendChild(zi节点)

*insertBefore() 方法可在已有的子节点前插入一个新的子节点。fu节点.insertBefore(zi节
点,指定子节点)

*removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可
返回被删除的节点，如失败，则返回 NULL。 nodeObject.removeChild(node)

*replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 node.replaceChild
(newnode,oldnew )

*createElement 创建元素节点 document.createElement(tagName)

*createTextNode 创建文本节点

（12）
浏览器：
clientHeight / scrollHeight网页内容 /offsetHeight和offsetWidth，获取网页内容高度和
宽度(包括滚动条等边线，会随窗口的显示大小改变)。

卷起来的浏览器宽高：
scrollLeft / scrollTop 常用
offsetLeft / offsetTop 含上滚动条和左页面空白

练习：
1、
<b id='vv'></b>秒后回到主页
<a href='' onclick="history.go(-1)">返回</a>

<script type="text/javascript">

function jian(){

var num = 5;

document.getElementById("vv").innerHTML=num;
if(num<=0){

window.location.href = 'https://www.baidu.com';

}else{
num--;

setInterval("jian()",1000);

}

}

jian();

</script>

2、
var j=document.getElementById("wb").value;

var a = j+1;

var hobby = document.getElementsByName("hobby");

hobby[a].checked=true;
获取不到a个数。。

疑问：
如要实现这一点，就必须使用一个排序函数，代码如下：
sortNum理解：sort是使用冒泡法排序的，每次冒泡都使用这个函数比较相邻的两个数，为真
则交换位置，为假不动。