JavaScript基础（二）

最新推荐文章于 2023-05-09 19:08:55 发布
最新推荐文章于 2023-05-09 19:08:55 发布
阅读量352 收藏
点赞数
分类专栏： 前端

1.页面加载事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;

        }
    </style>
    <script>
        window.onload = function() {
            var demo = document.getElementById("demo");
            demo.style.backgroundColor = "red";
        }
    </script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>

总结：window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:
一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

2.数组的常用操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #ffff00;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>
<script>
    //  push 组
    var arr = [1,3,5,7];   // 原数组
    arr.push(9);  //把 9 添加 arr 的最后面
    console.log(arr);   //  13579
    console.log(arr.push(11));  // 返回的是数组的长度 6
    console.log(arr);  // 1.3.5.7.9.11
    // unshift 组
    var  arr1 = ["a","b","c"];
    arr1.unshift("你好");
    console.log(arr1);  // ["你好", "a", "b", "c"]
    console.log(arr1.unshift("今天"));  // 返回数组的长度  5
    console.log(arr1);

    // pop()  删除最后一个元素   并且返回最后一个值
    var arrpop = [1,2,3,4,5];
    arrpop.pop();  // 删除一次  把 5删掉了   [1,2,3,4]
    console.log(arrpop);  // [1,2,3,4]
    console.log(arrpop.pop());  // 把 4 删掉   剩下  [1,2,3]  返回的是 4
    console.log(arrpop);  // [1,2,3]

    // shift 删除第一个元素    并且返回第一个值
    var arrshift = ["a","b","c"];
    console.log(arrshift.shift()); //  a
    console.log(arrshift);  // [b,c]
    arrshift.shift();  // 吧b  删掉了， 并且返回 b
    console.log(arrshift);  // 只剩下一个c

   // 连接数组
    var aa = [1,2,3];
    var bb = ["a","b","c"];
    console.log(aa.concat(bb));  // 新的数组 [1, 2, 3, "a", "b", "c"]
    console.log(aa);
    console.log(bb);

   // join  将数组转换为字符串
    var arrjoin = ["2015","12","2"];
    console.log(arrjoin.join("-"));  //  2015-12-2   字符串
    console.log(arrjoin.join("+")); //  2015+12+2
    console.log(arrjoin.join("*")); //  2015*12*2
    console.log(arrjoin);  //  结果是原数组   不影响本数组

    // split 将字符串转换为数组
    var txt = "2015-12-2";
    var text = "中国 山东 威海 小渔村";
    console.log(txt.split("-"));
    console.log(text.split(" "));
    //  <div class="one demo test"> </div>


</script>

2.1 获取className

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <div></div>
</div>
<div></div>
<div></div>
<div class="two one"></div>
<div></div>
<div></div>
<div class="one"></div>
<div></div>
<div></div>
<div class="one"></div>
</body>
</html>
<script>
    var ones = document.getElementsByClassName("one");  // 所有的类名
    for(var i=0;i<ones.length;i++) {
        ones[i].style.backgroundColor = "purple";
    }
</script>

2.2 封装获取类名兼容性写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="demo nav test"></div>
<div></div>
<div class="demo"></div>
<div></div>
<div></div>
<div></div>
<div class="demo"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
    //  分两部分 ，首先是浏览器支持de
    function getClassName(classname) {   // 形参
        //  先看看浏览器支不支持
        if(document.getElementsByClassName) {   // 如果支持这个写法
            return document.getElementsByClassName(classname);  // 直接返回所有元素
        }
        // 下面的语句是ie678 执行
        // 核心思想   把所有的标签都取过来， 然后一个一个的判断当前元素的类名是不是  classname
        //是就留下，不是 就走开
        // alert(11);
        var arr = [];  //数组用来存储满足条件的 元素
        var dom = document.getElementsByTagName("*");  // 把所有的标签都取过来 *  所有的
        // 去过所有的标签之后， 把 每一个标签的类名 （字符串） 转换为数组 ， 只有数组才可以遍历
        for(var i=0;i<dom.length;i++) {  // 遍历每一个标签
            // 把每一个标签的类名 转换为数组
            var arrName = dom[i].className.split(" "); 
            for(var j=0;j<arrName.length;j++) {  // 遍历 arrname
                if(arrName[j] == classname) { // 判断
                    arr.push(dom[i]); // 把当前满足条件的元素  给 arr
                }
            }
        }
        return arr;  // 返回总的数组
    }
    console.log(getClassName("demo").length);  // 实参
</script>

总结：核心思想 就是把所有的标签都取过来， 然后一个一个的判断当前元素的类名是不是 classname

3. 节点

3.1 父节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div id="xiongda">
        <div id="xionghaizi"></div>
    </div>
</div>
</body>
</html>
<script>
    var xionghai = document.getElementById("xionghaizi");
    console.log(xionghai.parentNode.parentNode.id);// demo
</script>

3.2 兄弟节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>1</div>
<div id="two">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
<script>
    var two = document.getElementById("two");
    var next = two.nextElementSibling || two.nextSibling;// two的下一个节点。就是 3
    next.style.backgroundColor = "purple"; // 设置3的背景为紫色
</script>

3.3 第一个孩子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="father">
    <div class="son">123</div>
    <div class="son">123</div>
    <div class="son">123</div>
    <div class="son">123</div>
    <div class="son">123</div>
</div>
</body>
</html>
<script>
  var father = document.getElementById("father");
    // father.firstChild.style.backgroundColor = "gray";
    var first = father.firstElementChild || father.firstChild;  // 兼容得到 第一个亲儿子
    var last = father.lastElementChild || father.lastChild;  //  兼容得到最后一个儿子
    first.style.backgroundColor = "gray";
    last.style.backgroundColor = "gray";
</script>

3.4 孩子们1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    // alert(demo.childNodes.length);  // 结果是 7 个 ，包含了 4个 换行
    var nodes = demo.childNodes;  // 获取了所有的孩子节点  包含 div  包含 换行等等 7
    for(var i=0;i<nodes.length;i++) {
        if(nodes[i].nodeType == 1) {  // nodetype 是1  表示 元素节点
            nodes[i].style.backgroundColor = "red";
        }
    }
</script>

3.5 孩子们2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>3</div>
    <!--我是注释-->
    <!--<div>3</div>-->
</div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    // alert(demo.children.length);
    var child = demo.children;   // demo 里面所有的 标签
    alert(child.length);
    child[0].style.backgroundColor = "red";   // 第一个孩子
    child[child.length-1].style.backgroundColor = "red";   // 最后一个孩子
</script>

4.dom操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div class="one"></div>
</div>

</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var test = document.createElement("div");  // 创建了一个新的div
    // a.appendChild(b)  把b放到a 里面
    demo.appendChild(test);   // 把test 追加到  demo 里面
</script>

4.1 点击动态生成li

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">点击</button>
<ul id="demo">

</ul>
</body>
</html>
<script>
    var btn =document.getElementById("btn");
    var demo = document.getElementById("demo");
    btn.onclick = function() {
        var newLi = document.createElement("li");  // 新li
        demo.appendChild(newLi);
    }
</script>

4.2 插入节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div id="xiongda"></div>
</div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var newDiv = document.createElement("div");  // 新div
    var xiongda = document.getElementById("xiongda");
    demo.appendChild(newDiv);
    var newSpan = document.createElement("span");
    demo.insertBefore(newSpan,newDiv);  // 1 参数  插入的子节点   2 参数 参照节点
</script>

4.3 设置属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="demo" class="demo">
    <div id="xiongda"></div>
</div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var newDiv = document.createElement("div");  // 新div
    var xiongda = document.getElementById("xiongda");
    demo.appendChild(newDiv);
    var newSpan = document.createElement("span");
    demo.insertBefore(newSpan,newDiv);  // 1 参数  插入的子节点   2 参数 参照节点
    newDiv.setAttribute("class","box");   //  等价于  newDiv.className = "box"
    demo.removeAttribute("class");
</script>

4.4 设置多个css属性cssText

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div></div>
</body>
</html>
<script>
    var div = document.getElementsByTagName("div")[0];
   /* div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'pink';*/
    div.style.cssText = "width:100px;height:100px; background-color:purple";
</script>

4.5 删除节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div id="one"></div>
</div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var one = document.getElementById("one");
    demo.removeChild(one);
</script>

4.6 复制节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo">
    <div id="damao"></div>
    <div id="ermao"></div>
</div>

</body>
</html>
<script>
    var demo = document.getElementById("demo");
    // demo.cloneNode(true);  // 克隆节点
    demo.parentNode.appendChild(demo.cloneNode(true));
</script>

5.日期、定时器

5.1 声明日期函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    var date = new Date();  // 创建日期
    console.log(date);  // Mon Jul 10 2017 05:25:37 GMT+0800 (CST)
    console.log(date.getMonth()+1); // 7 月份从0开始所以要+1
    console.log(date.getFullYear());// 2017
</script>

5.2 日历

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .date {
            width: 200px;
            height: 220px;
            background-color: #369;
            margin: 100px auto;
            text-align: center;
            padding-top:25px;
        }
        .date span {
            color: white;
        }
        .date p {
            width: 120px;
            height: 120px;
            background-color: darkorange;
            margin:50px auto  0;
            line-height: 120px;
            font-size: 70px;
        }
    </style>
</head>
<body>
<div class="date" id="date">
    <span></span>
    <p></p>
</div>
</body>
</html>
<script>
    var box = document.getElementById("date");  // 最大盒子
    var date = new Date();  // 声明 创建 日期
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // date.getDate获取这个星期的第几日。从星期日开始算的。
    box.children[1].innerHTML = date.getDate();
    box.children[0].innerHTML = date.getFullYear() + "年" + (date.getMonth()+1) + "月" +
    date.getDate() + "日 " + arr[date.getDay()];
</script>

5.3 定时器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    setInterval("console.log('你好吗')",1000); // 每隔一秒钟输出一次你好吗
</script>

5.4 获取毫秒数的几种方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    var date = new Date();
    console.log(date.getTime()); //1499637296786
    console.log(date.valueOf()); // 1499637296786
    console.log(Date.now()); // 1499637296786
    console.log(+new Date()); // 1499637296786
</script>

5.5 倒计时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            font-size:30px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var endTime = new Date("2018/12/12 17:30:00");   // 目标时间
    setInterval(timer,1000);  // 每隔1000毫秒就调用一次 timer 这个 函数
    // 根据相差的毫秒数，计算出天数小时分钟等等。
    function timer() {
        var nowDate = new Date();  // 现在时间 getTime得到是毫秒  /  10000 后 得到的是秒
        var second = parseInt((endTime.getTime() - nowDate.getTime()) / 1000); // 根据现在和目标的秒差可以算出相差的时分秒，一小时3600秒。
        // 还剩下多少时间  单位是秒
        // console.log(second);
        var d = parseInt(second / 3600 / 24);  // 天数 second / 3600 得 小时 / 24 的天数 
        //console.log(d); // %24 得到剩余的 h 。 24小时为一天，一个周期。
        var h = parseInt(second / 3600 % 24); // 小时  用总的小时数 %24  不超过24小时，一天24小时一个周期，取余就是不足的周期有多少小时
        console.log(h)
        var m = parseInt(second / 60 % 60);  // 分钟   不超过  60分  一分有60秒，一分60秒为一个周期。分数取余，得到不足的周期分钟数
        console.log(m);
        var s = second % 60;   // 还剩下秒数 
总结:周期取余得到不足的数。如以总的小时%24得出不足的小时的数量
        console.log(s);
        d<10 ? d = "0" + d : d;   // 小于10 的时候我们给与 补 0    a++    不同于   a= a + 1
        h<10 ? h = "0" + h : h;
        m<10 ? m = "0" + m : m;
        s = s<10 ? "0"+s : s;
        function flag(obj) {
            return obj = obj<10 ? "0" + obj : obj;
        }
        demo.innerHTML = "距离抢购还剩下" + d + "天" + h + "小时" + m + "分" + s + "秒";
        demo.innerHTML = "距离抢购还剩下" + flag(d) + "天" + h + "小时" + m + "分" + s + "秒";
    }
 </script>

6.运算符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    console.log(0||1);  // 1  ｜｜　前面错的，后面对的 返回后面
    console.log(1||0);  // 1　｜｜　两个都对返回前面的
    console.log(1||5);  // 1
    console.log(5||1); // 5
   var a = 0 || 1 || 2;
   var b = 1 || 0 || 3;
   console.log(a),console.log(b); // 1 1
   var a = 1+4&&3;   // 3  && 前面是对的，返回后面的结果
   var b = 0&& 3+1;  // 0  && 前面是错的，直接返回前面
   var c= 1 || 2 && 5-1;  // 1
   alert(a),alert(b),alert(c);
</script>

7.字符串

7.1 转换成字符串

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    var num = 10;
    console.log(typeof typeof num); //  "number"
    console.log("num");   // 是 num   不是   "10"
    console.log(typeof (num+ "")); // string
    console.log(typeof String(num)); // string
    var test = 19;
    console.log(typeof (test.toString()));　// string
    var demo = 10;
    console.log(demo.toString(2));    // 把 demo 里面值 转换为 2进制　１０１０
</script>

7.2根据位置返回字符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    var txt = "abcdefg";
    alert(txt.charAt(3));  // 返回 索引号3 的 字符    d
    var demo = "今天是周末";
    alert(demo.charAt(2));  //   返回   是
    alert(txt.charCodeAt(3));  // 返回的是相应的 字符 的 unicode 编码 100
    alert(demo.charCodeAt(2)); // 26159
</script>

7.3 检测字符串长度

<script>
var txt = "what are you 伐木累!";
//如果是英文等字母就+1，如果是汉字就 +2
function getStringlenght(string){
var code = 0;
var len = 0;
for(var i =0;i<string.length;i++){
code = string.charCodeAt(i);
if(code>=0 && code<=127){ // 表示这是英文
len++;
}else{
len + =2 ; //表示这是汉字 长度+2
}
}
return len;
}
console.log(getStringLenght(txt));
</script>

7.3根据字符串返回位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    var txt = "今天是周末是很开心的一天啊";
    alert(txt.indexOf("是"));
    alert(txt.lastIndexOf("是"));  // 从后面往前面找， 找到后，索引号 数的时候从前面往后数
</script>

7.4 url编码和解码

为什么要进行url编码：http://www.cnblogs.com/jerrysion/p/5522673.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    var url = "localhost:itcast.cn? name=andy";
    var str = encodeURIComponent(url);  // 编码的过程
    console.log(str); // localhost%3Aitcast.cn%3F%20name%3Dandy
    console.log(decodeURIComponent(str)); // 解码 localhost:itcast.cn? name=andy
</script>

7.4 截取字符串

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function() {
            var div1 = document.getElementById("div1").innerHTML;
            var div2 = document.getElementById("div2").innerHTML;
            function onButtonClick(id,txt) {
                document.getElementById(id).onclick = function() {
                    this.nextSibling.innerHTML = txt;   //按钮的下一个兄弟是 span
                }
            }
            // slice
            onButtonClick("btn1",div1.concat(div2));
            onButtonClick("btn2",div1.slice(3));  // 从3开始截取div1
            onButtonClick("btn3",div1.slice(3,6));  // 从3开始截取div1  到6
            onButtonClick("btn4",div1.slice(-1));  // 从3开始截取div1  到6
           // substr
            onButtonClick("btn5",div1.substr(3));  // 从3开始截取div1
            onButtonClick("btn6",div1.substr(3,6));  // 从3开始截取div1
            onButtonClick("btn7",div1.substr(-1));  // 从3开始截取div1
            onButtonClick("btn8",div1.substr(div1.length-1,1));
            //  div1.length-1  是最后一个字母
            // substring
            onButtonClick("btn9",div1.substring(3));
            onButtonClick("btn10",div1.substring(3,6));
            onButtonClick("btn11",div1.substring(6,3));
            onButtonClick("btn12",div1.substring(-1));
        }
    </script>
</head>
<body>
<div id="div1">my name is andy！</div>
<div id="div2">what's your name?</div>
<button id="btn1">concat</button><span></span> <br/>
<button id="btn2">slice(3)</button><span></span> <br/>
<button id="btn3">slice(3,6)</button><span></span> <br/>
<button id="btn4">slice(-1)</button><span></span> <br/>
<button id="btn5">substr(3)</button><span></span> <br/>
<button id="btn6">substr(3,6)</button><span></span> <br/>
<button id="btn7">substr(-1)</button><span></span> <br/>
<button id="btn8">substr(-1兼容写法)</button><span></span> <br/>
<button id="btn9">substring(3)</button><span></span> <br/>
<button id="btn10">substring(3,6)</button><span></span> <br/>
<button id="btn11">substring(6,3)</button><span></span> <br/>
<button id="btn12">substring(-1)</button><span></span> <br/>
</body>
</html>

7.5 保留小数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    var PI = 3.1415;
    console.log(PI.toFixed(2)); // 3.14 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
</script>

7.6转换大小写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
请输入: <input type="text" id="txt"/>  <button id="btn">发布</button>
<h1 id="big">输入大标题</h1>
<span id="small">小标题</span>
</body>
</html>
<script>
    function $(id)  {return document.getElementById(id);}
    $("btn").onclick = function() {
        $("big").innerHTML = $("txt").value.toUpperCase();  // 转换为大写
        $("small").innerHTML = $("txt").value.toLowerCase()  // 转换为小写
    }
</script>

7.8 验证上传文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="file" name="" id="file"/><span></span>  <!--文件域-->
</body>
</html>
<script>
    var file = document.getElementById("file");
    file.onchange = function() {  // 下拉列表
        //   alert(11);
        // alert(this.value);   // c://imags/1.png1
        // 我们要开始进行判断  我们上传的文件是否是合法的
      //  1.jpg   1.jepg    1.JPG    1.JPEG  都是合法的
        // 1.doc.jpg  也是对的
        // 后缀名 我们应该从  后面开始找  .
        var path = this.value;
        // 得到完整路径    c://imags/1.png
        var suffix = path.substr(path.lastIndexOf(".")).toUpperCase();  // 取后缀名
        //alert(suffix);
        //  path.lastIndexOf(".")   "c://imags/1.png".lastIndexOf(".")  == 12
        //path.substr(12)  "c://imags/1.png".substr(12);   .png
        if(suffix == ".JPG" || suffix == ".JPEG" || suffix == ".PNG") {
            this.nextSibling.innerHTML = "格式正确";
        }
        else {
            this.nextSibling.innerHTML = "格式不正确";
        }
    }
</script>

8.简单模拟jquery$选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="demo">1</div>
<div>2</div>
<div>2</div>
<div class="test">3</div>
<div>2</div>
<div class="test">3</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</body>
</html>
<script>
    function getClassName(classname) {   // 形参
        //  先看看浏览器支不支持
        if(document.getElementsByClassName) {   // 如果支持这个写法
            return document.getElementsByClassName(classname);  // 直接返回所有元素
        }
        // 下面的语句是ie678 执行
        // 核心思想   把所有的标签都取过来， 然后一个一个的判断当前元素的类名是不是  classname
        //是就留下，不是 就走开
        // alert(11);
        var arr = [];  //数组用来存储满足条件的 元素
        var dom = document.getElementsByTagName("*");  // 把所有的标签都取过来 *  所有的
        // 去过所有的标签之后， 把 每一个标签的类名 （字符串） 转换为数组 ， 只有数组才可以遍历
        for(var i=0;i<dom.length;i++) {  // 遍历每一个标签
            // 把每一个标签的类名 转换为数组
            var arrName = dom[i].className.split(" "); // "demo nav test"   = ["demo","nav","test"];
            // var arrName = ["demo","nav","test"];  // 用来存储每一个 类名的数组
            for(var j=0;j<arrName.length;j++) {  // 遍历 arrname
                if(arrName[j] == classname) { // 判断
                    arr.push(dom[i]); // 把当前满足条件的元素  给 arr
                }
            }
        }
        return arr;  // 返回总的数组
    }
   /* $('#demo')    jquery 里面的
    $('.demo')
    $("div")*/
    function $(str) {
        var s = str.charAt(0);   // 相当于 取  #  .  d   取 符号
        var ss = str.substr(1);  // 相当于 demo  test  iv   除了符号
        switch(s) {
            case "#":
                return document.getElementById(ss);
            break;
            case ".":
                return getClassName(ss);
            break;
            default :
                return document.getElementsByTagName(str);
        }
    }
    $("#demo").style.backgroundColor = "red";
    for(var i=0;i<$(".test").length;i++)
    {
        $(".test")[i].style.backgroundColor = 'purple';
    }
   console.log($("div").length);
</script>
小邪铭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础
ccyzq的博客
12-22 3442
文章目录前言一、JavaScript简介二、JavaScript使用形式三、基本语法四、运算符五、流程控制六、函数 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 一、JavaScript简介 二、JavaScript使用形式 三、基本语法 四、运算符 五、流程控制 六、函数 ...
JavaScript 基础问答二
10-30
### JavaScript的局限性及其发展历史 #### JavaScript的局限性 **1. 打印与设备访问** - **局限性:** JavaScript本身无法直接控制用户的打印机或其他硬件设备，这主要是出于安全考虑，防止恶意脚本对用户的硬件...
JavaScript字符串 数组处理
猫老板的豆
11-23 1135
/*字符串处理*/ vara="Helloworld!" console.log(a.indexOf("e"))//1l的index不存在-1lastIndexOf() console.log(a.search("w"))//6l的index
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础语法
m0_67683346的博客
11-02 5677
javascript中的一些基础语法
JavaScript的基础语法
m0_72161237的博客
05-09 2723
对于 JavaScript 认知： 1️⃣是世界上最流行的编程语言之一 2️⃣是一个脚本，通过解释器运行 3️⃣主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行 那么JavaScript 能做哪些事情呢？ 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
javascript基础
全栈攻城狮JSON的博客
05-30 2215
目录 一、概述 1、概念 2、作用 二、用法 1、html页面中的javascript 2、外部的javascript 3、标签中的javascript 4、javascript显示数据 5、javascirpt注释 三、javascript基本语法 1、javascript变量 2、javascript的语句 3、javascript数据类型 3.1 值类型 3.2 引用数据类型 3.3 javascript拥有动态类型 4、javascript中运算符 四、javas
JavaScript 基础（超详细）
TKOP_的博客
03-02 9479
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
头歌-JavaScript基础
somewon的博客
04-17 5158
第2关：JavaScript 数据类型转换。第1关：JavaScript 数据类型介绍。JavaScript 学习手册五：JS数组。JavaScript 学习手册八：JS函数。第1关：数组的创建、读写和长度。第3关：数组的遍历和多维数组。第5关：数组的应用——内排序。第1关：用函数语句定义函数。第2关：用表达式定义函数。第2关：数组元素的增减。第4关：数组的常用方法。第3关：JSON字符串。第4关：未定义的实参。第6关：对象作为参数。第2关：JSON数组。第1关：JSON对象。
JavaScript入门基础
『愚』的博客
11-06 3846
JavaScript入门基础概述变量的声明变量的作用域基本数据类型Number类型String类型Boolean类型Undefined类型Null类型三大引用类型Object类型Array类型Function类型typeof 操作符js编写的位置js的三种输出方式 概述 JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，Jav
JavaScript基础语法笔记
04-12
此“JavaScript基础语法笔记”涵盖了学习JS所必需的关键概念，包括循环结构、对象以及基本语法。 一、for循环 在JavaScript中，`for`循环是一种常用的迭代结构，用于重复执行一段代码直到特定条件满足。基本语法...
JavaScript基础(二).ppt
07-23
主要内容： 必填验证 一致性验证 正则式验证 数据范围验证 JS验证练习 正则式-元字符 正则式-量词 等等
全栈必备JavaScript基础
02-25
在今年RedMonk推出的2017年第一季度编程语言排行榜中，JavaScript排第一，Java第二，Python反超PHP排第三，PHP第四，C#和C++并列第五。RedMonk排名的主要依旧是各种编程语言在StackOverflow和GitHub上的表现，比如...
javascript基础语法
03-31
### JavaScript基础语法详解 #### 一、JavaScript简介 JavaScript是一种广泛使用的编程语言，主要用于Web开发。ECMAScript标准定义了JavaScript的核心语法。 ##### 1.1 JavaScript书写位置 JavaScript可以在HTML...
Javascript基础知识（二）事件
10-25
本文是javascript系列文章的第二篇，主要介绍javascript事件，都是本人的一些心得，希望对大家有所帮助
JavaScript语法基础
06-05
#### 二、JavaScript 的功能与规则 **JavaScript** 功能非常强大，可以用于多种用途，包括但不限于： - **提供用户交互**：例如响应用户的点击事件。 - **动态更改内容**：例如根据用户操作更新页面内容。 - **验证...
javascript教案 JavaScript基础
03-27
javascript教案 JavaScript基础 【实例简介】javascript教案 javascript学习指导，语法基础的指导及编写格式和方法的说明 第一章 概述 4 1．1 JavaScript的由来 4 1．2 什么是JavaScript 4 1．3 JavaScript的特点...
JavaScript：JavaScript基础语法
最新发布
07-14
### JavaScript基础语法详解 #### 一、JavaScript的历史与发展 JavaScript 是一种重要的编程语言，由 Netscape 公司的 Brendan Eich 在1995年仅用10天时间创造出来。起初，它被称为 Mocha，之后又更名为 ...
JavaScript基础与应用探索
JavaScript的学习是一个不断深入的过程，从基础语法到高级特性，再到框架和库的使用，掌握JavaScript意味着你可以构建复杂的Web应用程序，提供丰富的用户体验。随着技术的发展，JavaScript也在不断进化，例如ES6的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值