深入jQuery技术

jQuery 是一种框架， jQuery 利用选择器查找要操作的节点（DOM 对象），然后将这些节点封装成一个 jQuery 对象（封装的目的有两个：1、是为了兼容不同的浏览器。2、也为了简化代码）。通过调用 jQuery 对象的方法或者属性来实现对底层的 DOM 对象的操作。

一、jQuery编程步骤
1、引入 jQuery 框架（ www.jquery.org 下载）， min 为去掉所有格式的压缩版
<script language="javascript" src="js/jquery-1.11.3.min.js"></script>
2、使用选择器查找要操作的节点，该节点会被封装成一个 jQuery 对象，并返回
var $obj=$('#d1');//ID 选择器，查找的节点 ID 为 d1
3、调用 jQuery 对象的方法或者属性
$obj.css('font-size','60px');//调用 jQuery 的 css()方法，jQuery 是一个大的匿名函数，且内部有很多函数（类似 Java 中的内部类），它的大部分函数返回对象都是 jQuery 对象（它自己），所以可以继续“．”，例如：
function f1(){
var $obj=$('#d1');
$obj.css('font-size','60px').css('font-style','Microsoft YaHei');

二、jQuery 对象与 DOM 对象相互转换
1、dom 对象转化为 jQuery 对象
使用函数： $(dom 对象)即可，例如：

function f(){
var obj=document.getElementById('d1');
var $obj=$(obj);//将 dom 节点封装成 jQuery 对象
$obj.html('hello java'); 
}

2、jQuery 对象转化为 dom 对象
方式一： $obj.get(0); 

方式二： $obj.get()[0];

三、选择器

jQuery 的选择器是模仿 CSS 选择器的语法提供了一种用来方便查找要操作的节点的语法规则。

1、基本选择器
（1） #id： ID 选择器，如： $('#d1').css('color','red');
（2） .class：类选择器，如： $('.s1').css('font-size','60px');
（3） element：元素选择器，如： $('div').css('font-size','60px');
（4） selector1,selector2...selectorn：选择器合并，如： $('#d1,p').css('font-size','60px');
（5） *：所有选择器，如： $('*').css('font-size','60px');

当 jQuery 选择器查找到了多个 DOM 节点时，仍然是封装成“一个”jQuery对象，在调用 jQuery 对象的属性或者方法时，默认情况下，会作用于底层所有的DOM 节点之上。

2、层次选择器
（1） select1 select2：所有后代（需符合 select2 的要求）。
例： $('#d1 div').css('font-size','60px');
（2） select1>select2：只考虑子节点（需符合 select2 的要求），孙子不管
例： $('#d1>div').css('font-size','60px');
（3） select1+select2：下一个兄弟（需符合 select2 的要求），儿子不管
例： $('#d3+div').css('font-size','60px');
（4） select1~select2：下面所有的兄弟（需符合 select2 的要求），上面的兄弟不管，兄弟中的儿子也不管
例： $('#d2~div').css('background-color','yellow');

3、基本过滤选择器（过滤器前不能有空格）
（1） :first：第一行。 
（2） :last：最后一行。 
（3） :not(selector)：把满足要求的选择器排除在外。
（4） :even：偶数行，下标从 0 开始。  
（5） :odd：奇数行，下标从 0 开始。
（6） :eq(index)：等于下标的元素，下标从 0 开始。
（7） :gt(index)：大于下标的元素，下标从 0 开始。
（8） :lt(index)：小于下标的元素，下标从 0 开始。
4、内容过滤选择器
（1） :contains(text)：匹配包含给定文本的元素。
（2） :empty：匹配所有不包含子元素或者文本的空元素。
（3） :has(selector)：匹配含有选择器所匹配的元素的元素。
（4） :parent：匹配含有子元素或者文本的元素（与 empty 正好相反）。

5、可见性过滤选择器
（1） :hidden 匹配所有不可见元素，或者 type 为 hidden 的元素。
（2） :visible 匹配所有的可见元素。

6、表单对象属性过滤选择器
（1） :enabled：没有被禁用。
例： $('#form1 input:enabled').attr('disabled',true);//设置属性，可见元素为不可见
（2） :disabled：被禁用。
例： $('#form1 input:disabled').css('border','1px dotted red');//设置不可见元素的样式
  $('#form1 input:disabled').attr('disabled',false);//设置属性，不可见元素为可见
（3） :checked：单选框、多选框中被选中的选项。
例： alert($('#form2 input:checked').val());//把值输出，类似于 value 属性
（4） :selected：下拉列表中被选中的选项。
例： alert($('#form3 option:selected').val());

7、常用表单选择器
（1） :input： input 元素。（2） :text：文本框。（3） :pasword：密码框。（4） :radio：单选。

 （5） :checkbox：多选。 （6） :submit：提交按钮。（7） :image：图片。 （8） :reset：重置按钮。 

（9） :button：普通按钮。（10） :file：文件。 （11） :hidden：隐藏域。

四、DOM操作

1、查询
利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及 html 内容。
（1） html()： html 内容，如： alert($('#d1').html())，相当于 innerHTML 属性，下例中也会把 span 输出（输出标记中的所有内容），即<span>hello jQuery</span>。
（2） text()：文本，如： alert($('#d1').text())，相当于 innerText 属性。
（3） val()：节点的值，如： alert($('#username').val())，结果为文本框中输入的值。
（4） attr()：属性值，如： alert($('#d1').attr('id'))，结果为 d1。
此外，这几个方法也可以用来修改节点的内容、值、文本内容、属性值。

2、创建
$(html);//直接写 html 语句即可，如： var $obj=$('<div>hang</div>');

3、插入节点
（1） append()：向每个匹配的元素内部最后追加内容，添加的元素作为最后一个
例： var $obj=$('<div>123456</div>'); $('body').append($obj);
（2） prepend()：向每个匹配的元素内部最前添加内容，添加的元素作为第一个
例： var $obj=$('<div>123456</div>'); $('body').prepend($obj);
（3） after()：向每个匹配的元素之后插入内容，在该元素之后添加兄弟节点
例： $('ul').after('<p>hello</p>');
（4） before()：向每个匹配的元素之前插入内容，在该元素之前添加兄弟节点

例： $('ul').before('<p>hello</p>');

4、删除节点
（1） remove()：删除节点，如： $('ul').remove();
（2） remove(selector)：删除满足 selector 的节点，如： $('ul li').remove('#l2');
（3） empty()： 清空节点，相当于 innerHTML=""，如： $('ul li').empty();

5、属性
（1） attr('attrName')：读取属性。
（2） attr('attrName','value')：设置一个属性。
（3） attr({"attrName1":"value1","attrName2":"value2"})：设置多个属性。
（4） removeAttr('attrName')：删除属性

6、样式操作
（1） attr('class','')或者 attr('style','')：读取和设置。
例：读取样式： alert($('#d1').attr('class'));
（2） addClass('')：追加。
例： $('#d1').addClass('s1 s2');//追加 s1 和 s2 两种样式
（3） removeClass('') ：移除。
例： $('#d1').removeClass('s1');//移除样式 s1
（4） removeClass('s1 s2 ...sn') ：移除多个样式
例： $('#d1').removeClass('s1 s2');//移除样式 s1 和 s2
（5） removeClass()：删除所有样式。
（6） toggleClass('')：样式来回切换，有该样式就删除，没有就添加。
例： $('#d1').toggleClass('s3');//样式 s3 来回切换
（7） hasClass('')：是否有某个样式。
例： alert($('#d1').hasClass('s3'));//返回值 true 或 false
（8） css('')：读取 style 样式里某个属性的值。
（9） css('','')：设置一个 CSS 样式。
例： $('#d1').css('border','1px solid red');
（10） css({'':'','':''})：设置多个样式。
例： $('#d1').css({'border':'1px solid red','font-size':'50px'});

7、遍历节点
（1） children()：只考虑子元素，不考虑其它后代元素
（2） children(selector)：只考虑子元素，不考虑其它后代元素，还要满足 selector 的要求（再次过滤）
（3） next()：下一个兄弟
（4） next(selector)：下一个兄弟，还要满足 selector 的要求（再次过滤）
（5） prev()：上一个兄弟
（6） prev(selector)：上一个兄弟，还要满足 selector 的要求（再次过滤）
（7） siblings()：兄弟元素
（8） siblings(selector)：兄弟元素，还要满足 selector 的要求（再次过滤）
（9） find(selector)：从某一种节点开始查找所有符合 selector 要求的后代
（10） parent()：父节点

五、事件

1、事件绑定
方式一： bind( type,function(){} )
例： $('#d1').bind('click',function(){$(this).html('hello java'); });
方式二： click( function(){} );
例如： $('#d1').click(function(){$(this).html('hello java'); });

2、合成事件
（1） hover(enter,leave)：模拟光标悬停事件。
（2）不使用合成事件的方式。
（3） toggle(function1(){},function2(){},...)：模拟光标连续单击事件。

3、jQuery中事件处理
（1）获得事件对象
click(function(e){ //e：对底层的事件对象做了一个封装 });
（2）事件对象的属性
①event.type：事件类型 

②event.target：返回事件源（是 DOM 对象）
③event.pageX/pageY：返回点击的坐标
例： 

$(function(){
$('a').click(function(e){//对两个对象都绑定了 click
//依据事件对象获得事件源， e 是 jQuery 对象（封装了底层的事件对象）
var obj=e.target;//target 属性返回的是一个 dom 对象
alert(obj.innerHTML);
alert(e.pageX+","+e.pageY);//通过事件对象获得光标点击的 X、 Y 坐标
alert(e.type); }); });
<a href="javascript:;">Cilck 1</a><a href="javascript:;">Cilck 2</a>

（3）停止冒泡： event.stopPropagation()
例： 

$(function(){//e 是 Query 封装后的对象，不能再用底层的 cancelBubble 属性
$('a').click(function(e){ alert('点击的是连接');
e.stopPropagation();//停止冒泡 });
$('div').click(function(e){ alert('点击的是 div'); }); });
<div id="d1"><a href="javascript:;">Cilck Me</a></div>

（4）停止默认行为： event.preventDefault()
例： 

$(function(){
$('a').click(function(e){ var flag=confirm('确定删除吗？ ');
if(!flag){ //阻止浏览器的默认行为，即不再向连接地址发请求
e.preventDefault(); } }); });
<a href="del.do">删除</a>

（5）模拟操作： trigger('click')

$(function(){
$('#b1').click(function(){
//模拟用户点击了 username 文本框，即让 username 文本框产生焦点获得事件
$('#username').trigger('focus');
//$('#username').focus();//简写形式，模拟获得焦点
//$('#username').click();//模拟点击 }); });

4、动画
（1） show()/hide()
①作用：通过同时改变元素的“宽度”和“高度”来实现显示或隐藏。
②用法： show(速度,[回调函数]);hide 同理
A.回调函数：整个动画执行完毕之后，会执行该函数。
B.速度： 'slow'， 'fast'， 'normal' 或者使用毫秒数。
（2） slideUp()/slideDown()
①作用：通过同时改变元素的“高度”来实现显示或隐藏。
②用法：同上。
（3） fadeIn()/fadeOut()
①作用：通过改变元素的不透明度来实现显示或隐藏。 0 透明 0.5 半透明 1 不透明
②用法：同上。
（4）自定义动画 animate(params,speed,[callback])
①params：是一个 JavaScript 对象，描述动画执行结束之后元素的样式
②speed：速度，只能用毫秒数。 

③callback：回调函数。

5、类数组的操作
jQuery 对象里面可能包含多个 DOM 对象，所谓类数组，指的就是这些 DOM 对象。
（1） each(function(i))：循环遍历每一个元素， this 代表被遍历的 DOM 对象， $(this)代表被迭代的 jQuery 对象， i 代表正在被遍历的那个对象的下标。下标从 0 开始。
例： 

$('#b1').click(function(){ var $obj=$('ul li');
 $obj.each(function(i){//i：表示正在被遍历的那个节点的下标，下标从 0 开始
if(i==0){//this：表示正在被遍历的那个 DOM 对象
$(this).css('font-size','50px');
}else if(i==1){ $(this).css('font-style','italic');
}else{ $(this).css('color','red'); } }); });

（2） eq(index)：返回 index 位置处的 jQuery 对象。
例： 

$('#b1').click(function(){ var $obj=$('ul li');
//eq：取下标对应处的 DOM 对象，然后将这个 DOM 对象封装成一个 jQuery 对象
var $o=$obj.eq(1); $o.css('font-size','50px');//item2 变 });

（3） index(obj)：返回下标，其中 obj 可以是 DOM 对象或者 jQuery 对象。
例：

 $('#b1').click(function(){ var $obj=$('ul li');
var $o=$obj.eq(1);//item2
var index=$obj.index($o);//index：返回节点在类数组中的下标
alert(index);//1 });

（4） length 属性：获得 jQuery 对象包含的 DOM 对象的个数。
例： $('#b1').click(function(){ var $obj=$('ul li'); alert($obj.length);//3 });
（5） get()：返回 DOM 对象组成的数组。
例： $('#b1').click(function(){ var $obj=$('ul li'); var arr=$obj.get(); arr[2].innerHTML='hello';});
6） get(index)：返回第 index 个 DOM 对象。
例： 

$('#b1').click(function(){ 
var $obj=$('ul li');
var obj=$obj.get(1);//get(index)：取 index 对应处的 DOM 对象
obj.innerHTML='hello jQuery'; });

六、jQuery 对 Ajax 编程的支持

1、load()方法
（1） 作用：将服务器返回的数据直接插入到符合要求的节点之上，相当于：obj.innerHTML=服务器返回的数据。
（2）用法： $obj.load(url,[data]);
①url：请求地址，服务器上的某个组件的地址。
②data：请求参数，有两种形式：
A.请求字符串形式： "name=hang&&age=24"
B.对象形式： {'name':'hang','age':24}
 load 方法：当没有请求参数时，会使用 get 方式向服务器发请求，如果有请求参数，会使用 post 方式向服务器发请求。不支持异步

2、$.get()方法
（1）作用：使用 get 方式向服务器发请求。
（2）用法： $.get(url,[data],[callback],[type]);
①url：请求地址。 

②data：请求参数。
③callback：是一个回调函数，格式： function(data,statusText)，data 是服务器返回的数据，statusText是服务器处理的状态。
④type：服务器返回的数据的类型，有五种：
A、html：返回的是一个 html 文档。 

B、text：返回的是纯文本。
C、json：返回的是 json 字符串。 

D、xml：返回的是一个 Xml 文档。
E、script：返回的是一个 javascript 脚本。

3、$.post()方法
（1）作用：使用 post 方式向服务器发请求。 

（2）用法：与$.get()方法相同

4、$.ajax()方法
（1）用法： $.ajax( { ... } )，参数顺序无所谓。
（2）参数如下： 

①url(string)：请求地址。 

②type(string)： GET/POST。
③data(object/string)：请求参数。 

④dataType(string)：预期服务器返回的数据类型。
⑤success(function)：请求成功后调用的回调函数，有两个参数 function(data,textStatus)，其中 data 是服务器返回的数据， textStatus 描述状态的字符串。
⑥error(function)：请求失败时调用的函数，有三个参数function(xhr,textStatus,errorThrown)：
A.xhr：底层的 XMLHttpRequest 对象。 

B.textStatus：错误的描述。
C.errorThrown：一般为 null。
⑦async： true（缺省，异步） /false（同步）。

5、jQuery 的自定义方法
语法： $.fn.funName=function(){...}

6、$.param()方法
语法：var obj={表单的名字:"表单的值"};//组成一个对象
$.param(obj);