首頁  >  文章  >  web前端  >  日常收藏的jquery技巧_jquery

日常收藏的jquery技巧_jquery

WBOY
WBOY原創
2016-05-16 15:28:191072瀏覽

概述

 隨著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技巧,希望大家喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn