JS知识点

js笔记1
------------------------------------------------------------------------------------------------------------
typeof();对变量或值使用，则返回它数据类型；

1.undefined：undefined

2.boolean：boolean

3.number：number

4.string：string

5.null或引用类型：object

类型转换：

alert("4"-3);

1.字符串类型和number做减法运算，会先将字符串转化为number，再运算。

aliert(‘4’+3);

2.做加法运算时，如果表达式中有一个为字符串，那都是做字符串连接操作。结果为“43”。

alert(2+3+"5");

3.结果时“55”，先做2+3运算，再和“5”做字符串连接。

alert("3"*"4");

4.结果为12，做乘法时，先将操作数转为number，再运算。

alert("四"*"五");

5.将字符串转变为number时，失败，结果为NaN。

alert(NaN==NaN);

6.结果为false，NaN表示为数字，它与自身不相等，一般发生再类型转为失败时。

alert("66"==66);

7.结果为ture，先将“66”转化为number，再比较。

alert("66"===66);

8.结果为false，===比较时，不但比较内容，而且还比较类型。

强制转换：

parseInt()：将字符串转化为numer类型.

var x="6";

x=parseInt(x);

alert(x);

1.上述结果为8。

alert(parseInt("65px"));

2.parseInt会将第一非数字以后的内容丢弃。

alert(parseInt("px65"));

3.如果第一个字符为非数字，结果为NaN。

parseFloat()：浮点字符串的转换

alert(parseInt("65.5"));

alert(parseFloat("65.5"));

1.parseFloat支持浮点字符串的转换。

正则表达式：

var rex=/^d{3,}$/;

alert(rex.test("3425345"));

1.test()用于检测字符串是否匹配正则表达式。

数组：

var a=new Array();

var b=[];

var c=[3.4.5.6];


1.数组定义

alert(a.length);

2.数组长度

c[1]=12;

c[10]=10;

c.length=3;

alert(c);

3.数组赋值

alert(c.length+" "+"fdfdsa".length);

4.数组和字符串的长度采用length属性获得。

c.push(10);

alert(C);

5.向数组的尾部追加元素。

日期：

var d=new Date();

alert((d.getYear()+1900)+" "+(d.getMonth()+1)+" "+d.getDate());

1.得到当前事件的日期类型。

验证字符串是否为非数字：

alert(isNaN("123"));

判断数字是否有界：

alert(4);

alert(4/0);

解释执行一段字符串：

alert("abc");

eval("alert('abc')");

流：

流按传输内容分为字节流、字符流、对象流。但是无论是什么流，底层都是字节传输。所以，真正流只有字节流。
但是为流方便程序员对字符数据，和对象数据进行操作，所以，再自己的了基础上错流一层封装，形成流字符流和对象流。

JS对象特点：

1.JS是一个基于原型的面向对象的语言，只有面向对象的的部分特征，没有类，没有接口。

2.JS的函数也是一种对象。

3.JS对象的属性和方法，可以再运行期间动态的添加或删除。
---------------------（运行期间动态的添加或删除）例子------------------------------

var obj=new Object();

obj.age=90;

obj.name="张三";

obj.job="经理";

alert(obj.name+" "+obj.age+" "+obj.job);

delete obj.job;

alert(obj.name+" "+obj.age+" "+obj.job);

----------------------------------------------------------------------------------------

获取对象属性值：

1.alert(obj.name);

2.alert(obj["name"])；

获取对象属性和方法：

for(var fileName in obj){

alert(fileName+" "+obj[fileName]);

}

创建对象：

function Man(name,age,job){

this.name=name;

this.age=age;

this.job=job;

}

var m1=new Man("张三",20,"经理");

var m2=new Man("李四",18,"程序员");

alert(m1.name+" "+m1.age);

alert(m2.name+" "+m2.age);

---------------------------------------------------------------------

//属性名可以加引号也可以不加

//创建json对象

var obj={};

var man={name:"张三","age":12,job:"经理"};

alert(man.name+" "+man.age+" "+man.job);

----------------------------------------------------------------------

var storArray=[{name:"面包",price:5,address:"四川"},

{name:"饮料",price:10,address:"广州"},

{name:"雨伞",price:20,address:"上海"}];

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

var obj=storArray[i];

alert(obj.name+" "+obj.price+" "+obj.address);

}

----------------------------------表格处理-----------------------------------------

window.onload=function(){

var str="";

var dataObj=document.getElementById("data");

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

var obj=storArray[i];

str +="<tr><td>"+obj.name+"</td><td>"+obj.price+"</td><td>"+obj.address+"</td></tr>";

}

dataObj.innerHTML=str;

}

js笔记2
------------------------------------------------------------------------------------------------------------
事件流：

1)事件冒泡(IE)

1.先响应事件源，再响应父容器

2)事件捕获(NetsCape)

2.先响应父容器，再响应事件源

3)事件处理(FireFox)

3.事件处理(以选择先响应父容器，还是先响应事件源)。

JS事件添加的方式有两种：

传统事件添加

1.兼容性好，一个事件只能绑定一个函数。

现代事件添加

2.兼容性不好，不同的浏览器有不同的实现方式，一个事件可以绑定多个函数。

事件类型：
鼠标事件
键盘事件
HTML事件

js总结
------------------------------------------------------------------------------------------------------------
JS总结：
1、javascript的特点
是一种嵌入在网页中的程序段。(客户端脚本语言)
是一种解释型语言，被浏览器解释执行。
JavaScript借用了Java的名字，也使用了部分java的语法。
增强客户端的交互功能。

2、在网页中嵌入js的方式
内嵌式：
<script>
……
</script>

外联式：<script src="aa.js"></script>

直接编写在元素的事件属性中：<input type="button" value="提交" onclick="alert()">

超链接伪URL方式：<a href="javascript: alert('hello World');">Click</a>

3、js变量的特点
弱类型，不一定要初始化。
弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。
正因为javascript是弱类型的语言，所以形参不能指明变量的类型。
js变量定义：var x;

4、js原始类型：
undefined:
当声明的变量未初始化时，值为undefined。
当函数无明确返回值时，其调用结果也是undefined。

null：表示不存在的对象。，null是从Undefined派生来的。因此null==undefined

boolean：true或false

number：数字型，可以是整数，可以是浮点数

NaN表示非数字，它与自身不相等。一般发生在类型转换失败时，isNaN()较验是否为数字。

string：可用单引号或双引号声明。比较是否相等用==，方法大部分和java类似。长度：var x = "abc";alert(x.length);

5、使用typeof得到指定变量存放数据的类型。typeof(null) 返回object
使用instanceof判断变量指向对象是否匹配某个类型
var s = new String("hello world");
var b = s instanceof String;
alert(b); //输出true

6、自动类型转换规则
var x = "10"-2;结果：8 —— 自动将"10"转为Number类型
var x="10"+2;结果：'102'-------如有一个为字符串，则是连接
var s=9+2+"8";结果：'118' —— 先进行9+2结果为11，再和”8”连接
var x="2"*"3";结果：6 。自动将字符串转为整形
var y="4"*"abc";结果：NaN ——相乘如有一个为非数字NaN，则结果为非数字NaN

==比较内容，可以进行自动类型转换。===比较时，同时比较类型
alert(55=='55');结果为true; alert(55==='55');结果为false;

7、parseInt()和parseFloat，将字符串转化为number类型
var a = parseInt("1234px"); //返回1234
var b = parseInt("abc"); //返回NaN

8、正则表达式：
var x=/^a{2,8}$/;
alert(x.test("aaa"));
正则表达式一般用于表单验证。<form onsubmit="return checkForm()"> 如果checkForm()返回false，则阻止表单提交
表单提交：表单对象.submit()

9、数组：
创建数组：var x = new Array();
var arr = [1,2,3,4,5,6,7,8];

arr.length; //数组长度
arr.push(100);//追加元素。

10、日期类型
function setDate(){
//创建日期对象
var date = new Date();
//得到年月日，时分秒
var str = (date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 ";
str += date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
spanObj.innerHTML = str;

}

//设置时间函数
var id=window.setInterval("执行代码",毫秒数);
//清除时间函数
window.clearInterval(id);

11、Global全局对象常用方法
isNaN()：判断是否是非数字
parseInt()：将字符串转化为整型，会将第一个非数字以后的字符全部忽略，转化失败为NaN
parseFloat()：将字符串转化为浮点型，转化失败为NaN
eval()。将字符串作为js代码执行。
eval("alert('abc')") 等价于 alert('abc');
encodeURI 将中文，空格重新编码

12、js对象特点
a、js是基于原型的面向对象语言，只有对象，没有类，没有接口。
b、js的函数也是对象
c、js对象的属性和方法，可以在运行期间动态的添加和删除

13、访问、删除、遍历对象属性：
访问对象属性：对象.属性名 var obj = {id:1}; alert(obj.id);
对象["属性名"] var obj = {id:1}; alert(obj["id"]);

删除属性：delete 对象.属性名

遍历对象属性列表
for(var x in dog1){//x为属性名，dog1["属性名"]取该对象指定属性名的值
alert(x+" "+dog1[x]);
}

14、json格式对象
var x = {};
var obj = {name:'张三',age:30};
var arr = [{name:'张三',age:30},{name:'李四',age:24},{name:'王五',age:28}];

15、事件流
事件流意味着页面上不止一个元素可响应相同的事件。
事件冒泡(IE)。(先响应事件源，再响应父容器)
事件捕获(NetsCape)。(先响应父容器，再响应事件源)
事件处理(FireFox)。事件处理(可以选择先响应父容器，还是先响应事件源)

16、事件委派的方式：

传统事件：兼容性好，一个事件只能绑定一个函数：
div1.onclick = function(){

}
div1.onclick=divClick;//只能写函数名

现代事件：一个事件可以绑定多个函数，但兼容性差。

一定要等待浏览器将元素加载完毕后，才能给元素添加事件。一般在window.onload中书写事件添加

17、事件处理程序返回值
如果事件中返回值为false，可以阻止元素默认行为

18、event对象：事件发生时，用于描述事件信息的对象。可以获得鼠标信息和键盘信息
var e;
if(window.event){
e=window.event;
}
else if(arguments[0]){
e=arguments[0];
}
可以通过e.cancelBubble=true(IE)或e.stopPropagation()(firefox)中止事件传播

19、事件类型
鼠标事件：onclick(单击)、onmousemove(移动)、onmouseover(进入)、onmouseout(离开)
键盘事件：keydown(按下)、keyup(弹起)
html事件：window.onload(文档加载完毕后执行)、window.onunload(文档卸载完毕后执行)、onchange(下拉框选项变化执行)、onsumbit(表单提交执行)、onblur(失去焦点执行) onfocus(得到焦点执行)
刷新页面的时候，会触发load事件和unload事件。

20、跳转页面
location.href="aaa.html";

21、dom操作常见方法
createElement()创建新元素
appendChild() 追加元素
removeChild()删除元素
replaceChild()：替换元素
parentNode 父元素
nextElementSibling下一个元素兄弟节点
previousElementSibling上一个元素兄弟节点

22、获得文本节点
元素节点.firstChild-获取文本节点
textNode.nodeValue="..." - 设置文本内容

23、访问元素节点：
getElementsByTagName(name)：得到元素指定标记子元素集合
getElementsByName(name)：得到指定name属性的元素集合
getElementById(id)：按ID得到元素对象

24、innerHTML：表示元素中间的文本。在老标准中，table和select不支持。
value属性一般只用于表单元素

25、改变元素的样式，需要style属性，如果样式中有-，则去掉-，采用驼峰命名法
元素对象.style.backgroundColor="red";
通过style属性操作的是内嵌样式。

改变元素对象的class属性：
<div class="aaa"></div>
对象.className="aaa";

26、
multiple：将下拉框变为列表框，可以选中多个选项。
判断下拉框选项是否选中：selected
判断复选框、单选框是否选中：checked

js运算
------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
//字符串类型和number做减法运算，会先将字符串转化为number，再运算
//alert("4"- 3); 结果为1

//做加法运算时，如果表达式中有一个为字符串，那么都是做字符串连接操作。
//alert("4" + 3); 结果为43

//结果是"55"，先做2 + 3运算，再和"5"做字符串连接
//alert(2 + 3 +"5");

//结果为12，做乘法运算时，先将操作数转为number,再运算
//alert("3" * "4");

//将字符串转化为number类型时失败，结果为NaN。
//alert("四" * "五");

//alert(NaN == NaN);

//结果为true。先将"66"转化为numbe,再比较
//alert("66" == 66);

//结果为false。===比较时，不但比较内容，而且比较类型
//alert("66" === 66)

//var x = "6";
//将字符串转换为number类型
//x = parseInt(x)
//alert(x + 2);

//parseInt会将第一个非数字以后的内容丢弃
//alert(parseInt("65px"));
//如果第一个字符为非数字，结果为NaN
//alert(parseInt("px"))

//parseFloat()支持浮点字符串的转换
//alert(parseInt("65.5"))
//alert(parseFloat("65.5"))

//var rex = /^d{3,}$/;
//test()用于检测字符串是否匹配正则表达式
//alert(rex.test("3425345"));

//定义长度为0的数组
//var a = new Array();
//var b = [];
//var c = [3,4,6,8,9]

//c[1] = 12;
//c[10] = 10;
///c.length = 3;
//alert(c[0])
//数组和字符串的长度采用length属性获得
// alert(c.length + " " + "afafawe".length)

//向数组的尾部追加元素
//c.push(10)
//alert(c)

//得到当前时间的日期类型
//var d = new Date();
//alert((d.getYear()+1900)+ " "+(d.getMonth()+1)+" "+ d.getDate())

//验证字符串是否为非数字
//alert(isNaN("123"))
//判断数字是否有界
//alert(isFinite(4/0))

//alert("abc")
//eval("alert('abc')")

//alert("dajfg 哈说哈 kjf")

// var obj = new Object()
// obj.name = "哈哈哥";
// obj.age = 25;
// obj.job = "包工头";
//alert(obj.name + " " + obj.age + " " + obj.job)

//删除对象的属性
//delete obj.age
//alert(obj.name + " " + obj.age + " " + obj.job)

//得到对象属性值的方式
//alert(obj["name"]+ " "+obj["job"])

//遍历对象中所有属性和方法
// for(var fieldName in obj){
// alert(fieldName+" "+obj[fieldName])
// }

// function Man(name,age,job){
// this.name = name;
// this.age = age;
// this.job = job;
// }
//
// var m1 = new Man("张三",20,"搬砖工");
// var m2 = new Man("哈哈哥",35,"毒贩");
// alert(m1.name+" "+m1.job+" "+m1.age)
// alert(m2.name+" "+m2.job+" "+m1.age)

// var obj = {};//var obj = new Object();
//
// var man ={name:"张三",age:35,job:"搬砖工"}
// alert(man.name+" "+man.age+" "+man.job)

var manArray = [{name:"张三",age:23,job:"泥瓦匠"},{name:"李四",age:27,job:"司机"},{name:"哈哈哥",age:35,job:"包工头"}]
// for(var i = 0;i < manArray.length; i++){
// alert(manArray[i].name+" "+manArray[i].age+" "+manArray[i].job)
// }

var commodityArray =[{name:"洗衣机",price:1200,address:"青岛"},
{name:"电视",price:2400,address:"绵阳"},
{name:"冰箱",price:1800,address:"深圳"}]
// for(var i = 0;i < commodityArray.length; i++){
// alert(commodityArray[i].name+" "+commodityArray[i].price+" "+commodityArray[i].address)
// }

// for(var fieldName in commodityArray){
// alert(fieldName+" "+commodityArray[fieldName])
// }

window.onload = function(){
var tableObj = document.getElementById("table")
var src ='';
for(var i = 0; i < commodityArray.length; i++){

src += "<tr><td>"+commodityArray[i].name+"</td><td>"+ commodityArray[i].price +"" +
" </td><td>"+ commodityArray[i].price +"</td></tr>"
}

tableObj.innerHTML = src
}

var a = parseInt("10"+2)*2
alert(parseFloat("asp"))

window.onload = function(){

}
</script>
</head>

<body>
<table border="1" cellspacing="0">
<thead>
<tr><th colspan="3">家电</th></tr>
<tr><th>商品类型</th><th>价格</th><th>产地</th></tr>
</thead>

<tbody id="table">

</tbody>
</table>
</body>
</html>