jquery tips for daily collection_jquery-JS Tutorial-php.cn

jquery tips for daily collection_jquery

WBOY

Release： 2016-05-16 15:28:19

Original

1117 people have browsed it

Overview

With the rapid development and spread of WEB2.0 and ajax ideas on the Internet, some excellent Js frameworks have emerged one after another, among which the more famous ones include Prototype, YUI, jQuery, mootools, Bindows and domestic JSVM frameworks, etc., through Applying these JS frameworks to our projects can free programmers from designing and writing complex JS applications and turn their attention to functional requirements rather than implementation details, thereby increasing the development speed of the project.

jQuery is another excellent Javascript framework after prototype. Created by John Resig in early 2006, it helps simplify JavaScript™ and Ajax programming. Some people use this metaphor to compare prototype and jQuery: prototype is like Java, and jQuery is like ruby. It is a simple, fast and flexible JavaScript framework that allows you to simply operate documents, handle events, and Implement special effects and add Ajax interaction to web pages.

It has the following features:

The code is concise, the semantics are easy to understand, the learning is fast, and the documentation is rich.
jQuery is a lightweight script, and its code is very small. The latest version of the JavaScript package is only about 20K.
jQuery supports CSS1-CSS3, as well as basic xPath.
jQuery is cross-browser, and the browsers it supports include IE 6.0, FF 1.5, Safari 2.0, and Opera 9.0.
It is easy to extend other functions for jQuery.

It can completely separate JS code and HTML code, making it easy to code, maintain and modify.

Plug-ins are abundant. In addition to some special effects provided by jQuery itself, more functions can be implemented through plug-ins, such as form validation, tab navigation, drag-and-drop effects, table sorting, DataGrid, tree menu, image special effects, ajax upload, etc. .

The design of jQuery will change the way you write JavaScript code, reduce the complexity of learning to use JS to operate web pages, and improve the efficiency of web JS development. Whether you are a JS beginner or a senior expert, jQuery will be your first choice.
jQuery is suitable for designers, developers and those who are lucky, and is also suitable for commercial development. It can be said that jQuery is suitable for any JavaScript application and can be used in different web applications.

JQuery Code

/* 新窗口打开链接：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;
  });
});

Copy after login

Html code:

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

Copy after login

Okay, the above is the jquery skills that the editor has shared with you. I hope you like it.