conseils jquery pour la collection quotidienne

conseils jquery pour la collection quotidienne_jquery

WBOY

Libérer： 2016-05-16 15:28:19

original

1117 Les gens l'ont consulté

Aperçu

Avec le développement et la diffusion rapides des idées WEB2.0 et ajax sur Internet, d'excellents frameworks Js ont émergé les uns après les autres, parmi lesquels les plus célèbres incluent Prototype, YUI, jQuery, mootools, Bindows et les frameworks JSVM domestiques. , etc., via L'application de ces frameworks JS à nos projets peut libérer les programmeurs de la conception et de l'écriture d'applications JS complexes et tourner leur attention sur les exigences fonctionnelles plutôt que sur les détails de mise en œuvre, augmentant ainsi la vitesse de développement du projet.

jQuery est un autre excellent framework Javascript après prototype. Créé par John Resig début 2006, il permet de simplifier la programmation JavaScript™ et Ajax. Certaines personnes utilisent cette métaphore pour comparer prototype et jQuery : le prototype est comme Java et jQuery est comme Ruby. Il s'agit d'un framework JavaScript simple, rapide et flexible qui vous permet d'exploiter simplement des documents, de gérer des événements, d'implémenter des effets spéciaux et d'ajouter Ajax. interaction avec les pages Web.

Il possède les caractéristiques suivantes :

Le code est concis, la sémantique est facile à comprendre, l'apprentissage est rapide et la documentation est riche.
jQuery est un script léger et son code est très petit. La dernière version du package JavaScript ne fait qu'environ 20 Ko.
jQuery prend en charge CSS1-CSS3, ainsi que xPath de base.
jQuery est multi-navigateur et les navigateurs qu'il prend en charge incluent IE 6.0, FF 1.5, Safari 2.0 et Opera 9.0.
Il est facile d'étendre d'autres fonctions pour jQuery.

Il peut séparer complètement le code JS et le code HTML, ce qui facilite le codage, la maintenance et la modification.

Les plug-ins sont abondants. En plus de certains effets spéciaux fournis par jQuery lui-même, d'autres fonctions peuvent être implémentées via des plug-ins, telles que la validation de formulaire, la navigation par onglets, les effets de glisser-déposer, le tri des tableaux, DataGrid, menu arborescent, effets spéciaux d'image, téléchargement ajax, etc.

La conception de jQuery changera la façon dont vous écrivez du code JavaScript, réduira la complexité de l'apprentissage de l'utilisation de JS pour faire fonctionner des pages Web et améliorera l'efficacité du développement Web JS. Que vous soyez un débutant en JS ou un expert senior, jQuery. sera votre premier choix.
jQuery convient aux concepteurs, aux développeurs et à ceux qui ont de la chance, et convient également au développement commercial. On peut dire que jQuery convient à toute application JavaScript et peut être utilisé dans différentes applications Web.

Code 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;
  });
});

Copier après la connexion

Code 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>

Copier après la connexion

D'accord, ce qui précède concerne les compétences jquery que l'éditeur a partagées avec vous. J'espère que vous l'aimerez.