jQuery高级编程一书总结

JS基础

理解基础数值

在进行数值运算时需要注意：浮点数之间的运算结果会有偏差

js提供了两个工具方法用于将浮点数转换成固定位数的小数来格式化该值

num.toPrecision(n)：将nun转换成总位数为n的数值
num.toFixed(n)：将num转换成包含n个小数的数值

js提供了一个NaN表示“非数值”，然而使用typeof方法来判断该值的类型，输出结果为number，这是js的一个误区，也是一个事实

对两个变量进行等于比较的时候，js提供了两种操作符，分别是等于==和全等于===，通常建议使用全等于，因为等于操作符会在比较前先自动进行类型转换，通常，判断变量是否为空使用等于，其余的数值或者对象之间的比较使用全等于

js支持的数据类型主要有：Number/String/Boolean/Object/Function/Array/Date/RegExp/Null/Undefined

当一个变量定义之后没有初始化或者访问了一个不存在的对象属性时，他们的值就是undefined；表达式：null == undefined返回true

变量

隐式声明的变量都是全局变量，不管是在函数体内还是全局范围内。显示声明的变量都是持久的，无法删除该变量。对于一个变量，可以多次声明而不会产生任何错误。

变量名必须以一个字母、下划线或者美元符号开头

对象

实例化一个js对象可以通过两种方式：一是使用new关键字、二是使用对象字面量直接创建。分别如下：

//使用new关键字创建
var obj = new Object();

//使用对象字面量直接创建
var obj2 = {};
//也可以为对象直接定义属性
var obj3 = {
    name: "chengxi",
    age: 20
};

对象的属性可以通过点操作符和中括号进行访问，不过建议使用点操作符进行访问，因为对象的属性值可能也是对象

想要删除对象的某个属性可以使用关键字delete，删除一个不存在的属性不会产生任何危险

js使用原型继承，对象可以直接从其他对象中继承并进行扩展，从而创建新的对象。在继承树中，每一个独享都可以通过prototype属性连接起来

获取一个对象的属性时，首先会去该对象中去寻找，当没有找到该属性时，会沿着原型链一直往上找，直到找到对应的属性并返回或者返回undefined

在js中没有提供public之类的访问权限控制级别关键字，不过如果想要声明一个私有的变量，可以通过在函数或者对象中定义局部变量并提供相应的访问方法即可实现

function Obj(){
    //私有变量
    var name = "chengxi";
    //提供getter方法
    this.getName = function(){
        return this.name;
    };
};

函数（主要介绍匿名函数）

下面代码简单的创建了一个自执行匿名函数

(function(x,y){
    console.log(x+y);
})(1,2);

自执行匿名函数的框架为：

(function(args){
    //function body
})(args);

jQuery核心技术

工具函数

要检查对象的类型，在原生js中使用的是typeof操作符，然而对于null值，该操作符返回的是object而不是null。在jQuery中很好的解决了这一个问题，使用type(val)方法可以获取对应的数据类型

使用extend方法可以将多个对象的属性合并成一个，函数格式：$.extend(src,obj1,obj2)将obj1、obj2等对象的属性合并到src对象中来

对象的遍历有两个方法：第一个是each，它的格式为：$.each(data, function(index,value){...});第二个是map，他的格式为：$.map(data, function(value,index){...});

判断一个节点是否是另一个节点的子节点可以使用方法constans，其命令格式为：$.contains(container,dom）用于判断dom节点是否在container节点中

寻找指定选择器下的指定元素结点可以使用find方法，其格式为：$("...选择器").find("...子选择器"）

选择和操作dom元素

属性选择器：根据元素的属性来选择元素。主要有：

属性选择器	描述
elem[attr]	选择定义了attr属性的elem元素
elem[attr=val]	选择attr属性值为val的elem元素
elem[attr^=val]	选择attr属性值以val开头的elem元素
elem[attr	=val]
elem[attr!=val]	选择attr属性值不等于val的elem元素
elem[attr$=val]	选择attr属性值以val结尾的elem元素
elem[attr~=val]	选择attr属性值是一个以空格分割的列表值并含有val值的elem元素
elem[attr*=val]	选择attr属性值含有一个特定子串val的elem元素

位置选择器：从选择器选择的多个元素中进行位置选择元素。主要有：

类型	描述
:animated	选择当前正在执行动画的所有元素
:eq(n)	选择索引值为n的元素
:gt(n)	选择索引值大于n的元素
:lt(n)	选择索引值小于n的元素
:even	选择索引值为偶数的元素
:odd	选择索引值为奇数的元素
:first	选择第一个元素
:last	选择最后一个元素
:header	选择所有标题元素
:not(选择器)	选择所有与选择器不匹配的元素

过滤表单元素：主要有：

过滤器	描述
:button	选择所有button元素以及类型为button的元素
:checkbox	选择所有类型为checkbox的元素
:checked	选择所有被选中的复选框元素
:disabled	选择所有不可用元素
:enabled	选择所有可用的元素
:file	选择所有类型为file的元素
:image	选择所有类型为image的元素以及image元素
:input	选择所有输入框元素
:password	选择所有类型为password的元素
:radio	选择所有类型为radis的元素
:reset	选择所有类型为reset的元素
:selected	选择所有已选中的单选元素
:submit	选择所有类型为submit的元素
:text	选择所有类型为text的元素

可见性选择器：主要有两个：

类型	描述
:hidden	选择所有隐藏元素
:visible	选择所有可见元素

内容过滤器：根据指定的内容对元素进行过滤，主要有:

过滤器	描述
:contains(text)	选择所有包含特定文本内容的元素
:empty	选择所有空元素
:has(text)	同contains，可用于选择包含于指定选择器匹配的后代元素的元素
:parent	选择所有包含子元素或者文本节点的元素

父子关系过滤器：主要有：

过滤器	描述
:first-child	选择每个父元素的第一个子元素
:last-child	选择每个父元素的最后一个子元素
:nth-child(n)	选择每个父元素的指定位置的子元素
:only-child	选择具有唯一一个子元素的父元素的子元素

在大多数情况下，我们使用选择器获取到的元素是一个数组对象，所以我们通常只需要取得其中的一个元素，在这里我们可以使用[n]的方式来获取指定索引的dom元素，也可以通过get(n)方法来获取。在这里需要注意的是：使用这两种方式获取到的变量已经是dom结点元素了，无法在直接调用jquery方法了，需要使用$(dom)转换成jquery变量后才能调用

事件处理

所有的js事件处理函数都可以接收一个event对象作为参数，虽然绝大多数浏览器都接收标准的event对象作为参数，然而IE使用的却是window.event。所以，在进行事件处理时，最好进行event兼容：

var event = (window.event?window.event:event);

为事件绑定处理函数可以使用addEventListener方法，他的格式为：$(选择器).addEventListener(eventType,function(event){...},bool)其中第一个参数表示事件的类型，第二个参数表示事件处理函数，第三个参数表示是否允许事件捕获

其中事件捕获过程指的是元素嵌套的情况下的由外向内进行事件触发，而相对应的事件冒泡指的是元素嵌套的情况下的由内向玩进行的事件触发。如果不想要事件捕获或者事件冒泡，在那些遵循W3C标准的浏览器中可以调用stopPropagation()方法即可，而在较低版本的IE中，通过设置event的属性cancelBubble=true即可阻止事件冒泡

第二种方式是使用bind方法进行绑定，其格式为：$(选择器).bind(eventType, function(event){...})，另外可以使用方法unbind移除事件处理程序的绑定，unbind方法的格式为：$(...).unbind(eventType)

bind方法不支持动态生成的dom元素的事件绑定，如果想要对动态生成的dom元素进行事件绑定，可以使用live方法，它的格式和bind相同，同样也提供了对应的die方法来移除事件处理程序的绑定

live方法不支持链式调用，如果想要支持js的链式调用（在进行事件绑定之后还想进行其他的一系列操作），可以使用delegate方法，它除了live的功能外还支持链式调用，返回一个对象，同样它也提供了对应的移除方法：undelegate

也许我们可以只希望一个事件只执行或者说最多执行一次，可以使用one来绑定事件

想要使用js代码来触发一个事件可以使用方法trigger，他的格式为：$(选择器).trigger(eventType)来为指定的元素触发一个指定的事件

自jQuery1.7新版本开始，就事件处理这一方面引入了两个新的方法on/off，其中on可以完全取代delegate方法来进行事件绑定和链式调用，而移除事件直接使用off方法即可，想要移除指定元素下的指定子元素的事件可以使用如下格式：$(父选择器).off(eventType,子选择器)

原生js操作Ajax

首先介绍一个h5新功能，data自定义属性，在h5之前，我们自定义属性就是简单的定义键值对，这样会造成标签的属性冗余混乱，在h5提供了data之后，我们自定义属性值格式为：data-key=val，这样一来，自定义属性和自带属性就很容易的区分开来。jQuery提供了操作自定义属性的方法，通过data方法可以进行自定义属性的设置和获取，格式为：$(选择器).data(key,val) / $(选择器).data(key)

原生js创建Ajax需要考虑浏览器的兼容性，在IE浏览器中，需要使用下面的代码创建：var xhr = new ActiveXObject("Microsoft.XMLHTTP");在较低的IE版本中需要使用下面的代码创建：var xhr = new ActiveXObjce("MSXML2.XMLHTTP");而在其余的浏览器中就可以使用下面的代码来创建了：var xhr = new XMLHttpRequest();

原生js中通过xhr.open方法建立一个请求，该方法的格式为：open(method,url,isAsync);其中第三个方法指定是否异步

原生js通过xhr.send发送请求参数，该方法只是这对post请求而言的，因为get请求直接将请求参数写到url后面即可

判断响应的结果可以通过onreadystatechange事件，通过获取readyState和status来判断请求是否成功，通常有：

readyState值列表	描述
0	xhr对象已经构造完成，请求还为初始化
1	已经成功调用open方法建立请求
2	所有重定向已经完成，并且已经接受到了响应的全部http请求头
3	正在接受整个响应体
4	数据传输已经完成，或者在传输过程中发生了错误

jQuery中使用Ajax

通常方法是ajax，其格式为：$.ajax(url,[settings])，属性设置有：

属性值	描述
url	所请求的资源
type	请求方式，通常为get和post
data	要发送给服务器的数据，对于post请求时有用
dataType	要求服务器返回的数据类型，通常有xml/html/json/txt等
success	成功时的回调函数，格式为：function(data,textStatus,xhr);
error	请求失败时的回调函数，格式为：function(xhr,status,error);
complete	请求完成调用时的函数，格式为：function(xhr,status);
timeout	为请求设置一个超时时间

jQuery提供了一个getJSON方法，用于以异步方式发送get请求获得json格式数据，该方法的格式为:$.getJSON(src,function(data,status,xhr){...});，然而遗憾的是，jQuery并没有提供对应的postJSON方法

j提供了用于设置全局Ajax选项的方法：ajaxSetup([settings])，它对当前页面的所有ajax有效，除非重新设置相应的选项

此外，jQuery还提供了一个快捷的工具方法，get和post，格式为：$.post(url,data,function(data){..},type，通常只需要指定url和function就可以了，（post还需要指定data）