概述
隨著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 href="http://www.sina.com.cn">新浪</a><br/> <a href="http://www.sohu.com.cn">搜狐</a><br/> <a href="http://www.cnblogs.com">博客园</a><br/> </div> <div class="layout-bottom"> <a id="top" href="#">回到页面顶端</a> </div> </body> </html>
好了,以上所述就是小編給大家分享的jquery技巧,希望大家喜歡。