jQuery-查询DOM信息

作者: 测试探索 | 来源:发表于2022-07-03 08:44 被阅读0次

jQuery-查询DOM信息
jQuery-修改DOM信息
jquery常用
jquery设计思想书目录
jquery-操作DOM
源码
Dom查询
DOM查询
dom查询
DOM轻松学习之旅（一）

一、查询DOM信息

image.png

二、代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询DOM信息</title>
    <link rel = "stylesheet" href="">
    <script src = ./js/jquery-3.4.1.min.js type = "text/javascript"></script>
</head>
<body>
    <input type = "text" name="username" id = "username" class = "input-text" my-user="张三" value="我的用户名">
    <input type = "password" name="password" >

    <p class="area city">广州</p>
    <p style="color:#f00;">深圳</p>
    <p class="area">长沙</p>
    <p class="area" id = 'beij'>北京</p>

    <p class="info" id = "info">
        查看详细
        <span>内容：</span>
        <small>文字描述</small>

    </p>

    <script>
        $(document).ready(function(){
            //class属性
            var cls = $("#username").attr("class");
            console.log("class:",cls);
            //type属性
            var tps = $("#username").attr("type");
            console.log("type:",tps);
            //自定义属性
            var user = $("#username").attr("my-user");
            console.log("my-user:",user);

            //查询html信息
            var htmlContent = $("#info").html();
            console.log("Html:",htmlContent);

            //查询text的信息
            var textContent = $("#info").text();
            console.log("Text:",textContent);

            //查询表单信息
            var inputUsername = $('#username').val();
            console.log('inputUsername:',inputUsername);

            //jQuery对象转换成DOM对象
            var username = $('#username');
            console.log('username jquery',username);

            //dom对象
            console.log('username dom',username.get());
            console.log('username dom',username.get()[0].value);

        })
    </script>
</body>
</html>

运行结果