jQuery读书笔记

总结上个项目，其中项目的交互性比较强，有点CS的系统在BS上实现。

为了实现这些功能，我们项目首选jQuery做为js框架，jQuery Validator作为js验证。

要使用jQuery库，首先要加载jQuery的js文件，

<script type="text/javascript" src="jquery.js"></script>

jQuery 对js的封装主要体现在，页面加载的封装，对选择器和事件封装，DOM操作封装，css操作封装，对Ajax封装。

1.页面加载的封装。

当加载了jQuery库，我们访问此页面的时候，在页面加载完毕的是会自动执行ready（）方法。

$(document).ready(function(){

     //需要执行的代码

});

这里需要提醒的是，页面加载完毕是只页面的DOM树加载完毕。简化了传统的onload方法。

也可以简化写：

$(function(){

    //需要执行的代码

});

2.对选择器和事件封装

jQuery对于HTML元素提供了两种方式，一种是用css和xPath选择器想结婚组成一个字符串来构造jQuery对象；一种是使用jQuery对象的一些方法，如find（），parent（），next（）等，同样可以混合使用。

如：$("#idName")，选择id为"idName"的元素，相当于document.getElementById("idName").

       $(".className")，选择class属性为"className" 的元素，使用这种形式可以快速选择具有相同样式的一批元素。

       $("#idName>li")，选择id为idName下的li元素。

       $("div")，选择所有的div元素。

事件的封装体现在，对于传统的onXXX事件，jQuery基本上都把方法前面的on去掉了，直接改成了XXX。

3.DOM操作封装

     jQuery对DOM操作提供了很多方便的方法。

   id（），获取对象的id属性。

id（val），为对象的id属性赋值。

html（），html（val），表示为获得对象的innerHTML，对innerHTML赋值。

val（），val（val）。获得对象的value属性，对value属性赋值。

after（html），after（elem），after（elems），在对象元素后插入一段html文本，指定对象后对象数组。

before（html），before（elem)，before（elems）

   append（html），append（elem)，append（elems）在对象元素内部末尾追加一段html文本，指定对象后对象数组。

appendTo（expr），将当前对象追加到expr所匹配的元素中去。

empty（），删除对象的所有子节点。

remove（），删除对象。

parent（），取父节点。

prev（），next（），去前一个后一个兄弟节点。

attr（name），取匹配的第一个属性。

attr（key，value），通过key和value设置属性。

removeAttr（name），删除匹配的第一个属性。

4.css操作封装

通过对css的封装，似的css操作变得简单，对一些常用的操作，

color（），color（val），获取颜色和设置颜色。

left（），left（val），获取左边距和设置左边距。

top（），top（val），获取顶边距和设置顶边距。

css（name）获取样式为name的样式。

css（key，value），通过key和value设置一个样式。

hide（），show（），隐藏和显示对象。

fadeIn（），fadeIn（speed），淡入的效果，可以设定其速度。

fadeOut（），fadeOut（speed）

slideDown（），将对象高度从0变化到正常。

slideUp，将对象的高度从正常变为0。

5.对Ajax封装

jQuery对ajax的封装包括了一个通用的方法和三个简单的方法。

通用的方法为$.ajax(prop)。发送ajax请求来获取远程数据。prop为hash格式，传递方式为key/value：

type:数据请求的方式（get，post）。

url：请求的服务器的url

data：传递数据的参数字符串，只用于post方式

dataType：期待服务器凡是的数据格式，可以是xml，html，json。

ifModified：设置是否最好一次请求的响应有变化时才成功返回，默认为false

timeout：设置延迟发送请求的时间

global：是否发送当前请求为全局事件，默认为true

error：当请求师傅时候触发的函数

success：请求成功时候触发的函数

complete：请求完成后的触发函数

除了通用方法为，还有3种常用的方式：

$.get(url,params,callback)：用get方式发送请求，传入url地址，发送的参数，回调函数，其中url为必填。

$.post(url,params,callback):用post方式发送请求，传入url地址，发送的参数，回调函数，url为必填。

$.getJSON（url，params，callback）：用get方式发送请求，传入url地址，发送的参数，回调函数，url为必填，服务器直接返回的结果为JSON对象。


此外，我们可以使用JSON.simple包来生成JSON对象，这样比起直接拼接字符串来说简单，JSON.simple程序包种最为常用的是JSONObject和JSONArray两个对象，分别对应JSON对象和JSON数组。

关于JSONObject和JSONArray的使用这里不说了，网上很多类似资料。