일일 collection_jquery에 대한 jquery 팁-JS 튜토리얼-php.cn

일일 collection_jquery에 대한 jquery 팁

WBOY

풀어 주다： 2016-05-16 15:28:19

원래의

1117명이 탐색했습니다.

개요

인터넷상에서 WEB2.0과 Ajax 아이디어의 급속한 발전과 확산으로 몇몇 우수한 Js 프레임워크가 속속 등장했고, 그중에서도 유명한 것으로는 Prototype, YUI, jQuery, mootools, Bindows 및 국내 JSVM 프레임워크가 있습니다. 등, 이러한 JS 프레임워크를 프로젝트에 적용함으로써 프로그래머는 복잡한 JS 애플리케이션을 설계하고 작성하는 데서 벗어나 구현 세부 사항보다는 기능적 요구 사항에 관심을 돌릴 수 있으므로 프로젝트 개발 속도가 빨라집니다.

jQuery는 프로토타입 이후 또 다른 뛰어난 Javascript 프레임워크입니다. 2006년 초 John Resig가 만든 이 제품은 JavaScript™ 및 Ajax 프로그래밍을 단순화하는 데 도움이 됩니다. 어떤 사람들은 프로토타입과 jQuery를 비교하기 위해 이 비유를 사용합니다. 프로토타입은 Java와 같고 jQuery는 Ruby와 같으며 간단하게 문서를 조작하고, 이벤트를 처리하고, 특수 효과를 구현하고 Ajax를 추가할 수 있는 간단하고 빠르며 유연한 JavaScript 프레임워크입니다. 웹페이지와의 상호작용.

다음과 같은 기능이 있습니다.

코드가 간결하고, 의미가 이해하기 쉽고, 학습이 빠르고, 문서가 풍부합니다.
jQuery는 경량 스크립트이며 해당 코드는 JavaScript 패키지의 최신 버전이 약 20K에 불과합니다.
jQuery는 기본 xPath뿐만 아니라 CSS1-CSS3도 지원합니다.
jQuery는 크로스 브라우저이며 지원하는 브라우저에는 IE 6.0, FF 1.5, Safari 2.0 및 Opera 9.0이 포함됩니다.
jQuery의 다른 기능을 확장하는 것은 쉽습니다.

JS 코드와 HTML 코드를 완전히 분리할 수 있어 코딩, 유지 관리, 수정이 쉽습니다.

jQuery 자체에서 제공하는 일부 특수 효과 외에도 양식 유효성 검사, 탭 탐색, 드래그 앤 드롭 효과, 테이블 정렬, DataGrid 등 더 많은 기능을 플러그인을 통해 구현할 수 있습니다. 트리 메뉴, 이미지 특수 효과, Ajax 업로드 등.

jQuery의 디자인은 JavaScript 코드 작성 방식을 바꾸고, JS를 사용하여 웹 페이지를 운영하는 방법을 배우는 복잡성을 줄이고, JS 초보자이든 숙련된 전문가이든 관계없이 웹 JS 개발의 효율성을 향상시킵니다. 첫 번째 선택이 될 것입니다.
jQuery는 디자이너, 개발자, 운이 좋은 사람들에게 적합하며, 상업용 개발에도 적합합니다. jQuery는 모든 JavaScript 애플리케이션에 적합하며 다양한 웹 애플리케이션에서 사용할 수 있습니다.

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 기술입니다. 마음에 드셨으면 좋겠습니다.