jQuery 入门

Jquery 学习

 

   今天第一次学习Jquery,好久都通说过此技术，最近无聊就研究下，主要学习的内容如下：

1．     安装.

2．     Hello World

3．     使用选择器和事件

4．     Jquery 构造函数

5．     jQuery绑定、注销、触发事件

6．     jQuery 链式代码

7．     jQuery 之 Ajax

8．     jQuery 之动画

 

1．  安装

下载地址如下：

jQuery Starterkit

 

2．  Hello World

Dom载入后开始执行时间：

$(document).ready(function(){        alert('Hello world!!!');      });

点击一个连接执行点击事件：

$(document).ready(function(){        $("a").click(function(){               alert('Hello world!!!');                                                }); });

$(“a”) 是jquery选择器(selector)，在这里，它选择所有的a标签。

$号是jQuery“类”的一个别名，所以$()构造了一个新的Jquery对象。函数click是这个jquery对象的一个方法，它绑定了一个点击事件到所有选中的标签（在这里指的是a标签）。

 

以上代码类似如下代码：

<a href=”#” οnclick=”alert(‘Hello World!!!’)” >Link</a>

 

3．  使用选择器和事件

jQuery提供两种方式来选择html的elements。

第一种是用Css和Xpath选择器联合起来形成一个字符串来传到jQuery的构造器(如：$(“div > ul a”));

第二种是用jQuery对象的几个method（方法）。这两种方式还可以联合起来混合使用。

  

$("#divClass").addClass("divTest");

$(“#divClass) 相当于document.getElementById(“divClass”);

 

鼠标移上、移出进行样式切换,但只有最后一个起作用：

$("#orderedlist ul:last").hover(function(){               $(this).addClass("green");                                                                     },function(){            $(this).removeClass("green");              });

 

       每一个onXXXX事件都有效，如onclick、onchange、onsubmit等，都是jQuery等价表示方法。都改成了XXXX，去掉了on。

 

 

迭代元素：

$("#orderedlist").find("ul").each(function(i){        $(this).html($(this).html()+" BAM! " + i);                                                                   });

find()让你在已选择的element中作条件查询，因此$(“#orderedlist”).find(“li”)就像$(“#orderedlist li”)一样。each()方法迭代中了所有的li，并可以在此基础上做更多的处理。

 

表单数据充值：

$("#btnReset").click(function() {        $("form")[0].reset(); });

       上面的只是针对一个表单，如果有多个表单的话可以像这样做：

$("#btnReset").click(function() {        $("form").each(function(){               this.reset();                                               }); });

 

 

不希望某些特定的元素被选择。jQuery提供了filter()和not()方法来解决这个问题。

filter()以过滤表达式来减少不符合的被选择项；

not()则用来取消所有符合过滤表达式的被选择项。

not() 的用法：

$("ul").not("[a]").css("font-size","64px");

 

在子元素和属性上用作过滤器，比如你可能想选择带有name属性的链接：

$("a[name]").css("color","#FF0000");

此段代码，页面带有name属性的<a>标签，字体颜色为红色。在此处需要注意：

//原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代

 

       选择器用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素。或者点击隐身、显示。具体代码如下：

$("#faq").find("#dd").hide().end().find("#dt").click(function(){        var answer = $(this).next();        if(answer.is(':visible')){               answer.slideUp();          }else{               answer.slideDown();        } });

 $("#faq").find("#dd").hide()；//查找元素id为faq的表现下id 为dd的元素设置为隐藏。

 $("#faq").find("#dd").hide().end(); //结束后可以继续查找.可以重新再后面query。

 $(this).next();                            //查找同辈的下一个元素

 answer.slideUp(); 和answer.slideDown();是以高度上下的伸缩。

 

       除了选择同级别的元素外，你也可以选择父级别的元素，例如当鼠标移到某个链接上时，它的父级元素一段突出显示，如下：

$("a").hover(function(){        $(this).parents("p").addClass("heightlight"); },function(){        $(this).parents("p").removeClass("heightlight");   });

 

       在学习继承之前我们先来看看这一步：jQuery会让代码变得更短从而变得更容易理解和维护，下面是$(document).ready(callback)的缩写法：

$(function(){   });

 

 

4．  Jquery 构造函数

Jquery 的构造函数接受四种类型的参数：

l         jQuery(expression,context)

l         jQuery(html)

l         jQuery(elements)

l         jQuery(fn)

 

第一种根据表达式（ID、DOM元素名，CSS表达式，XPath表达式）

$(function(){        jQuery("ul>li:first").addClass("selected"); });

"ul>li:first" 中ul>li 表示所有位于ul 下的li 元素（为CSS 表达式，XPath 方式可用ul/li ），

:first 表示其中的第一个。

addClass() 为jQuery 对象用来添加CSS 样式类的函数，相反的函数为removeClass()。

 

 

5．  jQuery绑定、注销、触发事件

绑定事件：

$("#testEvent").bind("click",function(){        alert("hello world!!!!!!!");                                                                });

注销事件：

$("#testEvent").unbind('click');

触发事件：

$("#testEvent").bind("click",function(){        alert("hello world!!!!!!!");                                                                });   $("#testEvent1").bind('click',function(){        $("#testEvent").trigger('click');                                                                 });

其他：

$("button:first").trigger('click'); triggerHandler()-- 触发某类事件，但不触发默认的事件处理逻辑，比如a 的定向。 $("input").triggerHandler("focus"); one() －－为事件绑定只能被触发一次的处理程序。 $("div").one("click", function(){ }); ready()/click()/change()/toggle(fn,fn)/dblclick()…… 各种常规事件的快捷方式，xxx(fn) 为绑定处理程序，xxx() 为触发事件 jQuery 1.2 的事件支持命名空间， $("div").bind("click", function(){ alert("hello"); }); $("div").bind("click.plugin", function(){ alert("goodbye"); }); $("div").trigger("click!"); // alert("hello") only

 

 

6．  jQuery 链式代码

jQuery另一个很令人惬意的地方时，一般的代码都是一行一行的写，jQuery代码可以一串一串的写。

$("<input type='button' value='click me' /><input type='button' value='triggle click me' /><input type='button' value='detach handler' /><input type='button' value='show/hide text' />").appendTo($('body'));   $("input[type='button']").eq(0).click(function(){        alert('you clicked me!');                                                            }).end().eq(1).click(function(){        $("input[type='button']").eq(0).trigger('click');            }).end().eq(2).click(function(){        $("input[type='button']").eq(0).unbind('click'); }).end().eq(3).toggle(function(){        $('.panel').hide('slow'); },function(){        $('.panel').show('slow'); });

 

7．  jQuery 之 Ajax

jQuery 为aJax提供了非常丰富的支持，其中基本当属$ajax(),通过不同的参数，这个方法可以录活支持各种Ajax应用场景。

 

$.ajax 的用法

$.ajax({     url:'ajaxTest?number='+number,     cache:false,     success:function(result){        alert(result);     } });

 

常用的如下：

load() :直接将Ajax请求结果作为jQuery对象内容

$.get() :用get方式请求。

$.post():用post方式提交。

ajaxStart()/ajaxComplete()/ajaxError()….:全局ajax事件的响应。

设置指示器：

//设置指示器 $('#divIndicator').ajaxStart(function(){                   $(this).show()               }).ajaxSuccess(function(){                   $(this).hide()               }).ajaxError(function(msg){                   $(this).hide();                   alert(msg); });

jQuery get请求：

//ajax get请求 $('#btnGetCubeInGet').click(function(){     var number = $('#txtNumber').val();    //获取文本框的值     alert(number);     $.get('ajaxTest?number='+number,function(result){        alert(result);                                           }); });

       jQuery Post请求：

//ajax post请求 $('#btnGetCubeInPost').click(function(){     var number = $('#txtNumber').val();     $.post('ajaxTest',{'number':number},function(result){        alert(result);                                              }); });

 

8．  jQuery 之动画

jQuery直接各种动画，常见的被封装成各种方法，如show()/hide()/slideDown()/fadeIn()等等。

          最灵活的应该属于animate(params,[duration],[easing],[callback])方法，其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。

$(function(){     $("#go").click(function(){        $("#block").animate({            width:"70%",            opacity:0.4,            marginLeft:'0.6in',            fontSize:'3em',            borderWidth:'10px'        },1500);                        }); });

         参数也可以是一些相对数据：

$("#right").click(function(){       $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){       $(".block").animate({"left": "-=50px"}, "slow"); });