jQuery随手记（1）

1、禁用右键菜单：使用jq的contextmenu函数

$(document).ready(function(){  
    $(document).on("contextmenu",function(e){  
        alert("禁止使用右键菜单");
        return false;  
    });  
$(document).contextmenu(function(){
        alert("禁止使用右键菜单");
        return false
})

contextmenu函数规定右键点击元素时出现的上下文菜单，移除contextmenu函数使用.off(“contextmenu”)；

2、新窗口打开链接：

$('a[href^="https://"]').attr("target", "_blank");  

和在html中增加target属性是相同的

• 首 页

3、将p放置在屏幕中央

$(document).ready(function() {
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    };
    //use
    $(window).resize(function(){
        $(".wrap").center()
    })
        .resize()
        .scroll(function(){
            $(this).trigger("resize")
    });
});

(window).width()是浏览器窗口尺寸，(window). scrollTop ()为滚动条偏移的尺寸，
将功能封装为对象方法插件，并且关联到resize和scroll事件上，实现p的实时居中；

4、获得鼠标输入的左右键或者键盘的按键：

$(document).keyup(function(e){
    alert(e.which) //13是回车
})
$(document).mousedown(function(e){
    alert(e.which) 
})

5、下拉框选中用selected，多选框选中用checked

function getObj(){
   var $obj = $('#someElement').find('option:selected');
   alert( $obj.val() );
}

6、切换复选框，引入了一个布尔属性变并取反，tog=!tog

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

7、在一段时间后执行某种操作，可以使用setTimeOut，也可以使用jq的delay方法

$(document).ready(function(){  
   $("button").click(function() {
      $("p").slideUp(300).delay(3000).fadeIn(400);
    });
   /*
   //这是1.3.2中我们使用setTimeout来实现的方式
   setTimeout(function() {
      $('p').fadeIn(400)
   }, 3000);
   */
   //而在1.4之后的版本可以使用delay()这一功能来实现的方式
   //$("p").slideUp(300).delay(3000).fadeIn(400);
});

8、为动态追加的元素绑定事件

$(document).ready(function(){  
   // 为table里面的td元素绑定click事件，不管td元素是一直存在还是动态创建的
   $("table").on("click","td",function(){ 
   　　$(this).toggleClass("hover"); 
   });

});

9、改变函数上下文，改变this的指向

&.proxy接受一个已有函数，返回一个带特定上下文的新的函数；

语法①：使用context代替function中的上下文语境（this）

&(selector).proxy(fuction,context)

语法②：使用context代替name这个函数中的上下文语境（this）

&(selector).proxy(context,name)

例子1：

$(".wrap").click(function(){
    setTimeout(function(){
        alert($(this).attr("class"));
    })
})

this指向setTimeOut函数内部的环境，并非指向(“.wrap”)，想要更改this指向(“.wrap”)，通常的做法是：

$(".wrap").click(function(){
    var that=this;
    setTimeout(function(){
        alert($(that).attr("class"));//与alert($(".wrap").attr("class"))相同
    })
})

使用jq的&.proxy函数：

$(".wrap").click(function(){
    setTimeout($.proxy(function(){
            alert($(this).attr("class"))
        },this)
    )}
);

例子2：

var obj={
    type:"person",
    test:function(){
        alert(this.type)
    }
};
$(".wrap").click(obj.test);//此时this指向$(".wrap"),结果是undefined;

上面的this指向的是$(“.wrap”)，和下面的语句是相同的：

$(".wrap").click(function(){
    alert(this.type); 
});

想要将this指向obj，处理方法①，将obj.test的上下文环境由$(“.wrap”)更改为obj：

$(".wrap").click($.proxy(obj.test,obj))//此时this指向obj,结果是person;

处理方法②，obj作为上下文环境，后面是函数名：

$(".wrap").click($.proxy(obj,"test"));//此时this指向$(".wrap"),结果是undefined;

例子3：

$('#panel').fadeIn(function(){
    // Using $.proxy :
    $('#panel button').click($.proxy(function(){
        // this 指向 #panel
        $(this).fadeOut();
    },this));
});

10、打断点：

1、脚本面板，行数位置单击建立断点，右侧监控面板可以查看变量，F8继续执行，F11单步进入，Shift+F11继续执行至下一断点

2、在需要的位置右键，添加条件断点，当表达式为真时程序在此处停止；