JQuery 的几个有用的技巧
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 的几个有用的技巧的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- Xmind几个有用的技巧
Xmind是一个很好的思维导图工具,是学习研究总结的好帮手. Xmind功能很丰富,这里只是简要列出几个比较有用的技巧. 1.善用属性 选中一个xmind元素(专业名词叫[主题])后,一般在右下角会出 ...
- jQuery 使用注意事项 与 小技巧(tips)
jQuery 使用注意事项 与 小技巧(tips) 1 $( document ).ready() https://learn.jquery.com/using-jquery-core/documen ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- jQuery 插件编程精讲与技巧
适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...
- iOS 开发的9个超有用小技巧
http://www.jianshu.com/p/221507eb8590 1.如何快速的查看一段代码的执行时间. 1 2 #define TICK NSDate *startTime = [NS ...
- PHP程序员的10个有用的技巧和教程
PHP被定义为一个通用的服务器端脚本语言,它基本上是专为Web开发的重要目的.借助PHP可以创建动态和惊人的网页效果,他是被嵌入在一个HTML源文件的服务器端的脚本语言之一.因此,它成为最流行的,也是 ...
- Pycharm5个非常有用的技巧
PyCharm 是一款非常强大的编写 python 代码的工具.掌握一些小技巧能成倍的提升写代码的效率,本篇介绍几个经常使用的小技巧. 一.分屏展示 当你想同时看到多个文件的时候: 右击标签页: 选择 ...
- javascript有用小技巧—实现分栏显示
记得给师哥师姐測试考试系统的时候,看到他们的考试页面能够实现隐藏左边的考生信息部分,当时认为好高大上.好人性化. 如今学了javascript,我也能实现这个功能了,以下来显摆一下. 1.页面设计: ...
随机推荐
- Jenkins参数化构建
背景:每次构建项目时都需要去修改一下配置,然后保存,再去立即构建.这样修改容易修改出错误,影响到执行脚本,且每次都要去修改配置,不容易修改,操作也比较麻烦.所以决定将Jenkins修改为参数化构建.下 ...
- oracle10g如何配置客户端
http://jingyan.baidu.com/article/4d58d541c108939dd4e9c0f5.html 不行的话: 对tnsnames.ora进行编辑:ORCL = (DESCR ...
- C++学习41 exception类
C++语言本身或者标准库抛出的异常都是 exception 的子类,称为标准异常(Standard Exception).你可以通过下面的语句来匹配所有标准异常: try{ //可能抛出异常的语句 } ...
- [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果
package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...
- php mssql 中文各种乱码
1 查询输出时乱码 (SELECT ) 因为MSSQL 数据库一般都是 GBK 编码,所以在php页面中加入 header('Content-Type:text/html; charset=GBK' ...
- 朗逸2011款 1.4t 清除保养告警灯
朗逸2011款 1.4t 清除保养告警灯 Posted on 2015-03-01 21:06 编辑 仪表盘上有两个按钮 按住右边set键,钥匙旋转到通电状态,保持2s. 放掉set,按左边的切换按钮 ...
- buildbot 自动启动
buildbot的master或者slave,一般配置好了之后, 总希望永久可用,即使机器因为某些原因重启了,也会自动启动. 官网文档不推荐使用root启动master. 而是使用用户级别的cront ...
- ubuntu关闭THP
所有linux系统详细设置参考: https://docs.mongodb.org/manual/tutorial/transparent-huge-pages/ vi /etc/init.d/dis ...
- ubuntu14安装ambari2.2
https://cwiki.apache.org/confluence/display/AMBARI/Install+Ambari+2.2.0+from+Public+Repositories 查看是 ...
- 使用spark访问elasticsearch的数据
使用spark访问elasticsearch的数据,前提是spark能访问hive,hive能访问es http://blog.csdn.net/ggz631047367/article/detail ...