[转贴]推荐–jQuery使用手册

原文:http://www.cnblogs.com/skylaugh/articles/595563.html

 

翻整理:Young.J
官方网站:http://jquery.com

   
jQuery是一模一样缓缓及prototype一样可以js开发库类,特别是本着css和XPath的支持,使我们写js变得尤为有益于!如果你不是独js高手又想写有优
秀的js效果,jQuery可以扶持你上目的!
   下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
                       jQuery Downloads (http://jquery.com/src/)

   下充斥完成后先加载到文档中,然后我们来拘禁个简易的例子!

<script language=”javascript” type=”text/javascript”>   
    $(document).ready(function(){
        $(“a”).click(function() {
        alert(“Hello world!”);
   });
});
<script>

     上边的作用是点击文档中所有a标签时拿弹出对话框,$(“a”)
是一个jQuery选择器,$本身代表一个jQuery类,所有$()是构造一个jQuery对象,click()是此目标的法子,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的点子,表示当document全部下载了时实施函数。
    
在进展下内容前面自己还要验证一些$(“p”)和$(“#p”)的区分,$(“p”)表示收获有p标签(<p></p>)的因素,$(“#p”)表示取id为”p”(<span 
id=”p”></span>)的元素.

本人拿于以下几独内容来教jQuery的应用:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序

                                             同等:核心部分
$(expr) 证:该函数可以由此css选择器,Xpath或html代码来配合目标元素,所有的jQuery操作都因这个吧根基
参数:expr:字符串,一个查询表达式或同一截html字符串
例子:
未执行jQuery前:

Ajax 1<p>one</p>
Ajax 2<div>
Ajax 3      <p>two</p>
Ajax 4</div>
    <p>three</p> 
    <a href=”#” id=”test” onClick=”jq()” >jQuery</a>

jQuery代码及成效:

function jq(){  
    alert($(“div > p”).html());  
}

运行:当点击id为test的素时,弹出对话框文字吗two,即div标签下p元素的情节

function jq(){
    $(“<div><p>Hello</p></div>”).appendTo(“body”);
}

运作:当点击id为test的素时,向body中添加“<div><p>Hello</p></div>”

$(elem)
征:限制jQuery作用为一个一定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

<p>one</p>
  <div>
     <p>two</p>
  </div><p>three</p>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及职能:

function jq(){
    alert($(document).find(“div > p”).html());
}

运转:当点击id为test的要素时,弹出对话框文字吗two,即div标签下p元素的始末

function jq(){
   $(document.body).background(“black”);
}

运行:当点击id为test的要素时,背景色变成黑色

$(elems) 证明:限制jQuery作用为平组特定的DOM元素
参数: elem:一组经过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

Ajax 5<form id=”form1″>
Ajax 6      <input type=”text” name=”textfield”>
Ajax 7      <input type=”submit” name=”Submit” value=”提交”>
Ajax 8</form>
Ajax 9<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及力量:

function jq(){ 
   $(form1.elements ).hide(); 
}

 

运作:当点击id为test的因素时,隐藏form1表单中之有着因素。

$(fn) 征:$(document).ready()的一个记方式,当文档全部载入时实施函数。可以生出多独$(fn)当文档载入时,同时推行有函数!
参数:fn (Function):当文档载入时实施之函数!
例子:

$( function(){
    $(document.body).background(“black”);
})

运行:当文档载入时背景变成黑色,相当于onLoad。

$(obj) 证:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:

<p>one</p>
<div>
   <p>two</p>
</div>
<p>three</p>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及功效:

function jq(){
    var f = $(“div”); 
    alert($(f).find(“p”).html()) 
}

运行:当点击id为test的要素时,弹出对话框文字吗two,即div标签下p元素的始末。

each(fn) 证实:将函数作用为拥有匹配的对象上
参数:fn (Function): 需要实践之函数
例子:
未执行jQuery前:

<img src=”1.jpg”/>
<img src=”1.jpg”/>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及功效:

function jq(){
   $(“img”).each(function(){ 
        this.src = “2.jpg”; });
}

运行:当点击id为test的元素时,img标签的src都改成了2.jpg。

eq(pos) 征:减少匹配对象及一个独门得dom元素
参数:pos (Number): 期望限制的目,从0 开始
例子:
未执行jQuery前:

Ajax 10<p>This is just a test.</p>
Ajax 11<p>So is this</p>
Ajax 12<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及职能:

function jq(){
    alert($(“p”).eq(1).html())
}

运转:当点击id为test的元素时,alert对话框显示:So
is this,即第二单<p>标签的情节

get() get(num) 征:获取匹配元素,get(num)返回匹配配元素中之有一个素
参数:get (Number): 期望限制的目,从0 开始
例子:
未执行jQuery前:

<p>This is just a test.</p>
<p>So is this</p>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及功效:

function jq(){
    alert($(“p”).get(1).innerHTML);
}

运作:当点击id为test的因素时,alert对话框显示:So
is this,即第二独<p>标签的始末
留意get和eq的分别,eq返回的凡jQuery对象,get返回的是所匹配的dom对象,所有取$(“p”).eq(1)对象的情节用jQuery方法html(),而取$(“p”).get(1)的始末用innerHTML
index(obj) 证实:返回对象找引
参数:obj (Object): 要查找的目标
例子:
未执行jQuery前:

<div id=”test1″></div>
<div id=”test2″></div>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及功能:

function jq(){
    alert($(“div”).index(document.getElementById(‘test1’)));
    alert($(“div”).index(document.getElementById(‘test2’)));
}

运作:当点击id为test的因素时,两浅弹出alert对话框分别显示0,1

size()   Length 证:当前相当对象的数码,两者对等
例子:
未执行jQuery前:

<img src=”test1.jpg”/>
<img src=”test2.jpg”/>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及效益:

function jq(){
    alert($(“img”).length);
}

运作:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个门当户对对象

 

 

 

 

 

 

 
**

                                                   二:DOM操作 属性
咱为<img id=”a”
scr=”5.jpg”/>为例,在初的javascript里面可以用var
o=document.getElementById(‘a’)取之id为a的节点目标,在为此o.src来取得或者改该节点的scr属性,在jQuery里$(“#a”)将得到jQuery对象[
<img id=”a” scr=”5.jpg”/>
],然后可以据此jQuery提供的过剩智来拓展操作,如$(“#a”).scr()将得到5.jpg,$(“#a”).scr(“1.jpg”)将欠目标src属性改呢1,jpg。下面我们来讲jQuery提供的不在少数jQuery方法,方便大家很快对DOM对象进行操作
herf()   herf(val)
**说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前

<a href=”1.htm” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及职能:

function jq(){
   alert($(“#test”).href());
   $(“#test”).href(“2.html”);
}

运行:先弹出对话框显示id为test的连接url,在拿其url改吧2.html,当弹出对话框后会盼转向到2.html
同理,jQuery还提供类似之任何措施,大家好独家考瞬间:
herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name
(val)   rel()  rel (val)
src()    src (val)   title()  title (val)   val()  val(val)

操作
**
after(html) 
在匹配元素后插入一截html**

<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

 

append(html)在匹配元素内部,且最后插入指定html

<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

 

同理还有append(elem)  append(elems)
before(html) before(elem)
before(elems)请执行参照append和after的方来测试、理解!

appendTo(expr)  与append(elem)相反

Ajax 13<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及功能

function jq(){  
      $(“a”). appendTo ($(“#test”));  
}

行后相当给

<p id=”test”>after<a href=”#” onClick=”jq()”>jQuery</a> </p>

 

clone() 复制一个jQuery对象

<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及功效:

function jq(){  
     $(“#test”).clone().appendTo($(“a”));  
}

复制$(“#test”)然后插入到<a>后,执行后相当给

<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a><p id=”test”>after</p>

 

wrap(elem)
将配合对象涵盖在叫闹底靶子内

<p>Test Paragraph.</p><div id=”content”></div>
<a href=”#” onClick=”jq()”>jQuery</a>

 

function jq(){  
      $(“p”).wrap( document.getElementById(‘content’) );
}

履后一定给

<div id=”content”><p>Test Paragraph.</p></div>

遍历、组合
**
add(expr) 
在本对象的底子及以附加符合指定表达式的jquery对象**

<p>Hello</p><p><span>Hello Again</span></p>
<a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及力量:

function jq(){
     var f=$(“p”).add(“span”);    
     for(var i=0;i < $(f).size();i++){
     alert($(f).eq(i).html());}
}

实施$(“p”)得到匹配<p>的对象,有有限只,add(“span”)是于(“p”)的底蕴及加上匹配<span
>的对象,所有一共发生3单,从上面的函数运行结果好视$(“p”).add(“span”)是3个目标的集合,分别是[<p>Hello</p>],[<p><span>Hello
Again</span></p>],[<span>Hello
Again</span>]。

add(el)  在相当对象的基础及于增大指定的dom元素。
        $(“p”).add(document.getElementById(“a”));

add(els) 
在相当对象的功底及以增大指定的一律组对象,els是一个数组。

Ajax 14<p>Hello</p><p><span>Hello Again</span></p>

jQuery代码及效益:

function jq(){
     var f=$(“p”).add([document.getElementById(“a”), document.getElementById(“b”)])
     for(var i=0;i < $(f).size();i++){
             alert($(f).eq(i).html());}
}

注意els是一个往往组,这里的[ ]不能够脱。

ancestors () 
一依次以相当结点的父节点的情节为对象,根节点除外(有点不好理解,看看下面例子就是理解了)

<div>
    <p>one</p>
    <span>
    <u>two</u>
    </span>
</div>

jQuery代码及作用:

function jq(){
     var f= $(“u”).ancestors();
     for(var i=0;i < $(f).size();i++){
      alert($(f).eq(i).html());}
}

首先只目标是因<u>的父节点的情呢目标,[ <u>two</u>
]
首先单对象是坐<u>的父节点的父节点(div)的情吗对象,[<p>one</p><span><u>two</u></span>
]
诚如一个文档还有<body>和<html>,依次近乎推下去。

ancestors (expr)  在ancestors()的根基及之取得符合表达式的目标
使齐每例子说var f改吧var f= $(“u”).ancestors(“div”),则就回去一个靶:
[
<p>one</p><span><u>two</u></span> 
]

children()  返回匹配对象的子介点

<p>one</p>
<div id=”ch”>   
     <span>two</span>
</div>

jQuery代码及职能:

function jq(){
    alert($(“#ch”).children().html());
}

$(“#ch”).children()得到目标[ <span>two</span>
].所以.html()的结果是”two”

children(expr)  返回匹配对象的子介点中入表达式的节点

<div id=”ch”>   
      <span>two</span>
      <span id=”sp”>three</span>
</div>

jQuery代码及作用

function jq(){
    alert($(“#ch”).children(“#sp”).html());
}

$(“#ch”).children()得到目标[<span>two</span><span
id=”sp”>three</span> ].
$(“#ch”).children(“#sp”)过滤得到[<span
id=”sp”>three</span> ]

parent ()  parent (expr)取匹配对象父节点的。参照children帮助了解

contains(str) 
返回匹配对象被隐含字符串str的靶子

Ajax 15<p>This is just a test.</p><p>So is this</p>

jQuery代码及意义:

function jq(){
    alert($(“p”).contains(“test”).html());
}

$(“p”)得到两只目标,而带有字符串”test”只来一个。所有$(“p”).contains(“test”)返回
[ <p>This is just a test.</p> ]

end()
结束操作,返回到相当配元素清单上操作前的状态.

filter(expr)   filter(exprs)   过滤现实匹配符合表达式的目标
exprs为数组,注意添加“[ ]”

<p>Hello</p><p>Hello Again</p><p class=”selected”>And Again</p>

jQuery代码及职能:

function jq(){
    alert($(“p”).filter(“.selected”).html())
}

$(“p”)得到三只目标,$(“p”).contains(“test”)只回去class为selected的目标。

find(expr)  在配合的靶子中连续搜寻符合表达式的对象

<p>Hello</p><p id=”a”>Hello Again</p><p class=”selected”>And Again</p>

Query代码及功能:

function jq(){
    alert($(“p”).find(“#a”).html())
}

每当$(“p”)对象吃寻找id为a的对象。

is(expr)  判断目标是否合乎表达式,返回boolen值

<p>Hello</p><p id=”a”>Hello Again</p><p class=”selected”>And Again</p>

Query代码及效果:

function jq(){
    alert($(“#a”).is(“p”));
}

在$(“#a “)是否入jquery表达式。
世家好用$(“#a”).is(“div”);  (“#a”).is(“#a”)多来测试一下

next()  next(expr)  返回匹配对象剩余的哥们节点

<p>Hello</p><p id=”a”>Hello Again</p><p class=”selected”>And Again</p>

jQuery代码及功效

function jq(){
        alert($(“p”).next().html());
        alert($(“p”).next(“.selected”).html());
}

$(“p”).next()返回 [ <p id=”a”>Hello Again</p> , <p
class=”selected”>And Again</p> ]有限只对象
$(“p”).next(“.selected)只返回 [<p class=”selected”>And
Again</p> ]一个目标

prev ()  prev (expr) 
参照next理解

not(el)  not(expr) 
从jQuery对象吃改换出相当的目标,el为dom元素,expr为jQuery表达式。

<p>one</p><p id=”a”>two</p>
<a href=”#” onclick=”js()”>jQuery</a>

jQuery代码及作用:

function js(){
     alert($(“p”).not(document.getElementById(“a”)).html());
     alert($(“p”).not(“#a”).html());
}

$(“p”)由少数单对象,排除后底靶子啊[<p>one</p> ]

siblings ()  siblings (expr) 
jquery匹配对象被另外兄弟级别之目标

<p>one</p>
<div>
  <p id=”a”>two</p>
</div>
<a href=”#” onclick=”js()”>jQuery</a>

jQuery代码及效果:

function js(){
       alert($(“div”).siblings().eq(1).html());
}

$(“div”).siblings()的结果属实返回两独对象[<p>one</p>,<a
href=”#” onclick=”js()”>jQuery</a> ]
alert($(“div”).siblings(“a”)返回一个对象[<a href=”#”
onclick=”js()”>jQuery</a> ]

其他
**
addClass(class)  
为配合对象上加一个class样式
removeClass (class)   将首先个相当对象的某部class样式移出
attr (name)   获取第一独相当对象的性质**

<img src=”test.jpg”/><a href=”#” onclick=”js()”>jQuery</a> 

jQuery代码及效益:

function js(){
     alert($(“img”).attr(“src”));
}

返回test.jpg

attr (prop)  
为第一只门当户对对象的安属性,prop为hash对象,用于为有目标批量补充加博性质

<img/><a href=”#” onclick=”js()”>jQuery</a>

jQuery代码及功效:

function js(){
     $(“img”).attr({ src: “test.jpg”, alt: “Test Image” }); 
}

运行结果一定给<img src=”test.jpg” alt=”Test Image”/>

attr (key,value)  
为率先单门当户对对象的装置属性,key为属性名,value为属性值

<img/><a href=”#” onclick=”js()”>jQuery</a>

jQuery代码及功能

function js(){
     $(“img”).attr(“src”,”test.jpg”); 
}

运行结果相当给<img src=”test.jpg”/>

removeAttr (name)   将率先独相当对象的之一属性移出

<img alt=”test”/><a href=”#” onclick=”js()”>jQuery</a>

jQuery代码及成效:

function js(){
     $(“img”). removeAttr(“alt”); 
}

运转结果一定给<img />

toggleClass (class)  
将目前目标上加一个体裁,不是当下目标则转移出是体制,返回的凡拍卖后的对象

<p>Hello</p><p class=”selected”>Hello Again</p><a href=”#” onclick=”js()”>jQuery</a>

$(“p”)的结果是归对象 [<p>Hello</p>,<p
class=”selected”>Hello Again</p> ]
$(“p”).toggleClass(“selected”)的结果是真真切切返回对象 [ <p
class=”selected”>Hello</p>, <p>Hello Again</p> ]

<div id=”a” style=”background:blue; color:red”>css</div><P id=”b”>test</P>

css(name) 
获取样式名吧name的样式

$(“#a”).css(“color”) 将获得样式中color值red,(“#a”).css(“background
“)将得到blue

css(prop) 
prop是一个hash对象,用于安装大量底css样式

$(“#b”).css({ color: “red”, background: “blue” });
最终效果是<p id=”b” style=”background:blue;
color:red”>test</p>,{ color: “red”, background: “blue”
},hash对象,color为key,”red”为value,

css(key, value) 
用于安装一个独门得css样式
$(“#b”).css(“color”,”red”);最终效果是<p id=”b”
style=”color:red”>test</p>

                                              四:JavaScript处理

$.browser() 
判断浏览器类型,返回boolen值

$(function(){
    if($.browser.msie) {
        alert(“这是一个IE浏览器”);}
    else if($.browser.opera) {
        alert(“这是一个opera浏览器”);}
})

当页面载入式判断浏览器类型,可判的种有msie、mozilla、opera、safari

$.each(obj, fn) 
obj为目标要数组,fn为在obj上相继执行之函数,注意区分$().each()

$.each( [0,1,2], function(i){ alert( “Item #” + i + “: ” + this ); });

    分别将0,1,2为参数,传入到function(i)中

$.each({ name: “John”, lang: “JS” },  function(i){ alert( “Name: ” + i + “, Value: ” + this );

    { name: “John”, lang: “JS”
}为一个hash对象,依次将hash中每组对象传入到函数中

$.extend(obj, prop) 
用第二单对象扩大第一只目标

var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
$.extend(settings, options);

执行后settings对象为{ validate: true, limit: 5, name: “bar” }
得据此底函数来测试

$(function(){
       var settings = { validate: false, limit: 5, name: “foo” };
        var options = { validate: true, name: “bar” };
        $.extend(settings, options);
        $.each(settings,  function(i){ alert( i + “=” + this ); });
})

$.grep(array,fn) 
通过函数fn来过滤array,将array中之要素依次传为fn,fn必须返回一个boolen,如fn返回true,将受过滤

$(function(){
        var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
        $.each(arr, function(i){ alert(i); });
})

俺们好对执行$.grep后数组[0,1,2,3,4]变成[0,1]

$.merge(first, second) 
两独参数都是多次组,排出第二单数组中同第一只同之,再将简单独数组合并

$(function(){ 
        var arr = $.merge( [0,1,2], [2,3,4] )
        $.each(arr,  function(i){ alert(i); });
})

足见到arr的结果也[0,1,2,3,4]

$.trim(str) 
移有字符串两端的空格

    $.trim(”   hello, how are you?   “)的结果是”hello, how are you?”

                                  
五:动态效果

      
在用随即有的之前我们事先押个例,相信做网页的心上人都遇到n级菜单的面貌,但点击某菜单按钮时,如果它的子菜单是显得的,则隐藏子菜单,如果子菜单隐藏,则展示出来,传统的javascript做法是先用getElementById取出子菜单所于容器的id,在认清该容器的style.display是否等none,如果当则设为block,如果无对等这如果为none,如果当将力量设置复杂一点,当点击按钮时,不是突如其来隐藏和显示子菜单,而是高度平滑的转移,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的熄灭与表现,这时显现下来需要编制很多代码,如果js基础不好的情人或只能由他人写好之代码用过来修改了!jQuery实现者效果才待1句话虽执行,$(“#a”).toggle(“slow”),Ajax 16,学完jQuery后还索要抄袭修改别人的代码吗?下面我们逐条介绍jQuery用于效果处理的点子。

hide()  隐藏匹配对象

<p id=”a”>Hello Again</p><a href=”#” onClick=’ (“#a”).hide()’>jQuery</a>

 

Ajax 17<img src=”1.jpg” style=”width:150px”/>
Ajax 18<a href=”#” onClick=’$(“img”).toggle(“slow”)’>jQuery</a>

fadeIn(speeds)   fadeOut(speeds) 
根据速度调整透明度来展示或藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都不过调整透明度,不调大小

<img src=”1.jpg” style=”display:none”/><a href=”#” onClick=’$(“img “).fadeIn(“slow”)’> jQuery </a>

点击连接后好看来图片逐渐显示。

fadeIn(speed, callback)  fadeOut(speed,
callback)  
callback为函数,先经调整透明度来展示或隐蔽匹配对象,当调整了后实行callback函数

<img src=”1.jpg”/>
<a href=”#” onClick=’$(“img “).fadeIn(“slow”,function(){ alert(“Animation Done.”); })’> jQuery </a>

点击连接后得以看到图片逐渐显示,显示了后弹有对话框

fadeTo(speed, opacity, callback) 
将配合对象为speed速度调整倒透明度opacity,然后实施函数callback。Opacity为结尾显示的透明度(0-1).

<img src=”1.jpg”/><br>
<a href=”#” onClick=’$(“img “).fadeTo(“slow”,0.55,function(){ alert(“Animation Done.”); })’> jQuery </a>

世家可看一下谈得来省效果,如果不用jQuery,编写原始javascript脚论可能过多代码!

slideDown(speeds) 
将配合对象的莫大由0以靠定速率平滑的变迁到正规!

<img src=”1.jpg” style=”display:none”/>
<a href=”#” onClick=’$(“img “).slideDown(“slow”)’>jQuery</a>

slideDown(speeds,callback) 
将配合对象的万丈由0变化及正规!变化了后实行函数callback

slideUp(“slow”)  slideUp(speed,
callback) 匹配对象的惊人由正常变化到0

slideToggle(“slow”)
如果配合对象的万丈正常则逐步变化到0,若为0,则日渐变及健康
 

 ****:事件处理
 hover(Function, Function)    当鼠标move
over时触发第一独function,当鼠标move out时点第二个function

样式:<style>.red{color:#FF0000}</style>
Html代码: <div id=”a”>sdf</div>
jQuery代码及职能

$(function(){
  $(“#a”).hover(function(){$(this).addClass(“red”);},
                            function(){ $(this).removeClass(“red”); 
                          });
})

末了效果是当鼠标移到id为a的重合及时图层增加一个red样式,离开层时换有red样式

toggle(Function, Function)   
当匹配元素第一潮被点击时接触第一个函数,当第二不良为点击时点第二只函数

样式:<style>.red{color:#FF0000}</style>
Html代码: <div id=”a”>sdf</div>
jQuery代码及功效

$(function(){
  $(“#a”). toggle (function(){$(this).addClass(“red”);},
                              function(){ $(this).removeClass(“red”); 
                            });
})

最后效果是当鼠标点击id为a的重合及时常图层增加一个red样式,离开层时易有red样式

bind(type, fn)  
用户用一个风波和点事件的法绑定到相当对象及。
trigger(type)  
用户触发type形式之轩然大波。$(“p”).trigger(“click”)
还有:unbind()   unbind(type)   
unbind(type, fn)

Dynamic event(Function)    绑定和注销绑定提供函数的直方式
例:

$(“#a”).bind(“click”,function() { 
                                       $(this).addClass(“red”);
})

也可如此勾画:

$(“#a”).click(function() { 
                        $(this).addClass(“red”);
});

末尾效果是当鼠标点击id为a的层及时常图层增加一个red样式,

jQuery提供的函数
用于browers事件
error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)
用于form事件
change(fn)    select(fn)    submit(fn)

用于keyboard事件
keydown(fn)    keypress(fn)    keyup(fn)
用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)

用于UI事件
blur(fn)    focus(fn)

上述事件的恢弘再扩展为5类
举例,click(fn) 扩展 click()  unclick()  oneclick(fn)  unclick(fn)
click(fn):增加一个点击时点某函数的风波
click():可以当其余事件备受履行匹配对象的click事件。
unclick ():不履行匹配对象的click事件。
oneclick(fn):只多可以实施同一软的click事件。
unclick (fn):增加一个点击时未接触某函数的事件。
地方列举的用于browers、form、keyboard、mouse、UI的轩然大波都可随上述措施扩展。

                                       **七:Ajax支持


 通用方: $.ajax(prop)   
通过一个ajax请求,回去远程数据,prop是一个hash表,它好传递的key/value有以下几栽**。
         (String)type:数据传递方式(get或post)。
         ((String)url:数据请求页面的url
         ((String)data:传递数据的参数字符串,只抱post方式
         ((String)dataType:期待数据返回的数量格式(例如 “xml”, “html”,
“script”,或 “json”)
         ((Boolean)ifModified:
当最后一糟糕呼吁的照应发生转变是才成返回,默认值是false
         ((Number)timeout:设置时间推迟请求的工夫。可以参见$.ajaxTimeout
         ((Boolean)global:是否为眼前求触发ajax全局事件,默认为true
         ((Function)error:当求失败时接触的函数。
         ((Function)success:当求成功时触发函数
         ((Function)complete:当求完成后启程函数
jQuery代码及说明

$.ajax({url: “ajax.htm”,
          success:function(msg){ 
                         $(div”#a”).html(msg);
                } 
    });

以ajax.htm返回的内容作为id为a的div内容

$.ajax({ url: “ajax.aspx”,
              type:”get”,           
             dataType:”html”,
             data: “name=John&location=Boston”,
             success:function(msg){ 
                                 $(“#a”).html(msg);
                              } 
         });

因此get方式于ajax.aspx页面传参数,并以赶回内容因为id为a的目标。

$.ajaxTimeout(time)
安装请求了时
   $.ajaxTimeout( 5000 )

其余简化方式:

$.get(url, params, callback) 
用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选取

$.get( “ajax.htm” , function(data){ $(“#a”).html(data)  })

$.get(   “ajax.asp”, 
            { name: “young”, age: “25” },
            function(data){ alert(“Data Loaded: ” + data); }
        ) 

$.getIfModified(url, params,
callback) 
用get方式为远程页面传递参数,从最后一糟呼吁后如数量来变化才作出响应,执行函数callback
$.getJSON(url, params, callback) 
用get方式于远程json对象传递参数,请求完成后处理函数callback。
$.getScript(url, callback) 
用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
$.post(url, params, callback) 
用post方式向远程页面传递参数,请求完成后处理函数callback
load(url, params, callback) 
载入一个远程文件并载入页面DOM中,并实行函数callback

$(“#a”).load(“ajax.htm”, function() { alert(“load is done”); } );

仰望一笑
徐羽
向ajax.htm页面发出请求,将返回结果装入id为a的情节被,然后又实施函数callback。
**loadIfModified(url, params,
callback) 
用get方式为远程页面传递参数,从最后一蹩脚呼吁后要数额来变化才作出响应,将回到结果载入页面DOM中,并尽函数callback
ajaxStart(callback)
当ajax请求发生错误是不时实施函数callback
ajaxComplete(callback) 
当ajax请求完成时实施函数callback
ajaxError(callback) 
当ajax请求发生错误时实施函数callback
ajaxStop(callback) 
当ajax请求停止时实行函数callback
ajaxSuccess(callback) 
当ajax请求成功时实行函数callback

   
                                       八:jQuery插件
**
    
随着jQuery的大规模运用,已经面世了汪洋jQuery插件,如thickbox,iFX,jQuery-googleMap等,简单的援这些来源文件就足以便宜之应用这些插件。这里自己大概的介绍一些网址供大家参考,这些网站头提供了大气之demo,并且用及其简单,及时E文不好,也会快控制!
    http://jquery.com/plugins    
官方推荐
    http://interface.eyecon.ro/demos   
效果超级棒,使用更简明,一定生您嗜的!
    http://www.dyve.net/jquery/
    http://bassistance.de/jquery-plugins

  
还起另外众多插件,大家可以google以下,如果大家发现好之了,可以留言共享以下!
   

    ——————————————————————————————————————————————

    至此jQuery已经介绍了,并统一整理提供于大家 下载
,更多详细的动要大家参考官方网站,下面我再也引进一些jQuery的就学网站方便大家再次好的左右这项工具!
    http://keel.sike.googlepages.com/jQuery\_getting\_started.html    
国语入门介绍,Keel翻译
    http://jquery.com/api     
jquery提供合为主方法的介绍和demo,方便大家查询!

 

 

 

相关文章