日常收藏的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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
简单实现jquery焦点图
Dec 12 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
node省市区三级数据性能测评实例分析
Nov 06 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
js面向对象方式实现拖拽效果
Mar 03 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中计算时间差的几种方法
2009/12/31 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP编写RESTful接口
2016/02/23 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php桥接模式应用案例分析
2019/10/23 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python能做哪方面的工作
2020/06/15 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
应用数学自荐书范文
2013/11/24 职场文书
八年级语文教学反思
2014/02/11 职场文书
人事代理委托书
2014/09/27 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
婚礼新人答谢词
2015/01/04 职场文书
责任书范本大全
2015/05/11 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL