JQuery Introduction

1、jQuery介绍

(1)特点

利用选择器查找要操作的节点，并且会将这些节点

封装成一个jQuery对象。通过调用jQuery对象的属性

或者方法来实现对底层节点的操作，这样做的好处有

两个：一是兼容性更好了，另外，代码得到简化。

(2)编程步骤

step1,使用jQuery选择器查找要操作的节点。

step2,调用jQuery对象的方法或者属性。

(3)一个简单例子 first.html

(4)jQuery对象与dom对象如何相互转换?

1)dom对象 ---> jQuery对象

$(dom对象)

2)jQuery对象 ---> dom对象

2、选择器

(1)选择器是什么?

jQuery借鉴了css选择器的语法，用来查找要操作的

节点。

(2)基本选择器 selector / s1.html

#id

.class

element

select1,select2..selectn

*

(3)层次选择器 selector / s2.html

select1 select2:查找所有的后代

select1>select2:只查找子节点

select1+select2:下一个兄弟

select1~select2:下面所有兄弟

(4)过滤选择器

1)基本过滤选择器 selector / s3.html

:first

:last

:not(select) 排除满足select要求的节点

:even

:odd

:eq(index)

:gt(index)

:lt(index)

2)内容过滤选择器 selector / s4.html

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:has(select) 匹配含有选择器所匹配的元素的元素

:parent 匹配含有子元素或者文本的元素

3)可见性过滤选择器 selector / s5.html

:hidden 匹配所有不可见元素，

或者type为hidden的元素

:visible 匹配所有的可见元素

4)属性过滤选择器 selector / s6.html

[attribute]

[attribute=value]

[attribute!=value]

5)子元素过滤选择器 selector / s7.html

:nth-child(index/even/odd)

注意：　下标从1开始。

6)表单对象属性过滤选择器 selector / s8.html

:enabled

:disabled

:checked

:selected

(5)表单选择器

:input

:text

:pasword

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

3、dom

1)查询 dom / d1.html

找到节点之后，可以读取或者修改节点的

html内容,文本,值,属性。

a, html() 读取或者修改节点的html内容

b, text() 读取或者修改节点的文本内容

c, val() 读取或者修改节点的值

d, attr() 读取或者修改节点的属性

2)创建 dom / d2.html

$(html);

3)插入节点

append():作为最后一个孩子添加进来。

prepend():作为第一个孩子添加进来。

after():作为下一个兄弟

before():作为上一个兄弟

4)删除节点 dom / d3.html

remove()

remove(selector)

empty():清空节点

5)数据与行为分离 dom / d4.html d5.html

即不用修改html文件，通过引入外部的js文件来

为页面提供动态效果。

$(fn); fn是一个函数的名称

或者

$(function(){

//当整个页面加载完毕，会执行这儿的代码。

});

6)复制节点 dom / d6.html

clone()

clone(true):使复制的节点也具有行为(将事件

处理代码一块复制)

7)属性操作

读取：attr('id');

设置： attr('id','d1') 或者一次

设置多个 attr({"id":"d1","class":"s1"});

删除：removeAttr('id')

8)样式操作 dom / d7.html

获取和设置: attr("class","") attr("style","")

追加:addClass('')

移除:removeClass('')

或者removeClass('s1 s2')

或者removeClass()//会删除所有样式

切换样式：toggleClass,有该样式，就删除，没有，

就添加。

是否有某个样式 hasClass('')

读取css('')

设置css('','')或者

css({'':'','':''})//设置多个样式

9)遍历节点 dom / d8.html

children()/children(select):只考虑子元素，

不考虑其它后代元素。

next()/next(select):下一个兄弟

prev()/prev(select):上一个兄弟

siblings()/siblings(select):其它兄弟

find(select):从当前节点向下查找所有的后代

(满足select要求的)

parent():父节点

4、事件处理

(1)回顾

1)如何绑订事件处理代码

a, 绑订到html标记上面。

比如 <input type="button" onclick="f1();"/>

b,绑订到dom对象上。

比如 obj.onclick=f1;

2)事件对象 event / e1.html

a,如何获得事件对象?

只需要给事件处理函数传递一个参数。

比如 <input type="button" onclick="f1(event);"/>

b,事件对象的作用?

b1,找到事件源(发生该事件的那个对象)

e.target || e.srcElement

b2,获得鼠标点击的坐标

e.clientX e.clientY

b3,取消事件冒泡 event / e2.html

子节点产生的事件会依此向上抛出给相应的

父节点。

e.cancelBubble = true;

(2)jQuery中如何处理事件

1)如何绑订事件处理代码?

方式一:$obj.bind(事件类型,事件处理函数);

比如:

$obj.bind('click',fn);

　方式二:简写形式

比如:

$obj.click(fn);

2)事件对象 e3.html

a,如何获得事件对象?

只需要给事件处理函数传递一个任意的变量。

比如:

$obj.click(function(e){

e就是jQuery对底层事件对象的封装

});

b,事件对象的作用?

b1, 获得事件源

var obj = e.target;

obj是一个dom对象。

b2,获得鼠标点击的坐标

e.pageX e.pageY

b3,取消事件冒泡 e4.html

e.stopPropagation();

3)合成事件 e5.html e6.html

a,hover　模拟光标悬停事件

b,toggle 模拟鼠标连续单击事件

4)模拟操作 e7.html

a,trigger(事件类型)

比如

$obj.trigger('focus');

b,简化形式

比如

$obj.focus();

5、动画

1)show/hide animate / a1.html

a,作用：通过同时改变元素的宽度和高度来

实现显示或者隐藏。

b,用法:

$obj.show([速度],[回调函数]);

注意：

速度有两种形式

'slow','normal','fast'

或者毫秒数 800

回调函数

当整个动画执行完毕之后，会调用

这个函数。　

2)slideDown/slideUp a1.html

a,作用：通过改变元素的高度来实现显示或者隐藏。

b,用法：同上。

3)fadeIn(淡入)/fadeOut(淡出) a2.html

a,作用：通过改变元素的不透明度(opacity)来实现

显示或者隐藏。

b,用法：同上。

4)animate a3.html

用法: $obj.animate({},speed,[callback]);

{} : 描述动画执行完成之后节点的样式。

speed: 速度，单位是毫秒。

callback:回调函数。

6、类数组

1)类数组是什么?

jQuery对象包含的那些dom对象。

2)类数组的属性

length属性:dom对象的个数

3)类数组常用方法 array / a1.html

a,each(): 用来遍历类数组。each函数每次从类数组

中取一个元素。可以给each函数传递一个参数(也是

一个函数，在该函数里面，this表示正在被访问的

那个dom对象)。

b,eq(i): 从类数组中取下标等于i的dom对象，返回值

是 一个jQuery对象。

c,index(obj或者$obj):返回dom对象或者jQuery

对象在类数组中的下标。

d,get():将类数组转换成一个真正的dom对象组成的

数组。

e,get(i):从类数组中取下标等于i的dom对象,返回值

就是原始的dom对象。

7、ajax支持

1)load order.jsp

a,作用：向服务器发送异步请求，并且将服务器

返回的数据直接添加到符合要求的节点之上。

b,用法:

$obj.load(url,[data]);

url:请求地址

data:请求参数,有两种形式：

请求字符串：username=zs&age=22

对象: {'username':'zs','age':22}

c,load方法如果没有请求参数，会发送get请求，

如果有请求参数，会发送post请求。

2)$.get或者$.post stock.jsp

a,作用：向服务器发送异步请求(get或者post)

b,用法:

$.get(url,data,callback,type);

url:请求地址

data:请求参数,有两种形式：

请求字符串：username=zs&age=22

对象: {'username':'zs','age':22}

callback: 形式如下

function(data,status),其中data是服务器

返回的数据，status是服务器处理的状态描述。

type:服务器返回的数据类型，可以是:

html: html内容

text:文本

json:json字符串

xml:xml文档

script: javascript脚本

3)$.ajax

a,作用：可以同步或者异步向服务器发送请求。

b,用法:

$.ajax({选项参数});

url: 请求地址

type:请求方式

data:请求参数

dataType:服务器返回的数据类型

success:服务器处理正常调用的函数，形式

function(data,status),其中data是服务器

返回的数据，status是服务器处理的状态描述。

error:服务器处理失败调用的函数。

async:值为true时，发送异步(缺省),值为

false，发送同步请求。