JS总结

js

2013年4月3日

15:57

1.特点：它是一种解释语言，由浏览器执行，所以它是跨平台，因为它只和浏览器的关系

2.语法是一种动态语言

3.可以代替服务器来完成一些客户端的操作,它可以写在网页的任何位置。只不过一般写在head里面。

4.语法和JAVA有相似，但不完全一样。

5.它是以事件做为驱动。用户可以创建函数（方法）

6.JS代码是从上到下依次执行。但是用function(){}来定义的对象会优先执行。

7.当你在调用或者绑定方法的时候加了(),那么一定会执行这个方法。

8.如果你只是将方法名赋值给事件,那么仅仅是将方法的引用赋值给事件，相当于事件的动态绑定, 如果需要执行方法,还需要触发事件.

9.方法可以返回值,但是如果返回给js对象默认的事件，则返回值必须是Function()类型的对象，否则结果是null

10.一个事件的绑定响应只有一个。

11:弱类型是指声明的时候不去做类型的判断,在运行的时候才真正去判断类型.Var

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

//1.你把方法写好，那么方法编译会会常驻内存

        //2.还可能将系统已经存在 的方法覆盖掉了。

        //3.在JS里面没有重载如果方法名称一样，后面会将前面覆盖。

        //4.参数不是必须的，你在定义方法的时候可以设置参数，也可以不设置，如果你设置了参数，在调用的时候也可以不传递相应的值。如果没有设置参数，在调用时候也可以传递进去值。和C#的方法调用的语法不一样（参数类型，个数，顺序需要对应）

        //5.如果是在调用的时候加了(),那么就相当于执行了这个方法，如果只是方法名，那么就相当于绑定了方法的引用，如果需要方法起作用，还必须做触发。

匿名方法

onclick

 

一：js可以做什么：

可以完成可以在客户端实现的功能，它是一种运行在浏览器上的动态语言

 

二：组成：

 

屏幕剪辑的捕获时间: 2013/4/3 17:22

 

三：JavaScript的页面引入

·        标签直接引入脚本

    如：<script type="text/javascript"> 脚本语言</script>

·        标签引入脚本文件

如： <script type="text/javascript“ src=“path/xx.js”></script>

注意：1. 脚本文件后缀为.js 。 2.</script>结束标签不能简写

·        协议引入脚本

如：<a href=“javascript:alert(“”)”>单击我</a>

·        推荐使用1，2种。

四：js语法

·        注释  //     /*  */

·        变量 (变量名必须由字母、数字、_和$组成，不能以数字开头)

·        运算符  + - *　／　％

·        判断语句　ｉｆ　ｅｌｓｅ　ｓｗｉｔｃｈ　ｃａｓｅ

·        选择语句

·        循环语句　ｆｏｒ（ｖａｒ　ｉ　ｉｎ　ａｒｒ）得到下标而不是值

·        函数

·        事件机制

五：调试：

 

六：常用函数：

·        decodeURI() 解码某个编码的 URI

·        encodeURI() 把字符串编码为 URI

·        decodeURIComponent() 解码一个编码的 URI 组件

·        encodeURIComponent() 把字符串编码为 URI 组件

·        escape() 对字符串进行编码   (ECMAScript 3不推荐使用，用上面的函数代替)

·        unescape() 对由 escape() 编码的字符串进行解码

     当一个数值 除以 0的时候，返回一个 无穷大值（infinite）

·        isFinite() 检查某个值是否为[有穷大]的数。

·        isNaN() 检查某个值是否是数字。 Is not a number

·        parseFloat() 解析一个字符串并返回一个浮点数

·        parseInt() 解析一个字符串并返回一个整数

七：数组：js的数组相当于c#的数组，集合，hashTable的集合 同时它是动态的--它的属性可以动态的增加。

Var arr=new Array();

Var arr=new Array(1,2,3);

1.可以动态的为数组添加属性：

Var arr=new Array();

Arr.name="张三";

Arr.age=20;

Alert(arr.name+":"+arr.age);

2.数组的值的类型是OBJECT,所以里面可以存放任意类型的值

 如：var arr=new Array();

Arr[0]="aa";

Arr[1]=100;

3.数组里面的值也可以是一个对象类型，如：

Var arr=new Array();

Arr[0]=new Array();

Arr[0][0]="name";

Arr[0][1]=20;

4.也可以使用字面量表示法来为数组赋值：

var array = new Array();

array[0] = { "name": name ,"age": 20,"address": "广州" };

5.可以使用字面量表示法同时赋多个值：,注意这里是【】

var arr = [

            {"name": "aa", "age": 20, "address":"广州" },

            {"name": "bb", "age": 20, "address":"深圳" }

        ];

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

 

js操作方式主要有两种：BOM  DOM

1.BOM:browser objectmodel:浏览器对象模型，我们所看到的浏览器窗口就是Browser

2.DOM:document objectmodel:文档对象模型（文档就是主要指body里面的东东,也可以认使用标签创建的元素都是dom编程。）

3、BOM对象：

·        window：顶级对象，所有的都可以认为是window的对象   

·            moveTo(X, Y) 移屏幕

·            resizeTo(X,Y)修改屏幕大小

·            Open():在新窗口里面打开一个页面

·        navigator：获取浏览器相关信息

·        appCodeName:返回浏览器的代码名

·        appMinorVersion:返回浏览器的次级版本

·        appName:返回浏览器的名称

·        appVersion:返回浏览器的平台和版本信息

·        browserLanguage:返回当前浏览器的语言

·        screen：屏幕

//如果用户的分辨率太低，则给出相应的提示

           // if (window.screen.width >1024) {

                //alert("电脑还不错");

            }

    //整个屏幕的原始宽度

            //alert(window.screen.width +":" + screen.height);

            alert(window.screen.availWidth +":" + screen.availHeight); //可用宽度，相当于浏览器body容器的宽度和高度，不带状态栏

            //可用宽度，会根据用户的屏幕大小来变化。

           alert(window.innerWidth+":"+window.innerHeight);

·        history：前进 后退  history.go(1)  history.forward()  、  history.go(-1)  history.back()

·        location：链接，url，这里需要注意，当你会使用location来做网络页面的跳转的时候 必须添加全路径 （协议 ），如http://www.baidu.com

·        Document:整个文档

·        frames：框架:注意body和frameset不能共存。如果使用alert(typeof document.framaset),得到的类型就是frameset类型。

 

浏览器做了什么事情：根据从报务器返回的字符串（请求响应报文）生成相应的图形界面，同时还会按照浏览器的语法规则生成相应的dom树（存储在内存中，以对象的形式存在）,方便程序员来操作dom元素。动态的修改网页的节点，生成相应的效果。

Document对象：

1.document.getElementById("id名称")：通过Id获取元素

2.document.getElementsByName("name属性"):通过name获取元素，返回一个数组

3.document.getElementsByTagName("标签名称")：通过标签名称获取元素，返回一个数组

4.document.getElementsByClassName("类样式名称")：通过标签所调用的类样式名称获取元素，返回一个数组

5.document.all；获取所有页面元素（与dom相关）

 

 

 

window

location

bom编程

history

document

navigator

screen

 

c++/c-object

HTML

DOM操作:

HEAD

BODY

一：节点的添加和删除：

1.创建：document.createElement("名称")

//创建一个li标签

 var liNew =document.createElement("li");

2.赋值：

//为li标签赋文本值---如果是双标签，那么标签的文本值就是innerHTML或者innerText ,否则就是value

liNew.innerHTML = "我的家乡"; 

3.追加：

//将创建好的li标签添加到ul里面  appendChild是将创建好的新标签添加到父级元素的最后

//ullist.appendChild(liNew);

ullist.insertBefore(liNew, ullist.childNodes[3]); //插入到ullist.childNodes[3]的前面

4.删除：这时有一个陷井，注意在做事件绑定的时候系统会运行匿名方法，造成i的值已经是9，所以使用this。同时建议使用父元素删除子元素的方式删除元素，这样更保险。发现问题一定要多调试，找到问题

 

 

DOM属性:

  说明：在网页里面，node表示所有可能的节点类型（包含元素1，属性2，文本3，注释8，文档9），但是element只包含元素节点。

·        parentNode(返回当前节点的父节点)

·        childNodes (返回指定节点的所有子节点)---数组

·        nodeType  (返回节点的类型，一般是整数)

·        元素element     1  ---指标签 <>

·        属性attr            2   <p color=""         getAttribute()   setAttribute()   使用attributes[]

·        如：alert( document.body.attributes["bgcolor"].nodeType);

·        文本text             3    #text

·        注释comments 8   <!--   -->

·        文档document  9   document   如：alert(window.document.nodeType);

 

nodeName:标签的名称，返回的结果都是大写， 文本的nodeName是#text，注释的nodeName是#comment

nodeValue:返回value，但是只对文本节点和注释有用,对于标签没有作用。

·        firstChild 和 lastChild

·        获取当前节点的第一个（childNodes[0]）或最后一个节点 (childNodes[length-1])

·        parentNode

·        获取当前元素的父节点---在删除的时候通过父元素删除最可靠

·        nextSibling

·        获取当前节点的下一个节点：得到下一个元素，这个元素的类型可以包含空文本节点

·        previousSibling

·        获取当前节点的上一个节点,在网页里面，node表示所有可能的节点类型（包含元素1，属性2，文本3，注释8，文档9），但是element只包含元素节点。nextElementSibling只 能得到元素结点

·        dom树的层次关系：

·        level是相对于根节点（html）而言,如果深度一样,同时父结点一样，就可以认为兄弟结点

·        Index:是相对于父结点而言，索引值如果一样并不能说明他们是兄弟结点。

 

 

 

 

 

 

LINK

TITLE

P

DIV

SPAN

#text

 

a

b

 

li

input