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

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

 

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

   
jQuery是一款同prototype一样优质js开发库类,尤其是对css和X帕特h的支撑,使大家写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采取器,$自身代表3个jQuery类,全体$()是结构1个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功效于1个特定的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) 表明:复制2个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)重临匹配成分中的某1个因素
参数: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
>的目的,全部一共有一个,从上面的函数运营结果能够见见$(“p”).add(“span”)是三个目的的集合,分别是[<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>
]
相似3个文档还有<body>和<html>,依次类推下去。

ancestors (expr)  在ancestors()的基本功上之取符合表明式的对象
如上各例子讲var f改为var f= $(“u”).ancestors(“div”),则只回去1个对象:
[
<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”)再次来到2个对象[<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必须回到3个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) 
五个参数都以数组,排出第3个数组中与第1个相同的,再将七个数组合并

$(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的层上时图层增添3个red样式,离开层时移出red样式

bind(type, fn)  
用户将3个风浪和接触事件的点子绑定到至极对象上。
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的层上时图层扩展2个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):扩充3个点击时不接触某函数的风浪。
地点列举的用于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,方便大家查询!

 

 

 

相关文章