• jquery 常用代码


    1、下拉菜单的制作方法

                    $('#nav .nav >li').mouseover(function(){
                        $(this).children('ul').show();
                    }).mouseout(function(){
                        $(this).children('ul').hide();
                    })

    2、输入框的文字提示

        var tmp;  
        $('.user').focus(function(){
            tmp = $(this).val();
            if($(this).val() == '用户名')
              $(this).val('');
        }).blur(function(){
            if($(this).val() == '')
              $(this).val(tmp);
        })

     说明:1、如果不输入还是会显示为提示字符

         如果输入了就不会再消失

    3、一个技巧,显示当前的菜单状态

    <script type="text/javascript">
        var key = "home";  //使用<php? echo $key; >
        $("#"+key).addClass('active');
    </script>

     4、文本框加减,如果使用了html5 的number直接就可以了

                    $(function(){
                    //获得文本框对象
                    var t = $("#text_box");
                    //数量增加操作
                    $("#add").click(function(){        
                        t.val(parseInt(t.val())+1)
                        if (parseInt(t.val())!=1){
                            $('#text_box').attr('disabled',false);
                        }
                    })    
                    //数量减少操作
                    $("#min").click(function(){
                        t.val(parseInt(t.val())-1);
                        if (parseInt(t.val()) <=0){
                            //节点操作
                            t.val(1);
                        }
                    })
                })

     5、unload请求一次数据

    2中方法

      1、设置ajax为同步

      2、使用open window会浏览器拦截,

            var i = new Image(1,1); 
            i.src='url';

    上面这种方法很巧妙

    智能浮动的jquery 插件

            $.fn.smartFloat = function() {
                var position = function(element) {
                    var top = element.position().top, pos = element.css("position");
                    $(window).scroll(function() {
                        var scrolls = $(this).scrollTop();
                        if (scrolls > top) {
                            if (window.XMLHttpRequest) {
                                element.css({
                                    position: "fixed",
                                    top: 0
                                });    
                            } else {
                                element.css({
                                    top: scrolls
                                });    
                            }
                        }else {
                            element.css({
                                position: "absolute",
                                top: top
                            });    
                        }
                    });
                };
                return $(this).each(function() {
                    position($(this));                         
                });
            };
            $(".sp-list").smartFloat();

     获取radio值的方法

    var ck = $("input[name='ck']:checked").val()
    

    多文件文件上传的插件

    官方demo

    http://blueimp.github.io/jQuery-File-Upload/

    5、自适应内容宽度

    (function ($) {
      var loadImg = function (url, fn) {
        var img = new Image();
        img.src = url;
        if (img.complete) {
          fn.call(img);
        } else {
          img.onload = function () {
            fn.call(img);
            img.onload = null;
          };    
        };
      };
    
      $.fn.imgAutoSize = function (padding) {
        var maxWidth = this.innerWidth() - (padding || 0);
        return this.find('img').each(function (i, img) {
          loadImg(this.src, function () {
            if (this.width > maxWidth) {
              var height = maxWidth / this.width * this.height,
                width = maxWidth;
              img.width = width;
              img.maxHeight = height;
            };
          });
        });
      };
    })(jQuery);    

    6、一个相当简单的语音搜索技巧

    <input type="text" class="text" name="value_2" id="value_2" x-webkit-speech>

    就可以实现语音搜索,当然只是web-kit浏览器 

  • 相关阅读:
    Systemd 进程管理器
    Fedora 15 LoveLock的新特性
    fedora 15 iso 硬盘安装
    Linux权限360度赤裸裸华丽丽大曝光连载之二:SetUID
    Linux下socket设置为非阻塞方式和fcntl系统调用
    linux 磁盘 空间 不足 符号链接
    U盘成功安装REHL 6.1
    IT公司中最流行的10种编程语言
    C会否像汇编一样退居幕后?
    白宫决策捕杀拉登现场照片公布
  • 原文地址:https://www.cnblogs.com/linksgo2011/p/3025647.html
Copyright © 2020-2023  润新知