2022年推荐一些必记的jQuery常用函数及使用技巧 .pdf

《2022年推荐一些必记的jQuery常用函数及使用技巧 .pdf》由会员分享，可在线阅读，更多相关《2022年推荐一些必记的jQuery常用函数及使用技巧 .pdf（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、推荐一些必记的jQuery 常用函数及使用技巧jquery 大家都在使用， 你有没有记住一些常用，一定要记住的应用函数呢？因为jquery 提供的函数非常多，不可能我们都能记住，本文就整理一些必记的jQuery 常用函数及使用技巧。高级选择器（ selector）在 jQuery 中，我们可以使用各种各样的选择器，这使得选择器的使用变得非常精确。下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。基于属性的选择器在 HTML 中，几乎所有元素都具有属性，比如： 上面两个HMTL 元素中包含了九个属性。利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看

2、以下例子中的选择器：$(document).ready(function() /Alltheimageswhosewidthis600px $(imgwidth=600).click(function() alert(Youvejustselectedanimagewhosewidthis600px); ); /Alltheimageshavingawidthdifferentto600px $(imgwidth!=600).click(function() alert(Youvejustselectedanimagewhosewidthisnot600px); ); /Alltheinput

3、swhosenameendswithemail $(inputname$=email).focus(function() alert(Thisinputhasanamewhichendswithemail.); ); ); 在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。多重选择器如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单， 最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。$(document).ready(function() /Alltheim

4、ageswhosewidthis600pxORheightis400px $(imgwidth=600,imgheight=400).click(function() alert(Selectedanimagewhosewidthis600pxORheightis400px); ); /Allpelementswithclassorange_text,divsandimages. $(p.orange_text,div,img).hover(function() alert(Selectedapelementwithclassorange_text,adivORanimage.); ); /W

5、ecanalsocombinetheattributesselectors /Allthejpgimageswithanaltattribute(thealtsvaluedoesntmatter) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 4 页 - - - - - - - - - $(imgaltsrc$=.jpg).click(function() alert(You selected a jpg image with the alt attribute.);

6、); ); Widget 组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：$(document).ready(function() /Allthehiddenimagesareshown $(img:hidden).show(); /The first p is going to be orange $(p:first).css(color,orange); /Inputwithtypepassword /thisis$(inputtype=password) $(input:password).focus(function() al

7、ert(Thisisapassword!); ); /Divswithparagraph $(div:has(p).css(color,green); /Wecanalsocombinethem.with() /Allnotdisabledcheckboxes $(input:checkbox(:not(:disabled).hover(function() alert(Thischeckboxisworking.); ); ); 如上例所示， 可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。理解网站的结构网络的结构可能看起

8、来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部， 而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body 标签。 . CreateanAccount! PersonalInformation Message Footermessage 以上示例代码的树形图如下：很简单，是不是？从现在开始我们可以将html 或 xhtml 看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。对树进行选择和转换选择就想树一样，网站结构中叶存在子与父。在jQuery 中，我们可以利

9、用这一结构。假设我们拥有相同的html ，但是现在我们想要选择名为“main”的 div 中的 p 元素，但是不想对任何有关 p 元素的东西造成变化。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 4 页 - - - - - - - - - 我们有三种可能的方案，如下：$(#wrapper).children(#main).children(p).css(color,orange); $(#wrapper).children().children(p).css(color

10、,orange); $(#main).children(p).css(color,orange); 利用children方法可以选择树中位于其他元素下的某个元素。 如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于： 第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper 这个 div 元素下除main 之外并没有其他子元素，所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div 元素、表格等等，假设我们想

11、要添加一个列表，如下： Dog Cat Frog 只是一些字符串， 所以我们可以在JavaScript代码中这样写：var list= n + Dogn + Catn + Frogn ; 现在我们要在html 中某个地方添加字符串。比如，在之前我们选择的p 元素之后。最后我们可以输入完整的代码，如下所示：$(document).ready(function() var list= n + Dogn + Catn + Frogn ; $(#wrapper).children(#main).append(list); ); 字面上我们将字符串附加到HTML 中的，结果是这个列表显示在p 元素之后。

12、移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。$(#wrapper).children(#main).children(p).remove(); 在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div 下有一个列表，当我们移除该div 时，div 和列表都会被移除。表面之下jQuery 类似只露出一角的冰山，在水面之下还有更多内容。这一小结中， 我们将向你展示某些表面之下的内容。绑定（ Bind）绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法

13、连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：$(document).ready(function() $(#id).click(function() alert(Thatclickwasamazing!); ); ); 上文中 click()方法在以下代码相对于wrapper ：$(document).ready(function() $(#id).bind(click, function () alert(Thatclickwasamazing!); ); ); 此外，使用 unbind() 方法可以解除事件与元素的连接。定义你

14、自己的jQuery 方法名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 4 页 - - - - - - - - - 目前我们看到了一些方法，如click、bind、hover 等等，但是我们如何定义自己的方法？如何使用 $(selector).mymethod() 这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。/ThenamewillbealertVal jQuery.fn.alertVal= function() var el

15、ement=$(this0); /Thatsourelement if (element.val() alert(element.val(); /Thatsourelementsvalue ; /Thisisthewaywecanuseit $(selector).alertVal(); 回 调（callback）是常用的解决方案使用回调， 我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说：但你做完时，给我电话，因为我要做我的那份工作。不过现在的问题是：如何使用回调？$(document).ready(function() myCallBack= function() ale

16、rt(Imacallbackalert.); /WhenthegetfinishesthenmyCallBackisexecuted $.get(myhtmlpage.html,myCallBack); ); 注意：如果该函数包含参数，我们必须使用以下方式：$(document).ready(function() $.get(myhtmlpage.html,function() myCallBack(param1,param2); ); ); 结论文章来自学IT 网： http:/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 4 页 - - - - - - - - -