JavaScript——初次见面，多多指教

最新推荐文章于 2022-04-15 17:07:01 发布
最新推荐文章于 2022-04-15 17:07:01 发布
阅读量927 收藏 2
点赞数 1
分类专栏： Java Web 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzq_20150715/article/details/52556519
版权


JavaScript，早就听闻你的大名，初次见面，多多指教。

js的简介

1、js是什么
    js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
    特点：
        (1)交互性：用于与用户之间的沟通
        (2)安全性：js不能访问本地磁盘
        (3)跨平台：浏览器中都具备js解析器
2、js能做什么
    (1)js能动态的修改(增删)html和css的代码      (2)能动态的校验数据

Js思维导图

这里写图片描述

实验

1、邮箱校验

RegExp

    创建方式：   
        var reg = new RegExp(pattern);
        var reg = /^正则规则$/;

    规则的写法：
        [0-9] 
        [A-Z]
        [a-z]
        [A-z]
        \d 代表数据
        \D  非数字
        \w  查找单词字符
        \W  查找非单词字符
        \s  查找空白字符
        \S  查找非空白字符
        n+  出现至少一次
        n*  出现0次或多次
        n?  出现0次或1次
        {5} 出现5
        {2,8} 2到8次
    方法： 
        test(str):检索字符串中指定的值。返回 true 或 false
    需求：
        校验邮箱：

var email = haohao_827@163.com
            var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
            reg.test(email);

2、实现二级联动

onclick:点击事件
onchange:域内容被改变的事件
需求：实现二级联动

运行结果：

这里写图片描述

相关代码：

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <select id="city">
        <option value="bj">北京</option>  
        <option value="tj">天津</option>  
        <option value="sh">上海</option>    
    </select>

    <select id="area">
        <option >海淀</option>  
        <option >朝阳</option>  
        <option >东城</option>    
    </select>

  </body>

  <script type="text/javascript">           
    var select=document.getElementById("city");
    select.onchange=function(){
        var optionVal=select.value;
        switch(optionVal){
            case  'bj':
                var area=document.getElementById("area");
                area.innerHTML="<option>海淀</option><option>朝阳</option><option>东城</option>";     
                break;
            case  'tj':
                var area=document.getElementById("area");
                area.innerHTML="<option>南开</option><option>西青</option><option>河西</option>";     
                break;
            case  'sh':
                var area=document.getElementById("area");
                area.innerHTML="<option>浦东</option><option>杨浦</option>";        
                break;
                        }

        };

  </script>
</html>

3、onfocus， onblur

onfocus:获得焦点的事件
onblur:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误

运行结果：

这里写图片描述

相关代码：


<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <label for="txt">name</label>
    <input id="txt" type="text"/><span id="action"></span>

  </body>


  <script type="text/javascript">
    var txt=document.getElementById("txt");
    txt.onfocus=function(){
        //友好提示
        var span=document.getElementById("action");
        span.innerHTML="用户名格式最小8位";
        span.style.color="green";
    };
    txt.onblur=function(){
        //错误提示
        var span=document.getElementById("action");
        span.innerHTML="对不起，格式不正确";
        span.style.color="red";
    }
  </script>

</html>

4、onmouseover onmouseout

    onmouseover:鼠标悬浮的事件
    onmouseout:鼠标离开的事件
    需求：div元素 鼠标移入变为绿色 移出恢复原色

运行结果：

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    #d1{
            background-color:pink;
            width:200px;
            height:200px;
            text-align: center;
    }
    </style>
  </head>

  <body>

    <div id="d1"></div>

  </body>


  <script type="text/javascript">
    var div=document.getElementById("d1");
    div.onmouseover=function(){
        this.style.backgroundColor="green";
    };

    div.onmouseout=function(){
        this.style.backgroundColor="pink";
    };

  </script>

</html>

5、定时器

定时器：
            setTimeout(函数,毫秒值);
                setTimeout(
                    function(){
                        alert("xx");
                    },
                    3000
                );
            clearTimeout(定时器的名称);
                var timer;
                var fn = function(){
                    alert("x");
                    timer = setTimeout(fn,2000);
                };
                var closer = function(){
                    clearTimeout(timer);
                };
                fn();
            setInterval(函数,毫秒值);
            clearInterval(定时器的名称)
                var timer = setInterval(
                function(){
                    alert("nihao");
                },
                2000
            );
            var closer = function(){
                clearInterval(timer);
            };
需求：注册后5秒钟跳转首页

运行结果：
这里写图片描述

相关代码：

恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
        <script type="text/javascript">
            var time = 5;
            var timer;
            timer = setInterval(
                function(){
                    var second = document.getElementById("second");
                    if(time>=1){
                        second.innerHTML = time;
                        time--;
                    }else{
                        clearInterval(timer);
                        location.href="../jsCore/demo10.html";
                    }
                },
                1000
            );
        </script>

6、全选 全不选 反选

js的dom
    1、理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象
    2、dom方法和属性

这里写图片描述

运行结果：

这里写图片描述

相关代码：

<!DOCTYPE html>
<html>
  <head>
    <title>check.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">


        h1{
            font-size:20px;
            color:#000000;              
            margin:30px 0px 0px 270px;          
            text-align:left;    

        }

        #menu1{
            width:700px;
            margin:20px auto 5px; 
            background-color:#F0F0F0;   
            text-align: right;          
            padding:7px 70px ;
        }

        #subject{
            width:800px;
            background-color:#fcfdef;
            margin:5px auto 20px; 
            padding:20px;
        }

        input{
            margin-left:100px;
            width:50px;
            border:1px solid #a4b4bd;  
        }

        #jump{
            text-align: center;     
            margin:20px;
        }

        #jump a{
            text-decoration:none;
            color:#9AAFE5;
            border: 1px solid  #9AAFE5;         
            padding:2px 6px;
        }   

        #jump a:hover{
            color:#2B66A5;
            border: 1px solid #2B66A5;
       }    

       #current{
            background-color: blue;
        }



    </style>
  </head>

  <body >
    <div id="page">
        <h1>课程列表</h1>
        <div id=menu1>
            <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
        </div>

        <div id=subject>
            <input type="checkbox" name="items" value="概率论">概率论<br><br>
            <input type="checkbox" name="items" value="操作系统">操作系统<br><br>
            <input type="checkbox" name="items" value="软件需求工程">软件需求工程<br><br>
            <input type="checkbox" name="items" value="面向对象分析与设计（UML）">面向对象分析与设计（UML）<br><br>
            <input type="checkbox" name="items" value="数据库">数据库<br><br>


            <br><br>
            <input type="button" name="check" id="checkAll" value="全选">
            <input type="button" name="check" id="checkNo" value="全不选">
            <input type="button" name="check" id="checkRevsern" value="反选">

            <br><br><br><br>

            <div id="jump">

            <a href="#">上一页</a>
            <a href="#" id="current">1</a>
            <a href="#">2</a>
            <a href="#">下一页</a>





            </div>
        </div>


    </div>
  </body>

  <script language="JavaScript">
        window.onload=function(){
            /*<input type="button" name="check" id="checkAll" value="全选">*/ 
            document.getElementById("checkAll").onclick=function(){
                var items=document.getElementsByName("items");
                for(var i=0;items!=null&&i<items.length;i++){
                    var item=items[i];
                    //使用setAttribute时，IE浏览器支持，火狐浏览器不支持
                    //item.setAttribute("checked","checked");
                    //火狐和IE浏览器都支持
                    item.checked=true;                      
                }
            }

            /*<input type="button" name="check" id="checkNo" value="全不选">*/
            document.getElementById("checkNo").onclick=function(){
                var items=document.getElementsByName("items");
                for(var i=0;items!=null&&i<items.length;i++){
                    var item=items[i];
                    //使用setAttribute时，IE浏览器支持，火狐浏览器不支持
                    //item.setAttribute("checked",null);
                    //火狐和IE浏览器都支持
                    item.checked=false;
                }
            }

            /*<input type="button" name="check" id="checkRevsern" value="反选">*/
            document.getElementById("checkRevsern").onclick=function(){
                var items=document.getElementsByName("items");
                for(var i=0;items!=null&&i<items.length;i++){
                    var item=items[i];
                    /* if(item.checked){
                        item.checked=false;
                    }
                    else{
                        item.checked=true;
                    } */

                    //简便写法
                    item.checked=!item.checked;
                }
            }

            /*<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选*/
            document.getElementById("checkItems").onclick=function(){

                /* 方法一
                if(this.checked){
                    var items=document.getElementsByName("items");
                    for(var i=0;items!=null&&i<items.length;i++){
                        var item=items[i];
                        item.checked=true;
                    }
                else{
                    var items=document.getElementsByName("items");
                    for(var i=0;items!=null&&i<items.length;i++){
                        var item=items[i];
                        item.checked=false;
                    } */    



                    //方法二
                    var items=document.getElementsByName("items");
                    for(var i=0;items!=null&&i<items.length;i++){
                        var item=items[i];
                        item.checked=this.checked;
                    }
                }
            }


  </script>
</html>

7、添加 删除联系人

用bom的相关属性和方法实现

运行结果：
这里写图片描述

相关代码：

<!DOCTYPE html>
<html>
  <head>
    <title>添加用户</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #top{
            width:500px;
            margin:20px auto 20px;
            background-color:#fcfdef;
            padding:10px;
        }

        #boltom{
            width:500px;
            margin:20px auto 20px;
            background-color:#E8F2FE;
            padding:20px
        }
    </style>
  </head>

  <body >
    <div id="top">
        <h3>添加联系人</h3>
            姓名
                <input type="text" name="name" id="name"><br><br>
            电话
                <input type="text" name="tel" id="tel"><br><br>
                   邮箱
                <input type="text" name="email" id="email"><br><br>

                <button id="addUser">提交</button>

   </div>
   <div id="boltom">
        <h3>通讯录信息</h3>
        <table border="1"  cellpadding="10"  cellspacing=0  >
            <tbody>
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>&nbsp;</th>
            </tr>

            <tr>
                <td>小美</td>
                <td>111111</td>
                <td>11@qq.com</td>
                <td><a href="deleteEmp?id=mei">Delete</a></td>

            </tr>

            <tr>
                <td>小硕</td>
                <td>2222222</td>
                <td>22@qq.com</td>
                <td><a href="deleteEmp?id=shuo">Delete</a></td>

            </tr>
            </tbody>
        </table>

    </div>
  </body>

  <script type="text/javascript">
    window.onload=function(){
        document.getElementById("addUser").onclick=function(){
        //获取姓名、电话、邮箱
            var name=document.getElementById("name").value;
            var tel=document.getElementById("tel").value;
            var email=document.getElementById("email").value;

            //创建td,并添加文本内容
            var tdName=document.createElement("td");
            var tdNameText=document.createTextNode(name);
            tdName.appendChild(tdNameText);

            var tdTel=document.createElement("td");
            var tdTelText=document.createTextNode(tel);
            tdTel.appendChild(tdTelText);


            var tdEmail=document.createElement("td");
            var tdEmailText=document.createTextNode(email);
            tdEmail.appendChild(tdEmailText);

            var tdDelete=document.createElement("td");
            var aE=document.createElement("a");
            aE.setAttribute("href", "deleteEmp?id="+name);
            var aEText=document.createTextNode("Delete");
            aE.appendChild(aEText);
            tdDelete.appendChild(aE);

            //创建tr，将4个创建完成的td对象放置到tr中
            var tr=document.createElement("tr");
            tr.appendChild(tdName);
            tr.appendChild(tdTel);
            tr.appendChild(tdEmail);
            tr.appendChild(tdDelete);

            var tbody=document.getElementsByTagName("tbody");
            tbody[0].appendChild(tr);

            aE.onclick = function(){
                    return deleteTr(this);
                }
            }
            //删除对应行的方法
            function deleteTr(aE){

                var name = aE.parentNode.parentNode.firstChild.firstChild.nodeValue;
                var flag = window.confirm("您确定要删除【"+name+"】吗？");
                if(flag){
                    //查找父节点（tbody）
                    var tbody = aE.parentNode.parentNode.parentNode;
                    //查找子节点（tr）
                    var tr = aE.parentNode.parentNode;
                    //删除tr
                    tbody.removeChild(tr);
                }
                return false;
            }
        }
  </script>
</html>

8、添加 添加全部 移除 移除全部

用dom的相关方法实现

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>list.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <style type="text/css">
body
{
    font-family:"Courier";
    font-size: 12px;
    margin:0px 0px 0px 0px;
    overflow-x:no;
    overflow-y:no;
    background-color: #B8D3F4;
}
td
{
    font-size:12px;
}


.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}



.button {
    border: 1px ridge #ffffff;
    line-height:18px;
    height: 20px;
    width: 45px;
    padding-top: 0px;
    background:#CBDAF7;
    color:#000000;
    font-size: 9pt;
    font-family:"Courier";
} 



</style></head>



  <body>
    <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px;width:450px;height:300px;background-color:#E6E6E6;">
        <table width=100% height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
            <tr>
                <td width="128">
                    <!-- multiple 属性可设置或返回是否可有多个选项被选中。-->

                    <select style="width:150px" size="10" multiple="multiple" name="first" id="first" class="td3">
                        <option value="选项1">选项1</option>
                        <option value="选项2">选项2</option>
                        <option value="选项3">选项3</option>
                        <option value="选项4">选项4</option>
                        <option value="选项5">选项5</option>
                        <option value="选项6">选项6</option>
                        <option value="选项7">选项7</option>
                        <option value="选项8">选项8</option>
                        <option value="选项9">选项9</option>             
                    </select> 
                </td>

                <td width="69" valign="middle">
                    <input name="add" id="add" type="button" class="button" value="--&gt;">
                    <input name="add_all" id="add_all" type="button" class="button" value="==&gt;">
                    <input name="remove" id="remove" type="button" class="button" value="&lt;--">
                    <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==">
                </td>

                <td width="128" align="left">
                    <select style="width:150px" size="10" multiple="multiple"name="second" id="second" class="td3">
                        <option value="选项10">选项10</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>


  </body>

  <script type="text/javascript">
  window.onload=function(){

    //将选中的option从左侧移到右侧<input name="add" id="add" type="button" class="button" value="--&gt;">
    document.getElementById("add").onclick=function(){
        //获取左侧的select元素
        var first =document.getElementById("first");
        //获取左侧的select元素中的option
        var firstOptions=first.getElementsByTagName("option");
        //获取右侧的select元素
        var second=document.getElementById("second");
        //将JavaScript的数组长度固定

        for(var i=firstOptions.length-1;i>=0;i--){
            //说明左侧的option有被选中的值
            if(first.selectedIndex!=-1){
                //将左侧选中的option移到右侧
                second.appendChild(firstOptions[first.selectedIndex]);
            }
        }
    }

    //将左侧全部的option(不管选中还是不选中)移动右侧<input name="add_all" id="add_all" type="button" class="button" value="==&gt;">
    document.getElementById("add_all").onclick=function(){
        var first =document.getElementById("first");
        var firstOptions=first.getElementsByTagName("option");
        var second=document.getElementById("second");
        var len=firstOptions.length;
        for(var i=0;i<len;i++){
            //将左侧全部option移到右侧
            second.appendChild(firstOptions[0]);
            }
        }

    //双击从左侧移动右侧（每次只能够移动一个值）<select name="first" size="10" multiple="multiple" class="td3" id="first">
    document.getElementById("first").ondblclick = function(){
        var first = document.getElementById("first");
        var firstOptions = first.getElementsByTagName("option");
        var second = document.getElementById("second");
        second.appendChild(firstOptions[first.selectedIndex]);
    }   

        //将选中的option从右侧移到左侧<input name="remove" id="remove" type="button" class="button" value="&lt;--">
    document.getElementById("remove").onclick=function(){

        //获取右侧的select元素
        var second=document.getElementById("second");               
        //获取右侧的select元素中的option
        var secondOptions=second.getElementsByTagName("option");        
        //获取左侧的select元素
        var first =document.getElementById("first");        
        //将JavaScript的数组长度固定        
        for(var i=secondOptions.length-1;i>=0;i--){
            //说明右侧的option有被选中的值
            if(second.selectedIndex!=-1){
                //将左侧选中的option移到右侧
                first.appendChild(secondOptions[second.selectedIndex]);
            }
        }
    }

    //将右侧全部的option(不管选中还是不选中)移动左侧<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==">
    document.getElementById("remove_all").onclick=function(){
        var second=document.getElementById("second");       
        var secondOptions=second.getElementsByTagName("option"); 
        var first =document.getElementById("first");
        var len=secondOptions.length;
        for(var i=0;i<len;i++){
            //将右侧全部option移到右侧
            first.appendChild(secondOptions[0]);
            }
        }

    //双击从右侧移动左侧（每次只能够移动一个值）<select name="first" size="10" multiple="multiple" class="td3" id="second">
    document.getElementById("second").ondblclick = function(){
        var second=document.getElementById("second");       
        var secondOptions=second.getElementsByTagName("option"); 
        var first =document.getElementById("first");
        first.appendChild(secondOptions[second.selectedIndex]);

    }



  }

  </script>

</html>


小编寄语:
JavaScript之路漫漫，我先骑着自行车,快速领略一下路上的风景~日后有机会，再故地重游，体会你别样的美~

向来缘浅奈何晴深
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript——jQuery
Scccc_的博客
03-10 5019
JavaScript学习笔记
JavaScript——JavaScript数据类型转换
流楚丶格念的博客
07-19 4601
文章目录数据类型转换转换成字符串类型转换成数值类型转换成布尔类型代码示例 数据类型转换 如何使用谷歌浏览器，快速的查看数据类型？ 字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的 转换成字符串类型 toString() var num = 5; console.log(num.toString()); String() String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
antd的input输入框超出内容划过显示完整提示
zuo_zuo_blog的博客
04-15 2687
<Tooltip placement="bottom" title={ <span style={{ color: '#979898' }}> {text} </span> } visible={record.popVisible} arrowPointAtCenter..
React使用className引入多个类样式
qq_36742720的博客
01-04 1万+
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。 比如说有一个固定样式"title": &lt;div className="title"&gt;标题&lt;/div&gt;， 然后还要一个点击高亮的样式: &lt;div className={index === this.state.active ? "active" : null}&gt;标题&l
【React】Ant Design穿梭框Target栏的显示以及禁用问题
AcongMiss的博客
03-20 6147
Ant Design 穿梭框官方文档：https://ant.design/components/transfer-cn/ 在使用的过程中我遇到了两个小问题，其实知道原因和解决方法之后真的觉得是特别特别简单的问题。 1.穿梭框右侧Target栏不显示的问题。 问题具体描述：对 targetKeys（显示在右侧框数据的key集合）进行初始化后，右侧框内数据不显示。 原因：初始化后的 targetK...
谈谈react操作onMouseEnter、onMouseLeave结合css里的hover
热门推荐
小楼一夜听春雨
08-09 3万+
react对于每个html元素都添加了很多事件处理函数，这些事件网上一搜就都出来了，这里简单说下在react中利用js进行操作类似于css里的hover所使用的事件。比如这样一个需求，有以下3个div：<div class="a abc">a</div> <div class="b abc">b</div> <div class="c abc">c</div>网上很多例子只是简单说了下一个组件是如何
javascript——PDF教程大合集.rar
05-12
javascript——PDF教程大合集 1、100个直接可以拿来用的JavaScript实用功能代码片段 2、JavaScript DOM编程艺术（中文） 3、JavaScript高级程序设计（第3版）中文 高清 完整 4、JavaScript脚本特效编程给力起飞 5、...
Really JavaScript!——Douglas Crockford大师见面会报道.pdf
最新发布
01-02
——Douglas Crockford大师见面会报道.pdf" 以下是从给定的文件中生成的相关知识点： 1. Douglas Crockford是谁？：Douglas Crockford是一位资深的JavaScript架构师，JavaScript程序员的必读书籍作者，也是互聯網...
初识JavaScript———（1）！！！.md
06-04
初识JavaScript———（1）！！！.md
React
飚
09-17 1265
主要介绍了react项目构成，react的使用等
three.js之材质-LineDashedMaterial介绍和使用(vue中使用three.js20)
点燃火柴的博客
11-15 1118
LineDashedMaterial材质介绍和使用1.LineDashedMaterial材质介绍2.demo效果3.demo代码 1.LineDashedMaterial材质介绍 LineDashedMaterial材质有和LineBasicMaterial材质一样的属性，还有几个额外的属性可以用来定义短划线长度和短划线中间空格长度 属性 描述 color 指定线的颜色，如果指定了vertexColor，该属性会被忽略 linewidth 通过该属性定义线的宽度 LineCap 此
Markdown必知必会
weixin_55858678的博客
03-09 364
Markdown必知必会 概述 Markdown是一个轻量级的标记语言，使创造者更专注于内容而不是样式排版,可在Markdown中直接使用HTML标签。 文章目录Markdown必知必会概述基础语法块级元素标题段落引用列表任务列表表格代码块和数学块目录脚注分隔线内联元素链接图片强调、删除线和高亮代码和数学表达式上下角标HTML支持和emoji表情时序图、流程图、思维导图vscode和Typora下的使用vscode插件安装Typora快捷键 基础语法 原文地址：Markdown基础语法，Typora Mar
css 去掉textarea,input,select中的选中焦点框
computerstep
08-20 547
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
upward
02-09 683
JavaScript学习笔记【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
onmouseenter 和onmouseover
Bohn的博客
09-17 920
onmouseenter     绑定的事件在鼠标指针进入元素时触发，但是onmouseenter 事件不支持冒泡。 onmouseover      绑定事件在鼠标指针进入元素时触发 ,在其子元素上也会触发...
antd card 组件实现鼠标移入移出效果
weixin_34234721的博客
05-09 2480
鼠标移出： 鼠标移入： import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; const { Meta } = Card; export default class Test extends Component{ constructor(props...
antd modal拖拽，自定义modal拖拽react-draggable
前端小白成长记
02-20 2733
"antd":"^4.9.4"时，可以直接使用如下代码： import React, { Component } from "react"; import { Modal, Button } from 'antd'; import Draggable from 'react-draggable'; class Drag extends Component { constructor(props) { super(props); this.state = { visibl.
深入解析：JavaScript——被误解的编程语言
"JavaScript-世界上误解最深的语言分析" JavaScript，作为全球最受欢迎的编程语言之一，其影响力无处不在，尤其在网络开发中扮演着至关重要的角色。然而，尽管它被广泛使用，JavaScript却常常被误解，这主要源于对...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值