jQuery对象与DOM对象之间的转换

最新推荐文章于 2023-06-15 00:39:03 发布

darling.0

最新推荐文章于 2023-06-15 00:39:03 发布

阅读量249

点赞数 1

分类专栏： web前端文章标签： jquery dom 转换

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53744656

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
    <script src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //如果想要写在上面使用dom时用的是：
        //window.onload=function(){
        //var user = document.getElementById("username");
        //user.onclick=function(){}
        //}

        //如果想要写在上面，使用jQuery时用的是：
        $(document).ready(function(){
            var user = document.getElementById("username");
        });
    </script>
<body>
    <input type="text" id="username" value="jack"/>
    <script type="text/javascript">
        //dom方式获取文本框对象：使用的是dom的api
        var user = document.getElementById("username");

        //把dom对象转成jQuery对象：使用jQuery提供的类库
        //规范：jQuery对象的变量名通常以$开头,可以不写$，但是规范要写
        var $username = $(user);
        alert($username.val());
        //把jQuery对象转成dom对象
        //jQuery每部使用数组来存储
        var un = $username[0];
        alert(un.value);
        //把jQuery对象转成dom对象,使用jQuery提供的get()方法
        var usern = $username.get(0);
        alert(usern.value);

    </script>
</body>
</html>