js 的DOM对象和jQuery对象相互转化demo

最新推荐文章于 2022-06-15 11:14:57 发布

夜光中闪亮的星

最新推荐文章于 2022-06-15 11:14:57 发布

阅读量223

点赞数

分类专栏： web 文章标签： jquery

本文链接：https://blog.csdn.net/qq_15652607/article/details/82813010

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<body>
<script>
//$(document)是将js的DOM对象document转化为jquery 对象，才能调用它的ready方法
$(document).ready(function () {
   //这是一个js的DOM对象
    var btn = document.getElementById("btn");

    //js 里面的onclick是绑定点击事件
    btn.onclick = function () {
        alert("我是btn 的onclic")
    }

    //js 里面的click() 方法，是触发click事件
    btn.click();
});

</script>

<script>
$(document).ready(function () {
    var btn = document.getElementById("btn");

    //将js 的DOM对象用$()包装之后就成为jQuery对象，就可以调用它的传一个回调的click 方法
    $(btn).click(function () {
        alert("DOM对象转化为jQuery对象");
    })
})
</script>

<script>
    $(document).ready(function () {
        //$("button")是一个jQuery 对象,[1]后表示选中第2个button,
          //变为一个DOM对象，然后绑定DOM对象的onclick方法
        $("button")[1].onclick = function () {
            alert("jQuery 对象转化为DOM对象1")
        }

        // 另外一个方式
        $("button").get(0).onclick = function () {
            alert("jQuery对象转换成dom对象2");
        }
    })
</script>

<button id="btn">我是阿牛</button>
<button>我是阿妹</button>

</body>
</html>

夜光中闪亮的星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录