威尼斯人线上娱乐

【威尼斯人线上娱乐】翻译整理的jQuery使用查询手册,jQuery使用全称

23 9月 , 2019  

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

对css和XPath的援助,使大家写js变得尤为有益于!若是你不是个js高手又想写出优秀的js效果,jQuery能够帮您完成指标!
    下载地址:

方网站: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是一款同prototype同样美妙js开拓库类,特别是对css和XPath的协理,使大家写js变得愈加有益!假如你不是个js高手又想写出优良的js效果,jQuery能够帮您达到规定的标准指标!
   下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)      
                jQuery Downloads (http://jquery.com/src/)

   下载完毕后先加载到文书档案中,然后大家来看个简易的例子!

自己将从以下多少个内容来说课jQuery的应用:
1:大旨部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序

   下载达成后先加载到文档中,然后我们来看个大致的例证!

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

一:主旨部分
$(expr)
证实:该函数能够通过css采取器,Xpath或html代码来协作指标成分,全数的jQuery操作都是此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:

<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全体下载达成时实施函数。
    
在进展上边内容前边笔者还要证Bellamy些$(“p”)和$(“#p”)的分别,$(“p”)表示取全数p标签(<p></p>)的因素,$(“#p”)表示取id为”p”(<span 
id=”p”></span>)的元素.

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

     上面包车型的士效果是点击文书档案中全数a标签时将弹出对话框,$(“a”)
是贰个jQuery选取器,$本身代表三个jQuery类,全数$()是结构三个jQuery对象,click()是那些目标的措施,同理$(document)也是多少个jQuery对象,ready(fn)是$(document)的艺术,表示当document全体下载完结时进行函数。
    
在开展下边内容前边笔者还要说Bellamy些$(“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:插件程序

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>”

本身将从以下多少个内容来说学jQuery的行使:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序

                                             一:大旨部分
$(expr) 证实:该函数能够经过css选用器,Xpath或html代码来协作指标成分,全部的jQuery操作皆以此为基础
参数:expr:字符串,二个查询表明式或一段html字符串
例子:
未执行jQuery前:

$(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的要素时,背景象造成青绿

                                             一:宗旨部分
$(expr) 评释:该函数能够经过css选择器,Xpath或html代码来合营目的成分,全体的jQuery操作都是此为基础
参数:expr:字符串,一个询问表明式或一段html字符串
例子:
未执行jQuery前:

威尼斯人线上娱乐 1<p>one</p>
威尼斯人线上娱乐 2<div>
威尼斯人线上娱乐 3     
<p>two</p>
威尼斯人线上娱乐 4</div>
    <p>three</p> 
    <a href=”#” id=”test” onClick=”jq()” >jQuery</a>

$(elems)
表明:限制jQuery效用于一组特定的DOM成分
参数: elem:一组经过jQuery对象压缩的DOM成分
例子:
未执行jQuery前:
<form id=”form1″>
       <input type=”text” name=”textfield”>
       <input type=”submit” name=”Submit” value=”提交”>
</form>
<a href=”#” id=”test” onClick=”jq()”>jQuery</a>
jQuery代码及作用:
function jq(){
    $(form1.elements ).hide();
}
运作:当点击id为test的因素时,掩盖form1表单中的全体因素。

威尼斯人线上娱乐 5<p>one</p>
威尼斯人线上娱乐 6<div>
威尼斯人线上娱乐 7      <p>two</p>
威尼斯人线上娱乐 8</div>
    <p>three</p> 
    <a href=”#” id=”test” onClick=”jq()” >jQuery</a>

jQuery代码及效果与利益:

$(fn)
评释:$(document).ready()的贰个笔记情势,当文书档案全部载入时进行函数。能够有多少个$(fn)当文书档案载入时,同一时候进行全数函数!
参数:fn (Function):当文书档案载入时举办的函数!
例子:
$( function(){
     $(document.body).background(“black”);
})
运维:当文书档案载入时背景形成天蓝,也正是onLoad。

jQuery代码及成效:

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

$(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成分的内容。

function jq(){  
    alert($(“div > 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。

运营:当点击id为test的成分时,弹出对话框文字为two,即div标签下p成分的内容

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

eq(pos)
证明:裁减匹配成对象到三个单独得dom成分
参数:pos (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”).eq(1).html())
}
运维:当点击id为test的要素时,alert对话框突显:So is
this,即第1个<p>标签的内容

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

运维:当点击id为test的要素时,向body中增多“<div><p>Hello</p></div>”

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

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

$(elem)
表明:限制jQuery功能于三个一定的dom成分,那些函数也承受xml文书档案和windows对象
参数: elem:通过jQuery对象压缩的DOM成分
例子:
未执行jQuery前:

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

$(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>

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);
}

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

jQuery代码及成效:

二:DOM操作

jQuery代码及意义:

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

属性:
咱俩以<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)

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

运作:当点击id为test的因素时,弹出对话框文字为two,即div标签下p成分的剧情

操作after(html)   在相配成分后插入一段html

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

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

<a href=”#” id=”test” onClick=”jq()”>jQuery</a>
jQuery代码及效果与利益:
function jq(){  
        $(“#test”).after(“<b>Hello</b>”);  
}
施行后一定于: <a href=”#” id=”test”
onClick=”jq()”>jQuery</a><b>Hello</b>

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

运维:当点击id为test的要素时,背景观产生玉绿

after(elem)   after(elems)  
将钦定对象elem或对象组elems插入到在相称成分后
<p id=”test”>after</p><a href=”#”
onClick=”jq()”>jQuery</a>
jQuery代码及职能
function jq(){  
      $(“a”).after($(“#test”));  
}
推行后约等于 <a href=”#” onClick=”jq()”>jQuery</a><p
id=”test”>after</p>

运作:当点击id为test的因素时,背景观产生橄榄棕

$(elems) 评释:限制jQuery功能于一组特定的DOM成分
参数: elem:一组通过jQuery对象压缩的DOM成分
例子:
未执行jQuery前:

append(html)在相配成分内部,且最终插入钦点html

$(elems) 表明:限制jQuery效能于一组特定的DOM元素
参数: elem:一组经过jQuery对象压缩的DOM成分
例子:
未执行jQuery前:

威尼斯人线上娱乐 9<form id=”form1″>
威尼斯人线上娱乐 10     
<input type=”text” name=”textfield”>
威尼斯人线上娱乐 11     
<input type=”submit” name=”Submit” value=”提交”>
威尼斯人线上娱乐 12</form>
威尼斯人线上娱乐 13<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

<a href=”#” id=”test” onClick=”jq()”>jQuery</a>
jQuery代码及职能:
function jq(){
      $(“#test”).append(“<b>Hello</b>”);  
}
举办后相当于 <a href=”#”
onClick=”jq()”>jQuery<b>Hello</b></a>
同理还或者有append(elem)   append(elems) before(html) before(elem)
before(elems)请试行参照append和after的方来测量试验、掌握!

威尼斯人线上娱乐 14<form id=”form1″>
威尼斯人线上娱乐 15      <input type=”text” name=”textfield”>
威尼斯人线上娱乐 16      <input type=”submit” name=”Submit” value=”提交”>
威尼斯人线上娱乐 17</form>
威尼斯人线上娱乐 18<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及功用:

appendTo(expr)  
与append(elem)相反
<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>

jQuery代码及职能:

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

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>

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

运行:当点击id为test的要素时,掩盖form1表单中的全部因素。

empty()
删除匹配对象的全部子节点
<div id=”test”>
   <span>span</span>
   <p>after</p>
</div>
<a href=”#” onClick=”jq()”>jQuery</a>
jQuery代码及职能:
function jq(){  
     $(“#test”).empty();  
}
实践后一定于 <div id=”test”></div><a href=”#”
onClick=”jq()”>jQuery</a>

运维:当点击id为test的要素时,隐蔽form1表单中的全数因素。

$(fn) 表明:$(document).ready()的三个笔记情势,当文书档案整体载入时推行函数。能够有多少个$(fn)当文书档案载入时,相同的时间推行全部函数!
参数:fn (Function):当文书档案载入时进行的函数!
例子:

insertAfter(expr)   
insertBefore(expr)
     
根据合法的演说和自身的多少个简易测量检验insertAfter(expr)也就是before(elem),insertBefore(expr)也便是after
(elem)

$(fn) 申明:$(document).ready()的一个笔记方式,当文档全体载入时实施函数。能够有多少个$(fn)当文书档案载入时,同不常候进行全数函数!
参数:fn (Function):当文书档案载入时实行的函数!
例子:

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

prepend (html)   prepend (elem)  
prepend (elems)    在相配成分的当中且开端出插入
透过上边例子区分append(elem)   appendTo(expr)   prepend (elem)
<p id=”a”>p</p>
<div>div</div>
执行$(“#a”).append($(“div”)) 后相当于
<p id=”a”>
   P
   <div>div</div>
</p>
执行$(“#a”).appendTo($(“div”)) 后 相当于
<div>
    div
    <p id=”a”>p</p>
</div>
执行$(“#a”).prepend ($(“div”)) 后 相当于
<p id=”a”>
    <div>div</div>
    P
</p>

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

运维:当文档载入时背景产生碳黑,相当于onLoad。

remove()   删除配成对象
注意区分empty(),empty()移出配成对象的子节点,remove(),移出匹配成对象

运作:当文书档案载入时背景产生浅绿灰,也便是onLoad。

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

wrap(htm) 将配成对象包蕴在提交的html代码内
<p>Test Paragraph.</p> <a href=”#”
onClick=”jq()”>jQuery</a>
jQuery代码及效果与利益:
function jq(){  
       $(“p”).wrap(“<div class=’wrap’></div>”);
}
奉行后一定于 <div class=’wrap’><p>Test
Paragraph.</p></div>

$(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>

wrap(elem)
将配成对象满含在付给的对象内
<p>Test Paragraph.</p><div id=”content”></div>
<a href=”#” onClick=”jq()”>jQuery</a>
jQuery代码及功能:
function jq(){  
       $(“p”).wrap( document.getElementById(‘content’) );
}
执行后也就是 <div id=”content”><p>Test
Paragraph.</p></div>

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

jQuery代码及效果:

遍历、组合
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>]。

jQuery代码及作用:

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

add(el)  
在合营对象的功底上在增大内定的dom成分。
         $(“p”).add(document.getElementById(“a”));

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

运作:当点击id为test的因素时,弹出对话框文字为two,即div标签下p成分的剧情。

add(els)  
在卓越对象的基本功上在增大钦命的一组对象,els是三个数组。
<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是一个数组,这里的[ ]不可能漏掉。

运营:当点击id为test的要素时,弹出对话框文字为two,即div标签下p成分的开始和结果。

each(fn) 证实:将函数作用于具备相配的靶子上
参数:fn (Function): 须要推行的函数
例子:
未执行jQuery前:

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>,依次类推下去。

each(fn) 证实:将函数成效于全部相配的靶子上
参数:fn (Function): 须要推行的函数
例子:
未执行jQuery前:

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

ancestors (expr)  
在ancestors()的底子上之取符合表达式的靶子
如上各例子讲var f改为var f= $(“u”).ancestors(“div”),则只回去多少个目的:
[
<p>one</p><span><u>two</u></span>  
]

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

jQuery代码及成效:

children()  
重返配对象的子接点
<p>one</p>
<div id=”ch”>   
      <span>two</span>
</div>
jQuery代码及意义:
function jq(){
     alert($(“#【威尼斯人线上娱乐】翻译整理的jQuery使用查询手册,jQuery使用全称。ch”).children().html());
}
$(“#ch”).children()获得目的[ <span>two</span>
].所以.html()的结果是”two”

jQuery代码及效果与利益:

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

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> ]

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

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

parent ()   parent
(expr)取配成对象父节点的。参照children扶助精通

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

eq(pos) 证实:减弱匹配成对象到贰个单独得dom成分
参数:pos (Number): 期望限制的目录,从0 开始
例子:
未执行jQuery前:

contains(str)  
再次来到匹配成对象中隐含字符串str的对象
<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> ]

eq(pos) 证实:降低配成对象到多少个独门得dom成分
参数:pos (Number): 期望限制的目录,从0 开端
例子:
未执行jQuery前:

威尼斯人线上娱乐 19<p>This is just a test.</p>
威尼斯人线上娱乐 20<p>So is this</p>
威尼斯人线上娱乐 21<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

end()
结束操作,再次来到到相配成分清单上操作前的状态.

威尼斯人线上娱乐 22<p>This is just a test.</p>
威尼斯人线上娱乐 23<p>So is this</p>
威尼斯人线上娱乐 24<a href=”#” id=”test” onClick=”jq()”>jQuery</a>

jQuery代码及效能:

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的指标。

jQuery代码及效益:

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

[color=LimeGreen]find(expr)  
在同盟的对象中持续找出符合表达式的指标[/color]
<p>Hello</p><p id=”a”>Hello Again</p><p
class=”selected”>And Again</p>
jQuery代码及效果:
function jq(){
     alert($(“p”).find(“#a”).html())
}
在$(“p”)对象中搜索id为a的对象。

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

运作:当点击id为test的因素时,alert对话框展现:So
is this,即第三个<p>标签的从头到尾的经过

is(expr)  
推断指标是还是不是相符表达式,再次来到boolen值
<p>Hello</p><p id=”a”>Hello Again</p><p
class=”selected”>And Again</p>
jQuery代码及效用:
function jq(){
     alert($(“#a”).is(“p”));
}
在$(“#a “)是不是切合jquery表明式。
大家能够用$(“#a”).is(“div”);   (“#a”).is(“#a”)多来测量检验一下

运作:当点击id为test的因素时,alert对话框展现:So
is this,即第贰个<p>标签的情节

get()
get(num)
证实:获取相称成分,get(num)重返相称成分中的某一个成分
参数:get (Number): 期望限制的目录,从0 初步
例子:
未执行jQuery前:

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> ]三个目的

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>

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

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

jQuery代码及意义:

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> ]

jQuery代码及职能:

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

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> ]

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前:

其他
addClass(class)   
为协作对象增添贰个class样式
removeClass (class)   
将率先个门户大致对象的某部class样式移出

运维:当点击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>

attr (name)   
获取第二个卓相对象的质量
<img src=”test.jpg”/><a href=”#”
onclick=”js()”>jQuery</a>
jQuery代码及效能:
function js(){
      alert($(“img”).attr(“src”));
}
返回test.jpg

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

jQuery代码及意义:

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”/>

jQuery代码及效果:

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

attr (key,value)   
为第三个门道格外对象的安装属性,key为属性名,value为属性值
<img/><a href=”#” onclick=”js()”>jQuery</a>
jQuery代码及职能
function js(){
      $(“img”).attr(“src”,”test.jpg”);
}
运作结果一定于<img src=”test.jpg”/>

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

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

removeAttr (name)   
将率先个极度对象的某部属性移出
<img alt=”test”/><a href=”#”
onclick=”js()”>jQuery</a>
jQuery代码及意义:
function js(){
      $(“img”). removeAttr(“alt”);
}
运行结果一定于<img />

运营:当点击id为test的要素时,四遍弹出alert对话框分别展现0,1

size()  
Length
证实:当前协作对象的多寡,两者对等
例子:
未执行jQuery前:

toggleClass (class)   
将方今目的增多二个体裁,不是如今指标则移出此体制,重临的是拍卖后的指标
<p>Hello</p><p class=”selected”>Hello
Again</p><a href=”#” onclick=”js()”>jQuery</a>

size()  
Length
证实:当前十一分对象的数量,两个对等
例子:
未执行jQuery前:

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

$(“p”)的结果是回来对象 [<p>Hello</p>,<p
class=”selected”>Hello Again</p> ]
$(“p”).toggleClass(“selected”)的结果是实重返对象 [ <p
class=”selected”>Hello</p>, <p>Hello Again</p> ]
三:CSS操作

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

jQuery代码及功能:

       古板javascript对css的操作卓殊繁琐,譬喻<div id=”a”
style=”background:blue”>css</div>取它的background语法是
document.getElementById(“a”).style.background,而jQuery对css更有利的操作,$(“#a”).background(),$(“#a”).background(“red”)
$(“#a”)得到jQuery对象[ <div id=”a” … /div> ]
$(“#a”).background()将收取该对象的background样式。
$(“#a”).background(“red”)将该对象的background样式设为red

jQuery代码及效果:

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

jQuery提供了以下措施,来操作css
background ()    background (val)     
color()     color(val)      css(name)     css(prop)    
css(key, value)       float()    float(val)    height()    height(val)  
width()   width(val)  
left()    left(val)        overflow()    overflow(val)    position()   
position(val)   top()    top(val)

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

运转:当点击id为test的要素时,弹出alert对话框展现2,表示找到四个门户大概对象 
**

这里须求批注一下css(name)   css(prop)   css(key,
value),其余的看名字都领会怎么着意义了!
<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

运作:当点击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前

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,

                                                   二: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>

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

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

jQuery代码及效果与利益:

四:JavaScript处理

jQuery代码及成效:

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

$.browser()  
决断浏览器类型,重回boolen值
$(function(){
     if($.browser.msie) {
         alert(“那是二个IE浏览器”);}
     else if($.browser.opera) {
         alert(“那是二个opera浏览器”);}
})
当页面载入式剖断浏览器类型,可推断的品种有msie、mozilla、opera、safari

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**

$.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

运转:先弹出对话框展现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>

  • “, Value: ” + this );   
    { name: “约翰”, lang: “JS”
    }为八个hash对象,依次将hash中每组对象传入到函数中

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

jQuery代码及职能:

$.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 ); });
})

jQuery代码及职能:

function jq(){  
       $(“#test”).after(“<b>Hello</b>”);  
}

$.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]

function jq(){  
       $(“#test”).after(“<b>Hello</b>”);  
}

推行后相当于:

$.merge(first, second)
四个参数都是数组,排出第2个数组中与第贰个一样的,再将四个数组合併
$(function(){
         var arr = $.merge( [0,1,2], [2,3,4] )
         $.each(arr,   function(i){ alert(i); });
})
能够见见arr的结果为[0,1,2,3,4]

施行后一定于:

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

$.trim(str) 移出字符串两端的空格
$.trim(”    hello, how are you?    “)的结果是”hello, how are you?”

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

after(elem)  after(elems) 
将点名对象elem或对象组elems插入到在相称成分后

五:动态效果

after(elem)  after(elems) 
将钦定对象elem或对象组elems插入到在相称成分后

威尼斯人线上娱乐 25<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

       
在将这一部分在此以前大家先看个例子,相信做网页的心上人都遭受n级菜单的景色,但点击某菜单开关时,假若它的子菜单是显示的,则掩盖子菜单,假如子菜单遮蔽,则显示出来,守旧的javascript做法是先用getElementById抽出子菜单所在容器的id,在认清该容器的style.display是不是等于none,假如等于则设为block,假若不对等那设为none,假设在将作用设置复杂一点,当点击开关时,不是意料之外掩饰和呈现子菜单,而是高度平滑的变迁,那时就要通过set提姆eout来设置子菜单的height了,再复杂一点发光度也平滑的消解和显现,那时显现下来要求编制非常多代码,假如js基础倒霉的情人可能不得不从外人写好的代码拿过来修改了!jQuery完成地点效果只必要1句话就行,$(“#a”).toggle(“slow”),,学完jQuery后还需求抄袭修改外人的代码吗?上边大家挨个介绍jQuery用于效果管理的措施。

威尼斯人线上娱乐 26<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及功用

hide() 遮蔽匹配对象
<p id=”a”>Hello Again</p><a href=”#” onClick=’
(“#a”).hide()’>jQuery</a>
当点击连接时,id为a的对象的display变为none。

jQuery代码及作用

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

show() 展现配成对象

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

实行后一定于

hide(speed)
以一定的进程遮掩匹配成对象,其尺寸(长宽)和光滑度都渐渐调换到0,speed有3级(“slow”,
“normal”,   “fast”),也足以是自定义的速度。

施行后一定于

威尼斯人线上娱乐 27<a href=”#” onClick=”jq()”>jQuery</a><p id=”test”>after</p>

show(speed)  
以自然的速度展现配成对象,其大小(长度宽度)和光滑度都由0慢慢调换到正规

威尼斯人线上娱乐 28<a href=”#” onClick=”jq()”>jQuery</a><p id=”test”>after</p>

append(html)在相配元素内部,且最后插入钦点html

hide(speed, callback)   show(speed,
callback) 当显示和隐蔽变化截至后实施函数callback

append(html)在相称元素内部,且最终插入钦赐html

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

toggle()     toggle(speed)
借使当前极其对象遮蔽,则突显他们,借使当前是显得的,就遮掩,toggle(speed),其大小(长度宽度)和折射率都接着逐渐变化。
<img src=”1.jpg” style=”width:150px”/>
<a href=”#” onClick=’$(“img”).toggle(“slow”)’>jQuery</a>

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

jQuery代码及意义:

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>

jQuery代码及功能:

function jq(){ 
     $(“#test”).append(“<b>Hello</b>”);  
}

fadeIn(speed, callback)   fadeOut(speed,
callback)   
callback为函数,先经过调解发光度来显示或潜伏匹配成对象,当调解结束后试行callback函数
<img src=”1.jpg”/>
<a href=”#” onClick=’$(“img “).fadeIn(“slow”,function(){
alert(“Animation Done.”); })’> jQuery </a>
点击连接后得以见见图片逐步呈现,展现完全后弹出对话框

function jq(){ 
     $(“#test”).append(“<b>Hello</b>”);  
}

实行后一定于

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脚本可能过多代码!

实施后一定于

<a href=”#” onClick=”jq()”>jQuery<b>Hello</b></a>

slideDown(speeds)  
将非常对象的惊人由0以钦点速率平滑的变化到日常!
<img src=”1.jpg” style=”display:none”/>
<a href=”#” onClick=’$(“img
“).slideDown(“slow”)’>jQuery</a>

<a href=”#” onClick=”jq()”>jQuery<b>Hello</b></a>

同理还应该有append(elem)  append(elems) before(html) before(elem)
before(elems)请实行参照append和after的方来测验、领悟!

slideDown(speeds,callback)
将匹配成对象的高度由0变化到健康!变化甘休后施行函数callback

同理还也许有append(elem)  append(elems) before(html) before(elem)
before(elems)请实施参照append和after的方来测量检验、驾驭!

appendTo(expr)  与append(elem)相反

slideUp(“slow”)   slideUp(speed, callback)
配成对象的万丈由正规变化到0

appendTo(expr)  与append(elem)相反

威尼斯人线上娱乐 29<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

slideToggle(“slow”)
借使配成对象的莫斯中国科学技术大学学正常则日渐调换到0,若为0,则日益成形到正规

威尼斯人线上娱乐 30<p id=”test”>after</p><a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及成效

jQuery代码及职能

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

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

实践后也正是

实践后相当于

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

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

clone() 复制叁个jQuery对象

clone() 复制三个jQuery对象

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

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

jQuery代码及成效:

jQuery代码及效果与利益:

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

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

复制$(“#test”)然后插入到<a>后,试行后也正是

复制$(“#test”)然后插入到<a>后,试行后也就是

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

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

empty() 删除匹配对象的全部子节点

empty() 删除配对象的全数子节点

威尼斯人线上娱乐 31<div id=”test”>
威尼斯人线上娱乐 32  <span>span</span>
威尼斯人线上娱乐 33  <p>after</p>
威尼斯人线上娱乐 34</div>
威尼斯人线上娱乐 35<a href=”#” onClick=”jq()”>jQuery</a>

威尼斯人线上娱乐 36<div id=”test”>
威尼斯人线上娱乐 37  <span>span</span>
威尼斯人线上娱乐 38  <p>after</p>
威尼斯人线上娱乐 39</div>
威尼斯人线上娱乐 40<a href=”#” onClick=”jq()”>jQuery</a>

jQuery代码及效能:

jQuery代码及意义:

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

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

执行后一定于

施行后一定于

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

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

insertAfter(expr)  
insertBefore(expr)
    
遵照合法的演讲和自个儿的多少个简易测验insertAfter(expr)相当于before(elem),insertBefore(expr)约等于after
(elem)

insertAfter(expr)  
insertBefore(expr)
    
遵照官方的演说和笔者的多少个轻易测量检验insertAfter(expr)相当于before(elem),insertBefore(expr)也正是after
(elem)

prepend (html)  prepend (elem)  prepend
(elems)   在相称成分的中间且最早出插入
通过上边例子区分append(elem)  appendTo(expr)  prepend (elem)

prepend (html)  prepend (elem) 
prepend (elems)   在相配成分的个中且伊始出插入
由此上边例子区分append(elem)  appendTo(expr)  prepend (elem)

<p id=”a”>p</p>
<div>div</div>

<p id=”a”>p</p>
<div>div</div>

执行$(“#a”).append($(“div”))
后一定于

执行$(“#a”).append($(“div”))
后一定于

<p id=”a”>

<p id=”a”>
  P
  <div>div</div>
</p>

  <div>div</div>
</p>

执行$(“#a”).appendTo($(“div”)) 
相当于

执行$(“#a”).appendTo($(“div”)) 
相当于

<div>
   div
   <p id=”a”>p</p>
</div>

<div>
   div
   <p id=”a”>p</p>
</div>

执行$(“#a”).prepend
($(“div”))
 后 相当于

执行$(“#a”).prepend
($(“div”))
 后 相当于

<p id=”a”>
   <div>div</div>
   P
</p>

<p id=”a”>
   <div>div</div>

remove()  删除配成对象
注意区分empty(),empty()移出配对象的子节点,remove(),移出匹配成对象

</p>

wrap(htm) 将配合对象包罗在提交的html代码内

remove()  删除配对象
注意区分empty(),empty()移出配对象的子节点,remove(),移出匹配成对象

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

wrap(htm) 将分外对象包括在付出的html代码内

jQuery代码及成效:

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

function jq(){  
      $(“p”).wrap(“<div class=’wrap’></div>”); 
}

jQuery代码及效果与利益:

实施后也正是

function jq(){  
      $(“p”).wrap(“<div class=’wrap’></div>”); 
}

<div class=’wrap’><p>Test Paragraph.</p></div>

实践后也便是

wrap(elem)
将同盟对象包括在交付的指标内

<div class=’wrap’><p>Test Paragraph.</p></div>

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

wrap(elem)
将协作对象蕴含在提交的靶子内

jQuery代码及功能:

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

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

jQuery代码及功效:

推行后一定于

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

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

试行后一定于

遍历、组合
**
add(expr) 
在原对象的底蕴上在叠合符合内定表明式的jquery对象**

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

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

遍历、组合
**
add(expr) 
在原对象的功底上在增大符合钦命表达式的jquery对象**

jQuery代码及职能:

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

function jq(){
     var f=$(“p”).add(“span”);    
     for(var i=0;i < $(f).size();i++){
威尼斯人线上娱乐 ,     alert($(f).eq(i).html());}
}

jQuery代码及效果:

推行$(“p”)获得相称<p>的对象,有五个,add(“span”)是在(“p”)的功底上助长相配<span
>的指标,全数一共有3个,从地点的函数运维结果能够见见$(“p”).add(“span”)是3个目的的聚众,分别是[<p>Hello</p>],[<p><span>Hello
Again</span></p>],[<span>Hello
Again</span>]。

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

add(el)  在拾贰分对象的底子上在增大钦命的dom成分。
        $(“p”).add(document.getElementById(“a”));

推行$(“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(els) 
在合作对象的基础上在叠加钦赐的一组对象,els是叁个数组。

add(el)  在同盟对象的底子上在附加钦点的dom成分。
        $(“p”).add(document.getElementById(“a”));

威尼斯人线上娱乐 41<p>Hello</p><p><span>Hello Again</span></p>

add(els) 
在合作对象的根基上在叠合钦定的一组对象,els是四个数组。

jQuery代码及职能:

威尼斯人线上娱乐 42<p>Hello</p><p><span>Hello Again</span></p>

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());}
}

jQuery代码及效果:

注意els是三个数组,这里的[ ]不能漏掉。

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());}
}

ancestors () 
一依次以特别结点的父节点的剧情为对象,根节点除却(有一点不佳明白,看看下边例子就清楚了)

注意els是一个数组,这里的[ ]不可能漏掉。

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

ancestors () 
一依次以同盟结点的父节点的故事情节为指标,根节点除此而外(有一些倒霉领悟,看看上边例子就领会了)

jQuery代码及作用:

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

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

jQuery代码及功效:

先是个对象是以<u>的父节点的剧情为指标,[ <u>two</u>
]
先是个指标是以<u>的父节点的父节点(div)的内容为目的,[<p>one</p><span><u>two</u></span>
]
诚如一个文书档案还应该有<body>和<html>,依次类推下去。

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

ancestors (expr)  在ancestors()的基本功上之取符合表明式的靶子
如上各例子讲var f改为var f= $(“u”).ancestors(“div”),则只回去二个指标:
[
<p>one</p><span><u>two</u></span> 
]

首先个对象是以<u>的父节点的剧情为指标,[ <u>two</u>
]
先是个对象是以<u>的父节点的父节点(div)的原委为目的,[<p>one</p><span><u>two</u></span>
]
相似一个文书档案还应该有<body>和<html>,依次类推下去。

children()  再次回到配成对象的子介点

ancestors (expr)  在ancestors()的基础上之取符合表明式的对象
如上各例子讲var f改为var f= $(“u”).ancestors(“div”),则只回去叁个对象:
[
<p>one</p><span><u>two</u></span> 
]

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

children()  重临匹配成对象的子介点

jQuery代码及功效:

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

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

jQuery代码及意义:

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

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

children(expr)  重回配对象的子介点中符合表明式的节点

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

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

children(expr)  再次来到配对象的子介点中符合表明式的节点

jQuery代码及职能

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

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

jQuery代码及效果

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

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

parent ()  parent (expr)取配对象父节点的。参照children支持精晓

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

contains(str) 
再次来到匹配对象中蕴藏字符串str的对象

parent ()  parent (expr)取配对象父节点的。参照children协助通晓

威尼斯人线上娱乐 43<p>This is just a test.</p><p>So is this</p>

contains(str) 
重返匹配成对象中含有字符串str的指标

jQuery代码及效果:

威尼斯人线上娱乐 44<p>This is just a test.</p><p>So is this</p>

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

jQuery代码及效果与利益:

$(“p”)获得七个对象,而带有字符串”test”只有七个。全数$(“p”).contains(“test”)重返
[ <p>This is just a test.</p> ]

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

end()
停止操作,重回到相配成分清单上操作前的状态.

filter(expr)   filter(exprs)   过滤现实相配符合表明式的对象
exprs为数组,注意增添“[ ]”

$(“p”)得到三个目的,而富含字符串”test”独有二个。全部$(“p”).contains(“test”)重临
[ <p>This is just a test.</p> ]

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

end()
截至操作,重临到相称成分清单上操作前的状态.

filter(expr)   filter(exprs)   过滤现实相称符合表达式的指标exprs为数组,注意增加“[ ]”

jQuery代码及作用:

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

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

jQuery代码及功效:

$(“p”)获得三个对象,$(“p”).contains(“test”)只回去class为selected的靶子。

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

find(expr)  在相当的靶子中承接查找符合表达式的对象

$(“p”)获得八个对象,$(“p”).contains(“test”)只回去class为selected的靶子。

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

find(expr)  在合作的靶子中一连寻觅符合表达式的对象

Query代码及成效:

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

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

Query代码及功效:

在$(“p”)对象中搜索id为a的指标。

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

is(expr)  决断目的是不是顺应表明式,重临boolen值

在$(“p”)对象中追寻id为a的目的。

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

is(expr)  判别指标是还是不是相符表明式,再次来到boolen值

Query代码及职能:

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

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

Query代码及功能:

在$(“#a “)是不是相符jquery表达式。
世家可以用$(“#a”).is(“div”);  (“#a”).is(“#a”)多来测量检验一下

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

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

在$(“#a “)是或不是吻合jquery表明式。
世家可以用$(“#a”).is(“div”);  (“#a”).is(“#a”)多来测验一下

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

next()  next(expr)  再次来到匹配对象剩余的男人儿节点

jQuery代码及职能

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

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

jQuery代码及功能

$(“p”).next()返回 [ <p id=”a”>Hello Again</p> , <p
class=”selected”>And Again</p> ]八个指标
$(“p”).next(“.selected)只返回 [<p class=”selected”>And
Again</p> ]贰个指标

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

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

not(el)  not(expr) 
从jQuery对象中移出相称的对象,el为dom成分,expr为jQuery表明式。

$(“p”).next()返回 [ <p id=”a”>Hello Again</p> , <p
class=”selected”>And Again</p> ]多个指标
$(“p”).next(“.selected)只返回 [<p class=”selected”>And
Again</p> ]叁个目的

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

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

not(el)  not(expr) 
从jQuery对象中移出相称的靶子,el为dom成分,expr为jQuery表明式。

jQuery代码及效能:

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

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

jQuery代码及意义:

$(“p”)由多少个目标,排除后的目的为[<p>one</p> ]

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

siblings ()  siblings (expr) 
jquery配对象中其它兄弟等第的目的

$(“p”)由四个对象,排除后的靶子为[<p>one</p> ]

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

siblings ()  siblings (expr) 
jquery配成对象中任何兄弟等级的靶子

jQuery代码及效果与利益:

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

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

jQuery代码及作用:

$(“div”).siblings()的结果实重返多个目的[<p>one</p>,<a
href=”#” onclick=”js()”>jQuery</a> ]
alert($(“div”).siblings(“a”)重回二个目的[<a href=”#”
onclick=”js()”>jQuery</a> ]

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

其他
**
addClass(class)  
为合作对象加多三个class样式
removeClass (class)   将首先个十二分对象的某部class样式移出
attr (name)   获取第一个非常对象的性质**

$(“div”).siblings()的结果实重回五个指标[<p>one</p>,<a
href=”#” onclick=”js()”>jQuery</a> ]
alert($(“div”).siblings(“a”)再次来到一个目的[<a href=”#”
onclick=”js()”>jQuery</a> ]

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

其他
**
addClass(class)  
为合营对象增添三个class样式
removeClass (class)   将率先个门户差不离对象的某部class样式移出
attr (name)   获取第1个十分对象的习性**

jQuery代码及职能:

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

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

jQuery代码及效果:

返回test.jpg

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

attr (prop)  
为第贰个门道特出对象的装置属性,prop为hash对象,用于为某目的批量增多众多天性

返回test.jpg

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

attr (prop)  
为率先个门户相当对象的安装属性,prop为hash对象,用于为某指标批量加多众多品质

jQuery代码及作用:

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

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

jQuery代码及功效:

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

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

attr (key,value)  
为率先个非常对象的装置属性,key为属性名,value为属性值

运作结果也就是<img src=”test.jpg” alt=”Test Image”/>

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

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

jQuery代码及效果与利益

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

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

jQuery代码及成效

运作结果也正是<img src=”test.jpg”/>

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

removeAttr (name)   将首先个特别对象的某些属性移出

运维结果一定于<img src=”test.jpg”/>

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

removeAttr (name)   将首先个门户差不离对象的某部属性移出

jQuery代码及意义:

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

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

jQuery代码及功能:

运行结果一定于<img />

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

toggleClass (class)  
将眼下指标增加二个体裁,不是时下目的则移出此体制,重临的是管理后的指标

运转结果也正是<img />

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

toggleClass (class)  
将如今指标增加一个体制,不是如今指标则移出此体制,再次回到的是拍卖后的目的

$(“p”)的结果是回来对象 [<p>Hello</p>,<p
class=”selected”>Hello Again</p> ]
$(“p”).toggleClass(“selected”)的结果是实再次来到对象 [ <p
class=”selected”>Hello</p>, <p>Hello Again</p>

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

         三:CSS操作
     
守旧javascript对css的操作特出麻烦,比如<div id=”a”
style=”background:blue”>css</div>取它的background语法是
document.getElementById(“a”).style.background,而jQuery对css更实惠的操作,$(“#a”).background(),$(“#a”).background(“red”)
$(“#a”)得到jQuery对象[ <div id=”a” … /div> ]
$(“#a”).background()将收取该目的的background样式。
$(“#a”).background(“red”)将该对象的background样式设为redjQuery提供了以下办法,来操作css
background ()   background
(val)     color()    color(val)     css(name)    css(prop)   
css(key, value)      float()   float(val)   height()   height(val) 
width()  width(val) 
left()   left(val)       overflow()   overflow(val)   position()  
position(val)  top()   top(val)

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

此间要求解说一下css(name)  css(prop)  css(key,
value),别的的看名字都明白怎么效果了!

         三:CSS操作
     
守旧javascript对css的操作极其繁琐,举个例子<div id=”a”
style=”background:blue”>css</div>取它的background语法是
document.getElementById(“a”).style.background,而jQuery对css更方便的操作,$(“#a”).background(),$(“#a”).background(“red”)
$(“#a”)得到jQuery对象[ <div id=”a” … /div> ]
$(“#a”).background()将抽取该对象的background样式。
$(“#a”).background(“red”)将该目的的background样式设为redjQuery提供了以下措施,来操作css
background ()   background (val)    
color()    color(val)     css(name)    css(prop)   
css(key, value)      float()   float(val)   height()   height(val) 
width()  width(val) 
left()   left(val)       overflow()   overflow(val)   position()  
position(val)  top()   top(val)

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

这里要求解说一下css(name)  css(prop)  css(key,
value),别的的看名字都精晓什么效力了!

css(name) 
获取样式名字为name的体制

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

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

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(name) 
获取样式名称为name的体制

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

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

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,

                                              四:JavaScript处理

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

$.browser() 
判别浏览器类型,重临boolen值

                                              四:JavaScript处理

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

$.browser() 
推断浏览器类型,重返boolen值

当页面载入式推断浏览器类型,可看清的档案的次序有msie、mozilla、opera、safari

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

$.each(obj, fn) 
obj为目的或数组,fn为在obj上各种施行的函数,注意区分$().each()

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

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

$.each(obj, fn) 
obj为目的或数组,fn为在obj上相继推行的函数,注意区分$().each()

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

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

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

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

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

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

$.extend(obj, prop) 
用第三个目的扩充第贰个指标

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

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

$.extend(obj, prop) 
用第贰个对象扩展第三个指标

执行后settings对象为{ validate: true, limit: 5, name: “bar” }
能够用上面函数来测量检验

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

$(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 ); });
})

执行后settings对象为{ validate: true, limit: 5, name: “bar” }
能够用上面函数来测量试验

$.grep(array,fn) 
通过函数fn来过滤array,将array中的成分依次传给fn,fn必需再次回到贰个boolen,如fn再次来到true,将被过滤

$(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 ); });
})

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

$.grep(array,fn) 
通过函数fn来过滤array,将array中的成分依次传给fn,fn必需重返贰个boolen,如fn再次回到true,将被过滤

我们得以对待实践$.grep后数组[0,1,2,3,4]变成[0,1]

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

$.merge(first, second) 
三个参数都是数组,排出第一个数组中与第二个同样的,再将三个数组合併

我们得以对待推行$.grep后数组[0,1,2,3,4]变成[0,1]

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

$.merge(first, second) 
四个参数都以数组,排出第一个数组中与第贰个同样的,再将多少个数组合併

能够见到arr的结果为[0,1,2,3,4]

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

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

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

能够看到arr的结果为[0,1,2,3,4]

                                   五:动态效果
      
在将这一部分以前大家先看个例证,相信做网页的意中人都高出n级菜单的景色,但点击某菜单开关时,倘诺它的子菜单是显得的,则遮掩子菜单,要是子菜单隐敝,则体现出来,古板的javascript做法是先用getElementById收取子菜单所在容器的id,在认清该容器的style.display是还是不是等于none,假使等于则设为block,假设不等于这设为none,如若在将功效设置复杂一点,当点击按键时,不是出乎预料遮掩和展现子菜单,而是高度平滑的转移,那时将在通过setTimeout来设置子菜单的height了,再繁杂一点折射率也平滑的破灭和呈现,那时显现下来须求编制比比较多代码,如若js基础不好的相爱的人也许不得不从旁人写好的代码拿过来修改了!jQuery完成地方效果只须要1句话就行,$(“#a”).toggle(“slow”),威尼斯人线上娱乐 45,学完jQuery后还索要抄袭修改别人的代码吗?上边大家每一个介绍jQuery用于效果处理的点子。

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

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

hide()  隐敝配对象

                                   五:动态效果
      
在将那有的在此以前大家先看个例证,相信做网页的对象都赶过n级菜单的气象,但点击某菜单开关时,若是它的子菜单是突显的,则隐蔽子菜单,即使子菜单掩饰,则显得出来,守旧的javascript做法是先用getElementById收取子菜单所在容器的id,在认清该容器的style.display是不是等于none,尽管等于则设为block,如若不对等那设为none,假使在将功用设置复杂一点,当点击开关时,不是卒然遮蔽和显示子菜单,而是中度平滑的浮动,那时就要通过setTimeout来设置子菜单的height了,再繁杂一点光滑度也平滑的流失和展现,那时显现下来要求编写制定比非常多代码,假设js基础不好的恋人或许只可以从别人写好的代码拿过来修改了!jQuery达成地方效果只须求1句话就行,$(“#a”).toggle(“slow”),威尼斯人线上娱乐 46,学完jQuery后还供给抄袭修改外人的代码吗?上面大家一一介绍jQuery用于效果管理的章程。

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

hide()  隐蔽匹配成对象

当点击连接时,id为a的靶子的display变为none。

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

**show() 显示配成对象

当点击连接时,id为a的目的的display变为none。

hide(speed) 
以自然的速度掩饰配对象,其大小(长度宽度)和折射率都稳步成形到0,speed有3级(“slow”,
“normal”,  “fast”),也能够是自定义的快慢。

**show() 展现匹配成对象

show(speed) 
以自然的快慢显示配对象,其大小(长宽)和反射率都由0逐步变化到符合规律

hide(speed) 
以自然的进程掩盖配成对象,其大小(长度宽度)和光滑度都逐步变化到0,speed有3级(“slow”,
“normal”,  “fast”),也足以是自定义的进程。

hide(speed, callback)  show(speed,
callback) 当呈现和隐形变化停止后施行函数callback

show(speed) 
以自然的进程呈现匹配成对象,其尺寸(长度宽度)和反射率都由0逐步变化到健康

toggle()    toggle(speed) 倘诺当前万分对象隐蔽,则展现他们,假如当前是显得的,就暗藏,toggle(speed),其尺寸(长宽)和折射率都随着稳步变化。**

hide(speed, callback)  show(speed,
callback) 当展现和潜伏变化停止后推行函数callback

威尼斯人线上娱乐 47<img src=”1.jpg” style=”width:150px”/>
威尼斯人线上娱乐 48<a href=”#” onClick=’$(“img”).toggle(“slow”)’>jQuery</a>

toggle()    toggle(speed) 假设当前合营对象遮盖,则彰显他们,要是当前是显得的,就隐敝,toggle(speed),其尺寸(长宽)和反射率都接着稳步变化。**

fadeIn(speeds)  
fadeOut(speeds) 
依照速度调整光滑度来呈现或掩盖配成对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调节折射率,不调治大小

威尼斯人线上娱乐 49<img src=”1.jpg” style=”width:150px”/>
威尼斯人线上娱乐 50<a href=”#” onClick=’$(“img”).toggle(“slow”)’>jQuery</a>

<img src=”1.jpg” style=”display:none”/><a href=”#” onClick=’$(“img “).fadeIn(“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>

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>

fadeTo(speed, opacity, callback) 
将协作对象以speed速度调解倒发光度opacity,然后实施函数callback。Opacity为末段显示的发光度(0-1).

大家能够看一下友雅观看效果,假设不用jQuery,编写原始javascript脚本也许过多代码!

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

slideDown(speeds) 
将格外对象的可观由0以钦定速率平滑的转移到健康!

世家能够看一下和睦看看效果,假若不用jQuery,编写原始javascript脚本恐怕过多代码!

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

slideDown(speeds) 
将配成对象的高度由0以内定速率平滑的改动到健康!

slideDown(speeds,callback) 
将非凡对象的万丈由0变化到正规!变化甘休后进行函数callback

slideUp(“slow”)  slideUp(speed,
callback) 匹配对象的冲天由健康变化到0

slideToggle(“slow”)
假诺配对象的惊人平常则逐步变化到0,若为0,则稳步调换到健康
 

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

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

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

slideDown(speeds,callback) 
将卓殊对象的可观由0变化到平常!变化甘休后施行函数callback

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

slideToggle(“slow”)
假诺配对象的高度平常则稳步转换到0,若为0,则日渐调换到健康
 

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

 ****:事件管理
 hover(Function, Function)    当鼠标move
over时触发第贰个function,当鼠标move out时接触第三个function

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

末段效果是当鼠标移到id为a的层上时图层增添三个red样式,离开层时移出red样式

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

toggle(Function,
Function)   
当相配成分第三次被点击时接触第二个函数,当第4回被点击时接触第叁个函数

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

最后效果是当鼠标移到id为a的层上时图层增添八个red样式,离开层时移出red样式

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

toggle(Function, Function)   
当相配成分第三次被点击时接触第多个函数,当第一回被点击时接触第3个函数

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

最后效果是当鼠标点击id为a的层上时图层扩张贰个red样式,离开层时移出red样式

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

bind(type, fn)  
客户将贰个平地风波和接触事件的章程绑定到相当对象上。
trigger(type)  
顾客触发type情势的事件。$(“p”).trigger(“click”)
还有:unbind()  
unbind(type)    unbind(type, fn)

Dynamic event(Function)    绑定和打消绑定提供函数的直率情势
例:

终极效果是当鼠标点击id为a的层上时图层扩张一个red样式,离开层时移出red样式

$(“#a”).bind(“click”,function() { 
                                       $(this).addClass(“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样式,

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

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

最后效果是当鼠标点击id为a的层上时图层扩展三个red样式,

用于keyboard事件
keydown(fn)    keypress(fn)   
keyup(fn)

用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)

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

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

用于keyboard事件
keydown(fn)    keypress(fn)    keyup(fn)
用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(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的风云都足以按上述措施扩张。

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

                                       **七:Ajax支持

如上事件的恢宏再扩张为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(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:设置时间推迟央浼的小运。能够参见$.ajax提姆eout
         ((Boolean)global:是还是不是为眼下恳请触发ajax全局事件,默以为true
         ((Function)error:当呼吁战败时接触的函数。
         ((Function)success:当呼吁成功时触发函数
         ((Function)complete:当呼吁实现后启程函数
jQuery代码及评释

将ajax.htm再次回到的剧情作为id为a的div内容

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

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

将ajax.htm重临的剧情作为id为a的div内容

用get格局向ajax.aspx页面传参数,并将回到内容负给id为a的靶子。

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

$.ajaxTimeout(time)
设置央浼结束时间
   $.ajaxTimeout( 5000 )

用get情势向ajax.aspx页面传参数,并将回来内容负给id为a的对象。

任何简化格局:

$.ajaxTimeout(time)
设置需要截止时间
   $.ajaxTimeout( 5000 )

$.get(url, params,
callback) 
用get形式向远程页面传递参数,恳求实现后管理函数,除了url外,其余参数大肆采用

任何简化形式:

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

$.get(url, params, callback) 
用get情势向远程页面传递参数,央浼完成后管理函数,除了url外,其它参数大肆选用

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

$.get( “ajax.htm” , function(data){ $(“#a”).html(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

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

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

$.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

仰望一笑
徐羽
向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

$(“#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文不佳,也能非常快调节!
        
官方推荐
       
效果一流棒,使用更简短,一定有你喜欢的!
   
   

  
还大概有任何众多插件,我们能够google以下,假诺我们开采好的了,能够留言分享以下!

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

    至此jQuery已经介绍实现,并联合整理提必要大家
下载
,越多详细的应用请我们仿效官方网站,上边笔者再引入一些jQuery的求学网站方便大家更加好的支配那项工具!
        
汉语入门介绍,Keel翻译
         
jquery提供全数大旨措施的介绍及demo,方便大家查询!


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图