概述
隨著WEB2.0及 ajax思想在互聯網上的快速發展傳播，陸續出現了一些優秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、mootools、 Bindows以及國內的JSVM框架等，通過將這些JS框架應用到我們的項目中能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需 求而非實現細節上，從而提高項目的開發速度。
jQuery是繼prototype 之后的又一個優秀的Javascript框架。它是由 John Resig 于 2006 年初創建的，它有助于簡化 JavaScript™ 以及Ajax 編程。有人使用這樣的一比喻來比較prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一個簡潔快速靈活的JavaScript框架，它能讓你在你的網頁上簡單的操作文檔、處理事件、實現特效并為Web頁面添加Ajax交互。
它具有如下一些特點：
代碼簡練、語義易懂、學習快速、文檔豐富。
jQuery是一個輕量級的腳本，其代碼非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨瀏覽器的，它支持的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的為jQuery擴展其他功能。
能將JS代碼和HTML代碼完全分離，便于代碼和維護和修改。
插件豐富，除了jQuery本身帶有的一些特效外，可以通過插件實現更多功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等。
jQuery的設計會改變你寫JavaScript代碼的方式，降低你學習使用JS操作網頁的復雜度，提高網頁JS開發效率，無論對于js初學者還是資深專家，jQuery都將是您的首選。
jQuery適合于設計師、開發者以及那些還好者，同樣適合用于商業開發，可以說jQuery適合任何JavaScript應用的地方，可用于不同的Web應用程序中。
JQuery代碼
/* 新窗口打開鏈接：JQuery filter attr * 禁止鼠標彈出右鍵菜單：DOM contextmenu * 回到頁面頂端：DOM scrollTo * 動態更換Css樣式表：JQuery filter Element Attribute * 調整頁面字體大小： Css html.css parseFloat *///確定DOM載入完成$(document).ready(function () { /* 鏈接的href屬性以http開頭的都在新窗口打開鏈接 */ // ^ 過濾器，屬性：以特定字符串開始 $("a[href ^='http']").attr("target", "_blank"); /* 禁止鼠標右鍵 */ //DOM的contextmenu是鼠標右鍵菜單 $(document).bind("contextmenu", function (e) { alert(("No right-clicking!")); //不向下執行，也就是說右鍵菜單不出來 return false; }); /* 回到頁面頂端 */ //id="top" 的元素的click事件觸發 $('#top').click(function () { //回到頁面頂端 $(document).scrollTo(0, 500); }); /* 動態更換頁面的css樣式表 */ //用頁面鏈接的href的值換掉了link標簽的href屬性值 $("a.cssSwap").click(function(){ $("link[rel=stylesheet]").attr("href",$(this).attr("rel")); }); /* 頁面字體大小的放大、縮小、還原 */ //取得字體大小，在html標記下定義了font-size var originalFontSize = $("html").css("font-size"); //恢復默認字體大小 $(".resetFont").click(function () { $("html").css("font-size", originalFontSize); //JavaScript不向下執行 return false; }); //加大字體,某個元素的class定義為increaseFont $(".increaseFont").click(function () { //取得當前字體大小 后綴px,pt,pc var currentFontSize = $("html").css("font-size"); //取得當前字體大小，parseFloat()轉為float類型去除后綴 var currentFontSizeNumber = parseFloat(currentFontSize); //新定義的字體大小 var newFontSize = currentFontSizeNumber * 1.1; //重寫樣式表 $("html").css("font-size", newFontSize); //JavaScript不向下執行 return false; }); //減小字體，某個元素的class定義為decreaseFont $(".decreaseFont").click(function () { //取得當前字體大小 后綴px,pt,pc var currentFontSize = $("html").css("font-size"); //取得當前字體大小，parseFloat()轉為float類型去除后綴 var currentFontSizeNumber = parseFloat(currentFontSize); //重新定義字體大小 var newFontSize = currentFontSizeNumber * 0.9; //重寫樣式表 $("html").css("font-size", newFontSize); //JavaScript不向下執行 return false; });});Html代碼：
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>JQuery 有益的技巧</title> <!-- 默認樣式表 --> <link type="text/css" rel="stylesheet" href="css/background-white.css"/> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="script/helpful-tricks.js"></script></head><body><header> <div><p>動態改變樣式表</p> <a href="#" class="cssSwap" rel="css/background-blue.css">藍色背景</a> <a href="#" class="cssSwap" rel="css/background-green.css">綠色背景</a> <a href="#" class="cssSwap" rel="css/background-yellow.css">黃色背景</a> </div> <br/> <div><p>調整字體大小</p> <a class="resetFont" href="#">重置字體大小</a> <a class="increaseFont" href="#">加大字體大小</a> <a class="decreaseFont" href="#">減小字體大小</a> </div></header><div><p>在新窗口打開鏈接</p> <a >新浪</a><br/> <a >搜狐</a><br/> <a >博客園</a><br/></div><div class="layout-bottom"> <a id="top" href="#">回到頁面頂端</a></div></body></html>
好了，以上所述就是小編給大家分享的jquery技巧，希望大家喜歡。
新聞熱點
疑難解答
