在js高程中HTML事件里有这么一个新事件,contextmenu,即上下文菜单。通过单击鼠标右键可以调出上下文,就像我们在网页中使用右键弹出菜单一样,js中可以通过contextmenu实现这一功能。先来看看效果:

(在红色区域点击鼠标右键弹出菜单,点击其他红色区域取消菜单)

继续阅读

这是之前一直都很混淆的东西,今天有时间,顺便整理一下:

(以下图片都可点击后看大图!)

1、clientX、clientY

首先是clientX、clientY,是获取客户区坐标的位置,不太好理解,看下这个图就秒懂了:
clientX

无论有没有滚动条,无论滚动条向下滚动了多少,clienX、clientY永远获取的是框中的坐标的位置。

继续阅读

1.事件委托

这个经常会用到,比如有很多个li,我们把事件委托在ul上,这样无论li增加或减少,都会绑定到事件。

有个比较形象的比喻来形容事件委托:有三个人预计会在周一收到快递,有两种方法:第一:每个人都到公司门口等快递;第二:委托给前台MM带领快递。当然,第二种方法是我们经常会用到的方法,也就是事件委托。

jquery有bind(),live(),delegate(),on()来实现事件委托,我最近经常使用on(),用法如下:

$("div").on("click","a",function(){
  //some code
})

.on()方法还可以接收一个data参数,表示触发事件时传递给事件的参数。
下面的例子便用了事件委托。

2.jquery $("").each()方法

each()提供了遍历元素的一种方法,比如我想实现三个按钮,背景色切换的效果,就可以这样去做:

$("div").on("click","a",function(e){
  self = $(this)
  $("a").each(function(){
    if($(this).hasClass("active")){
        $(this).removeClass("active")
    }
  })
  if(!self.hasClass("active")){
    self.addClass("active")
  }
})

当然还有很多其他的方法,下面这个更简洁:

$("div").on("click","a",function(e){
  $(this).addClass("active").siblings().removeClass("active");
})

测试:

继续阅读

以前对js的了解很少,看到this相关的文章的时候会看不懂,现在随着逐渐对js的学习深入,一些之前认为比较困难的现在再去看,已经不在那么难以理解。

今天转载一篇js关于this的文章,写的很全面并且易于理解,最起码自己看懂并理解了~~

首先看看下面两个对this的概括:

this是执行上下文(Execution Context)的一个重要属性,是一个与执行上下文相关的特殊对象。因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下文中被触发的对象)。

继续阅读

(function(){})()

解释:()是最高级别的,一个匿名函数,加上一个马甲,就能立马飞起来。

匿名函数

那么什么是匿名函数?从字面上去解释很简单,没有名字的函数就叫做匿名函数。

举个栗子:我们平时定义函数是这样的:


function abs(){
    //code
}

也可以有带参数,有返回值:


function abc(a){
    return a;
}

那么下面我们来创建一个没有名字的函数:


function(){
    //code
}

继续阅读

js闭包浅理解

要理解闭包,得先知道js的变量作用域,在js中,有两种变量作用域:

  • 全局作用域
  • 局部作用域

一、在函数内可以访问全局变量

比如,下面的例子:

<script>
    var n = 100;
    function f1(){
        console.log(n);
    }
    f1()//返回100
</script>

继续阅读

JavaScript中的属性操作

一、原型链

在js中,任何一个对象都有一个prototype属性,在js中记做:proto

比如,我们创建一个对象:

var foo = {
    x:1,
    y:2
}

虽然看起来我们只为foo对象创建了两个属性,实际上,它还有一个属性proto,如图:

即使我们不定义proto,在js中也会预留一个属性。

如果我们定义一个空对象,foo

foo = function(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x = 1;
obj.y =2;
//运行结果
obj //结果是:foo {x: 1, y: 2, z: 3}

继续阅读

今天在写一站式纳新系统的时候,需要用到全选与全部选的功能

一站式纳新系统123.youthol.cn

本来想通过jquery来写,这样可能会简单一些,大家可以看看下面的代码

$(function() {
    $("#checkall").click(function() {
        $("input[@name='checkname[]']").each(
            function() {
                $(this).attr("checked", true);
            });
        });
    $("#delcheckall").click(function() {
        $("input[@name='checkname[]']").each(
            function() {
                $(this).attr("checked", false);
            });
        });
});
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" /></pre>

或者更简单的写法:

$("#checkall").click(
    function(){
        if(this.checked){
            $("input[name='checkname']").attr('checked', true)
        }else{
            $("input[name='checkname']").attr('checked', false)
        }
    }
);

但是不可否认的是,这些字母依然很多

下面是js原生的

<script type="text/javascript"> 
/**
* 全选
* 
* items 复选框的name
*/
function allCkb(items){
    $('[name='+items+']:checkbox').attr("checked", true);
}

/**
* 全不选
* 
*/
function unAllCkb(){
    $('[type=checkbox]:checkbox').attr('checked', false);
}

/**
* 反选
* 
* items 复选框的name
*/
function inverseCkb(items){
    $('[name='+items+']:checkbox').each(function(){
    //此处用jq写法颇显啰嗦。体现不出JQ飘逸的感觉。
    //$(this).attr("checked",!$(this).attr("checked"));

    //直接使用js原生代码,简单实用
        this.checked=!this.checked;
    });
}
</script>

别看比较多,但把注释去掉真的不剩什么了。

把表单补充上,就可以了。

<input type='checkbox' name='ckb' value="0"/>白羊座
<input type='checkbox' name='ckb' value="1"/>狮子座
<input type='checkbox' name='ckb' value="2"/>水瓶座
<input type='checkbox' name='ckb' value="3"/>射手座<br/>
<input type="button" onclick="allCkb('ckb')" value="全 选"/>
<input type="button" onclick="unAllCkb()" value="全不选"/>
<input type="button" onclick="inverseCkb('ckb')" value="反 选"/></pre>