Jquery+javascript学习笔记---第一周

*******************************************************以上为待补内容********************************************************

第六章的面相对象的设计思想

    通过对象字面量来构建对象

            var person = {

                        name:"tom",

                        age    ：12，

                        syaName: function(){

                                alert(this.name);

                    }  

                }

在核心对象定义中，分为了不同的属性类型，数据属性和访问器属性

        数据属性包含了一个数据值的位置，数据属性通过    4个描述其行为的特性

    [[configurable]] 能否通过delete属性来重新定义属性，这个特性的默认值为true

    [[enumerable]]能否通过for-in来循环返回属性 默认值为true

    [[wirteable]]能否修改属性的值   true

    [[value]] 属性的值，默认为undefined

    访问器属性

        通过一对get和set方法来表现的，这种办法不是必须的

javascript的几种创建对象的模式

        工厂模式：这种 模式抽象了具体对象的过程，在javascript中是通过函数来实现的

        function createPerson(name ,age ,job){

                var object = new Object();

                object.name=name;

                object.age=age;

                object.job=job;

                object.sayName:function(){

                    alert(this.name);

            }

                return object;

    }

上面的模式可以创建具有相似属性的对象，但是没有解决对象识别的问题，因此，对象模式的另一种开发出来，就是构造函数模式

    构造函数模式：通过自己创建原生的对象

    function Person(name,age,job){

        this.name = name;

        this.age = age;

        this.job=job;

        this.sayName=function(){alert(this.name);}

    }

在实例化对象的时候可以通过new关键字来创建，并且创建的所有的对象都有一个constructor 

同时判断某个对象的类型上 obj instanceof  Object

将构造函数当做普通函数来用

Person("jack",20,"docss");

此种调用：当在全局作用域种调用一个函数的时候，this对象总是指向Global对象，及window对象

直接来用window对象来调用

window.sayName();

在另一个对象的作用域中调用

var o = new Object();

Person.call(o,"jack",25,"dojs");

o.sayName();

最后也可以使用call或者apply,在某个特殊作用于种调用Person构造函数，和全局属性差不多

以上创建方法都要对某个对象实力做一个对象函数，因此不可取，为了解决这个方法，就是用了原型模式

每一个函数都有一个原型  prototype原型   这个属性是一个指针，使用原型的好处实在所有的对象实例都共享一个方法和属性

原型模式代码解析

function Person (){

}

Person.prototype.sayName=function(){

        alert(this.name);

}

var person = new Person();

person.sayName();

这样就保证了实例化出来的对象的函数指向同一个sayName();

原型模式关系图

第七章，函数表达式

递归函数的使用

这里有一个经典的回调函数，如下

在测试的时候，会出错，因为在第一次给了变量faterialNum后，由于此时的faterial是一个对象，但是此后faterial=null，此时就会报找不到对象的错误，因此能解决办法为

arguments.callee是一个指向正在执行的函数指针，因此可以用此来实现对函数递归

num* arguments.callee(num-1);既可以解决问题，但是在严格模式下是没有用的，因此，另一种解决办法为

   var faterial = (function f(num){

    if(num==1){

     return 1;

    }

    return num*f(num-1);

   

   });

这样也可以编译通过，在严格模式等都可以执行

   另外，注意在作用域链上也有一种情况是匿名函数的作用域往往具有全局性

第八章，window窗体对象

框架结构

<frameset rows="160,*">

  <frame src="frame1.html" name="topFrame"></frame>

  <frameset cols="50%,50%">

    <frame src="frame2.html" name="leftFrame">

    </frame>

    <frame src="frame3.html" name="rightFrame">

   

    </frame>

  </frameset>

 </frameset>

我们在访问所在的框架可以使用 window.frames[0]或者window.frames["topFrame"],但是这种方法是不可取的，因为每个框架的window都是一个实例，为了区分，可以使用top来访问，top始终指向最高层框架

top.frames[0]

parent始终指向当前框架的上一层框架

javaScript中的延时调用

它是一个单线程的解析器，调用setTimeout后，该方法会放回一个数值id,表示超时调用，他是执行代码的唯一标示符，可以通过clearTimeout方法将相应的超时调用参数传给他，可以取消这次调用

间歇调用

setInterval(fun,100);

clearInterval(sid);

confirm  返回值  true   --OK    false  --cancel

还有一个重要的应用就是层次选择器了

以上要注意的是子代选择器和后代选择器的不同

    +  表示同辈元素，相邻元素及下一个元素 表示最近一个

    ~此后面所有的对应元素

    在选择器中也存在着等价关系

另外，siblings方法与前后的位置无关，只要是同辈节点就可以获取

过滤选择器的用法和jquery实现

改变所有的标题元素

注意，还有一些标题元素 h1  h2  h3 ...

要使用$(":header") 来获取对应元素

内容过滤选择器

//DOM编程的实现

nodeName   nodeValue  nodeType

1 对应的是 element

2对应的是属性 

3对应的是文本 text

1,2对应的nodeValue 为Null

每一个接节点都有childNodes对象，而且其中都保存着NodeList对象

访问下面的node对象的 是后可以使用方括号也可以使用item对象来表述

另外可以通过hasChildNodes()来判断该节点是否包含一个或者多个子节点

操作节点的

向childNodes的尾部添加一个节点  appendChild();

要把某个节点放在类表中的某个位置，可以使用insertBefore()

如果第二个参数穿的是null,就会直接把该节点放在最后位置

替换节点

replaceChild();替换节点

removeChild()；删除节点

另外，还有一个方法是每个节点通用的 就是cloneNode(boolean)

如果传输的参数为true就是赋值该节点的本身及子节点

如果传入的参数为false 就是复制该节点的本身，不包含 其下面的子节

document对象

document.title对应着文档的标题

docuement.URL 取得完整的URL；

取得域名  document.domain();

//取得来源页面的url

document.referrer;

document的几个好用的函数

with(document){

getElememtById

getElementsByName

getElementsByTagName

createElement(标签类型或者全部标签的字符串);

}

文档写入

write  writeln  open  close

dom操作技术

动态加载的js脚本文件

动态样式的设

设置网页的标题  document.title

取得完整的url 

document.url

使用document.write可能会覆盖整个页面的显示

书写一个动态加载脚本的函数

function loadScript(url){

var script = document.createElement("script");

script.type="text/javascript"

script.src = url;

//添加到body中

//怎么制定他的方法呢

script.text="function sayHi(){alert('hellow');}"

document.body.appendChild(script);

}

动态样式的加载

function loadCssStyle(url){

var link = document.createElement("link");

link.rel="stylesheet";

link.type="text/css";

link.href=url

//添加到head标签下

var head = document.getElementsByTagName("head")[0];

head.appendChild(link);

}

使用:+表单元素，可以来获取对应的表单元素的集合

特殊转义字符的运用

<p id=#myid>

使用时获取的正确方式是$("#\\#myid")

选择器中含有空格的注意事项

$(".test :hidden")与$(".test:hidden")可能会产生不同的集合对象 这是应为子代选择器和过滤选择器的不同

已经出现的jquery的方法

show（） 显示隐藏的对象

css（）  制定样式

text () 设置匹配的文本元素的内容

filter() 筛选出与制定表达式匹配的元素集合 find是在元素内匹配元素

addClass()为制定的元素添加样式类名

toggle(function(),function())  可以交互执行一组js动作