jquery - javascript作用区域不理解的地方请教。

Question

"javascript
/* df 是inport 输入的内容 第5次修改
    $("#name").blur(function () {
    alert(function(){name.val()}); //function(){email.val()}
               alert(name.value);  //undefined
         alert($('#name').val());  //df
         alert($('#name').value);  //undefined
         alert(      this.value);  //df
    alert(function(){this.val()}); //function(){this.val()}
         alert(   $(this).value);  //undefined
         alert(   $(this).val());  //df
});

var email = $("#email");
email.val=email.val();
email.blur(function () {
    alert("email")
    alert(function(){email.val()});//function(){email.val()}
    alert(           email.value); //undefined
    alert(           email.val);   //没有输出...
    alert("$('#email')")
    alert(     $('#email').val()); //df
    alert(     $('#email').val);   //JQ
    alert(     $('#email').value); //undefined
    alert("this")
    alert( function(){this.val()});//function(){this.val()}
    alert(            this.value); //df
    alert(            this.val);   //undefined
    alert(         $(this).val);   //JQ
});
"

alert(email.val);没有输出是不是email也是新的对象？

Answer 1

这跟作用域完全没有关系，是因为你没搞清楚 jQuery 对象和原生 DOM node 的区别。

• $('#email') 和 document.getElementById('email') 是不一样的，前者是包裹了原生 node 对象的 jQuery 对象，后者是才一个原生的node对象。
• .val() 是只有jQuery对象才具有的方法，而 .value 是一个原生的 input node 才具有的属性。这就是为什么 $('#email').value 是 undefined。
• 需要注意的是 document.getElementById('email') 每次返回的都是同一个 node，而每次运行 $('#email')，都会创建并返回一个新的jQuery对象，只是这些 jQuery 对象包裹的是同一个 node。也就是说你的第一个 email 变量和后来的 $('#email') 不是同一个对象，所以你在后者身上自然找不到存在前者身上的 val 这个属性。

Answer 2

本来想给你一大堆文字来解释这其中的原理和背后的意义，但写多了我发现自己都晕了。还是直接给你看代码吧。。。

    function isEmail(data) {
        var reg = new RegExp("^@$");
        if (!reg.test(data)) {
            $("#e_m>p").show("slow");
            return false;
        }
    }
    //新建一个jquery对象，指向ID为email的DOM元素。
    var email = $("#email");
    //更改email（jquery对象）的val值为email的DOM初始的value值。
    //因为这个时候没有在input里输入任何东西，所以获取的肯定是初始值。
    //而初始值就是你在<input>里写的value值。

    //本来val是个获取用户输入的函数，也就是获取input的value值的函数。
    //但这个时候val的被重新确定为一个固定的数值，这个值即为input标签初始的value。
    //所以当标签里value是什么，email.val就是什么了，并且是固定的。
    //之后不管在input里输入什么，都和这个没关系了。
    email.val=email.val();
    email.is=isEmail;
    email.blur(function () {
            //email刚才被赋值为一个jquery对象。
            //而$(email)是根据email所指的DOM重新建立一个jquery对象。
            //也就是说，email和$(email)指向的是同一个东西，但是两个不同的变量。
            //所以，$(email).val()是个函数，他返回的是现在input里的值。
            //而email.val是个变量，他返回的是上面第18行（如果我没数错）里你给他赋的值。
            email.is($(email).val())
            alert(email.val);    //输出时候这里是空的，有设置value时是as
            alert(email.value);  //输出undefind，有设置value时是as
        });

Answer 3

总结就是尽量保持一种风格不要随便混用