标签目录：jQuery

2018
12-03

jQuery的没落和技术发展的一般规律

jQuery的没落和技术发展的一般规律 jQuery的成就jQuery是一个伟大的库，它解决了domapi兼容的问题，使得dom操作更简便它支持类似css选择器的方式来选择组件支持批量的操作数组中的元素，也叫隐式迭代支持链式操作，可以在一条语句中完成很复杂的逻辑有易于使用的插件扩展机制deffered的异步方案比promise更早。等等。jquery可以说在dom操作领域做的很棒了，几乎统治了一个时代，甚至影响了w3c，domapi中的querySelector就有j... 继续阅读 >
2017
09-19

67 个JavaScript和CSS实用工具、库与资源

67 个JavaScript和CSS实用工具、库与资源 在这篇文章中，我不会与大家谈论大型的前端框架，如React、Angular、Vue等，也没有涉及那些流行的代码编辑器，如Atom、VSCode、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来Enjoy吧！... 继续阅读 >
2017
06-07

jQuery日期范围选择器

准备使用该日期选择器插件需要jQuery1.3.2+和Moment2.2.0+的支持。<linkrel="stylesheet"href="css/daterangepicker.css"/><scriptsrc="js/moment.min.js"></script><scriptsrc="js/jquery.daterangepicker.js"></script>HTML结构在需要放置日期选择器的地方添加以下html结构，就是一个输入框。<inputtype="text"id="datepicker"value="">调用插件调用jQueryDateRangePicker插件非常... 继续阅读 >
2017
05-26

Jquery实现的几款漂亮的时间轴

Jquery实现的几款漂亮的时间轴 引言最近项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。一、纵向折叠时间轴1、js文件（jQuery.js或者jQuery.min.js）2、CSS文件@CHA... 继续阅读 >
2017
04-21

JQuery坑，说说哪些大家都踩过的坑

1乱用选择器坑人指数：200JQuery选择器调用代价很大，反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法$("#button").click(function(){$('#listli').addClass('strong');$('#listli').css('color','red');});//正确的写法$("#button").click(function(){$lis=$('#listli');$lis.addClass('strong');$lis.css('color','red');});//更好的写法$("#button").cl... 继续阅读 >
2017
03-21

前端程序员必知：单页面应用的核心

前端程序员必知：单页面应用的核心 这几年里，单页面应用的框架令人应接不暇，各种新的概念也层出不穷。从过去的jQueryMobie、Backbone到今天的Angular2、React、Vue2，除了版本号不同，他们还有很多的相同之处。刚开始写商业代码的时候，我使用的是jQuery。使用jQuery来实现功能很容易，找到一个相应的jQuery插件，再编写相应的功能即可。对于单页面应用亦是如此，寻找一个相辅助的插件就可以了，如jQueryMobile。尽管在今天看来，jQue... 继续阅读 >
2016
09-26

jQ选择器汇总

jQ选择器汇总 1.#id:根据给定的ID匹配一个元素<pid="myId">这是第一个p标签</p><pid="not">这是第二个p标签</p><scripttype="text/javascript">$(function(){$("#myId").css("color","red");});</script>结果：这是第一个p标签这是第二个p标签2.element:根据给定的元素标签名匹配所有元素<div>这是div标签1</div><div>这是div标签2</div><p>这是p标签</p><scripttype="text/javascript">$(function(){... 继续阅读 >
2016
09-14

效率提升jQuery的25个技巧

1、从GoogleCode加载jQueryGoogleCode上已经托管了多种JavaScript类库，从GoogleCode上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在GoogleCode上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:<scripttype="text/javascript"src="http:/... 继续阅读 >
2016
04-16

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的... 继续阅读 >
2016
03-08

一封写给 jQuery 的情书

一封写给 jQuery 的情书 我爱你jQuery。我们在一起已经有十年了。要是按照正常情况下JavaScript开发框架的生命周期来计算的话，应该相当于五十多年。我们现在见面的次数已经没有以前那么多了，但是如果和刚认识你那会儿相比，我需要你的程度一点儿也没有降低。我永远不会忘记我们刚在一起时的第一个函数：$(document).ready(function(){alert(‘pageloaded’);});哈哈！我希望你原谅这个看似有点儿鲁莽的消息提示框。我过... 继续阅读 >
2016
01-15

jQuery升级踩坑大全

jQuery升级踩坑大全 背景jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当，可能会有DOMXSS漏洞，非常建议升级到jQuery1.9.x或以上版本。前段时间我就主导了这件事情，把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery1.11.3。jQuery官方也为类似升级工作提供了jQueryMigrate插件。言归正传。坑从何处来jQuery1.11.3是1.x时代的最后一个版本（作者... 继续阅读 >
2015
11-20

前端程序员应该知道的 15 个 jQuery 小技巧

前端程序员应该知道的 15 个 jQuery 小技巧 通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：//Backtotop$('.top').click(function(e){e.preventDefault();$('html,body').animate({scrollTop:0},800);});<!--Createananchortag--><aclass="top"href="#">Backtotop</a>改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到... 继续阅读 >
2015
10-22

26个Jquery使用小技巧

26个Jquery使用小技巧 下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。... 继续阅读 >
2015
10-22

10个必须把握的jQuery小技巧

收集的10个jQuery小技巧/代码片段，可以帮你快速开发。1.返回顶部按钮你可以利用animate和scrollTop来实现返回顶部的动画，而不需要使用其他插件。//Backtotop$('a.top').click(function(){$(document.body).animate({scrollTop:0},800);returnfalse;});<!--Createananchortag--><aclass="top"href="#">Backtotop</a>改变scrollTop的值可以调整返回距离顶部的距离，而animate的第二个参数是执行返回动... 继续阅读 >