码迷,mamicode.com
首页 > Web开发 > 详细

jQuery小技巧(三)

时间:2015-12-24 00:17:13      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

13.检测鼠标的左键、右键

 $(function(){
        $(‘#XY‘).mousedown(function(e){
            alert(e.which); // 1=左键,2=中键,3=右键
        })
    })

14.回车提交表单

$(function(){
        $(‘input‘).keyup(function(e){
            if(e.which == ‘13‘){
                alert(‘回车提交!‘);
            }
        })
    })

15.设置全局Ajax参数

$(function(){
        $(‘#load‘).ajaxStart(function(){
            showLoading(); //显示loading
            disableButtons(); //禁用按钮
        });
        $(‘#load‘).ajaxComplete(function(){
            hideLoading(); //隐藏loading
            enableButtons(); //启用按钮
        });
    })

16.获取选中的下拉框

$(function(){
       //var val = $(‘#select‘).find(‘option:selected‘).val();
        var val = $(‘#select option:selected‘).val();
        alert(val);
    })

17.切换复选框

$(function(){
       var tog = false;
        $(‘button‘).click(function(){
            $(‘input[type=checkbox]‘).attr("checked",!tog);
            tog = !tog;
        })
    })

18.使用siblings()来选择同辈元素

    //方法1
        $("#nav li").click(function () {
            $("#nav li").removeClass(‘bg‘);
            $(this).addClass(‘bg‘);
        })

        //方法2:使用siblings()
        $("#nav li").click(function () {
            $(this).addClass(‘bg‘)
                    .siblings().removeClass(‘bg‘);
        })
    })

19.个性化链接

$(function(){
        $("a[href$=‘red‘]").addClass(‘bgRed‘); //a以 "red" 结尾的所有元素
        $("a[href$=‘green‘]").addClass(‘bgGreen‘);
        $("a[href$=‘blue‘]").addClass(‘bgBlue‘);
    })

20.在一段时间之后自动隐藏或关闭元素

$(function(){
        setTimeout(function(){
            $(‘.div1‘).fadeOut()
        },3000);

        //1.4版本后可用delay()来实现
        $(‘.div2‘).delay(3000).fadeOut();
    })

21.使用Firefox或Firebug来记录事件日志

//$(‘#someDiv‘).log(‘div‘);
jQuery.log = jQuery.fn.log = function(msg){
            if (console){
                console.log("%s: %o", msg, this)
            }
            return this;
        }

 

jQuery小技巧(三)

标签:

原文地址:http://www.cnblogs.com/oltra/p/5071587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!