DOM对象和JQuery对象之间的互相转换以及常用方法

最新推荐文章于 2022-05-01 22:42:29 发布

一只极度渴望成长的Giser

最新推荐文章于 2022-05-01 22:42:29 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript、JQuery练习文章标签： DOM对象和JQuery对象之间的互相转换以及常用方法

本文链接：https://blog.youkuaiyun.com/qq_32077521/article/details/99704371

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了如何在JavaScript中进行DOM对象与JQuery对象的互相转换，并演示了使用JQuery进行元素选择、样式修改和HTML内容替换的具体操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <input type="button" id="btn1" value="添加文字" />
    <div id="div1"></div>
    <a href="DOM对象和JQuery对象之间的互相转换.html" id="a1">百度</a>
    <script type="text/javascript">
        $(function () {
            //DOM对象只能访问自己的成员，JQuery对象也只能访问自己的成员
            $('#btn1').click(function () {
                //获得DOM对象
                var domObj = document.getElementById('div1');
                domObj.innerText = '你好世界！';
                //将DOM对象转换成JQuery对象
                var $Obj = $(domObj);
                $Obj.text('hello world!');//在JQuery对象中设置包含文字的方法是text();
                //将JQuery对象转换成DOM对象
                var domObj2 = $Obj[0];//或者  domObj2=$Obj.get(0); 这两种方式都可以将JQuery对象转换成DOM对象
                domObj2.innerText = '你好 world!';
            });
            //JQuery对象的获取和设置值的方法val()
            alert($('#btn1').val());
            $('#btn1').val("重新设置了值");
            //JQuery对象设置样式的方法css()
            $("#div1").css({
                "width": "400px",
                "height": "400px",
                "backgroundColor": "blue"
            });
            //JQuery对象的html()方法     
            //设置超链接的热点文字为一张照片
            $("#a1").html('<img src="images/1.gif" />');
        });
    </script>
</body>
</html>