快捷導(dǎo)航

日常收藏的jquery技巧

更新時間：2015年12月02日 09:59:31 作者：最近想跳河

jQuery是繼prototype 之后的又一個優(yōu)秀的Javascript框架，本篇文章給大家分享收藏的jquery技巧，對jquery技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

概述

　隨著WEB2.0及 ajax思想在互聯(lián)網(wǎng)上的快速發(fā)展傳播，陸續(xù)出現(xiàn)了一些優(yōu)秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、mootools、 Bindows以及國內(nèi)的JSVM框架等，通過將這些JS框架應(yīng)用到我們的項目中能夠使程序員從設(shè)計和書寫繁雜的JS應(yīng)用中解脫出來，將關(guān)注點轉(zhuǎn)向功能需求而非實現(xiàn)細節(jié)上，從而提高項目的開發(fā)速度。

　jQuery是繼prototype 之后的又一個優(yōu)秀的Javascript框架。它是由 John Resig 于 2006 年初創(chuàng)建的，它有助于簡化 JavaScript™ 以及Ajax 編程。有人使用這樣的一比喻來比較prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一個簡潔快速靈活的JavaScript框架，它能讓你在你的網(wǎng)頁上簡單的操作文檔、處理事件、實現(xiàn)特效并為Web頁面添加Ajax交互。

它具有如下一些特點：

代碼簡練、語義易懂、學(xué)習(xí)快速、文檔豐富。
jQuery是一個輕量級的腳本，其代碼非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨瀏覽器的，它支持的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的為jQuery擴展其他功能。

能將JS代碼和HTML代碼完全分離，便于代碼和維護和修改。

插件豐富，除了jQuery本身帶有的一些特效外，可以通過插件實現(xiàn)更多功能，如表單驗證、tab導(dǎo)航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等。

jQuery的設(shè)計會改變你寫JavaScript代碼的方式，降低你學(xué)習(xí)使用JS操作網(wǎng)頁的復(fù)雜度，提高網(wǎng)頁JS開發(fā)效率，無論對于js初學(xué)者還是資深專家，jQuery都將是您的首選。
jQuery適合于設(shè)計師、開發(fā)者以及那些還好者，同樣適合用于商業(yè)開發(fā)，可以說jQuery適合任何JavaScript應(yīng)用的地方，可用于不同的Web應(yīng)用程序中。

JQuery代碼

/* 新窗口打開鏈接：JQuery filter attr
 * 禁止鼠標彈出右鍵菜單：DOM contextmenu
 * 回到頁面頂端：DOM scrollTo
 * 動態(tài)更換Css樣式表：JQuery filter Element Attribute
 * 調(diào)整頁面字體大小： 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!"));
    //不向下執(zhí)行，也就是說右鍵菜單不出來
    return false;
  });
  /* 回到頁面頂端 */
  //id="top" 的元素的click事件觸發(fā)
  $('#top').click(function () {
    //回到頁面頂端
    $(document).scrollTo(0, 500);
  });
  /* 動態(tài)更換頁面的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");
  //恢復(fù)默認字體大小
  $(".resetFont").click(function () {
    $("html").css("font-size", originalFontSize);
    //JavaScript不向下執(zhí)行
    return false;
  });
  //加大字體,某個元素的class定義為increaseFont
  $(".increaseFont").click(function () {
    //取得當(dāng)前字體大小 后綴px,pt,pc
    var currentFontSize = $("html").css("font-size");
    //取得當(dāng)前字體大小，parseFloat()轉(zhuǎn)為float類型去除后綴
    var currentFontSizeNumber = parseFloat(currentFontSize);
    //新定義的字體大小
    var newFontSize = currentFontSizeNumber * 1.1;
    //重寫樣式表
    $("html").css("font-size", newFontSize);
    //JavaScript不向下執(zhí)行
    return false;
  });
  //減小字體，某個元素的class定義為decreaseFont
  $(".decreaseFont").click(function () {
    //取得當(dāng)前字體大小 后綴px,pt,pc
    var currentFontSize = $("html").css("font-size");
    //取得當(dāng)前字體大小，parseFloat()轉(zhuǎn)為float類型去除后綴
    var currentFontSizeNumber = parseFloat(currentFontSize);
    //重新定義字體大小
    var newFontSize = currentFontSizeNumber * 0.9;
    //重寫樣式表
    $("html").css("font-size", newFontSize);
    //JavaScript不向下執(zhí)行
    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>動態(tài)改變樣式表</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>調(diào)整字體大小</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技巧，希望大家喜歡。

您可能感興趣的文章: