標簽目錄：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，我只想與大家分享一個有助于提升開發人員效率的工具列表合集?；蛟S，一些朋友已經對文中的一些工具有所了解，但如果你發現了一些對你有幫助的新工具，那么，我將倍感欣慰。由于這個列表中包含了不同類別的資源，為了便于大家查看，我已將其進行了重新的分類，來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實現的幾款漂亮的時間軸 引言最近項目中使用了很多前端的東西，對于我一個做后臺開發的人員，這是一個很好的鍛煉的機會。經過這段時間的學習，感覺前端的東西太多了，太強大了，做出來的東西太炫酷了?，F在有很多開源的前端框架，做的都非常的漂亮，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插件。言歸正傳?？訌暮翁巵韏Query1.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的第二個參數是執行返回動... 繼續閱讀 >