L-FHy

JavaScript基础03 - DOM编程

JavaScript基础03

001-DOM编程- 获取文本框的value
002-DOM编程-innerHTML和innerText操作div和span
003-DOM编程-关于正则表达式
004-DOM编程-去除字符串前后的空白
005-DOM编程-表单验证
006-DOM编程-复选框的全选和取消全选
007-DOM编程-
008-DOM编程-显示网页时钟
009-DOM编程-内置支持类Array

001-DOM编程- 获取文本框的value

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程- 获取文本框的valuetitle>
    head>
    <body>
        <script type="text/javascript">
            /*
                1、JavaScript包括三大块：
                    ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
                    DOM：Document Object Model（文档对象模型：对网页上的节点进行增删改的过程。）HTML文档被当做一颗DOM树来看待。
                         var domObj = document.getElementById("id");
                    BOM: Browser Object Model（浏览器对象模型）
                         关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
                2、DOM和BOM的区别和联系？
                    BOM的顶级对象是：window
                    DOM的顶级对象是：document
                    实际上BOM包括DOM！
             */
            /*window.onload = function () {
                //var btnElt = window.document.getElementById("btn");
                var btnElt = document.getElementById("btn");
                alert(btnElt); // [object HTMLInputElement]
            }*/
            window.onload = function () {

                var btnElt = document.getElementById("btn");
                btnElt.onclick = function () {

                    /*
                    // 获取username节点
                    var usernameElt = document.getElementById("username");
                    alert(username.value);
                    */

                    //alert(document.getElementById("username").value);

                    // 可以修改它的value
                    document.getElementById("username").value = "zhangsan";
                }


            }
        script>

        
        <input type="text" id="username"/>
        <input type="button" id="btn" value="获取文本框的value"/>

        <hr>

        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("setbtn").onclick = function () {
                    document.getElementById("username2").value = document.getElementById("username1").value
                }
            }
        script>

        <input type="text" id="username1"/>
        <br>
        <input type="text" id="username2"/>
        <br>
        <input type="button" id="setbtn" value="将第一个文本框中的内容赋值给第二个文本框"/>

        <br>
        
        <input type="text" onblur="alert(this.value)"/>

    body>
html>

002-DOM编程-innerHTML和innerText操作div和span

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

        <meta charset="UTF-8">
        <title>DOM编程-innerHTML和innerText操作div和spantitle>

        <style type="text/css">
            #div1{
                background-color: aquamarine;
                width: 300px;
                height: 300px;
                border: 1px black solid;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        style>

    head>
    <body>
        
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("btn").onclick = function () {
                    // 设置div中的内容
                    // 第一步：获取div对象
                    var divElt = document.getElementById("div1");
                    // 第二步：使用innerHTML属性来设置元素内部的内容
                    //divElt.innerHTML = "Hello World!";
                    //divElt.innerHTML = "用户名不能为空！";
                    divElt.innerText = "用户名不能为空！";
                }
            }
        script>

        <input type="button" value="设置div中的内容" id="btn"/>

        <div id="div1">div>

    body>
html>

003-DOM编程-关于正则表达式

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程-关于正则表达式title>
    head>
    <body>
        <script type="text/javascript">
            /*
                1、什么是正则表达式？有什么用？
                    正则表达式：Regular Expression
                    正则表达式主要用在字符串格式匹配上面。

                2、正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持,javascript中也支持。
                大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号。目前使用最多
                的是计算机编程领域。用作字符串格式匹配，包括搜索方面。

                3、正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
                    第一，常见的正则表达式符号要认识。
                    第二，简单的正则表达式要会写。
                    第三，他人编写的正则表达式要能看懂。
                    第四，在javascript当中，怎么创建正则表达式对象！（new对象）
                    第五，在javascript当中，正则表达式对象有哪些方法！（调方法）
                    第六，要能够快速的从网络上找到自己需要的正则表达式，并且测试其有效性。

                4、常见的正则表达式符号？
                    .匹配除换行符以外的任意字符
                    \w匹配字母或者数字或者下划线或汉字
                    \s匹配任意的空白符
                    \d匹配数字
                    \b匹配单词的开始或结束
                    ^匹配字符串的开始
                    $匹配字符串的结束

                    *重复零次或者更多次
                    +重复一次或者更多次
                    ?重复零次或者一次
                    {n}重复n次
                    {n,}重复n次或者更多次
                    {n,m}重复n到m次

                    \W匹配任意不是字母，数字，下划线，汉字的字符
                    \S匹配任意不是空白符的字符
                    \D匹配任意非数字的字符
                    \B匹配不是单词开头或结束的位置
                    [^x]匹配除了x以外的任意字符
                    [^aeiou]匹配除了aeiou这几个字母以外的任意字符

                    正则表达式当中的小括号()优先级较高。
                    [1-9]表示1到9的任意1个数字（次数是1次。）
                    [A-Za-z0-9]表示A-Za-z0-9中的任意1个字符
                    [A-Za-z0-9-]表示A-Z、a-z、0-9、-，以上所有字符中的任意1个字符。

                    |表示或者
                    [abc]表示匹配字符 a、b 或 c 中的任意一个

                5、简单的正则表达式要会写
                    QQ号的正则表达式:^[1-9][0-9]{4,}$

                6、他人编写的正则表达式要能看懂？
                    email正则，^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

                7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
                    第一种创建方式：
                        var regExp = /正则表达式/flags;
                    第二种创建方式：
                        var regExp = new RegExp("正则表达式","flags");

                    关于flags:
                        g : 全局匹配
                        i : 忽略大小写
                        m : 多行搜索（ES规范指定之后才支持m）
                            当前面是正则表达式的时候，m不能用。
                            只有前面是普通字符串的时候，m才能用。

                    正则表达式对象的test()方法？
                        true/false = 正则表达式对象.test(用户填写的字符串);
                        true : 字符串格式匹配成功
                        false : 字符串格式匹配失败



             */
            window.onload = function () {
                // 给按钮绑定click
                document.getElementById("btn").onclick = function () {
                    var email = document.getElementById("email").value;
                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = emailRegExp.test(email);
                    if(ok){
                        document.getElementById("emailError").innerText = "邮箱地址合法";
                    }else{
                        document.getElementById("emailError").innerText = "邮箱地址不合法";
                    }
                }
                //给文本框绑定focus
                document.getElementById("email").onfocus = function () {
                    document.getElementById("emailError").innerText = "";
                }
            }
        script>

        <input type="text" id="email"/>
        <span id="emailError" style="color: red;font-size: 12px;">span>
        <br>
        <input type="button" value="验证邮箱" id="btn"/>


    body>
html>

004-DOM编程-去除字符串前后的空白

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程-去除字符串前后的空白title>
    head>
    <body>
        <script type="text/javascript">
            // 低版本的IE浏览器不支持字符串的trim()函数，怎么办？
            // 可以自己对String类扩展一个全新的trim()函数
            String.prototype.trim = function () {
                //alert("扩展之后的trim方法");
                //去除当前字符串的前后空白
                //在当前的方法中的this代表的就是当前字符串
                return this.replace(/^\s+/,"").replace(/\s+$/,"");
            }

            window.onload = function () {
                document.getElementById("btn").onclick = function () {
                    // 获取用户名
                    var username = document.getElementById("username").value;
                    // 去除前后空白
                    username = username.trim();
                    // 测试
                    alert("--->" + username + "<---");
                }
            }

        script>

        <input type="text" id="username"/>
        <input type="button" value="获取用户名" id="btn"/>
    body>
html>

005-DOM编程-表单验证

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单验证title>
        <style type="text/css">
            span{
                    color:red;
                    font-size: 12px;
                }
        style>
    head>
    <body>

        <script type="text/javascript">

            /*

                表单验证;
                (1)用户名不能为空。
                (2)用户名必须在6-14位之间。
                (3)用户名只能由数字和字母组成，不能含有其它符号(正则表达式)。
                (4)密码和确认密码一致，邮箱地址合法。
                (5)统一失去焦点验证。
                (6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。
                (7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value。
                (8)最终表单中所有项均合法方可提交。

             */
            window.onload = function () {
                //给用户名文本框绑定blur事件（失去焦点事件）

                //获取username的span标签
                var usernameError = document.getElementById("usernameError");

                var usernameElt = document.getElementById("username");
                usernameElt.onblur = function () {
                    // 获取用户名
                    var username = document.getElementById("username").value;
                    // 去除前后空白
                    username = username.trim();
                    // 判断用户名是否为空
                    /*if(Boolean(username)){
                        // 代表username非空
                        alert("username=" + username);
                    }else{
                        // 代表username为空
                        alert("username为空字符串");
                    }*/
                    //if(username.length == 0){}

                    if(username === ""){
                        // 用户名为空
                        usernameError.innerText = "用户名不能为空！";
                    }else{
                        // 用户名不为空
                        // 继续判断长度
                        if(username.length < 6 || username.length > 14){
                            usernameError.innerText = "用户名长度必须在[6-14]之间";
                        }else{
                            // 用户名长度合法
                            // 继续判断是否含有特殊符号
                            var regExp = /^[A-Za-z0-9]+$/;
                            var ok = regExp.test(username);
                            if(ok){
                                // 用户名最终合法
                            }else{
                                // 用户名中含有特殊字符
                                usernameError.innerText = "用户名只能由数字和字母组成";
                            }
                        }
                    }
                }
                // 给username这个文本框绑定获得焦点事件
                usernameElt.onfocus = function () {

                    // 清空非法value
                    if(usernameError.innerText != ""){
                        username.value = "";
                    }

                    // 清空span
                    usernameError.innerText = "";
                }

                // 获取确认密码的提示标签
                var pwdError= document.getElementById("pwdError");
                // 获取确认密码框对象
                var userpwd2Elt = document.getElementById("userpwd2");
                // 绑定blur事件（失去焦点事件）
                userpwd2Elt.onblur = function () {
                    // 获取密码和确认密码
                    var userpwdElt = document.getElementById("userpwd");
                    var userpwd = userpwdElt.value;
                    var userpwd2 = userpwd2Elt.value;
                    if(userpwd != userpwd2){
                        // 密码不一致
                        pwdError.innerText = "前后密码不一致";
                    }else{
                        // 密码一致

                    }
                }

                // 给确认密码的这个文本框绑定获得焦点事件
                userpwd2Elt.onfocus = function () {
                    if(pwdError.innerText != ""){
                        userpwd2Elt.value = "";
                    }
                    pwdError.innerText = "";
                }

                // 获取email的span
                var emailError = document.getElementById("emailError");
                // 给email绑定blur事件
                var emailElt = document.getElementById("email");

                emailElt.onblur = function () {
                    // 获取email
                    var email = emailElt.value;
                    // 编写email的正则
                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = emailRegExp.test(email);
                    if(ok){
                        // 邮箱合法
                    }else{
                        // 邮箱不合法
                        emailError.innerText = "邮箱地址不合法";
                    }
                }

                // 给email绑定focus事件
                emailElt.onfocus = function () {
                    if(emailError.innerText != ""){
                        emailElt.value = "";
                    }
                    emailError.innerText = "";
                }

                // 给提交按钮绑定鼠标单击事件
                var submitBtnElt = document.getElementById("submitBtn");
                submitBtnElt.onclick = function () {
                    // 触发username的blur/userpwd2的blur/email的blur
                    // 不需要人工操作，使用纯JS代码触发事件。
                    usernameElt.focus();
                    usernameElt.blur();

                    userpwd2Elt.focus();
                    userpwd2Elt.blur();

                    emailElt.focus();
                    emailElt.blur();

                    // 当所有表单项都是合法的时候，提交表单
                    if(usernameError.innerText == "" && pwdError.innerText == "" && emailError.innerText == ""){
                        // 获取表单对象
                        var userFormElt = document.getElementById("userForm");
                        // 可以在这里设置action
                        userFormElt.action = "http://localhost:8080/jd/save";
                        // 提交表单
                        userFormElt.submit();
                    }
                }

            }


        script>
        
        
        <form id="userForm" method="get">
            用户名<input type="text" name="username" id="username"/>
            <span id="usernameError">span>
            <br>
            密码<input type="text" name="userpwd" id="userpwd"/>
            <br>
            确认密码<input type="text" id="userpwd2"/>
            <span id="pwdError">span>
            <br>
            邮箱<input type="text" name="email" id="email"/>
            <span id="emailError">span>
            <br>
            
            <input type="button" value="注册" id="submitBtn"/>
            <input type="reset" value="重置"/>
        form>
    body>
html>

006-DOM编程-复选框的全选和取消全选

DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>复选框的全选和取消全选title>
    head>

    <body>
        <script type="text/javascript">
            /*window.onload = function () {
                var firstChkElt = document.getElementById("firstChk");
                firstChkElt.onclick = function () {
                    // 先获取第一个复选框的选中状态（复选框对象是checkbox对象）
                    // alert(firstChkElt.checked);
                    // 根据name获取所有元素
                    var aihaos = document.getElementsByName("aihao");
                    if(firstChkElt.checked){
                        // 全选
                        for(var i = 0; i < aihaos.length; i ++){
                            aihaos[i].checked = true;
                        }
                    }else{
                        // 取消全选
                        for(var i = 0; i < aihaos.length; i ++){
                            aihaos[i].checked = false;
                        }
                    }
                }
            }*/
            window.onload = function () {
                var aihaos = document.getElementsByName("aihao");
                var firstChkElt = document.getElementById("firstChk");
                firstChkElt.onclick = function () {
                    // 先获取第一个复选框的选中状态（复选框对象是checkbox对象）
                    // alert(firstChkElt.checked);
                    // 根据name获取所有元素
                    for(var i = 0; i < aihaos.length; i ++){
                        aihaos[i].checked = firstChkElt.checked;
                    }
                }

                // 对以上数组进行遍历
                var all = aihaos.length;
                for(var i = 0; i < aihaos.length; i ++){
                    aihaos[i].onclick = function () {
                        var checkedCount = 0;
                        // 总数量和选中的数量相等的时候，第一个复选框选中。
                        for(var i = 0; i < aihaos.length; i ++){
                            if(aihaos[i].checked){
                                checkedCount ++;
                            }
                        }
                        /*
                        if(all == checkedCount){
                            firstChkElt.checked = true;
                        }else{
                            firstChkElt.checked = false;
                        }*/
                        firstChkElt.checked = (all == checkedCount);
                    }
                }
            }


        script>

        <input type="checkbox" id="firstChk"/><br>
        <input type="checkbox" name="aihao" vlaue="smoke"/>抽烟<br>
        <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
        <input type="checkbox" name="aihao" value="tt"/>烫头<br>
    body>

html>

007-DOM编程-

008-DOM编程-显示网页时钟

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>显示网页时钟title>
    head>
    <body>
        <script type="text/javascript">
            /*
                关于JS中内置的支持类，Date，可以用来获取时间/日期
             */
            // 获取系统当前时间
            var nowTime = new Date();
            // 输出
            //document.write(nowTime);
            // 转换成具有本地语言环境的日期格式。
            nowTime = nowTime.toLocaleString();
            document.write(nowTime);
            document.write("
");
            document.write("
");

            // 当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定义日期格式。
            var t = new Date();
            var year = t.getFullYear(); // 返回年信息，以全格式返回。
            var month = t.getMonth(); // 月份是0-11
            //var dayOfWeek = t.getDay(); // 获取的是一周的第几天0-6
            var day = t.getDate(); // 获取日信息
            document.write(year + "年" + (month + 1) + "月" + day + "日");
            document.write("
");
            document.write("
");

            // 重点：怎么获取毫秒数?（从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数）
            var times = t.getTime();
            //document.write(times); // 一般会使用毫秒数作为时间戳。（timestamp）

            document.write(new Date().getTime());

        script>

        <script type="text/javascript">
            function displayTime(){
                var time = new Date();
                var strTime = time.toLocaleString();
                document.getElementById("timeDiv").innerHTML = strTime;
            }
            // 每隔1秒钟调用displayTime()函数
            function start(){
                // 从这行代码执行结束开始，则会不间断的，每隔1000毫秒调用一次displayTime()函数
                v = window.setInterval("displayTime(), 1000");
            }

            function stop(){
                window.clearInterval(v);
            }
        script>

        <br><br>
        <input type="button" value="显示系统时间" onclick="start();"/>
        <input type="button" value="系统时间停止" onclick="stop();"/>
        <div id="timeDiv">div>


    body>
html>

009-DOM编程-内置支持类Array

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内置支持类Arraytitle>
    head>
    <body>
        <script type="text/javascript">
            /*
            // 创建长度为0的数组
            var arr = [];
            alert(arr.length);

            var arr2 = [1,2,3,false,"abc",3.14]; // 最常用
            alert(arr2.length); // 6

            // 下标越界吗
            arr2[7] = "test"; // 自动扩容

            // 遍历
            for(var i = 0; i < arr2.length; i++){
                document.write(arr2[i] + "
");
            }

            // 另外一种创建数组的对象的方式.
            var a = new Array();
            alert(a.length); // 0

            var a2 = new Array(3); // 3表示长度
            alert(a2.length); // 3

            var a3 = new Array(3,2);// 具体存储的元素3和2
            alert(a3.length); // 2

             */
            var a = [1,2,3,9];
            var str = a.join("-"); // "1-2-3-9"
            alert(str);

            // 在数组的末尾添加一个元素（数组长度加1）
            a.push(10);
            alert(a.join("-")); // "1-2-3-9-10"

            // 将数组末尾元素弹出
            var endElt = a.pop(); // 10
            alert(a.join("-")); // "1-2-3-9"

            // 注意：JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则。
            // push压栈
            // pop弹栈

            // 反转数组
            a.reverse();
            alert(a.join("-")); // "9-3-2-1"


        script>
    body>
html>

js，scss常用的方法 javascriptcss
获取网页参数functiongetExtraDataByKey(key){varparams={},query=window.location.search.substring(1),arr=query.split('&'),rt;if(arr&&Array.isArray(arr)){arr.forEach(function(item,i){vartmp=item.split('='),key=
Java语言基础关键字与保留字鹿人甲丁 java java
关键字(keyword)的定义和特点定义：被Java语言赋予了特殊含义，用做专门用途的字符串（单词）特点：关键字中所有字母都为小写官方地址：https://docs.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html用于定义数据类型的关键字classinterfaceenumbyteshortintlongfloatdoublec
【学术会议论文投稿】JavaScript在数据可视化领域的探索与实践小周不想卷艾思科蓝学术会议投稿 javascript
【ACM出版|EI快检索|高录用】2024年智能医疗与可穿戴智能设备国际学术会议（SHWID2024）_艾思科蓝_学术一站式服务平台更多学术会议请看学术会议-学术交流征稿-学术会议在线-艾思科蓝目录引言JavaScript可视化库概览D3.js基础入门1.引入D3.js2.绘制简单的条形图3.添加轴交互性与动画实际应用场景结论引言在数据驱动决策日益重要的今天，数据可视化成为连接数据与洞察的桥梁。J
TypeScript 的类型系统如何提升代码质量？
引言在现代前端和后端开发中，代码质量的重要性毋庸置疑。良好的代码质量不仅能减少Bug，还能提升团队协作效率和项目的可维护性。而TypeScript的出现，为JavaScript引入了静态类型检查，成为提升代码质量的一大利器。本文将聚焦于TypeScript的类型系统，探讨它如何帮助开发者在开发阶段发现潜在问题、提升代码健壮性。类型系统的核心价值JavaScript是一门动态类型语言，这意味着变量的
Chrome DevTools 剖析：调试 JavaScript 异常
引言ChromeDevTools是一款功能强大的开发者工具，广泛应用于前端开发，尤其是调试网页和Web应用的JavaScript代码。作为GoogleChrome浏览器的一部分，它为开发者提供了一整套调试、分析和优化网页性能的功能。本文将专注于ChromeDevTools中调试JavaScript异常的功能，并详细介绍如何使用它来有效捕获和解决JavaScript错误。1.JavaScript异常
[Python数据可视化] Plotly：交互式数据可视化的强大工具 William数据分析 python python 数据分析数据可视化
引言：在数据分析和可视化的世界中，Plotly是一颗耀眼的明星。它是一个开源的交互式图表库，支持多种编程语言，包括Python、R和JavaScript。Plotly的强大之处在于它能够创建出既美观又具有高度交互性的图表，使得数据探索和分析变得更加直观和有趣。本文将详细介绍Plotly的功能，并通过实际示例展示其在数据可视化中的应用。Plotly的优势：交互性：Plotly图表具有丰富的交互功能，
MoonBit 双周报 Vol.58：原生后端支持、多行字符串插值、json.inspect 功能等多项关键特性取得显著进展！编程语言
MoonBit更新MoonBit支持native后端Wasm-gc后端支持Js-string-builtinsproposal当通过编译选项-use-js-builtin-string开启使用Js-string-builtins之后，Moonbit面向wasm-gc后端时，会使用JavaScript中的字符串类型表示MoonBit中的字符串，这时生成的wasm可执行文件中将需要从JavaScrip
5分钟内理解 .prototype 链 | 2024
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在JavaScript的世界里,原型(prototype)系统是一个常被讨论但不易掌握的概念。作为JavaScript继承模型的基石,理解原型对于构建大型应用或进行对象操作至关重要。让我们一起探索这个迷人的话题,揭开原型系统的神秘面纱。什么是原型?在JavaScript中,每个对象都有一个内部属性[[Prototype]]。这个属性
从javascript到python(一):基本环境搭建
写在前面本系列文章针对前端开发人员快速地通过javascript相关概念来理解学习python，如果你对javascript本身都不熟悉，可能这些文章就并不适合你的。这些文章主要用语本实验室的前端同学学习之用，描述可能有点累赘，还请读者理解。环境搭建安装VSCode安装Python3.7安装VSCode插件python库的安装说明：本文中的演示均是在macos环境下做的配置安装Python3.7特
JavaScript 中的 Map 完全指南 szial javascript 开发语言
JavaScript中的Map完全指南引言在JavaScript中，Map是一种用于存储键值对的数据结构，具有灵活的键类型和丰富的方法。相较于传统的对象（Object），Map提供了更高效的键值对操作方式，特别适合处理大量数据和需要频繁操作键值对的场景。本文将详细介绍Map的创建、常用方法、迭代方式，并探讨它与对象的区别和实际应用场景。1.创建Map使用newMap()来创建一个空的Map。con
Redis缓存小笨猪- Redis 缓存 redis 数据库分布式
概念核⼼思路就是把⼀些常⽤的数据放到触⼿可及(访问速度更快)的地⽅,⽅便随时读取.速度快的设备,可以作为速度慢的设备的缓存(CPU寄存器>内存>硬盘>网络)最常见的是,使用内存作为硬盘的缓存硬盘也可以作为网络的缓存,浏览器的缓存浏览器通过http/https从服务器上获取到数据(html,css,js,图片,视频...),像图片这样体积大,又不太改变的数据,就可以保存到浏览器本地(浏览器所在主机的
实现列表拖拽排序功能，可新增，可删除，拖住排序，draggable，dragstart，dragend，dragover，利用好这几个事件，完美实现拖拽功能 Sherry Tian javascript javascript 前端
你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。文章目录前言效果展示功能说明新增：删除：拖拽排序：关键点：代码实现html（结构）css（样
python实现排列组合--itertools Draina 杂项笔记 python 开发语言
这是一个python自带的工具集，简单好用功能强大，能够大大提升编写代码效率。功能不止排列组合，其他的用用加深理解了再整理。官方文档：https://docs.python.org/zh-cn/3/library/itertools.html1.1、itertools.permutations()所有可能的排列，元素不可以重复出现，第一个元素是字符集，第二个元素是组合的长度。itertools.p
1156 Sexy Primes (20) 圣保罗的大教堂 PAT刷题 pat考试
Sexyprimesarepairsofprimesoftheform(p,p+6),so-namedsince"sex"istheLatinwordfor"six".(Quotedfromhttp://mathworld.wolfram.com/SexyPrimes.html)Nowgivenaninteger,youaresupposedtotellifitisasexyprime.Input
【论文投稿】探索JavaScript前端开发：开启交互之门的神奇钥匙（一）小周不想卷艾思科蓝学术会议投稿 javascript
目录一、引言二、基础入门2.1变量与数据类型2.2条件与循环语句2.3函数三、DOM操作3.1获取DOM元素3.2修改DOM内容和样式3.3动态创建和删除DOM元素一、引言在当今数字化时代，互联网已然成为人们生活不可或缺的一部分，而网页作为互联网的主要载体，其用户体验的优劣直接关乎着信息的有效传递与用户的留存。JavaScript，这门在前端开发领域占据核心地位的编程语言，犹如一位神奇的魔法师，为
CSS让div层悬浮在最上方昨夜今夕 CSS
效果如下：这里是使得一张div里面的图片悬浮在了地图的上方，css代码如下.tl{width:240px;height:193px;position:absolute;/*这里一定要设置*/z-index:999999;/*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/margin-top:20%;margin-left:-209px;background
Delphi 10.4.1 EdgeBrowser 模拟操作网页方法 Memoselect Delphi 10++
Delphi10.4.1EdgeBrowser模拟操作网页方法以往一直用TWebBrowser或者C++Builder中的TCcpWebBrowser来写网页模拟操作这两个控件可以使用WebBrowser.OleObject.document、WebBrowser.DocumentAsIHTMLDocument2来实现大部分的操作发现这两者都是依赖于IE内核，虽然可以设定IE11内核，但是今年微软
Vue环境变量配置指南：如何在开发、生产和测试中设置环境变量 Front_Yue 前端探索之路 vue.js 前端 javascript
-##前言Vue.js是一个流行的JavaScript框架，它提供了许多工具和功能来帮助开发人员构建高效、可维护的Web应用程序。其中一个重要的工具是环境变量，它可以让你在不同的环境中配置不同的参数和选项。在这篇博客中，我们将介绍如何在Vue应用程序中设置环境变量，以及如何在开发、生产和测试环境中使用它们。正文内容一、什么是环境变量环境变量是操作系统中的一组动态值，它们可以影响应用程序的行为。这些
css 在div左上角添加类似书签的标记嗬呜阿花 STYLE LIST css 前端 html
效果图html半导体CSS.mark{float:left;margin:06rpx;position:relative;padding:0;width:24px;color:#fff;writing-mode:sideways-rl;text-align:center;}.mark::after{position:absolute;content:"";left:0;top:100%;borde
css 浮动在最上层_css样式如何控制div到最顶层 Xpc1 css 浮动在最上层
展开全部1、新建一个html文件，命名为test.html2、在test.html文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。e68a8432313133353236313431303231363533313334313663343、在test.html文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。4、在te
服务器是什么？ weixin_34258782
====转载于:https://www.cnblogs.com/Chamberlain/p/10739300.html
整理了一些上课学dw的笔记臨鱼羡上天计算机软件资料 dw资料 dw总结整理
整理了一下上课学dw的资料第一章：网页概述怎样查看网页的源代码：在网页的空白处右击，选择查看源代码，就可以看到网页的HTML代码文件，若表示是用HTMLS版本开发的网站。网页的相关概念：IP地址是：主机66.124.34.560-255之间域名：对应IP地址的www.sdcit.cnURL：网页的地址http://www.sdcit.cn/xyzx/jindex.htmlhttp:传输协议。HTM
HTML专题之DOCTYPE 前端html5html
前言石匠敲击石头的第1次有一道经典的前端面试题：DOCTYPE是什么？这个问题在网上一搜有很多相关的文章，如果让我自己回答竟然让我脑子里一片空白，我的印象里加了就表示这个网页的版本是HTML5，但是这样的回答在面试时肯定是不行的，看了很多网上的文章，决定写一篇文章来梳理一下，第一次写文章，如果有哪里讲的不对或者不完整，欢迎大家指出错误。DOCTYPE是什么DOCTYPE翻译成中文的话表示“文档类型
只有 1% 的开发人员能在 60 秒内找到代码中的错误
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读下面这段简单的JavaScript代码里藏着一个不起眼但足以让人抓狂的错误：functiongetResult(a,b){return{result:a+b};}console.log(getResult(2,3));//结果真的是5吗？表面看上去，这只是一个“把两个数相加，然后返回对象”的函数，可实际运行后却并非预期的{resul
json相关内容(python) 大哥喝阔落 json python 开发语言
JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。Python提供了json模块来处理JSON数据。以下是关于Python中JSON的详细内容：1.导入json模块importjson2.将Python对象转换为JSON字符串使用json.dumps()函数可以将Python对象（如字典、列表、字符串、数字等）转换为JS
webpack多页面打包的一次尝试
初始化cd项目名webpackinit创建第二页面与其头文件touchpage2.htmltouchsrc/page2.js修改page2.jsconsole.log("success")修改webpack.config.js添加page2.html至plugins项，添加src/page2.js至entry项最终模板:constpath=require('path');constHtmlWebp
玩转前端正则表达式正则表达式前端后端
文章首发本人博客，由于格式和图片解析问题，可以前往阅读原文JavaScript中的正则是Perl的大子集，但Perl内部的一些表达式却没有继承正则表达式是用于匹配字符串中字符组合的模式(可参考MDN教程)扫码关注公粽号，查看更多优质文章一个例子使用正则将一个数字以科学计数法进行表示，如：//10000000=>10,000,000现在用一个正则来解决conststr='10000000'const
理解静态类型：为什么选择TypeScript？
本文我们要讨论一个非常关键的概念——静态类型，以及它是如何帮助我们更好地编写代码的，特别是为什么在开发中选择TypeScript而不是传统的JavaScript。我们可能已经听说过静态类型这个词，但是它到底是什么意思？它对我们编写代码有哪些帮助？今天我们就带你一起深入理解静态类型，探讨TypeScript的优势。4.1什么是静态类型？首先，让我们明确一下静态类型这个概念。简单来说，静态类型是指变量
免费的SSL证书在哪里申请？——七大免费申请平台 sslhttphttps
免费的SSL证书可以从多个可靠的平台申请，以下是几个推荐的选择：JoySSL特点：提供永久免费的SSL证书服务，拥有自主品牌SSL证书，服务响应快速，并提供全程技术支持。适用对象：适合希望快速、自动化部署且能提供安全有效的数据保护服务的网站。申请网址：https://www.joyssl.com/certificate/select/free.html?nid=7注册码：填写(230907)享受免
深度剖析 JavaScript 变量提升与暂时性死区：原理、实战与避坑指南
在JavaScript中，变量提升与暂时性死区影响着着程序的运行逻辑、性能表现以及可维护性。接下来将从底层原理、实际场景案例以及最佳实践全方位展开深度剖析。变量提升：JavaScript引擎背后的“隐形重构”JavaScript在执行代码前，引擎会率先开启编译流程，其中变量提升堪称关键一环。使用var关键字声明的变量以及函数声明，都会被自动“提升”至所在作用域的顶部。这一过程并非物理层面挪动代码，
Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取 HtmlExtractor 精准抽取信息采集
HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。 HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。如
java编程思想 -- 多态百合不是茶 java 多态详解
一: 向上转型和向下转型面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
[自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长.... 首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
storm 自定义日志文件商人shang storm cluster logback
Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下：（由于使用了父类aaa
一些排错方法文强chu 方法
1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
Swing中文件恢复我觉得很难小桔子 swing
我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
php 文件操作 aichenglong PHP 读取文件写入文件
1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
MySQL的btree索引和hash索引的区别 AILIKES 数据结构 mysql 算法
Hash 索引结构的特殊性，其检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
JAVA的抽象--- 接口 --实现百合不是茶
抽象接口实现接口 //抽象类 ,方法 //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体抽象的定义使用abstract abstract class A 定义一个抽象类例如： //定义一个基类 public abstract class A{ //抽象类不能用来实例化，只能用来继承 //
JS变量作用域实例 bijian1013 作用域
<script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
TDD实践（二） bijian1013 java TDD
实践题目：分解质因数 Step1：单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
[MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。本文介绍MongoDB的主从复制模式，需要指明
【HBase五】Java API操作HBase bit1129 hbase
import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
python调用zabbix api接口实时展示数据 ronin47
zabbix api接口来进行展示。经过思考之后，计划获取如下内容： 1、获得认证密钥 2、获取zabbix所有的主机组 3、获取单个组下的所有主机 4、获取某个主机下的所有监控项
jsp取得绝对路径 byalias 绝对路径
在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下：一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
Java定时任务调度：用ExecutorService取代Timer bylijinnan java
《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是：如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
SQL 优化原则 chicony sql
一、问题的提出　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
java 线程弹球小游戏 CrazyMizzz java 游戏
最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
hadoop jps出现process information unavailable提示解决办法 daizj hadoop jps
hadoop jps出现process information unavailable提示解决办法 jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
PHP图片水印缩放类实现 dcj3sjt126com PHP
<?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
IOS控件学习：UILabel常用属性与用法 dcj3sjt126com ios UILabel
参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
完全手动建立maven骨架 eksliang java eclipse Web
建一个 JAVA 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
配置清单 gengzg 配置
1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
Windows端口被占用处理方法 huqiji windows
以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等. 这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！天梯梦 mobile
CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
简单工厂设计模式 hm4123660 java 工厂设计模式简单工厂模式
简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
maven笔记 zhb8015 maven
跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。指定测试类 mvn test
非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer map hbase reduce Hfile path实例
最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
jsp web tomcat 编码问题王新春 tomcat jsp pageEncode
今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi

JavaScript基础03 - DOM编程

JavaScript基础03

001-DOM编程- 获取文本框的value

002-DOM编程-innerHTML和innerText操作div和span

003-DOM编程-关于正则表达式

004-DOM编程-去除字符串前后的空白

005-DOM编程-表单验证

006-DOM编程-复选框的全选和取消全选

007-DOM编程-

008-DOM编程-显示网页时钟

009-DOM编程-内置支持类Array

你可能感兴趣的:(javascript,html,css)