学习jQuery技巧来改进你的代码

时间：2021-10-24 来源：互联网编辑：宝哥软件园浏览：次

jquery-技巧-教程

jQuery之所以如此受欢迎，被从大公司到个人博客的几乎所有人广泛使用，是因为它的入门和使用相当简单，它也为我们提供了一些一些人不知道的伟大功能。我认为大多数jQuery的用户倾向于使用jQuery插件来解决他们面临的问题，这通常是一个明智的选择。但是，当插件与您的需求相比有一些缺陷时，您可能应该尝试自己解决它们。让我们来看看这些实用的jQuery技术，它们肯定会派上用场的！00-1010这个jQuery选择器实验室非常酷。可以在网上免费使用。当然也可以在本地离线使用。这个测试页面包含复杂的HTML复合字段，然后您可以尝试预定义各种jQuery选择器。如果这还不够，您还可以自定义选择器。 jquery-选择器-技巧

00-1010如果您想测试jQuery包装是否包含某些元素，首先，您可以尝试通过验证第一个元素是否存在来查看此示例：if($(selector)[0]){.}//或if($(选择器)。长度){ 0.}://示例。如果您的页面具有以下html代码，舒利=' shopping _ cart _ items ' linput class=' in _ stock ' name=' Item ' type=' radio ' value=' Item-x '/itemx/Li Li input class=' unknown ' name=' Item ' type=' radio ' value=' Item-Y '/Li/ules caped=' true ' lang=' JavaScript.//这个if条件将返回true，因为我们有两个与选择器匹配的输入字段，所以语句代码将执行if($(' # shopping _ cart _ item input。in _ stock ')[0]){语句}

1.测试并提升你的jQuery选择器水平

。你可以用这个句子。脚本src=' http://code.jQuery.com/jquery-latest.js'/script你可以用这个方法调用最新版本的jquery框架。当然，您也可以使用以下代码从Ajax . googleapi.com调用相同的最新版本的jquery:Script src=' http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 3 . 2/jquery . min . js ' type=' text/JavaScript '/Script

2.测试jQuery包装集是否包含某些元素

可以通过使用data方法避免将数据存储在DOM中。一些前端开发人员喜欢使用HTML属性来存储数据：$(“选择器”)。attr ('alt '，' database stored ')；//之后可以读取数据：$('选择器')。attr(' alt ')；使用“alt”属性作为参数名来存储数据并不是HTML的语义。我们可以使用jQuery的数据方法来存储页面中某个元素的数据：$(“选择器”)。数据(‘参数名’‘要存储的数据’)；//之后，得到数据：$('选择器')。数据('参数')；这种数据方法可以让你清楚地知道数据的参数，并且更具语义性和灵活性。您可以在页面的任何元素中存储数据信息。如果你想了解更多的data()和removeData()方法，可以看到jQuery的经典应用官方解释这个方法是给输入字段一个默认值，然后在对焦的时候清空它： HTML part :。

form id=' test form ' input type=' text ' class=' clear ' value=' always cleared '/input type=' text ' class=' clear once ' value=' clearedonlyonce '/input type=' text ' value=' normal text '/form javasript part :

$(function(){//取出带有clear class//的输入字段(注意：‘clear once’是两个class:clear和once) $ ('# testforminput.clear ')。每个(函数(){//使用data方法存储数据$ (this)。数据(' txt ')。}).focus(function(){//获得焦点后，判断字段中的值是否与默认值相同。如果相同，则清除if ($。修剪($(这个)。val ())==$ (this)。数据(' txt '){ $(this)。val(“”)；}}).blur(function(){//用classclear将模糊时间添加到域中，以恢复默认值//，但忽略if($)。修剪($(这个)。val())===' '！$(这个)。has class(' once '){//restore saveddata $(this)。val($(this)。数据(' txt ')；}});});看Demo

3.从jquery.org读取jQuery最新版本

，大部分人很难记住所有的编程细节。即使是最好的程序员也会对某种编程语言粗心大意。因此，随时打印相关手册或放在桌面上参考，一定可以提高编程效率。Oscarotero jquery 1.3(壁纸版) jQuery手册

4.存储数据

FireBug是我最喜欢的浏览器扩展工具之一。这个工具可以让你在可视化界面中快速了解当前页面的HTML CSS JavaScript，在这个工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox也支持记录您的JavaScript代码。编写FireBug控制台最简单的方法如下： console . log(' hello world ')(9505 . 163.com)。

你也可以用你想要的方式写一些参数：console.log(2，4，6，8，' foo '，bar)。还可以编写一个小的扩展，将jQuery对象记录到控制台：。

jquery . fn . log=function(msg){ console . log(“% s 3360% o”，msg，this)；返回此；};//对于此扩展，您可以直接使用。log()方法将当前对象记录到控制台。$('#some_div ')。find(' Li . sourceinput : checkbox ')。日志(' sourcestouncheck ')。removeAttr('选中')；00-1010使用jQuery后，您会发现使用类属性选择DOM元素非常简单。尽管如此，还是建议您使用尽可能少的类选择器，而不是尽可能多的ID选择器(在IE浏览器中使用类选择器会在遍历整个DOM树后返回一个匹配的类包装器集)。而且ID选择器更快，因为DOM本身有一个“自然”的getElementById方法，而类没有。因此，如果使用类选择器，浏览器将遍历整个DOM。如果您的网页的DOM结构足够复杂，这些类选择器足以降低页面的速度。让我们看看这个简单的HTML代码： divid=' main ' formmethod=' post ' action='/' h2selectorsinquery/H2.input class=' button ' ID=' main _ button ' type=' submit ' value=' submit '/form/div//使用类调用submit button比使用绝对ID选择器要慢得多。varmain _ button=$(' # main . button ')；varmain _ button=$(' # main _ button ')；

5.jQuery手册常备身边

jQuery链不仅允许以简洁的方式编写强大的操作，还提高了开发效率，因为它可以将多个命令应用到包装器集，而无需重新计算包装器集。这样就不用再这样写了：Li Description :输入类型=' Text ' Name=' Description ' Value=' '//Li(9507 . 163.com)。

$(' # shopping _ cart _ item input . text ')。css('边框'，' 3px dashed yellow ')；$(' # shopping _ cart _ item input . text ')。css('背景色'，'红色')；$(' # shopping _ cart _ item input . text ')。val(' text updated ')；相反，您可以使用jQuery链来完成简单的操作：。

varinput _ text=$(' # shopping _ cart _ item input . text ')；input_text.css('border '，' 3px dashed yellow ')；input_text.css('背景色'，'红色')；input _ text . val(' text updated ')；//samewithchain : varinput _ text=$(' # shopping _ cart _ item input . text ')；input_text.css('边框'，' 3pxdashedyellow ')。css('背景色'，'红色')。val(' text updated ')；

6.在FireBug控制台记录jQuery

大多数jQuery实例或教程告诉我们将jQuery代码绑定到$(文档)。就绪事件。虽然$(文档)。ready事件在大多数情况下是OK的，它的解析序列在文档准备好并且正在下载单个文档中的图片等对象时开始。因此，使用$(文档)。ready event在某些情况下可能达不到我们预期的效果，比如一些视觉效果和动画、拖拽、预读隐藏图片等.通过使用$(窗口)。load事件，您可以在整个文档准备好之后安全地开始运行预期的代码。$(窗口)。load(function(){//将页面完全准备好之后要运行的代码放在这里})；00-1010由于JavaScript支持链式结构和换行，您的代码可以编写如下。在本例中，首先移除元素上的一个类，然后在同一元素上添加另一个类：$(' # shopping _ cart _ item input。in _ stock ')。removeclass ('in _ stock ')。addclass ('3-5 _)。如果想让它更简单更实用，可以创建一个支持链式结构的jQuery函数：$。fn . makenotingstock=function(){ return $(this)。removeclass ('in _ stock ')。add class(' 3-5 _ days ')；} $(' # shopping _ cart _ item input . in _ stock ')。makeNotInStock()。log()；

7.尽可能使用ID选择器

如果你想确保一个事件或动画效果在另一个事件运行后被调用，你应该使用回调函数。你可以在这些动画效果后面绑定回调函数：slideDown(速度，[回调]) ie。$ ('# sliding ')。向下滑动(' slow '，function () {…单击此处预览此示例。。

style div . button { background : # CFD；margin:3px宽度：50 px；文本对齐：居中；float:leftcursor:pointer指针；border:2pxoutsetblack字体粗细：加粗；} #滑动{ display:none}/style

$(文档)。ready(function(){//使用jQuery的click事件更改视觉效果，并打开滑动效果$ ('div。按钮')。单击(function () {//div。按钮现在看起来像一个按下的效果$ (this)。CSS({边框样式：' insert '，cur。//#滑动现在将淡出，并在动作完成后打开淡出效果//Slideuponceitcompletes $(' # Sliding ')。向下滑动(“慢”，函数(){ $(“# Sliding”))。Slidewup ('slow '，Function(){//按钮的CSS属性将更改为$ ('div。按钮')。淡出效果完成后的CSS({ border style : ' begin '，cursor 3360 ' auto ' })；});});});});

8.善于利用jQuery链

jQuery允许我们定义基于css选择器的自定义选择器，使我们的代码更加简洁。

$.expr [':' $。expr [':']。mycustomselector=function(element、index、meta、stack){//element-DOM element//index-当前在堆栈中遍历的索引值//关于您的选择器的元数据元素//stack-用于遍历。//用户自定义选择器的应用是： $()。有些类：测试’)。做某事()；//下面我们来看一个小例子。我们通过使用自定义选择器来锁定带有“rel”属性的元素集：$。expr [':']。with rel=function(element){ var $ this=$(element)；//只返回具有非空rel属性的return($this.attr('rel ')！='');};$(文档)。ready(function(){//自定义选择器的使用非常简单。像其他选择器一样，它返回一个元素包装集。//可以对其使用格式化方法，比如修改其css样式$ ('A: with rel ')。CSS('背景色'，'绿色')如下；});

ulliahref=' # ' with trel/a/Lili arel=' some rel ' href=' # ' with rel/a/Lili arel=' href=' # ' with trel/a/Lili arel=' no follow ' href=' # ' alinkwithrel/a/Li/Ul

9.绑定jQuery函数到$(window).load事件

使用JavaScript 预加载图片是一个相当不错的方法。

//定义预加载图片列表jQuery的函数(带参数)。preload images=function(){//Traverse pictures for(vari=0；长度；i ){jQuery('img ')。attr('src '，参数[I])；} }//可以使用预加载函数$。预载图像(' images/logo.png '，' images/logo-face.png '，' images/mission . png ')；

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

jQuery有一个名为QUnit的单元测试框架。写作考试很容易。它允许您自信地修改代码，并确保它仍能按预期工作。以下工作：//将测试分成几个模块。模块(' Moduleb ')；Test('一些其他测试'，function(){//指定需要向测试中添加多少个判断语句。期望(2)；equals(true，false，“failing test”)；等于(true，true，‘passing test’)；});英文原文：更多jquery和通用JavaScript技巧提升你的代码翻译原文：http://blog . bingo 929.com/jquery-JAVAScript-tips-to-improve-code . html 0，0，0)'】。mycustom selector=function(element、index、meta、stack){//element-DOM element//index-当前在堆栈中遍历的索引值//关于您的选择器的元数据元素//stack-用于遍历所有元素的堆栈//如果包含当前元素，则返回true//如果不包含当前元素，则返回false }；//用户自定义选择器的应用是： $()。有些类：测试’)。做某事()；//下面我们来看一个小例子。我们通过使用自定义选择器来锁定带有“rel”属性的元素集：$。expr [':']。with rel=function(element){ var $ this=$(element)；//只返回具有非空rel属性的返回($this.attr('rel ')！='');};$(文档)。ready(function(){//自定义选择器的使用非常简单。像其他选择器一样，它返回一个元素包装集。//可以对其使用格式化方法，比如修改其css样式$ ('A: with rel ')。CSS('背景色'，'绿色')如下；});

ulliahref=' # ' with trel/a/Lili arel=' some rel ' href=' # ' with rel/a/Lili arel=' href=' # ' with trel/a/Lili arel=' no follow ' href=' # ' alinkwithrel/a/Li/Ul