学习归纳9：JavaScript

已于 2022-07-20 09:33:29 修改
阅读量309 收藏
点赞数
文章标签： javascript 学习 前端
于 2022-07-18 20:04:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52941423/article/details/125858988
版权

基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式 -->
    <!-- <script>
        //方法
        function fun(){
            alert("好")
        }
    </script> -->
    <!-- js语法 -->
    <!-- 变量：Number String Boolean Undefined Null -->
    <script>
        // 变量都用var声明，根据赋值不同定义不同类型，分号可写可不写
        var a=10;
        // 输出语句，控制台数字黑色是字符串，蓝色是数字
        console.log(a);
        // 判断变量类型
        console.log(typeof a);
        // 类型转换
        // 数字转字符串
        var b=1;
        var c=b.toString();
        console.log(typeof c)
        // 字符串转数字
        var str="123"
        var str1=parseInt(str)
        console.log(typeof str1);
        // ==比较的是具体的值，1=="1"为true;===比较类型和值，1==="1"为false
        // var没有作用域的概念，let和const有,const不能改值
        // 方法不可重载，会被下面的覆盖
        //匿名方法
        var rr= function(){
            console.log("匿名方法执行了");
        }
        rr();
        //数组,长度不限，类型不限，相当于java的集合+数组
        var arr=[1,2,3]
        // 对象
        var obj={
            name:"张三",
            age:22,
            show(){

            }
        }
        console.log(obj.age);
    </script>
</head>
<body>
    <!-- 行内样式 -->
    <p onclick="alert('好')">点我</p>
    <!-- 内部样式 -->
    <!-- onclick是事件，点击时调用方法 -->
    <!-- <p onclick="fun()">点我</p> -->
</body>
</html>

操作顺序

<script>
        // 获取dom元素
        var user=document.querySelector("#user")
        //获取value等属性
        var v=user.value
        console.log(v);
        //修改属性
        user.value="222222"
        user.type="password"
        user.style.height="10px"
        user.style.backgroundColor="red"
        //删除
        user.remove()
    </script>

dom获取方式

<script>
        //通过id获取
        var n =document.getElementById("name")
        console.log(n.value);
        //通过name获取,name名可重复，取得的数组
        var n1=document.getElementsByName("name")
        console.log(n1[0]);
        //通过标签名获取
        var n2=document.getElementsByTagName("input")
        console.log(n2[0]);
        //通过class获取
        var n3=document.getElementsByClassName("sss")
        console.log(n3[0]);
        //h5最新方法获取 标签直接写，.name #id all获取全部返回数组
        document.querySelector("")
        document.querySelectorAll("")
    </script>

其中应该用id获取和querySelector较为规范

//定位光标
userName.focus()
//计算平均分 输入框输入都是字符串类型，需要强转
var avgValue=(parseInt (htmlValue)+parseInt (jsValue))/2
avgScore.value=avgValue

常用事件

onload:页面或图像完成加载

onsubmit:表单提交

onclick:鼠标单击

ondblclick:鼠标双击

onblur:元素失去焦点

onfocus:元素获得焦点

onchange:用户改变域的内容

bom

    <script>
        //提示框
        //alert()
        //确认框
        var bo =confirm()
        console.log(bo)
        //打开新窗口
        open()
    </script>
</head>
<body>
    <button onclick="window.open()">打开新窗口</button>
    <button onclick="window.close()">关闭当前窗口</button>
    <a href="./数组重用方法.html">打开数组页面</a>
    <a href ="javaScript:history.go(1)">前进</a>
</body>

sort

//相当于数组加集合
        var arr =new Array();
        var arr1=["81","72","37","46","50 ","101"]
        // sort排序按字符逐个比较，所以需要指定排序规则
        arr1.sort(function(a,b){
            return a-b
        })

字符串

<script>
        //字符串常量 不能频繁修改 占用内存空间
        var str ="java是世界最好用的语言"
        //length方法)
        console.log(str.length);
        //返回指定位置的字符
        console.log(str.charAt(0));
        //查找字符 值一是查找的子串 值二是从哪里开始查找
        console.log(str.indexOf("java",4))//只会找到一个，从头开找 lastIndexOf()
        console.log(str.concat("123"));//不会重新开辟空间 会拼接在原来的后面
        console.log(str.charCodeAt(0))//返回ASCII码

    </script>

jquery

<script src="./js/jquery.js"></script>
    <title>Document</title>
    
    <script>
        function fun(){
            // var mybut=document.querySelector("#mybut")
            //通过id获取
            var mybut=$("#mybut")
            var val1=mybut.val()
            console.log(val1)
            //通过class获取
            var mybut1=$('.sss')
            console.log(mybut1);
            //通过name获取
            var mybut2=$("[ name='ccc']")
            console.log(mybut3);
            //修改 前者是需要更改的属性后者是新值
            // var mybut3=$("#mybut")
            // mybut3.attr("type","password")

            $("#img").attr("src","")
            $("#mybut").val("456")

            $(function(){

            })
        }
    </script>

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" language="javascript" src="./js/jquery.js"></script>
    <title>Document</title>
    <script>
        //y验证用户名
        function fun1() {
            var nameval = $("#userName").val()
            var par = /^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{4,40}$/
            if (nameval == "") {
                $("#nameMag").html("<font color='red'>用户名不能为空<font>")
            } else if (par.test(nameval)) {
                //没问题
                $("#nameMag").html("<img src='./images/1.png' width=15>")
            } else {
                // 有问题
                $("#nameMag").html("<font color='red'>用户名有误<font>")
            }
        }
        //验证密码
        function fun2() {
            var pas = $("#pas")
            var pasValue = $("#pas").val()
            var paspatt = /^[a-zA-Z]\w{6,14}$/
            if (pasValue.length < 7) {
                $("#pasMag").html("<font color='red'>密码过短<font>")
            } else if (pasValue.length >= 7 && pasValue.length <= 15) {
                if (paspatt.test(pasValue)) {
                    $("#pasMag").html("<img src='./images/1.png' width=15>")
                } else {
                    $("#pasMag").html("<font color='red'>密码格式有误")
                }
            } else if (pasValue.length > 15) {
                $("#pasMag").html("<font color='red'>密码过长")
            }
        }
        //确认密码
        function fun3() {
            var pas = $("#pas")
            var passwords = $("#passwords")
            if (passwords.val() != '') {
                if (pas.val() == passwords.val()) {
                    $("#passwordsMag").html("<img src='./images/1.png' width=15>")
                } else {
                    $("#passwordsMag").html("<font color='red'>两次密码不一致<font>")
                }
            }

        }
        //验证邮箱
        function fun4() {
            var email = $("#email")
            var emailValue = email.val()
            var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            if (emailValue == "") {
                $("#EmailMage").html("<font color='red'>邮箱不能为空<font>")
            } else if (!myreg.test(emailValue)) {
                $("#EmailMage").html("<font color='red'>邮箱格式错误<font>")
            } else {
                $("#EmailMage").html("<img src='./images/1.png' width=15>")
            }
        }
        //获取验证码
        function fun5() {
            arr = new Array(4)
            for (let i = 0; i < 4; i++) {
                var r = Math.floor(Math.random() * 10)
                arr[i] = r
            }
            var ran = document.querySelector("#ran")
            var arr1 = arr.toString()
            ran.innerHTML = arr1
        }
        //验证验证码
        function fun6() {
            var yzm = $("#yzm")
            var yzmValue = yzm.val()
            arr1 = new Array(4)
            for (let i = 0; i < 4; i++) {
                arr1[i] = yzmValue.charAt(i)
            }
            if (arr[0] == arr1[0] && arr[1] == arr1[1] && arr[2] == arr1[2] && arr[3] == arr1[3]) {
                $("#judgeMeg").html("<font color='green'>验证成功<font>")
                return true
            } else {
                $("#judgeMeg").html("<font color='red'>验证失败<font>")
                $("#yzm").val('')
                fun5()
                return false
            }
        }
        function fun7() {
            var yzm = $("#yzm")
            var yzmValue = yzm.val()
            if(yzmValue==""){
                return false
            }else if (arr[0] == arr1[0] && arr[1] == arr1[1] && arr[2] == arr1[2] && arr[3] == arr1[3]) {
                return true
            } else {
                alert("验证码错误或未经验证，无法提交")
                return false
            }
        }
    </script>
    <!-- 正规方法 -->
    <!-- <script>
        $(function(){
            $("#userName").blur(function(){
                alert(123)
            });
        })
    </script> -->
</head>

<body>
    <form action="./注册成功.html" onsubmit="return fun7()">

        <table border="1" width="1100" align="center">
            <tr>
                <p align="center">
                    <font size="5" color="black" align="center">远程教育学习申请</font>
                </p>
            </tr>
            <tr>
                <td width="200" align="right">用户名：</td>
                <td width="500"><input type="text" name="userName" id="userName" onblur="fun1()" autofocus required
                        pattern="^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{4,40}$"><span id="nameMag"></span></td>
                <td width="300">
                    <font size="3" color="red">(必填：只能由英文字母和数字组成)</font>
                </td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input onkeydown="fun2()" type="password" name="userpass" id="pas" required
                        pattern="^[a-zA-Z]\w{7,15}$"><span id="pasMag"></span></td>
                <td>
                    <font size="3" color="red">(必填：8-16位之间，字母开头，无特殊字符)</font>
                </td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td><input onblur="fun3()" type="password" name="userpass" id="passwords" required><span
                        id="passwordsMag"></span>
                </td>
                <td>
                    <font size="3" color="red">(必填：8-16位之间,与密码相同)</font>
                </td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input onblur="fun4()" type="email" name="email" id="email" required><span id="EmailMage"
                        class=""></span></td>
                <td>
                    <font size="3" color="red">(必填:必须包含@.)</font>
                </td>
            </tr>
            <tr>
                <td align="right">姓名：</td>
                <td><input type="text" name="name" id="" required></td>
                <td>
                    <font size="3" color="red">(必填:为了您更好的学习，请填写真实姓名)</font>
                </td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td><input type="radio" name="userSex" id="" value="1" checked="checked">男
                    <input type="radio" name="userSex" id="" value="0">女
                </td>
                <td></td>
            </tr>
            <tr>
                <td align="right">感兴趣的技术：</td>
                <td>
                    <input type="checkbox" name="userjishu" id="" value="0">J2EE
                    <input type="checkbox" name="userjishu" id="" value="1">.NET
                    <input type="checkbox" name="userjishu" id="" value="2">4G安卓
                    <input type="checkbox" name="userjishu" id="" value="3">测试
                    <input type="checkbox" name="userjishu" id="" value="4">网络营销

                </td>
                <td></td>
            </tr>
            <tr>
                <td align="right">现在的状态：</td>
                <td><select name="userzhuangtai" id="">
                        <option value="0">留学生</option>
                        <option value="1">毕业生</option>
                        <option value="2" selected>在校大学生</option>
                    </select></td>
                <td></td>
            </tr>
            <tr>
                <td align="right" valign="top">申请原因：</td>
                <td><textarea cols="50" rows="10" required></textarea></td>
                <td valign="top">
                    <font size="3" color="red">(必填:简单写明申请远程教育的原因)</font>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>验证码：<input ondblclick="fun5()" type="text" name="number" id="yzm"><span id="ran"></span>
                    <input onclick="fun6()" type="button" value="验证" id="judge"><span id="judgeMeg"></span>
                </td>
                <td>
                    <font size="3" color="red">(双击输入框获取验证码)</font>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</body>

</html>

文书华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值