python---Web前端之JavaScript

最新推荐文章于 2023-03-27 20:10:38 发布

CodingAndCoCoding

最新推荐文章于 2023-03-27 20:10:38 发布

阅读量196

点赞数

分类专栏： Web前端 Python

本文链接：https://blog.csdn.net/Wangtuo1115/article/details/104382772

版权

Python 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

Web前端

5 篇文章 0 订阅

订阅专栏

1、基本语法

定义变量：var 变量名=‘value’；
判断相等？
== :值是否相等？
===:类型和值是否相等
判断语句
if(条件){
满足条件做的事情
}else{
不满足条件做的事情
}
for循环
for(var i = 0;i < count; i++){
循环做的事
}
函数定义
function 函数名（形参1，形参2）{
return 返回值；
}
JavaScript事件：
onsubmit - - - - 提交事件
onclick - - - - 点击事件
onfocus - - - -聚焦事件
onblur - - - - 离焦事件
onchange - - - - 当对象内容改变时执行的内容

2、DOM（document object model）
document.getElementsByName - - -返回的是一个列表对象
document.getElementById - - -返回的是一个元素对象
document.createTextNode - - - -创建文本节点
document.createElement - - - - 创建子节点对象
NodeObj.appendChild - - - - 子节点对象的添加

innerHTML - - - - 当前标签对象里面嵌套的html信息
value - - - - 用户输入的信息值
src - - - - 获取图片的路径，通过赋值方式实现修改图片的路径
checked - - - - 判断当前多选框是否被选中

3、案例代码

用户登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm( ) {
            //获取当前用户提交的用户名，默认情况下getElementsByName返回列表对象，value获取对象里面的值
            var username = document.getElementsByName('username')[0].value;
//            判断用户名是否为空，如果是空，报错
            if (username === ''){
            //        == '5' == 5 true  只比较值是否相等
            //        === '5' === 5 false 比较值和类型是否相等
                alert("用户名为空");
            }

//            判断密码的长度是否大于6，如果不大于6，进行报错
//            var password = document.getElementsByName('password');
            var password = document.getElementById('pwd').value;
            var pwd_length = password.length;
            if (pwd_length < 6){
                alert("密码的长度小于6位")
            }

        }
    </script>
</head>
<body>

<div>
    <h1>用户登录</h1>
    <!--
        当提交登录信息时，执行函数checkForm实现用户的校验
        事件类型：onsubmit
    -->
    <form action="#" method="get" onsubmit="return checkForm( )">
        <input type="text" name="username" placeholder="用户名"><br>
        <input type="password" name="password" placeholder="密码" id="pwd"><br>
        <input type="submit" value="登录">
    </form>
</div>
</body>
</html>

在这里插入图片描述

聚焦和离焦事件（用户登录校验改进版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function showUserTips() {
            var usertipObj = document.getElementById('usertips');
            usertipObj.innerHTML = '<span style="color: gray">用户名长度应大于2</span>';
        }
        function checkUser() {
            //获取当前用户提交的用户名，默认情况下getElementsByName返回列表对象，value获取对象里面的值
            var username = document.getElementsByName('username')[0].value;
//            判断用户名是否为空，如果是空，报错
            var usertipsObj = document.getElementById('usertips');
            if (username.length <= 2){
                usertipsObj.innerHTML = '<span style="color: red">用户名长度应大于2</span>';
            }
            else {
                usertipsObj.innerHTML = '<span style="color:green">OK</span>'
            }
        }
    </script>
</head>
<body>
<div>
    <h1>用户登录</h1>
    <form action="#" method="get" >
        <!--onfocus聚焦事件,如果聚焦，执行函数showUserTips（）-->
        <input type="text" name="username" placeholder="用户名" id="user" onfocus="showUserTips()" onblur="checkUser()">
        <span id="usertips"></span><br>
        <input type="password" name="password" placeholder="密码" id="pwd"><br>
        <input type="submit" value="登录">
    </form>
</div>
</body>
</html>

在这里插入图片描述

基于onclick实现图片的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var count = 1;
        function changImg() {
            count += 1;
            //获取图像对象
            var imgObj = document.getElementById('img');
            imgObj.src = count + '.jpg';

            if(count === 5){
                count = 0;
            }

        }
    </script>
</head>
<body>
<div>
    <img src="1.jpg" id="img"><br>
    <!--当用户点击按钮时，切换图片到下一个-->
    <input type="submit" value="下一页" onclick="changImg()">
</div>
</body>
</html>

实现表格的全选和不全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
//            1、获取全选框对象
            var checkAllEle = document.getElementById('checkAll');
//            2、获取当前的状态,如果返回的是true，则代表选中，否则未选中
//            alert(checkAllEle.checked);
            var checkOnes = document.getElementsByName('checkOne');
            if (checkAllEle.checked) {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;
                }
            } else {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
<table border="1px" style="color: aqua" width="600px" align="center">
    <th style="text-align: center" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>

    <tr>
        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr  align="center">
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
动态添加城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity(){
            // 1. 获取添加的城市内容
            var city = document.getElementById('city').value;
            // 2.判断城市是否有值,有则添加到列表里面
            if(city){
                // 创建一个关于城市的文本节点
                var textNode = document.createTextNode(city);
                // 创建一个li元素节点
                var liEleNode = document.createElement('li');
                // 将城市信息添加到li标签里面<li>城市名称<li>
                liEleNode.appendChild(textNode);
                // 将城市列表标签添加到ul标签里面去
                var ulEleNode = document.getElementById('city_ul');
                ulEleNode.appendChild(liEleNode)
            }else {
                alert("城市为空");
            }

        }
    </script>
</head>
<body>
<div class="content">
    <form>
        <input type="text" id="city" name="city" placeholder="请输入城市">
        <input type="button" value="添加城市" onclick="addCity()">
    </form>

    <ul id="city_ul">
        <li>西安</li>
        <li>重庆</li>
        <li>上海</li>
    </ul>

</div>
</body>
</html>

在这里插入图片描述

省市信息二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changeCity() {
            // 1.如何存储省份和城市之间的关系？
            // provinces = [[]]
            var provinces = new Array (3);
            provinces[0] = new Array("西安","咸阳","宝鸡");
            provinces[1] = new Array("太原","运城","大同");
            provinces[2] = new Array("桂林","南宁");
//            alert(provinces[0]);

            // 2.获取用户选择的省份,返回的是value值
            var choiceProvince = document.getElementById("province").value;
//            alert(choiceProvince);

            // 3. 遍历用户选择省份的所有城市
            var citys = provinces[choiceProvince];
//            alert(citys);

            // 获取select节点对象
            var selectCityNode = document.getElementById('city');
            //清空select标签里面的所有内容
            selectCityNode.length = 0;
            // 将城市添加到select里面：
            for(var i = 0;i < citys.length; i++){
                // 创建城市的文本节点
                var textNode = document.createTextNode(citys[i]);
                // 创建option节点对象
                var optEleNode = document.createElement('option');
                //将文本节点添加到option节点中
                optEleNode.appendChild(textNode);
                selectCityNode.appendChild(optEleNode)
            }
        }
    </script>
</head>
<body>
<div>
    <form action="#" method="get">
        <span>籍贯</span>
        <!--当修改省份时，执行函数changeCity()函数-->
        <select id="province" onchange="changeCity()">
            <option>---选择省份---</option>
            <option name="province" value="0">陕西</option>
            <option name="province" value="1">山西</option>
            <option name="province" value="2">广西</option>
        </select>
        <select id="city">
            <option>---选择城市---</option>
        </select>
    </form>
</div>
</body>
</html>

在这里插入图片描述

CodingAndCoCoding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python---Web前端之JavaScript

1、基本语法定义变量：var 变量名=‘value’；判断相等？ == :值是否相等？ ===:类型和值是否相等判断语句 if(条件){ 满足条件做的事情}else{ 不满足条件做的事情}for循环for(var i = 0;i < count; i++){ 循环做的事}函数定义function 函数名（形参1，形参2）{ re...
复制链接

扫一扫

专栏目录