H5+CSS3-----第二天

最新推荐文章于 2024-10-20 21:40:17 发布

Dreamer_Ji

最新推荐文章于 2024-10-20 21:40:17 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/Dreamer_Ji/article/details/107387274

版权

表单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/formCss.css">
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="userName">姓名：</label>
            <input type="text" name="userName" id="userName" placeholder="请输入用户名">
            <label for="userPhone">手机号码：</label>
            <input type="text" name="userPhone" id="userPhone" >
            <label for="userUrl">邮箱地址：</label>
            <input type="text" name="userUrl" id="userUrl" >
            <label for="usercollage" >所属学院：</label>
            <input type="text" name="usercollage" id="usercollage" list="userList" placeholder="请选择">
            <datalist id="userList">
                <option value="信息技术与工程学院"></option>
                <option value="旅游学院"></option>
                <option value="会计学院"></option>
            </datalist>
            <label for="userScore">入学成绩：</label>
            <input type="number" name="userScore" id="userScore" max="100" min="0" value="0">
            <label for="userLevel">基础水平：</label>
            <meter id="userLevel" max="100" min="0" high="85" low="59"></meter>
            <label for="userInSchool">入学日期：</label>
            <input type="date" name="userInSchool" id="userInSchool">
            <label for="userOutSchool">毕业日期：</label>
            <input type="date"name="userOutSchool" id="userOutSchool">
            <input type="submit" value="提交">
        </fieldset>
        <script >
            document.getElementById("userScore").oninput=function(){
                document.getElementById("userLevel").value=document.getElementById("userScore").value;
            }
        </script>
    </form>
</body>
</html>

运行结果：

基础水平会随着成绩的变化而变化。
在这里插入图片描述

获取dom元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="first">java</li>
        <li class="second">javascript</li>
        <li id="third">html</li>
    </ul>
    <script>
        window.onload=function(){
            // 索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加的
            //query：查询 Selector：选择器 querySelector（传入选择器的名称）
            //如果是类选择器，选择器名称要加上“.”,如果是id选择器，要加上“#”，否则当成标签处理
            var firstLi=document.querySelector("li");//获取li标签，因为获取的是单数元素，当满足条件的不止一个的时候只能返回符合的第一个li标签
            console.log(firstLi);
            var Li1=document.querySelector(".first");
            console.log(Li1);
            var Li3=document.querySelector("#third");
            console.log(Li3);
            //querySelectorAll获取满足条件的所有元素---数组
            var allLi=document.querySelectorAll("li")[0];
            console.log(allLi);
        }
    </script>
</body>
</html>

运行结果：

在这里插入图片描述

自定义属性：

定义
1.data- 开头
2.data- 后面必须至少有一个字符，多个单词使用“-”连接起来
建议：
1.名称应该都使用小写----不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要有纯数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p data-school-name="itcast"></p>
    <script>
        window.onload=function(){
            //获取自定义是属性值
            //将data- 后面的单词必须使用camel（驼峰）命名法连接
            var p=document.querySelector("p").dataset["schoolName"];//实际进行获取的时候是解析成这个data-school-name来获取
            console.log(p);
        }
    </script>
</body>
</html>

运行结果：

在这里插入图片描述