日常收藏的jquery技巧


Posted in Javascript onDecember 02, 2015

概述

 随着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技巧,希望大家喜欢。

Javascript 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
jquery密码强度校验
Dec 02 #Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 #Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 #Javascript
js实现继承的5种方式
Dec 01 #Javascript
6种javascript显示当前系统时间代码
Dec 01 #Javascript
基于jQuery实现网页打印功能
Dec 01 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python实现扫码工具的示例代码
2020/10/09 Python
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
用友笔试题目
2016/10/25 面试题
销售顾问工作计划书
2014/08/15 职场文书
国庆节慰问信
2015/02/15 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
工作证明书
2015/06/15 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Python 中random 库的详细使用
2021/06/03 Python