javascript练习

刘秦001

已于 2022-03-25 13:05:18 修改

阅读量597

点赞数

分类专栏： javaWeb 文章标签： html javascript

于 2022-03-19 17:26:53 首次发布

本文链接：https://blog.csdn.net/m0_51589257/article/details/123598723

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   <script type="text/javascript">
       alert("hello javaScript");
    </script>

    <script type="text/javascript" src="1.js"></script>-->
 <!--     <script type="text/javascript">
            var i;
            alert(i);//undefined
            i=12;
            alert(typeof(i));//number;

            i="abc";
            alert(typeof(i));//string

            var a=12;
            var b="abc";
            alert(a*b);//Nan

            var a="12";
            var b=12;
            alert(a==b);
            alert(a===b);
        </script>-->
   <!-- <script type="text/javascript">
        var a=0;
        if(a){
            alert("0为真");
        }else{
            alert("0为假");
        }
        var b=null;
        if(b){
            alert("null为真");
        }else{
            alert("null为假");
        }
        var c=undefined;
        if(c){
            alert("undefined为真");
        }else{
            alert("undefined为假");
        }
        var d="";
        if(d){
            alert("空串为真");
        }else{
            alert("空串为假");
        }
    </script>-->
   <!-- <script type="text/javascript">
        var a="abc";
        var b=true;
        var c=false;
        var d=null;
        alert(a&&b);//true
        alert(a&&c);//false
        alert(c&&a);//false
        alert(a&&d);//null

        alert(a||d);//abc
        alert(d||a);//abc
        alert(d||c);//false
        alert(c||d);//null
    </script>-->
   <!-- <script type="text/javascript">
        var arr=[true,1];
        for(var i=0;i<arr.length;i++){//true ,1
            alert(arr[i]);//12 1 abc
        }
        alert(arr.length);//2
        arr[0]=12;
        alert(arr[0]);//12
        alert((arr.length));//2
        arr[2]="abc";
        alert(arr.length);//3
        alert(arr[1]);//1
        for(var i=0;i<arr.length;i++){
            alert(arr[i]);//12 1 abc
        }
    </script>-->
  <!--  <script type="text/javascript">
        function fun() {
            alert("无参函数fun()被调用了");

        }
        fun();
        function fun2(a,b) {
            alert("有参函数fun2()被调用了 a=>"+a+",b=>"+b);

        }
        fun2(12,"abc");
        function sum(num1,num2) {
            var result=num1+num2;
            return result;

        }
        alert(sum(100,50));
    </script>-->
  <!--  <script type="text/javascript">
       function fun(a) {
           alert(arguments.length);
           alert(arguments[0]);
           alert(arguments[1]);
           alert(arguments[2]);
           alert("a="+a);
           for (var i=0;i<arguments.length;i++){
               alert(arguments[i]);
           }

       }
       function sum(num1,num2) {
           var result=0;
           for (var i=0;i<arguments.length;i++){
               if(typeof(arguments[i])=="number"){
                   result+=arguments[i];
               }
           }
           return result;

       }
       alert(sum(1,2,3,4,"abc",5,6,7,8,9));
    </script>-->
    <!--<script type="text/javascript">
        var obj=new Object();
        obj.name="华仔";
        obj.age=18;
        obj.fun=function(){
            alert("姓名："+this.name+" ,年龄："+this.age);
        }
        obj.fun();
    </script>-->
   <!-- <script type="text/javascript">
        var obj={
            name:"国哥",
            age:18,
            fun:function () {
                alert("姓名："+this.name+",年龄："+this.age);

            }
        };
        alert(obj.name);
        obj.fun();
    </script>-->
    <!--<script type="text/javascript">
        function onloadFun() {
            alert("静态注册onload事件，所有代码");

        }
        window.οnlοad=function () {
            alert("动态注册的onload事件");

        }
    </script>-->
   <!-- <script type="text/javascript">
        function onblurFun() {
            console.log("静态注册失去焦点事件");

        }
        window.οnlοad=function () {
            var passwordObj=document.getElementById("password");
            passwordObj.οnblur=function () {
                console.log("动态注册失去焦点事件");

            }

        }
        
    </script>-->
   <!-- <script type="text/javascript">
       function onchangeFun(){
           alert("女神已经改变了");
       }
        window.οnlοad=function(){
            var selObj=document.getElementById("sel01");
            selObj.οnchange=function(){
                alert("男神已经改变了");
            }
        }
    </script>-->
    <!--<script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");

        }
        window.οnlοad=function () {
            var btnObj=document.getElementById("btn01");
            btnObj.οnclick=function () {
                alert("动态注册onclick事件");

            }

        }
    </script>-->
   <!-- <script type="text/javascript">
        function onsubmitFun() {
            alert("静态注册表提交事件-&#45;&#45;发现不合法");

            return true;

        }
        window.οnlοad=function () {
            var formObj=document.getElementById("form01");
            formObj.οnsubmit=function () {
                alert("动态注册表单提交事件-&#45;&#45;发现不合法");
                return true;

            }

        }
    </script>-->
   <!-- <script type="text/javascript">
        window.οnlοad=function () {
            var divObj=document.createElement("div");
            var textNodeObj=document.createTextNode("啦啦啦啦");
            divObj.appendChild(textNodeObj);
            document.body.appendChild(divObj);

        }
    </script>-->
    <!--<script type="text/javascript">
        function.checkALL() {

        }
    </script>-->
   <!-- <script type="text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/; // 也是正则表达式对象
        // 表示要求字符串中，是否包含字母a或b或c
        // var patt = /[abc]/;
        // 表示要求字符串，是否包含小写字母
        // var patt = /[a-z]/;
        // 表示要求字符串，是否包含任意大写字母
        // var patt = /[A-Z]/;
        // 表示要求字符串，是否包含任意数字
        // var patt = /[0-9]/;
        // 表示要求字符串，是否包含字母，数字，下划线
        // var patt = /\w/;
        // 表示要求 字符串中是否包含至少一个a
        // var patt = /a+/;
        // 表示要求 字符串中是否 *包含* 零个 或 多个a
        // var patt = /a*/;
        // 表示要求 字符串是否包含一个或零个a
        // var patt = /a?/;
        // 表示要求 字符串是否包含连续三个a
        // var patt = /a{3}/;
        // 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a
        // var patt = /a{3,5}/;
        // 表示要求 字符串是否包 至少3个连续的a，
        // var patt = /a{3,}/;
        // 表示要求 字符串必须以a结尾
        // var patt = /a$/;
        // 表示要求 字符串必须以a打头
        // var patt = /^a/;

        // 要求字符串中是否*包含* 至少3个连续的a
        // var patt = /a{3,5}/;
        // 要求字符串，从头到尾都必须完全匹配
        // var patt = /^a{3,5}$/;

        var patt = /^\w{5,12}$/;

        var str = "wzg168[[[";

        alert( patt.test(str) );


    </script>-->
    <!--<script type="text/javascript">
        function checkAll() {
            var hobbies=document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }

        }
        function checkNo() {
            var hobbies=document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }

        }
        function checkReverse() {
            var hobbies=document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=!hobbies[i].checked;
            }

        }
    </script>-->
    <!--<script type="text/javascript">
        window.onload = function(){
            // alert( document.getElementById("btn01") );
        }


        // 全选
        function checkAll() {
            alert( document.getElementById("btn01") );
            // document.getElementsByTagName("input");
            // 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序 是他们在html页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>-->
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript">
        window.onload=function () {
            document.getElementById("btn01").onclick=function () {
                var bjObj=document.getElementById("bj");
                alert(bjObj.innerHTML);

            };
            var btn02Ele=document.getElementById("btn02");
            btn02Ele.onclick=function () {
                var lis=document.getElementsByTagName("li");
                alert(lis.length)

            };
            var btn03Ele=document.getElementById("btn03");
            btn03Ele.onclick=function () {
                var genders=document.getElementsByName("gender");
                alert(genders.length);

            };
            var btn04Ele=document.getElementById("btn04");
            btn04Ele.onclick=function () {
                var lis=document.getElementById("city").getElementsByTagName("li");
                alert(lis.length);

            };
            var btn05Ele=document.getElementById("btn05");
            btn05Ele.onclick=function () {
                alert(document.getElementById("city").childNodes.length);

            };
            var btn06Ele=document.getElementById("btn06");
            btn06Ele.onclick=function () {
                alert(document.getElementById("phone").firstChild.innerHTML);

            };
            var btn07Ele=document.getElementById("btn07");
            btn07Ele.onclick=function () {
                var bjObj=document.getElementById("bj");
                alert(bjObj.parentNode.innerHTML);

            };
            var btn08Ele=document.getElementById("btn08");
            btn08Ele.onclick=function () {
                alert(document.getElementById("android").previousSibling.innerHTML);

            };
            var btn09Ele=document.getElementById("btn09");
            btn09Ele=document.getElementById("btn09");
            btn09Ele.onclick=function () {
                alert(document.getElementById("username").value);

            };
            var btn10Ele=document.getElementById("btn10");
            btn10Ele.onclick=function () {
                document.getElementById("username").value="真牛逼";

            };
            var btn11Ele=document.getElementById("btn11");
            btn11Ele.onclick=function () {
                alert(document.getElementById("city").innerText);

            };

        }
    </script>





    </head>
<!--    <body οnlοad="onloadFun();">-->
    <body>
   <!-- 用户名：<input type="text" οnblur="onblurFun();"><br/>
    密码：<input id="password" type="text"><br/>-->
   <!-- 请选择你心中的女神：
    <select οnchange="onchangeFun();">
        <option>&#45;&#45;女神&#45;&#45;</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>


   </select>
   请选择你心中的男神：
   <select id="sel01">
       <option>&#45;&#45;男神&#45;&#45;</option>
       <option>11</option>
       <option>21</option>
       <option>31</option>

   </select>-->
   <!-- <button οnclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
-->
  <!-- <form action="http://localhost:8080" method="get" οnsubmit="return onsubmitFun();">
       <input type="submit" value="静态注册"/>
   </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>-->
    <!--兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java" checked="checked">Java
    <input type="checkbox" name="hobby" value="js" checked="checked">JavaScript
    <br/>
    <button οnclick="checkAll()">全选</button>
    <button οnclick="checkNo()">全不选</button>
    <button οnclick="checkReverse()">反选</button>
-->
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            <br/>
            <br/>
            <p>
                你喜欢哪款单机游戏？
            </p>
            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>
            <br/>
            <br/>
            <p>
                你手机的操作系统是？
            </p>
            <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>Windows Phone</li>
            </ul>
        </div>
        <div class="inner">
            gender:
            <input type="radio" name="gender" value="male"/>
            Male
            <input type="radio" name="gender" value="famale"/>
            Famale
            <br/>
            <br/>
            name:
            <input type="text" name="name" id="username" value="abcde"/>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#Android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>

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

CSS.CSS

@charset "UTF-8";

body{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
button{
    width: 300px;
    margin-right: 10px;
}
#btn001{
    float: left;
}
#total{
    width: 450px;
    float: left;
}
ul{
    list-style-type: none;
    margin:0px;
    padding: 0px;
}
.inner li{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin:5px;
    background-color: #99ff99;
    float: left;
}
.inner{
    width: 400px;
    border-style:solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding: 10px;
    float: left;

}

刘秦001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- <script type="text/javascript"> alert("hello javaScript"); </script> <script type="text
复制链接

扫一扫