zoukankan      html  css  js  c++  java
  • 开发中可能会用到的几个 jQuery 小提示和技巧

    1、禁止右键

      

    $(document).ready(function() {
        //catch the right-click context menu
        $(document).bind("contextmenu",function(e) {                
            //warning prompt - optional
            alert("No right-clicking!");
     
            //delete the default context menu
            return false;
        });
    });
    

     2、文本缩放

    $(document).ready(function() {
        //find the current font size
        var originalFontSize = $('html').css('font-size');
     
        //Increase the text 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;
        });
     
        //Decrease the Text Size
        $(".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;
        });
     
        // Reset Font Size
        $(".resetFont").click(function(){
        $('html').css('font-size', originalFontSize);
      });
    });
    

     3、新窗口打开连接

    $(document).ready(function() {
        //select all anchor tags that have http in the href
        //and apply the target=_blank
        $("a[href^='http']").attr('target','_blank');
    });
    

     4、样式表切换

    $(document).ready(function() {
        $("a.cssSwap").click(function() {
            //swap the link rel attribute with the value in the rel   
            $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
        });
    });
    

     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);
        }
    });
    

     6、获取鼠标的 X、Y 坐标

    $(obj).mousemove(function(e){
        //display the x and y axis values inside the P element
        $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
    });
    

     7、检测当前鼠标的坐标

    $(document).ready(function() {
        $(obj).mousemove(function(e){
        $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
    });
    
  • 相关阅读:
    数据类型装换
    变量及数据类型
    27 网络通信协议 udp tcp
    26 socket简单操作
    26 socket简单操作
    14 内置函数 递归 二分法查找
    15 装饰器 开闭原则 代参装饰器 多个装饰器同一函数应用
    12 生成器和生成器函数以及各种推导式
    13 内置函数 匿名函数 eval,exec,compile
    10 函数进阶 动态传参 作用域和名称空间 函数的嵌套 全局变量
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/3585889.html
Copyright © 2011-2022 走看看