JS、jQuery

JS

一、词法结构

1.区分大小写

2.注意 //单行 /* 多行注释 */

3.字面量（直接量 literal）

 12 数字

 5.8 小数

 “hello” 

 ‘hello’

  true

/js/gi //正则

null //空

{x:1,y:2}

{1,2,3,4}

4.标识符（变量）和保留字

5.分号可以省略但是可能会产生问题，js会自动补

 

二、类型、值和变量

1.原始类型 数字 字符串 布尔 null空 undefined未定义

2.对象类型

3.类 Array Function Date RegEx Error

4.js解析器 中集成了垃圾回收

5.任意js的值都可以转成布尔值

undefined null 0 -0 NaN “” 都被转换为false

6.包装对象

 var = “hello”; //原始类型（没有方法）

s.len = 4； //当调用原始类型的属性或方法的时候（原始类型是没有属性和方法的）

 //只要引用了字符串的属性或方法，就会调用new String（s）把原始类型，包装成对象

//以后调用了s.len是调用String对象的属性和方法，一旦引用结束，新创建的临时对象会销毁

var n = s.len //此时为undefined

alert(n);

 //调用字符串 布尔 数字的属性或方法时，创建的临时对象。是包装对象

显示定义包装对象 var S = new String(“hello”)

var s = “hello”;是不同的

7.==和===

8.类型转换

var n = 7；

alert(n.toString(2)); //二进制 10001

alert(n.toString(8)); //021

alert(n.toString(16)); //0x21

alert(n.toString(10));  alert(n.toString());

9.toString() valueOf()

var date = new Date(2011,1,3);

date.value() 返回毫秒数代表的时间

10.js是动态类型 var n=10; 程序运行期间 才会确定变量的类型

11.变量作用域

函数作用域和声明提前

函数内定义的变量 声明自动提前到函数顶部

12.作用域链scope chain

在不包含函数的函数体内，作用域链有两个对象，第一个是定义函数

参数和局部变量的对象，第二个是全局对象

在一个嵌套函数体内，作用域链上至少有三个对象

定义一个函数时，它保存了一个作用域链。调用函数时，它创建一个新的对象存储它的局部变量，并将这个对象添加到保存的那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。对于嵌套函数没错调用外部函数时，内部函数会重新定义一遍。每次调用外部函数的时候作用域链是不同的。

13.delete in eval void

第五章 对象

1.对象的基本操作 create set query delete test enumerate

2.对象的属性特性 可写 可枚举 可配置（是否可删除）

3.对象的对象特性

对象的原型 prototype

对象的类 标志对象类型的字符串

对象的扩展标记 是否可添加新属性

//创建对象的三种方法

4.对象直接量

 var empty = {};

 var point - {x:0,y:0}

5.new 创建对象

var o = new Object{}; 空对象 和{}一样

var a = new Array();

6.Object.create()

var o1 = Object.create{{x:1,y:2}}; //o1继承自对象原型{{x:1,y:2}}

var o2 = Object.create{null} //o2不继承任何属性和方法

var o3 = Objet.create(Object.protptype); //空对象和{}new Object（）一样

7.属性的操作 作为关联数组的对象

object.property

object[“property”] 散列 映射 字典 关联数组

8.继承

js的继承只能从父类获取属性的值，而不是修改原型链

如果对象book为null或underlined

book.subtle.length 会报错

解决方法

var len = book && book.subtitle&&book.subtitle.length;

删除属性

delete book.subtitle

检测属性

in has()OwnPreperty() propertyIsEnumerable()

var o = {x:1};

“x”in o

“toString” in o

hasOwnPreperty();判断属性是否是自己的。继承属性返回false

propertyIsEnumerable()只有是自有属性，并可枚举

获取所有属性

Object.keys();

Object.getOwnProepertyNames()

9.属性 getter 和 setter

var o ={

x:0;

y:1;

set r (value){value = this.r;}

get r(){return this.x + this.y}

};

x是数据，r存取器属性

10.属性的特性 ecmascript5 老的ie不支持如下用法

数据属性的特性：值value 可写性writable

可枚举 enumerable

可配置 configurable

存取器属性特性： get set

可枚举 enumerable

可配置 configurable

//返回{value:1,writable:true,remunerable:true,configurable:true}

Object.getOwnPropertyDescriptpr{{x:1},x}

//查不到属性 返回undefined

设置属性的特性 不能修改继承的属性特性

Object.defineProperty()

//设置不可枚举属性

var o = {};

Object.defineProperty(o,”x”,{

value:1,

writable:true,

remunerable:false,

configurable:true

})

//设置只读

Object.defineProperty{o,”x”,{writable:false}}

 

修改多个属性特性

Object.defineproperties()

扩展Object.protptype 书 P137

11.对象的三个属性

prototype class extensible attribute

查询对象的原型

ecmascript5 中 Object.getProrotypeOf(o1)

ecmascript3 中 o1.constructor.prototype

通过对象直接量或new Object()方式创建的对象

包含一个constructor的属性，指Obcjet()的构造函数

constructor.prototype才是真正的原型

p.isPrototypeOf{o}检测对象p是否是o的原型

//获取对象的类型 字符串

Object.prototype.toString.call(o1).slice(8,-1)

12.对象的可扩展性

对象是否可以新加属性

Object.preventExtensions() 设置对象不可扩展

Object.isExtenslible()

Object.seal()除了将对象设置为不可扩展，还将属性设置为不可配置

Object.freeze()

除了将对象设置为不可扩展。将属性设置为不可配置，还把属性设置为只读

 

第八章 函数

1.函数调用 方法调用

function t(){}

t(); 函数调用 this是全局对象 严格模式下是undefined

var o = {a:function(){}};

o.a() 方法调用 this是当前调用的对象

2.构造函数调用

car o = new Object(); var o = new Object;

o 继承自构造函数的prototype属性 内部的this是此对象

var r = new o.m(); 中的this不是o

3.P184 函数的执行用到了作用域链，这个作用域链是函数定义的时候创建的。

嵌套的函数f（）定义在这个作用域里，其中的变量scope是局部变量

作用域链

调用s()将创建函数s的执行环境（调用对象），并将该对象置于链表开头，

然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name

调用ss（） ss()==>t()==>window

name=“lwy”;

function(){

var name=“tlwy”;

function(){

var name = “slwy”;

console.log(name);

}

function ss(){

console.log(name);

}

s();

ss();

}

t();

每次调用函数，都会生成一个新的作用域链。包括新的内部变量。

 

jQuery HTML

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

 

jQuery attr() 方法用于获取属性值。

 

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

 

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

 

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

 

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

 

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

 

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容

 

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

 

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

 

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

• width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth() 方法返回元素的宽度（包括内边距）。
• innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

 

jQuery  遍历

什么是遍历？

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

• <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
• <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
• 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
• <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
• 两个 <li> 元素是同胞（拥有相同的父元素）。
• 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
• <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

 

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历（tree-traversal）。

下一章会讲解如何在 DOM 树中向上、下以及同级移动。

 

jQuery 祖先

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

• parent() 方法返回被选元素的直接父元素。
• parents()  方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
• parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素。

jQuery 后代

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

• children() 方法返回被选元素的所有直接子元素。
• find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

 

jQuery 同胞

有许多有用的方法让我们在 DOM 树进行水平遍历：

• siblings() 方法返回被选元素的所有同胞元素。
• next() 方法返回被选元素的下一个同胞元素。
• nextAll() 方法返回被选元素的所有跟随的同胞元素。
• nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
•   prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

 

jQuery 过滤

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

 

                                                    jQuery 文档操作方法

                                                              这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

 

查看全文