JQuery经典总结

1、jQuery介绍

jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。封装的目的是为了更好地兼容不同的浏览器之间的差异，同时也会简化代码。

注：

选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如  $('#id');

2、jQuery基础

(1)jQuery编程的基本步骤

step1,引入jQuery.js文件

step2, 使用选择器查找要操作的节点

step3,调用jQuery对象的属性或者方法来操作相应的节点。

(2)jQuery对象与dom对象之间的转换

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

var $obj = $(dom对象);

             eg:var $d = $(div);

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

第一种方式:   var obj = $obj.get(0);

第二种方式:   var obj = $obj.get()[0];

    JQuery经典总结

(3) jQuery与prototype如何同时使用？

因为jQuery与prototype都使用$函数，需要使用

var $a = jQuery.noConflict()将$函数改名为"$a"。

3、jQuery选择器   selector

1)、基本选择器   selector/a1.html

         *   ——>匹配所有元素

#id   ——>  根据给定的ID匹配一个元素。

.class ——>  根据给定的类匹配元素。

element ——>根据给定的元素名匹配所有元素

selector1,selector2..selectorn ——>将每一个选择器匹配到的元素合并

                                                 后一起返回。

2)、层次选择器 selector/a2.html

select1 select2——>匹配select1下的所有儿子元素（不包含孙子元素）

select1>select2——>匹配select1下的所有子元素（包含孙子元素）

select1+select2——>匹配紧跟在select1后的第一个兄弟元素（同辈元素）

select1~select2——>匹配select1后的所有兄弟元素（及找到所有的同

                            辈元素）

3)、过滤选择器  

a.基本过滤选择器 selector/ a3.html

:first——>获取第一个元素

:last——>获取第一个元素

:not(selector)——>获取去除给定元素后的所有匹配元素

:even——>匹配所有索引值为偶数的元素，从 0 开始计数

:odd——>匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index)——>匹配一个给定索引值的元素

:gt(index)——>匹配所有大于给定索引值的元素

:lt(index)——>匹配所有小于给定索引值的元素

 JQuery经典总结

b.内容过滤选择器  selector/ a4.html

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

:empty   ——>匹配没有子元素且文本为空的元素        :has(selector)——>匹配含有选择器所匹配的元素的元素

:parent ——> 跟empty相反,即有子节点，或者内容不为空的节点。

c.可见性过滤选择器 selector/ a5.html

:hidden——>匹配所有不可见元素，或者type为hidden的元素

:visible——>匹配所有的可见元素

d.属性过滤选择器 selector/ a6.html

[attribute]——>匹配包含给定属性的元素

[attribute=value]——>匹配给定的属性是某个特定值的元素

[attribute!=value]——>匹配属性不等于特定值的元素。

e.子元素过滤选择器 selector/ a7.html

:nth-child(index/even/odd)——>匹配其父元素下的第N个子或奇

                                                  偶元素（即同辈中第N个元素）

           :first-child——>匹配其父元素下第一个子元素

           :last-child——>匹配其父元素下最后一个子元素

f.表单对象属性过滤选择器

:enabled——>匹配所有可用元素

:disabled——>匹配所有不可用元素

:checked——>匹配复选框、单选按钮中被选中的元素

:selected——>匹配所有选中的option元素

  4)、表单选择器

:input——>匹配所有 input, textarea, select 和 button 元素

:text——>匹配所有的单行文本框

:pasword——>匹配所有密码框

:radio——>匹配所有单选按钮

:checkbox——>匹配所有复选框

:submit——>匹配所有提交按钮

:image——>匹配所有图像域

:reset——>匹配所有重置按钮

:button——>匹配所有按钮

:file——>匹配所有文件域

:hidden——> 匹配所有不可见元素，或者type为hidden的元素

4、dom操作

1)、查询  dom / d1.html

利用选择器找到要操作的节点之后，访问节点的html内容、text内容、

           节点的值以及节点的属性值。除此之外，还可以修改这些值。

a, html() : 相当于innerHTML

b, text(): 获取div,p,span等元素内文本相当于innerText，

c, val():获取文本框text、下拉列表select或选择框checkbox的值

d, attr():获取或设置节点的属性值

2)、创建   dom / d2.html

$(html);

3)、插入节点

append():向每个匹配的元素内部追加内容，当做最后一个儿子

prepend():向每个匹配的元素内部前置内容。当做第一个儿子

after():在每个匹配的元素之后插入内容，当做后一个兄弟 

before():在每个匹配的元素之前插入内容，当做前一个兄弟

  eg:JQuery经典总结

       var $obj = $('<div>首先是培养兴趣，然后是多写代码</div>');

$('body').append($obj);

也可以简化为

$('body').append('<div>首先是培养兴趣，然后是多写代码</div>');

 

4)、删除节点 dom / d3.html

remove()：$('ul li:eq(1)').remove();

remove(selector)：$('ul li').remove('#l1');

empty():清空节点：$('ul li:eq(1)').empty();

5)、复制节点  dom / d6.html

clone():不复制行为

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

6)、属性操作  dom / d7.html

读取：attr(' ');     $("img").attr("src");

设置： attr(' ',' ') $("img").attr(‘src’, ‘test.jpg’); 

        s('#d1').attr('value','font-size:40px;color:red;');

        $('#form1 input:disabled').attr('disabled',false);

或者一次设置多个 attr({"":"","":""});

      eg:$('div').attr({'class':'s1','style':'color:red;'});

删除：removeAttr(' ')

7)、样式操作  dom / d8.html

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

      alert($('div').attr('class'));

      $('div').attr('class','s1')

      $('div').attr('style','color:blue;');

 

追加:addClass(''):$('div').addClass('s2 s3');

移除:removeClass('') :$('div').removeClass('s3');

或者removeClass('s1 s2') 

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

切换样式：toggleClass:$('div').toggleClass('s3');

是否有某个样式 hasClass(''):alert($('div').hasClass('s3'));

读取css('')

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

       $('table tr:first').css('background-color','#cccccc');

       $('table tr:first').css({'background-color':'#cccccc',’width’:’3px’});

 

 

8)、遍历节点 dom / d9.html

children()/children(selector):var $obj = $('#d0').children('div');

只考虑子元素，不考虑其它后代元素。

next(selector): 下一个兄弟$('#d2').next()

prev(selector):上一个兄弟$('#d2').prev()

siblings(selector):其它兄弟，

       $('#d2').siblings(‘#id’)除#d2之外的其他兄弟节点

       也可以写成：$(‘#id’).siblings()

parent():父节点,不是爷爷节点

find(selector): 从当前节点开始，查找所有后代，包括孙子。

 

 

5、如何将js代码与html分开(将数据与行为分离) 

 就上将形如<input type=”button” id=”b1” onclick=”fun();”/>改写为：

<input type=”button” id=”b1” />

 $(function(){

$('#b1').click(function(){

//.........

});

});

的形式

window.onload : 当整个页面加载完毕，会产生load事件，就会执行绑订

                   的函数。

window.onload = function () {

var obj = document.getElementById("d1");

obj.onclick = function () {

obj.innerHTML = "hello java";

};

};

在使用jQuery时，可以使用如下的代码来实现js与html的分离:

$(function(){

//js代码: 这些js代码会在整个页面加载完毕之后

//执行。

});

eg:

$(function(){相当于window.onload = function ()

$('#b1').click(function(){

$('div').attr({'class':'s1','style':'color:red;'});

});

});

上面的代码等同于：

window.onload = function () {

　　$('#b1').get(0).onclick=function(){

$('div').attr({'class':'s1','style':'color:red;'});

}

}

6、事件处理机制   event

1)、事件绑订  event/e1.html

bind(type,fn)

      eg:

$(function(){

$('#d1').bind('click',function(){

$(this).html('hello java');

});

});

2)、绑订方式的简写形式

        上个列子可以简写为：

$(function(){

$('#d1').click(function(){

$(this).html('hello java');

});

});

3)、合成事件  event/e2.html   e3.html

hover(mouseenter,leave) : 模拟光标悬停事件，区别于CSS中的伪

                                   类

$('.s1').hover(function(){

$(this).addClass('s2');

},function(){

$(this).removeClass('s2');

});

 

相当于以下连个函数的合成：

$('.s1').mouseenter(function(){

$(this).addClass('s2');

});

$('.s1').mouseleave(function(){

$(this).removeClass('s2');

  });

 

上面的mouseenter和mouseleave两个函数可以合并为：

$('.s1').mouseenter(function(){

$(this).addClass('s2');

}).mouseleave(function(){

$(this).removeClass('s2');

});

toggle(fn1,fn2...)：模拟鼠标连续单击事件

         $('#a1').toggle(function(){

$('#d1').show('slow');

},function(){

$('#d1').hide('slow');

});

4)、事件冒泡

(1)获得事件对象  event/e4.html e5.html e6.html

click(function(e){

});

function f1(e){

依据事件对象获得事件源(即哪一个节点产生了该事件，返回的是原

       始的DOM节点)，其中e不再是DOM对象，而是封装之后的JQuery

       对象。

var srcObj = e.srcElement;  //ie

var srcObj = e.target; //firefox,chrome

var srcObj = e.srcElement || e.target; //同时兼容ie,firefox,chrome

alert(srcObj.innerHTML);

依据事件对象获得鼠标点击的坐标（相对于屏幕）

alert(e.clientX + ':' + e.clientY);

}

       (2)事件对象的属性  event/e6.html

event.type

event.target:返回事件源(是dom对象)

event.pageX/pageY   获得相对于当前浏览器页面的坐标

 

(3)停止冒泡   event / e7.html

event.stopPropagation()

function clickA(e){

alert("你点击了一个链接");

//取消冒泡

e.stopPropagation();

  }

function clickDiv(e){

alert("你点击了一个Div");

}

上列中，链接处于div中，当取消冒泡后，单击链接便不会触发div上面

onlick事件的执行，上例中的输出结果为：你点击了一个链接

(4)停止默认行为  event / e8.html

event.preventDefault()

$(function(){

$('#d1').click(function(e){

var flag = confirm('确定删除吗');

if(!flag){

e.preventDefault();

}

});

});

设置停止了默认行为后，表单提交按钮便不会自动提交了。相当于：

　　<input type=”submit” id=”d1” name=”username” 

　　  onclick=”return fonfirm(‘确定要删除吗’)”/>

5)、模拟操作  event / e9.html

trigger('click')

$(function(){

$('#b1').click(function(){

//$('#username').trigger('focus');

$('#username').focus();

});

});

上列模拟了文本框控件获得焦点的行为，当点击按钮后，文本框便获得了焦点，表现为文本框内有光标闪动。

 

mouseenter和mouseover效果一样，可以互换使用

mouseout和mouseleave效果一样，可以互换使用

7、动画   animate

   1)、show(), hide()   a1.html

作用：通过同时改变元素的宽度与高度来实现显示和隐藏的效果。

语法:

show(速度,callback);

速度:  'slow','normal','fast' / 800(毫秒)

callback: 在动画执行完毕之后，会执行这个函数

         $(function(){

$('#btn1').click(function(){

   $('#sp1').hide/show(500);

                 $('#sp1').hide/show(500,function(){alert("H");});

});

});

2)、fadeIn() fadeOut():  animate / a2.html

作用， 通过改变元素的不透明度来实现显示和隐藏的效果。

语法: fadeIn/fadeOut(速度,callback);

$(function(){

$('#btn1').click(function(){

   $('#sp1').fadeIn/fadeOut(500);

                 $('#sp1').fadeIn/fadeOut(500,function(){alert("H");});

});

});

 

3)、slideUp() slideDown() :  amimate/a1.html

作用：通过改变元素的高度来实现显示和隐藏的效果。

语法: slideUp(速度,callback);

$(function(){

$('#a1').toggle(function(){

$('#d1').slideDown('slow');

},function(){

$('#d1').slideUp('slow');

});

});

4)、自定义动画 animate(params,speed,callback) a3.html

语法: JQuery经典总结

params:是一个js对象，描述了动画执行结束时元素的样式，

                  比如:

{'top':'600px','left':'200px'}

speed:  毫秒

callback: 在动画执行完毕之后，会执行这个函数

$(this).animate({'left':'500px'},4000);

$(this).animate({'top':'250px'},2000).fadeOut('slow');

8、类数组的操作  

jQuery选择器返回的是一个jQuery对象(该对象可能包括了多个dom

       节点),如果要对这些dom节点分别做不同的处理，就需要去遍历，需要

       调用jQuery对象提供的一些方法或者属性，称之为类数组的操作。

       类数组就是DOM节点数组

1)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象，

                 $(this)代表被迭代的jQuery对象。（i根据实际情况选择要

                 还是不要）。

2)eq(index)：返回index+1位置处的jQuery对象

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

4)length属性：dom对象的个数

5)get()：返回dom对象组成的数组

6)get(index)：返回index+1个dom对象。

eg1:

//把我的好友中所有的用户放到用户列表中

$('#b4').click(function(){

$('#s2 option').each(function(){

$('#s1').append($(this));

});

});

    eg2:

$(function(){

$('#b1').click(function(){

var $obj = $('ul li');

$obj.each(function(i){

//i:表示正在被访问的那个节点的下标,

//下标从0开始

if(i == 0){

$(this).css('font-size','50px');

}else if(i==1){

$(this).css('font-style','italic');

}else{

$(this).css('color','red').css('font-size','80px');

}

});

});

 

9、jQuery对ajax编程的支持

(1)load方法:

作用：是将服务器返回的数据直接添加到符合要求的节点之上，相当于

             obj.innerHTML = 返回的数据。

语法:

$obj.load(请求地址,[请求参数]);

其中，请求参数可以有两种形式:

第一种：请求字符串，比如 "username=zs",或者

“username=zs&age=22"。

第二种：javascript对象，比如 

{'username':'zs'}，或者{'username':'zs','age':22}

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

       post请求。

(2)$.get方法

作用：向服务器发送get请求

语法:   $.get(url,[data],[callback],[type]):

url:请求地址

data:请求参数,可以是请求字符串或者是js对象。

                 格式为：{key,value}

                 eg:{"name":$("#cost_name").val()}

callback: 是一个回调函数，用于处理服务器返回的数据，其格式 

                   function(data,statusText),

data是服务器返回的数据，如果服务器返回的是json字符串，$.get

          方法会自动将其转换成一个js对象或者js对象组成的数组。

                  statusText是服务器处理的状态。

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

text : 文本字符串

html : html内容

xml: 返回dom兼容的xml对象

json: json字符串

script: javascript脚本

eg:

function quoto(){

$('#tb1').empty();

$.get('quoto.do?' + Math.random(),function(data){

//data:服务器返回的数据, 如果服务器

//返回的是json字符串，$.get方法会自动

//将其转换成一个js对象或者js对象组成的数组。

for(i=0;i<data.length;i++){

$('#tb1').append(

'<tr><td>' + data[i].code 

+'</td><td> '+ data[i].name

 + '</td><td> ' + data[i].price

  + '</td></tr>');

}

},'json');

}

$.post()格式同上。

$.put(url,[data],[callback],[type]):

 

 //焦点离开资费名输入框进行ajax检测

         $(function(){

         $("#name").blur(function(){          

             var name = $(this).val();

         //发送ajax请求

         $.post(

         "validFeeName.action",//请求url

         {"name":name},//提交参数

         function(data){//data是服务器返回的ok值

         if(data){//如果返回true             $("#name_error").removeClass("error_msg")

               .html("资费名称可用");

         }else{//如果返回false

         $("#name_error").addClass("error_msg")

                               .html("资费名称重复");

         }

         }

         ,"text");  

         });

        });

(3)$.ajax方法

作用：可以设置不同的参数，控制ajax对象向服务器发请求。

语法:

$.ajax(options): 

其中，options是一个形如

{key1:value1,key2,value2...}的js对象，

用于指定发送请求的选项。

选项参数如下：

url(string):请求地址

type(string):GET/POST

data(object/string):请求参数，可以是请求字符串或者js对象

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

success(function):请求成功后调用的回调函数，有两个参数：

function(data,textStatus),其中，

data是服务器返回的数据，

textStatus 描述状态的字符串。

       error(function):请求失败时调用的函数，有三个参数

function(xhr,textStatus,errorThrown),

xhr: ajax对象，即XMLHttpRequest对象。

textStatus和errorThrown，jQuery保证其中的一个

                         参数可以获得异常的描述。

           async: true(缺省)/false

eg:

$(function(){

$('#s1').change(function(){

//先清空表格

$('#tb1').empty();

$.ajax({

'url':'carInfo.do',

'type':'post',

'data':'carName=' + $('#s1').val(),

'dataType':'xml',

'success':function(data){

//data:服务器返回的数据如果服务器返回的是xml,

                         浏览器不一样，则生成的dom树的结果也不一样，

                         为了方便解析dom树，一般 我们使用$()函数将其

                         转换成jQuery对象,然后进行遍历或者查找。

$('#tb1').append(

'<tr><td>价格:' + $(data).find('price').text() 

+ ' 车重:' + $(data).find('weight').text() 

+ '</td><td>门数:' 

+ $(data).find('doors').text() 

+ ' 长宽高:' +  $(data).find('size').text() 

+ '</td><td>排量:' + $(data).find('vol').text() 

+ ' 加速性能:' 

+ $(data).find('speed').text() + '</td></tr>');

$('#d2').show();

setTimeout(function(){

$('#d2').fadeOut('slow');

},3000);

},

'error':function(){

alert('服务暂时不可用');

}

});

});

});

练习1：商品热卖

练习2：自动完成

step1,服务器端代码

服务器会返回一个类似于以下的字符串:

小米,小米2,小说,小米官网

step2,

分解服务器返回的字符串，并且将

其添加到文本输入框的下面。

每一个选项要绑订click事件(将用户

选中的选项复制到文本输入框)和mouseenter

事件(加亮对应的选项)处理代码。

keyup事件：

注意：keyup事件在某些浏览器中，在切换中文输入法时，会有

bug,需要我们自己解决，如果发现有这个问题，需要使用如下

代码：

var eventname = 'input';

if(navigator.userAgent.indexOf('MSIE')!=-1){

eventname = 'propertychange';

}

$('#key').bind(eventname,fn);

10、给JQuery添加插件

可以把JQuery看做一个类，给JQuery添加插件就是给Jquery类中添加方法。相当于在Java中给String类增加方法（当然是不可以增加的），这样就可以用JQuery对象直接调用了，方便多次使用。

使用场合：使用频率高的方法，

 JQuery经典总结

eg:下面代码的作用是对指定的文本框(errorContent)进行非空验证，并输出（errorMsg）验证提示信息。

   写法一：

$.fn.required = function(errorContent, errorMsg) {

　　 var val = $(this).val();

　　 if (val != null && val.length > 0) {

　　 $(errorContent).text("");

　　 return true;

　　 } else {

　　 $(errorContent).text(errorMsg);

　　 return false;

　　 }

    　}

写法二：

;(function($){

$.fn.extend({

   rangeLength:function(errorContent, errorMsg){

var val = $(this).val();

if (val != null && val.length > 0) {

$(errorContent).text("");

return true;

} else {

$(errorContent).text(errorMsg);

return false;

}

   }

});

   })(jQuery)

 

<script type="text/javascript">

   $(function() {

     $("#submit").bind("click",function(){

        var b1 = $("#adminCode")

          .required($("#error_adminCode"),"账号必须填写");

        var b2 = $("#password")

          .required($("#error_password"),"密码必须填写")

        if(b1 && b3) {

           $("#loginForm").submit();

        }

     });

   });

</script>