jQuery库详解

1.在使用jQuery库之后，开发者操作的对象不再是原始的DOM元素，而是jQuery对象

jQuery的$()函数与Prototype的$()是不同的，jQuery的$()函数返回的是一个jQuery对象，而不是DOM对象，$()函数其实是jQuery()函数的简化别名

 

2.获取jQuery对象

jQuery库中获取jQuery对象主要有两种方式：

使用$()函数或jQuery对象提供的、利用父子关系来返回的jQuery对象

jQuery对象的调用方法改变自身后将再次返回该jQuery对象

1）jQuery核心函数

jQuery(expression,[context])：获取expression对应的DOM对象包装成的jQuery对象

jQuery(html,[ownerDocument])：根据html参数创建一个或多个DOM对象，返回包装这些DOM对象的jQuery对象

jQuery(elements)：将一个或多个DOM元素包装成jQuery对象

jQuery(callback)：在页面加载完成时callback函数被激发

2）以CSS选择器访问DOM元素

#id,tagName,selector等

$("#test").append("<b>是id为test的元素</b>");

3）选择器的附加限定词

:first,:last,:even,:odd等

 

3.jQuery操作类数据的工具方法

each(callback)：该方法是一个迭代器函数，将使用callback函数迭代处理jQuery里包含的每个元素，在callback函数里使用this来代表当前正在处理的DOM元素。callback是一个形如fn(i){}的函数，其中i代表jQuery里元素的索引，该索引从0开始。

length：返回jQuery里包含的DOM元素的个数

eq(position)：返回第position+1个DOM元素包装成的jQuery对象

get()：返回jQuery里包含的所有DOM元素组成的数组

get(index)：返回第index+1个DOM元素

index(subject)：

jQuery对象--->get()/get(index)--->DOM对象--->$()/jQuery()--->jQuery对象

 

4.jQuery支持的方法

jQuery命名空间的方法

jQuery.browser

jQuery.browser.version

jQuery.boxModel

jQuery.isFunction(obj)

字符串。数组和对象相关工具方法

jQuery.trim(str)：截取字符串前后的空白

jQuery.each(object,callback)：遍历JavaScript对象和数组(不是遍历jQuery对象)，其中objec为要便利的对象或数组，callback是一个形如function(index,val){}的函数

jQuery.extend(target,object1,[objectN])：将object1、objectN的属性合并到target对象里

jQuery.grep(array,callback,[invert])：用于对array数组进行筛选

jQuery.makeArray(object)

jQuery.map(array,callback)

jQuery.inArray(value,array)：返回value在array中出现的闻之

jQuery.merge(first,second)：合并first、second两个数组

jQuery.unique(array)：删除array数组中的重复值

数据存储相关的方法

data(name)：获取jQuery对象里存储的key为name的数据

data(name,value)：向jQuery对象里存储name:value的数据对

removeData(name)：删除jQuery对象里存储的key为name的数据

操作属性的相关方法

操作CSS属性的相关方法

操作元素内容的相关方法

操作DOM节点的相关方法

jQuery事件相关方法

动画效果相关的方法

 

5.Ajax相关方法

1）两个工具方法

serialize()：将该jQuery对象包含的表单或表单控件转换成查询字符串

serializeArray()：将jQuery对象包含的表单或表单控件转换为一个数组，该数组元素都是形如{name:fieldName,value:filedVl}的对象

2）使用load方法

load(url[,data][,callback])：向远程url发送异步请求，并直接将服务器响应插入当前jQuery对象匹配的DOM元素之内。其中data是一个形如{key1:val1,key2：val2...}的js对象，代表发送请求的参数，callback指定交互Ajax成功后的回调函数

$("#show").load("proc.action",$("#user").serializeArray());

3）使用jQuery.ajax(options)方法

jQuery.ajax(options)既可以发送GET请求，也可以发送POST请求

options参数：

async

beforeSend

cache

complete

data

url

4）使用get/post方法

jQuery.get(url,[data],[callback],[type])：向url发送异步的GET请求

jQuery.getJSON(url,[data],[callback])

jQuery.getScript(url,[callback])

 

6.扩展jQuery和jQuery插件

jQuery.fn.extend(object)：为所有jQuery对象扩展新的方法

jQuery.extend(object)：为jQuery命名控件扩展新的方法

jQuery官方提供了一套优秀的界面库jQueryUI