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，发送同步请求。