jquery 小技巧
来源:互联网 发布:java链接oracle数据库 编辑:程序博客网 时间:2024/05/01 07:26
1 使用load加载
可以使用load去加载外部文件
2 让用户自由的改动字体
3 在新窗口中打开连接
4 禁止右键
5 快速将用户从底部带到顶部
可以使用load去加载外部文件
- <!-- File name index.html -->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
- libs/jquery/1.7.1/jquery.min.js"></script>
- <title>Load external files with jQuery Demo</title>
- <style type="text/css">
- .load_files {
- padding: 5px;
- font-weight: bold;
- background-color: #A9F5A9;
- border: solid #333333 1px;
- cursor: pointer;
- }
- /* 装载中的图片*/
- .loading {
- width: 20px;
- height: 20px;
- background-image: url('loader.gif');
- display: none;
- }
- </style>
- <script type="text/javascript">
- $(function() {
- $(".load_files").click(function() {
- $(this).hide();
- /*当点加载按钮时,显示加载的图案*/
- $(".loading").show();
- $(".loaded_files").load('external.html', function() {
- //加载完毕隐藏加载图形 $(".loading").hide();
- });
- });
- });
- </script>
- </head>
- <body>
- <h2>Load external files with jQuery</h2>
- <button class="load_files">
- Load Files
- </button>
- <div class="loading"></div>
- <div class="loaded_files"></div>
- </body>
- </html>
2 让用户自由的改动字体
- $(document).ready(function() {
- //获得当前字体大小
- var originalFontSize = $('html').css('font-size');
- //增加字体大小
- $(".increaseFont").click(function() {
- var currentFontSize = $('html').css('font-size');
- var currentFontSizeNumber = parseFloat(currentFontSize, 10);
- //设置新的字体大小
- var newFontSize = currentFontSizeNumber*1.2;
- $('html').css('font-size', newFontSize);
- return false;
- });
- //减少字体大小
- $(".decreaseFont").click(function() {
- var currentFontSize = $('html').css('font-size');
- var currentFontSizeNum = parseFloat(currentFontSize, 10);
- var newFontSize = currentFontSizeNum*0.8;
- $('html').css('font-size', newFontSize);
- return false;
- });
- //重新恢复字体大小
- $(".resetFont").click(function(){
- $('html').css('font-size', originalFontSize);
- });
- });
3 在新窗口中打开连接
- $(document).ready(function() {
- $("a[href^='http']").attr('target','_blank');
- });
4 禁止右键
- //check that the DOM is ready
- $(document).ready(function() {
- //catch the right-click context menu
- $(document).bind("contextmenu",function(e) {
- //warning prompt - optional
- alert("No right-clicking!");
- //cancel the default context menu
- return false;
- });
- });
5 快速将用户从底部带到顶部
- $(document).ready(function() {
- //when the id="top" link is clicked
- $('#top').click(function() {
- //scoll the page back to the top
- $(document).scrollTo(0,500);
- }
- });
原文参考:http://jackyrong.iteye.com/blog/1420784 尊重原创
- jquery小技巧
- jquery使用小技巧
- jquery使用小技巧
- Jquery使用小技巧
- jQuery小技巧
- jquery 使用小技巧
- jquery 小技巧
- jquery 小技巧
- Jquery使用小技巧
- Jquery小技巧
- jQuery使用小技巧
- JQuery小技巧
- 小技巧,jquery
- jquery小技巧
- jQuery 小技巧
- jQuery 小技巧
- jQuery 小技巧
- jQuery 小技巧
- AndroidNDK开发之“文件操作”
- hdu1026和hdu1242
- 链接器都干了些什么?
- 互动网最新图书活动!
- linux sed应用收集
- jquery 小技巧
- DataTable各种方法总结(给Datatable添加行列、DataTable选择排序等
- 推荐13款JavaScript图形和图表绘制工具
- 利用python线程编程实现生产者与消费者关系
- TRAC 以及 nexus
- 关于LDO芯片的选型问题
- 关于PE文件格式中IMAGE_OPTIONAL_HEADER.FileAlignment的一些说明
- CReg类轻松读取注册表
- 基于 Android NDK 的学习之旅-----目录