2017.07.07 jQuery随手记

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^="http://"]').attr("target", "_blank");  

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

<li><a href="#" target="_blank">首 页</a></li>

3、将div放置在屏幕中央

$(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事件上，实现div的实时居中；

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() {      $("div").slideUp(300).delay(3000).fadeIn(400);    });   /*   //这是1.3.2中我们使用setTimeout来实现的方式   setTimeout(function() {      $('div').fadeIn(400)   }, 3000);   */   //而在1.4之后的版本可以使用delay()这一功能来实现的方式   //$("div").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、在需要的位置右键，添加条件断点，当表达式为真时程序在此处停止；

11、JQ无法获得隐藏元素（display：none）宽度和高度

解决方法1：用visibility:hidden来代替display:none，由于visibility:hidden占用物理空间，因此可以获取宽高;

解决方法2：使用JQ插件jQuery Actual，使用('#someElement').actual('width')的方式来代替(‘#someElement’).width()就可以了，兼容性也十分出色，可以兼容IE6浏览器，压缩后体积只有1.1K也是一大亮点，更牛的是还支持inner和outer的计算。

12、children和find的区别

children获取的是该元素的直接下级元素，而通过find获取的是该元素的下级所有元素

13、jquery.simplemodal插件

13.1调用

SimpleModal提供了两种简单方法来调用模式窗口。

第一种方法是作为一人链式的jQuery函数。你可以在一个用jQuery获取的元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口。比如：

$("iframe").modal({opstions})

第二种方法是作为一个单独函数使用。通过传递一个jQuery对象，DOM元素或纯文本（可以包含HTML）来创建一个模态窗口。比如：

$.modal("<div><h1>SimpleModal<h1></div>");

百度静态资源公共库（：http://cdn.code.baidu.com/）提供了此插件的地址；

13.2关闭

SimpleModal自动为模式窗口内class是“simplemodal-close”的元素绑定了关闭函数。所以只要在HTML中添加如下代码就可以关闭窗口：

<button type="button" class="simplemodal-close">关闭</button>// 或者<a href="#" class="simplemodal-close">关闭</a>

也可以通过调用$.modal.close()的方式关闭当前打开的窗口；

13.3样式

SimpleModal设置模态窗口的ID默认值是siimplmodal-container，通过这个钩子可以再CSS内设置各种样式；

窗口默认至于屏幕中央，除非设置了position参数；

13.4常用选项

position：定义位置，数组里可以放入两个参数，指定top，left的值，只有一个时，指定top；
overlayId: 指定simpleModal框架自动创建的div的id名，你将获得控制权，注意，你需要手动的加上这个样式，最好在给他指定一个非白色的背景色

opacity：遮罩层的透明度，100为不透明；

overlayClose: 设置为ture时代表单击遮罩层也可以关闭模态窗口；

http://www.cnblogs.com/nayitian/p/3386332.html

http://www.jb51.net/article/91594.htm