JS学习笔记二 DOM，正则表达式简单例子介绍

最新推荐文章于 2023-08-02 23:16:12 发布

思思～

最新推荐文章于 2023-08-02 23:16:12 发布

阅读量123

点赞数

分类专栏：前端学习文章标签： js html

本文链接：https://blog.csdn.net/qq_45231291/article/details/117706294

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、正则表达式

例子：
var patt = /w3school/i;
例子解释：
/w3school/i 是一个正则表达式。
w3school 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。

二、DOM

HTML DOM Document 对象：
文档对象代表您的网页。
访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

三、例子

练习一：页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

练习二：使用正则表达式，让页面中这段字符串 “我爱你哈哈爱你” 中的”爱“字全变为红色

<!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 src="../js/PassFourteen.js"></script> -->
    <!-- <link rel="stylesheet" href="../css/PassFourteen.css"> -->
</head>
</head>
<body>
    <div>
        <ul id="c1">
            <li class="l1">一 </li>
            <li class="l1">二</li>
            <li class="l1">三</li>
            <li class="l1">四</li>
            <li class="l1">五</li>
        </ul>
        
    </div>
    <button onclick="b1()" type="button" >练习一加载页面</button>
    <div>
       <p id="p1">我爱你哈哈爱你</p> 
       <button onclick="b2()" type="button" >练习二正则表达式</button>
    </div>
    <script>
    function b1(){
         
       
        var li=document.getElementsByClassName("l1")
        
        for(var i=0;i<li.length;i++)
        {
            if(i%2==1)//奇数        
              {
                li[i].style.backgroundColor="red"
            }
            else{
                li[i].style.backgroundColor="green"
            }
        }
      
        
        }
        function b2(){
            var p1=document.getElementById("p1")
            var str=p1.innerHTML
            var res = new RegExp("爱",'g');
            text=str.replace(res,"<span style='color:red'>"+"爱"+"</span>")
            document.write(text)
            
        }
    </script>
</body>
</html>

结果图：

使用JS完成简易计算器
要求：输入的值只能是数字，使用正则表达式

<body>
    <div>
        <form action="">
            <input type="text" name="number1" id="number1"  onchange="check1()">
            <select name="char" id="char">
                <option value="jia">+</option>
                <option value="jian">-</option>
                <option value="cheng" selected>×</option>
                <option value="chu">÷</option>
            </select>
            <input type="text" name="number2" id="number2"  onblur="check2()">
            <span><b>=</b></span>
            <input type="text" name="result" id="result" readonly>
        </form>
        <div>
            <button onclick="calculate()">计算</button>
        </div>
    </div>
    
</body>

function jia(a,b){
    return a+b;
}
function jian(a,b){
    return a-b;
}
function cheng(a,b){
    return a*b;
}
function chu(a,b){
    if(b == 0) return false;
    return a/b;
}

function typeCheck(str){
    regx = /^\d+$/;
    return regx.test(str);
}

function check1(){
    var obj =document.getElementById("number1");
    var str1 = obj.value;
    
    if(!typeCheck(str1)){
        alert("请输入数字");
        obj.value="";
    }
    else console.log("number1 is true");
}
function check2(){
    var obj =document.getElementById("number2");
    var str2 = obj.value;
    if(!typeCheck(str2)){
        console.log("请输入数字");
        obj.value="";
    }
    else console.log("number2 is true");
}


function calculate(){
    var str1 = document.getElementById("number1").value;
    var number1 =parseInt(str1) ;
    var str2 = document.getElementById("number2").value;
    var number2 =parseInt(str2) ;
    var out = document.getElementById("result");
    var obj = document.getElementById("char");
    var index = obj.selectedIndex; // 选中索引
    var calculation = obj[index].value; // 选中值
    parseInt()
    if(number1 !="" && number2 !=""){
        var result ;
        switch (calculation) {
            case 'jia':
                result = jia(number1,number2);
                break;
            case 'jian':
                result = jian(number1,number2);
                break;
            case 'cheng':
                result = cheng(number1,number2);
                break;
            case 'chu':
                result = chu(number1,number2);
                break;
            default:
                break;
        }
        out.value = result;

    }
}

结果图：