谈谈jquery获取的对象与document对象的区别

引出问题

我做了一个登陆界面,想要实现一个点击验证码可以更换验证码图片的操作,所以我使用jquery做了如下操作

$(function (){
    $("img#checkcode").click(
        function () {
            var img = $('img#checkcode');
            img.src="/test/checkcode?"+new Date().getTime();
})});

看着这个仿佛是对的?当然啦,我也感觉。但是实际上,我通过使用alter输出,并没有发现属性src的值被更换,当我尝试改成下面这一句时

$(function (){
    $("img#checkcode").click(
        function () {
           <!-- var img = $('img#checkcode'); -->
            var img=document.getElementById("checkcode");
            img.src="/test/checkcode?"+new Date().getTime();
})});

发现输出的src值已经发生更改了,这就让我疑惑万分了。

分析/解决问题

这时候我们就要重新去看看这中方式获取到的对象是什么。
经查阅资料知:jquery获取到的对象是不能执行DOM方法的,也就是说它就不能满足我刚刚的做法,而我们直接使用document获取到的是DOM对象
所以要通过jquery使用DOM的方法是:转换对象:

<!--使用get方法可以转换-->
var img=$('checkcode').get(0);

这样就能愉快的操作DOM对象了

你可能感兴趣的:(一些小坑,web前端基础)