您的位置：首页 > Web前端 > JQuery

【译】jquery基础教程(jQuery Fundamentals)——（第三部分）jquery基础

2011-12-23 18:20 169 查看

Jquery基础教程

作者RebeccaMurphey

原文链接地址http://jqfundamentals.com/

WithcontributionsbyJamesPadolsey,PaulIrish,andothers.SeetheGitHubrepositoryforacompletehistoryofcontributions.

Copyright©2011

【译】jquery基础教程(jQueryFundamentals)——概述

【译】jquery基础教程(jQueryFundamentals)——javascript基础

【译】jquery基础教程(jQueryFundamentals)——jquery基础

【译】jquery基础教程(jQueryFundamentals)——jquery核心

【译】jquery基础教程(jQueryFundamentals)——事件

【译】jquery基础教程(jQueryFundamentals)——效果

【译】jquery基础教程(jQueryFundamentals)——Ajax

【译】jquery基础教程(jQueryFundamentals)——插件

【译】jquery基础教程(jQueryFundamentals)——最佳性能实践

【译】jquery基础教程(jQueryFundamentals)——代码组织

【译】jquery基础教程(jQueryFundamentals)——定制事件

Jquery基础

$(document).ready()

在页面中，只有当document对象加载好之后你才可以操作页面内容。jquery为你提供了确定这种状态准备就绪的方法：在$(document).ready()的括号内包含的代码，会在页面加载就绪并可以执行javascript代码后执行。

例3.1：$(document).ready()代码块

$(document).ready(function(){

console.log('ready!');

});


你有时候会看到一些$(document).ready()的一些简写；但是对于jquery编程不太熟练的人，我非常不建议他们有简写。

例3.2：$(document).ready()的简写

$(function(){

console.log('ready!');

});

选择元素（SelectingElements）
jquery的最基本的概念就是“选择某些元素，并对它们进行操作”。jquery提供了大部分css3中的选择器，同事也提供了一些非标准的选择器。想要获得完整的选择器介绍，可以访问http://api.jquery.com/category/selectors/.

下面提供一些比较常用的选择技巧。

例3.4：通过ID选择元素

$('#myId');//noteIDsmustbeuniqueperpage

例3.5：通过class名称选择元素

$('div.myClass');//performanceimprovesifyouspecifyelementtype

例3.6：通过属性选择元素

$('input[name=first_name]');//beware,thiscanbeveryslow

例3.7：通过复合的css选择器选择元素

$('#contentsul.peopleli');

例3.8：通过伪选择器选择元素

$('a.external:first');

$('tr:odd');

$('#myForm:input');//selectallinput-likeelementsinaform

$('div:visible');

$('div:gt(2)');//allexceptthefirstthreedivs

$('div:animated');//allcurrentlyanimateddivs


注解：

当你用到visible和:hidden伪选择器的时候，jquery会检查元素的实际可见属性，而不是他的css属性或者显示属性——也就是说，它会查看这个元素在页面上的物理属性的高和低是否大于0.但是这种机制并不会检查<tr>元素；这个时候，jquery检查的是它的CSS显示属性，并且认为当这个属性的display属性为none的时候是隐藏的。对于所有没被添加到DOM上的元素，通通会被认为是隐藏的，即使是CSS可以影响到它们并且渲染了它们。（在这章的后面我们会讲到怎样将元素添加到DOM中）。

作为参考，下面提供了一些jquery来判断元素可见或者隐藏的代码。

jQuery.expr.filters.hidden=function(elem){

varwidth=elem.offsetWidth,height=elem.offsetHeight,

skip=elem.nodeName.toLowerCase()==="tr";

//doestheelementhave0height,0width,

//andit'snota<tr>?

returnwidth===0&&height===0&&!skip?

//thenitmustbehidden

true:

//butifithaswidthandheight

//andit'snota<tr>

width>0&&height>0&&!skip?

//thenitmustbevisible

false:

//ifwegethere,theelementhaswidth

//andheight,butit'salsoa<tr>,

//socheckitsdisplaypropertyto

//decidewhetherit'shidden

jQuery.curCSS(elem,"display")==="none";

};

jQuery.expr.filters.visible=function(elem){

return!jQuery.expr.filters.hidden(elem);

};

选择选择器
选择合适的选择器对于提高你的javascript代码的性能是一个很好方式。具体的特征——例如，当你通过class名称选择包含div标签的的标签时——是不错的选择。总体来说，你应该给jquery一些暗示，关于它会在哪里找到你所希望找到的元素。但是从另一方面讲，过于具体的特征将会变的有害。如果像
#myTableth.special
这样的选择器可以找到你所要的元素，那么
像
#myTabletheadtrth.special


这样的的选择器就过于具体了。

jquery提供了许多基于属性的选择器，允许你利用正则表达式创建基于各种属性的选择器

//findall<a>swhoserelattribute

//endswith"thinger"

$("a[rel$='thinger']");

然而这种选择器在少量的情况下还是很有用，不过它们的性能就不敢恭维了——曾经又一次我写了一个基于属性的选择器，它把页面锁死了整整好几秒。如果有可能，还是选择通过ID，class名称和标签名称来创建选择器吧。

想知道更多么？PaulIrishhasagreatpresentationaboutimprovingperformanceinJavaScript,这里提供了一个关于选择器性能的下降的例子。

我的选择器中有元素么？
一旦你创建了一个选择器，你通常会想知道通过这个选择器你是否得到了元素。你或许会用下面的方式来做些什么：

if($('div.foo')){...}

这样不会有用的！当你通过$()进行了选择后，一个object总是会被返回的，而object计算的值则总是true。即使通过你的选择器并没有得到任何的元素，if下的语句块总是会被执行的。

你需要通过测试结果的length属性，它会告诉你有多少个元素被选中了。如果结果是0，在被用作boolean变量时计算出的length属性是false。

例3.9：检查选择结果中是否包含元素

if($('div.foo').length){...}

保存选择结果
你每一次执行选择操作，都会执行很多的代码，jquery并不会帮助你把选择结果缓存起来。执行了一个以后会经常用的选择并得到了结果，你可以把他保存到一个变量中，而不是反复的执行。这样会提高性能。

例3.10：将选择结果存储到变量中

var$divs=$('div');

注解：

在3.10的例子中，变量名字是一$开头的。与其他语言中不同，$在javascript中没有什么特殊的含义——它仅仅是一个字符。我们在这里有它声明一个包含jquery对象的变量。这是惯例，但并不是强制的。

在你将选择结果存储起来之后，你可以用jquery的方法调用存储的变量，这和你调用原始的选择器返回的结果没有什么不同。

注解：

当你执行选择器的时候，它只会得到当前页面的元素。如果之后你又添加了元素在页面上，你就不得不重新执行一次选择，然后再存储。也就是说，当DOM改变的时候，被存储起来的选择结果并不会神奇的更新的。

提炼和过滤选择结果
有时候你回得到这样一个选择结果，它里面不仅仅包含了你所需要的；这种情况下，你就会想提炼你的选择结果。jquery提供了一些方法用来精简选择结果。

例3.11：提炼选择结果

$('div.foo').has('p');//div.fooelementsthatcontain<p>'s

$('h1').not('.bar');//h1elementsthatdon'thaveaclassofbar

$('ulli').filter('.current');//unorderedlistitemswithclassofcurrent

$('ulli').first();//justthefirstunorderedlistitem

$('ulli').eq(5);

选择Form元素
jquery提供了一些伪选择器来帮助你在Forms中选择元素；它们特别的有用，因为通过标准的css选择器，很难基于元素的状态和类型来分辨它们。

：button
选择<button>元素和带有属性type=”button”的元素

：checkbox
选择带有属性type=”checkbox”的元素

:checked
选择被选中的input

:disabled
选择不可用的元素

:enabled
选择可用的元素

:file
选择带有属性type=file的元素

:image
选择带有type=”image”的元素

:input
选择
<input>
,
<textarea>
,
<select>
元素

:password
选择带有属性type="password"的元素


:radio
选择带有属性type="radio"的元素


:reset
选择带有属性type="reset"的元素


:selected
选择么有被选中的元素


:submit
选择带有属性type="submit"的元素


:text
选择带有属性type="text"的input


例3.12:与form有关的伪选择器的运用

$('#myForm:input');//getallelementsthatacceptinput


选择结果的运用
一旦你得到了选择结果，你可以再选择结果上面调用方法。方法一般分为两类：getters和setters。getters返回第一个被选元素的一个属性；setters是在所有被选元素中添加一个属性。

链式编程
如果你在一个选择结果上调用了一个方法，并且方法返回一个jquery对象类型，你可以在这个jquery对象上继续调用jquery方法，而不需要结束语句。

例3.13：

$('#content').find('h3').eq(2).html('newtextforthethirdh3!');

如果你所写的语句链包含了几个步骤，你会发现，如果你将他们分成多行书写，你的代码会变得很有可读性。

例3.14：链式代码格式化

$('#content')

.find('h3')

.eq(2)

.html('newtextforthethirdh3!');

如果你想在语句链的中间改变选择结果，jquery提供了$.fn.end方法另你可以返回到起始的选择结果。

例3.15：用$.fn.end回复原始的选择结果

$('#content')

.find('h3')

.eq(2)

.html('newtextforthethirdh3!')

.end()//restorestheselectiontoallh3'sin#content

.eq(0)

.html('newtextforthefirsth3!');


注解：

链式语句非常强大，自从jquery变得流行起来后，许多js库提供了这一特性。但是，应用起来要非常小心。大量的链式语句会是代码调试起来极其的困难。并没有什么强行的规定一条语句链应该有多长——只要确保它理解起来比较容易就好。

getters和setters
jquery“重载”了这两个方法，这样添加一个和得到一个值得方法就一样了。当方法被用来添加一个值得时候，就叫做一个setter。当方法被用来获得一个值得时候就，就叫做getter。setters作用于所有被选中的元素，getters仅仅做用于选择结果中的第一个元素。

例3.16：$.fn.html用作setter

$('h1').html('helloworld');

例3.17：$.fn.html用作getter

$('h1').html();

setters返回一个jquery对象，允许你在选择结果上继续调用jquery方法；getters返回一个被要求的对象，也就是说，你不能够在选择结果上继续调用jquery方法。

CSS，样式和尺寸
jquery包含了一个非常便利的得到和设置元素css属性的方法。

注解：

css属性在javascript中通常是骆驼命名法的。例如，css属性font-size在javascript中通常以fontSize这种方式命名一种属性。这并不是说其他的命名方式不予许，这仅是一种惯例。

例3.18：获得css属性

$('h1').css('fontSize');//returnsastringsuchas"19px"

$('h1').css('font-size');//alsoworks

例3.19：设置css属性

$('h1').css('fontSize','100px');//settinganindividualproperty

$('h1').css({'fontSize':'100px','color':'red'});//settingmultipleproperties

注意，我们在上例中的第二句中，我们用的参数格式是一个对象——它包括了多个属性。这是一个用来传递多个参数比较常用的方法，许多的jquerysetter方法都通过接受对象来一次性传递多个值。

利用css的classes设置样式
作为一个getter，$.fn.css方法是很有价值的；但是，应该避免在一个成品的代码上应用这个方法作为setter，因为你并不应该在你的javascript代码中描述这些信息。而是应该在classes中编写css规则来描述不同的视觉效果，然后再用jquery来方便的变换你所需要的效果。
例3.20：classes的运用

var$h1=$('h1');

$h1.addClass('big');

$h1.removeClass('big');

$h1.toggleClass('big');

if($h1.hasClass('big')){...}

classes同样也可用来存储元素的状态信息，比如声明元素是被删除的。

尺寸
jquery提供了许多方法来获得和修改元素的尺寸和位置信息。

例3.21中的代码就是jquery中尺寸变换的典型应用；想要了解更多的jquery尺寸的方法，请访问：http://api.jquery.com/category/dimensions/.

例3.21：基本尺寸方法

$('h1').width('50px');//setsthewidthofallH1elements

$('h1').width();//getsthewidthofthefirstH1

$('h1').height('50px');//setstheheightofallH1elements

$('h1').height();//getstheheightofthefirstH1

$('h1').position();//returnsanobjectcontainingposition

//informationforthefirstH1relativeto

//its"offset(positioned)parent"

属性（Attributes）
对于应用来说，一个元素的属性包含了许多的有用信息，所以获得和设置他们是非常重要的。

$.fn.attr方法既可以作为getter又可以作为setter。$.fn.attr作为setter既能够接受一个键值对，又能够接受一个包含多个键值对的对象。

例3.22：设置属性

$('a').attr('href','allMyHrefsAreTheSameNow.html');

$('a').attr({

'title':'alltitlesarethesametoo!',

'href':'somethingNew.html'

});

这回我们把对象划分成了多行的书写方式，空格在javascript中没有意义，所以你可以随意的应用他们以使你的代码看起来更清晰！你可以利用一些工具为成品（要发布的）的代码去除空格。

例3.23：获得属性

$('a').attr('href');//returnsthehrefforthefirstaelementinthedocument

关联查找（Traversing）
（不知道翻译的对不对……）

当你得到一个jquery的选择结果的时候，你可以以这个选择结构为出发点，找到其他的元素。

更详尽的关于关联查找方法，你可以在这里看到http://api.jquery.com/category/traversing/.

注解：

在你的代码中一定要谨慎应用过长的关联查找——复杂的关联查找需要维持你的页面的结构保持不变，但有的时候很难保证，即使只有你一个开发人员。一步到两步的关联查找就可以了，但同时也避免跨域容器的关联。

例3.24：利用关联查找的方法移动DOM元素

$('h1').next('p');

$('div:visible').parent();

$('input[name=first_name]').closest('form');

$('#myList').children();

$('li.selected').siblings();

你可以通过$.fn.each来遍历一个选择结果。这个方法遍历选择结果中的所有元素，并且为每个元素执行一个函数。这个函数接受当前元素的下标和DOM元素本身作为参数。在函数的内部，DOM元素可以用this关键字默认代替。

例3.25：

$('#myListli').each(function(idx,el){

console.log(

'Element'+idx+

'hasthefollowinghtml:'+

$(el).html()

);

});

操作元素（ManipulatingElements）
一旦你执行了一个选择语句，好戏开始了。你可以改变，移动，移除和复制元素。你同样可以通过简单的语法创建新的元素。

进一步的了解更多的juquery操作方法，请访问：http://api.jquery.com/category/manipulation/.

获取和设置元素的信息
你可以通过很多方法来改变一个已经存在的元素。在你日常的编码中，你最经常干得事就是改变一个元素的内部html代码或者它的属性。jquery为这些操作提供了很多简单的，跨浏览器的方法。你可以通过同时拥有get和set的功能的方法来获得元素的信息。在这一段中我们会提供几个例子。

注解：

修改关于元素的信息是非常琐碎的，但是要记住，修改会影响选择结果中所有的元素，所以如果你只想改变一个元素，你要确保在调用setter之前，你的选择结果中只有一个元素。

注解：

当你把方法用作getter的时候，它们通常只作用于选择结果中的第一个元素，并且不会返回jquery对象，所以不能够运用链式语句。其中一个例外就是$.fn.text，就像下面例子中所提到的一样，它得到了选择结果中所有元素的文本信息。

$.fn.html
获取或设置html内容

$.fn.text
获取或者设置剥掉html后的文本内容

$.fn.attr
获取或者设置提供的属性

$.fn.width
获取或者设置选择结果中的第一个元素的项像素宽度为整型

$.fn.height
获取或者设置选择结果中的第一个元素的项像素高度为整型

$.fn.position
获取一个带有选择结果中第一个元素的位置信息的对象，相对于它的被确定祖先标签的位置。（只能用于getter）

$.fn.val
获取或者设置元素的值

移动,复制,移除元素
有许多方法可以在DOM中移动元素;总体来说有两只途径:

1、根据另一个对象来放置被选中对象

2、根据被选中对象来放置另一对象

例如，jquery提供了$.fn.insertAfter和$.fn.after。$.fn.insertAfter这个方法将会把选中的元素放在作为参数的元素的后面；$.fn.after这个方法则是把作为参数的元素放在被选中的元素后面。其他的几个方法也遵循这个模式。$.fn.insertBefore和$.fn.before；$.fn.appendTo和$.fn.append；还有$.fn.prependTo和$.fn.prepend。

这些方法对于你的作用完全依赖于你所选中的元素，和你是否需要新加入页面的元素的引用。如果你需要存储这个引用，你应该选中第一种方式——根据另一个元素来放置被选中的元素——它回返回你将要放置的元素。在这种情况下，你用$.fn.insertAfter，
$.fn.insertBefore
,
$.fn.appendTo
,和
$.fn.prependTo


例3.27：用不同的方式移动元素


//makethefirstlistitemthelastlistitem

var$li=$('#myListli:first').appendTo('#myList');

//anotherapproachtothesameproblem

$('#myList').append($('#myListli:first'));

//notethatthere'snowaytoaccessthe

//listitemthatwemoved,asthisreturns

//thelistitself

复制元素
当你用$.fn.appendTo方法的时候，你移动了元素；有时候你要的不仅仅是移动，你想要复制元素。这是，你需要$.fn.clone方法

例3.28：复制元素

//copythefirstlistitemtotheendofthelist

$('#myListli:first').clone().appendTo('#myList');

注解：

如果你想复制有关联的数据或者事件，确保传递一个true作为参数给$.fn.clone

移除元素
在页面中有两种方法来移除元素：$.fn.remove和$.fn.detach。当你想彻底的从页面中删除选择结果的时候，你可以用$.fn.remove；这个方法返回被移除的元素，如果你将他们重新添加到页面中，那些以前关联的数据和事件都会消失。

如果你想保持哪些关联的数据和事件，你可以用$.fn.detach来替代。像$.fn.remove一样，它也返回被选中的元素，但确同时维护着关联的数据和事件，所以你可以在一段时间后恢复这个元素。

注解：

$.fn.detach方法在你对一个元素有大量操作的时候是非常的有用的。此时，将元素detach出页面，然后在代码中对其进行操作，当你结束后再把它恢复到页面中。这种做法在你进行维护元素数据和事件的时候可以使你免于昂贵的DOM细节。

如果你想将元素保持在页面中，仅仅是移除他的内容，你可以用$.fn.empty方法来释放元素的内部html。

创建新的元素
jquery提供了丰富的方法来创建新的元素——就像用$()方法来选择元素一样。

例3.29：创建新元素

$('<p>Thisisanewparagraph</p>');

$('<liclass="new">newlistitem</li>');

例3.29：通过属性对象创建新元素

$('<a/>',{

html:'Thisisa<strong>new</strong>link',

'class':'new',

href:'foo.html'

});

注意，在上例中，我们添加了第二个参数，属性的名的类被括起来了，
而href和html确没有。当属性的名字不是保留字的时候，必须被括起来。

当我们创建一个新的元素的时候，并不是立即的添加到页面中的。这里有几个当页面被创建后添加到页面中的方法。

例3.31：将新元素添加到页面中

var$myNewElement=$('<p>Newelement</p>');

$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last');//thiswillremovethepfrom#content!

$('ul').last().after($myNewElement.clone());//clonethepsonowwehave2

严格的说，你没必要将新元素存储到变量中——你可以直接通过$()将元素直接添加到页面中。但是大多数时候，你需要一个新添加元素的引用，这样你就不用再选择他们一次了。

你可以在创建新元素的同时就把他添加到页面中，但是这样你就失去了新添加对象的引用。

例3.32：

$('ul').append('<li>listitem</li>');


注解：

添加新元素到页面的语法非常的简单，以至于人们都忘记了重复的添加是一个巨大的性能浪费。如果你给同一个容器添加许多元素，你会将所有的

html代码连接成为一个字符串，然后将这个字符串添加到容器，而不是每次只

添加一个元素。你可以用数组收集所有的元素片段，然后用join将他们变成一

个字符串再添加。



varmyItems=[],$myList=$('#myList');

for(vari=0;i<100;i++){

myItems.push('<li>item'+i+'</li>');

}

$myList.append(myItems.join(''));


操作属性
jquery包含大量的属性操作。基本的操作很简单，但是$.fn.attr方法同时提供了许多复杂的操作，它即可以设置一个简单的值，也可以通过函数的返回值来设置一个值。当用函数语法的时候，函数接受2个参数：被改变属性的元素的0基索引，和当前属性被改变的值。

例3.33：

$('#myDiva:first').attr('href','newDestination.html');


例3.34：

$('#myDiva:first').attr({

href:'newDestination.html',

rel:'super-special'

});

例3.35：

$('#myDiva:first').attr({

rel:'super-special',

href:function(idx,href){

return'/new/'+href;

}

});

$('#myDiva:first').attr('href',function(idx,href){

return'/new/'+href;

});


练习
（略）



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航