Day42 JavaScript-2

最新推荐文章于 2024-08-31 16:50:27 发布
最新推荐文章于 2024-08-31 16:50:27 发布
阅读量199 收藏
点赞数
分类专栏： JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21953671/article/details/79403168
版权

JavaScript

学习网站：http://www.w3school.com.cn/html/index.asp
JavaScript由三部分组成：EMCAScript、DOM、BOM。
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容，结构以及样式的平台和语言中立的接口。而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。首先应该清楚的是两者皆为接口定义。

  • DOM是W3C的标准（所有浏览器公共遵守的标准）
  • BOM是各个浏览器厂商根据DOM在各自浏览器上的实现
  • window是BOM对象，而非JavaScript对象，不过恰好为EMCAScript中所定义的Global对象

01-js的常用方法和对象学习

<html>
    <head>
        <title>js的常用方法和对象学习</title>
        <meta charset="UTF-8"/> 
        <!--
            js的常用方法和对象学习:
                String对象：操作字符的。
                    使用：字符串.函数名即可
                    大小写转换：
                        toUpperCase()   转换大写
                        toLowerCase()   转换小写
                    字符串截取
                        substr(0,1)     从指定开始位置截取指定长度的子字符串
                        substring(0,1)  从指定位置开始到指定的结束位置的子字符串（含头不含尾）
                    查找字符位置
                        indexOf         返回指定字符第一次出现的位置。
                        lastIndexOf     返回指定字符最后一次出现的位置。
                Date对象：
                    使用： var 变量名=new Date();
                    注意：获取的是客户端的时间，不能作为系统功能校验的时间的。
                    参照：API
                Math对象：
                    使用：Math.函数名
                    random()
                    round()
                    ceil()
                    floor()
                Global对象
                    eval()
                    isNaN()
                    parseInt()
                    parseFloat()
        -->
        <script type="text/javascript">
            //String对象
            function testString(){
                //创建字符串
                var str="abcdefg";
                //大小写转换
                    alert(str.toUpperCase()+":"+str.toLowerCase());
                //字符串截取
                    alert(str.substr(0,1)+":"+str.substring(0,1));
                    alert(str.substr(0,1).toUpperCase()+str.substr(1,str.length));
            }
            //Date对象
            function testDate(){
                //创建日期对象
                var d=new Date();
                //操作日期和时间
                    //获取年份
                    alert(d.getYear());//返回从1900年起算距今的年分数
                    alert(d.getFullYear());//返回当前的年份
                    //获取月份
                    alert(d.getMonth()+1);//获取当前的月份数（注意：要+1）
                    //获取日期
                    alert(d.getDate());//返回当前的日期
                    //获取星期数
                    alert(d.getDay());//返回星期数，注意星期日返回0
                    //获取小时数
                    alert(d.getHours());//返回当前的小时数
                    //获取分钟数
                    alert(d.getMinutes());//返回当前的分钟数
                    //获取秒数  
                    alert(d.getSeconds());//返回当前的秒数
            }
            //Math对象
            function testMath(){
                //随机数字
                alert(Math.floor(Math.random()*9000+1000));//可以作为验证码

            }
            //Global对象
            function testGlobal(){
                //eval方法  将字符串转换为js代码执行
                eval("var a='123';");
                alert(a);
                //isNaN 判断Number强转后是否是数字。
                if(!isNaN(a)){
                    alert("是数字")
                }else{
                    alert("不是数字")
                }
            }
        </script>
    </head>
    <body>
        <h3>js的常用方法和对象学习</h3>
        <hr />
        <input type="button" id="" value="测试String对象" onclick="testString()"/>
        <input type="button" id="" value="测试Date对象" onclick="testDate()"/>
        <input type="button" id="" value="测试Math对象" onclick="testMath()"/>
        <input type="button" id="" value="测试Global对象" onclick="testGlobal()"/>

    </body>
</html>

02-js的window对象学习-方法（1)

<html>
    <head>
        <title>js的window对象学习</title>
        <meta charset="UTF-8"/>
        <!--
            问题:
                浏览器是由浏览器厂商来发明创造的，不同的浏览器厂商的浏览器对外
                提供的能让程序员直接调用的方法不同，这样就造成程序员在书写浏览器
                脚本语言时，需要同时写好几套，极大的阻碍了互联网的发展。
            解决：
                BOM浏览器对象模型：其实就一种规范
                    规范浏览器的对开发语言的支持。
            实现:
                浏览器对外提供对象：window对象
                作用：
                    封存了浏览器对外提供的操作HTML和其他特效的方法。
            使用：
                window对象的常用方法：
                    框体方法：
                        警告框:
                            alert("内容");
                        确认框:
                            confirm("内容");
                            提示用户是否继续进行选择的操作。
                            确定：true
                            取消：fasle
                        文本框：
                            prompt("提示语")
                            收集用户数据
                            如果用户书写了内容点击确定则返回用户数据
                            点击取消则返回null
                    定时方法：
                        定时执行:
                            作用：间隔指定的时间后执行指定的函数。
                            window.setTimeOut(函数,时间);//返回当前线程的id
                            中止执行方法：clearTimeOut(number id)
                        间隔执行：
                            作用：每间隔指定的时间后指定指定的函数
                            window.setInterval(函数,时间);//返回当前线程的id
                            中止执行方法：clearInterval(number id)
                    子页面方法：
                        window.open()
                            作用:打开子页面
                            使用: window.open("资源路径","newwindow","参数配置")
                                参数配置："height=200, width=500, top=200,left=400, 
                                        toolbar=yes, menubar=yes, scrollbars=yes, 
                                        resizable=yes,location=yes, status=yes"
                        window.close()
                            作用:关闭子页面
                            注意：此函数只能关闭open打开的页面。
                window对象的常用属性:
                    opener属性
                        作用：实现在子页面中调用父页面的函数，保证父子页面的数据的一致性。
                        使用：
                            在父页面声明函数
                            在子页面使用window.opener.父页面函数名()调用即可。
                window对象的document对象
        -->
        <script type="text/javascript">
            //框体方法:
                //警告框
                function testAlert(){
                    window.alert("我是警告框");
                }
                //确认框
                function testConfirm(){
                    alert(window.confirm("你确定要离开我吗?"));
                }
                //文本框
                function testPrompt(){
                    alert(window.prompt("请输入昵称","例如：李白"));
                }
        //定时方法
            //定时执行
            function testSetTimeOut(){
                window.setTimeout(function(){
                    alert("我是定时执行");
                },2000);
            }
            //间隔执行
            function testSetInterval(){
                window.setInterval(function(){
                    alert("我是间隔执行");
                },2000);
            }
        //打开子页面
        function testOpen(){
            window.open("son.html","newwindow","height=400, width=600, top=200,left=400, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes");

        }
        //声明函数
        function testOpener(){
            alert("我是父页面函数");
        }
        </script>
    </head>
    <body>
        <h3>js的window对象学习</h3>
        <hr />
        <input type="button" id="" value="测试alert" onclick="testAlert()" />
        <input type="button" id="" value="测试确认框" onclick="testConfirm()" />
        <input type="button" id="" value="测试文本框" onclick="testPrompt()" />
        <hr />
        <input type="button" id="" value="测试定时执行-setTimeOut" onclick="testSetTimeOut()"/>
        <input type="button" id="" value="测试定时执行-setInterval" onclick="testSetInterval()"/>
        <hr />
        <input type="button" id="" value="测试打开子页面--open" onclick="testOpen()"/>
    </body>
</html>

son页面：

<html>
    <head>
        <title>子页面</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            var id;
            /*实现网页倒计时*/
            function testTime(){
                 id=window.setInterval(function(){
                    //获取font标签对象
                    var f=document.getElementById("num");
                    f.innerHTML=f.innerHTML-1
                    if(f.innerHTML==0){
                        window.close();
                    }
                },1000);
            }
            //停止指定的间隔执行函数
            function testClear(){
                window.clearInterval(id);
            }

            //使用opener属性调用父页面函数
            function test(){
                window.opener.testOpener();
            }


        </script>   
    </head>
    <body onload="testTime()">
        <h3>我是子页面</h3>
        <hr />
        请抓紧时间浏览器网页信息，本网页将在<font id="num" color="red" size="20px">5</font>秒后自动关闭.
        <br />
        <input type="button" id="" value="暂停" onclick="testClear()"/>
        <input type="button" id="" value="测试调用父页面函数--opener" onclick="test()"/>
        </body>
</html>

03-js的window学习-属性学习(2)

<html>
    <head>
        <title>window对象的属性学习</title>
        <meta charset="UTF-8"/>
        <!--
            window对象的属性学习
                opener属性
                location属性：
                    作用：地址栏属性，该属性是一个对象，封存了浏览器对地址栏的操作信息
                        例如：url
                    使用：
                        URL操作:
                            window.location.href//返回当前网页的URL信息
                            window.location.href="资源路径"//跳转指定的URL资源。
                        页面刷新：
                            作用:重新加载页面资源。
                            window.location.reload();
                -----------------------------------------------
                history属性：
                    forward()//前进，相当于浏览器中的前进功能
                    back()//后退，相当于浏览器中的后退功能
                    go()//跳转指定的历史记录
                screen属性
                    window.screen.width
                    window.screen.height
                    获取分辨率           
        -->
        <script type="text/javascript">
            //location属性
                //URL操作
                function testLocation(){
                    alert(window.location.href);//查看当前网页的URL信息
                    //window.location.href="http://www.jd.com";
                    window.location.href="02-js的window对象学习（1).html"//调转指定的资源
                }
                //页面刷新
                function testRefresh(){
                    window.location.reload();
                }
            //history属性
                function testHistory(){
                    //前进
                        //window.history.forward();//前进，相当于浏览器中的前进功能
                    //后退    
                        //window.history.back();//后退，相当于浏览器中的后退功能
                    //跳转指定历史记录  
                        window.history.go(0);   //跳转指定的历史记录
                }
            //Screen属性
                function testScreen(){
                    alert(window.screen.width+":"+window.screen.height);
                }
        </script>
    </head>
    <body>
        <h3>window对象的属性学习</h3>
        <hr />
        <input type="button" id="" value="测试location属性--URL操作" onclick="testLocation()"/>
        <input type="button" id="" value="测试location属性--刷新页面" onclick="testRefresh()"/>
        <hr />
        <input type="button" id="" value="测试history" onclick="testHistory()"/>
        <hr />
        <input type="button" value="测试Screen" onclick="testScreen()"/>
    </body>
</html>

04-js的window对象-document-获取HTML元素

<html>
    <head>
        <title>js的document对象学习</title>
        <meta charset="UTF-8"/>
        <!--
            documnet对象学习：
                解释:
                    document对象是浏览器对外提供的封存了当前运行的HTML文档信息的一个对象
                    通过此对象可以让我们灵活的操作HTML文档，达到修改，完善HTML文档的目的。
                使用：
                    document获取HTML元素对象
                        直接 方式：
                            通过ID
                                var 变量名=document.getElementById("uname");//返回指定的HTML元素对象
                                注意：
                                    此对象中封存了HTML元素标签的所有信息。   
                            通过name
                                var 变量名=document.getElementsByName("name属性值");
                                注意：
                                    获取的是相同name属性的HTML元素对象的数组。
                            通过标签名
                                var 变量名=document.getElementsByTagName("标签名");
                                注意：
                                    返回的是存储了该网页中指定的标签的所有对象的数组。
                        间接方式：
                            父子关系:
                                先获取父级节点(参照直接方式)
                                通过父级节点获取子节点数组
                                    var 变量名=父节点对象.childNodes;
                                    注意：
                                        子节点数组中会包含文本节点，可以使用nodeType属性
                                        筛选出来所有的HTML节点(nodeType值为1)
                            子父关系：
                                先获取子元素对象(参照直接方式)
                                通过子元素对象获取父元素对象
                                    var 变量名=子元素对象.parentNode
                            兄弟关系：
                                先获取当前元素
                                根据兄弟关系选择对应的获取方式
                                var 变量名=元素对象.previousSibling; //兄
                                var 变量名=元素对象.nextSibling;   //弟
                    document操作元素对象的属性
                    document操作元素对象的样式
                    document操作元素对象的文档结构
        -->
        <script type="text/javascript">
            //document获取HTML元素对象
                //通过ID获取
                function testById(){
                    var inp=window.document.getElementById("uname");
                    alert(inp.value);
                }
                //通过name获取
                function testByName(){
                    var favs=document.getElementsByName("fav");
                    alert(favs[0].value);
                }
                //通过标签
                function testByTagName(){
                    var inps=document.getElementsByTagName("input");
                    alert(inps.length); 
                }
        /*-------------------------------------------------*/
        //间接方式
            //父子关系                  
            function testGetChild(){
                    //先获取父级元素对象
                    var p=document.getElementById("showdiv");
                    //获取子元素对象数组
                    var clds=p.childNodes;
                    //遍历
                    var arr=[];
                    for(var i=0;i<clds.length;i++){
                        if(clds[i].nodeType==1){
                            arr.push(clds[i]);
                        }
                    }
                    alert(arr.length);
            }
            //子父关系
            function getParent(){
                //获取子元素对象
                var child=document.getElementById("un");
                //获取父元素对象
                var p=child.parentNode;
                alert(p)
            }
            //兄弟关系
                //兄关系
                function getPreEle(){
                    //获取当前元素对象
                    var un=document.getElementById("un");
                    //获取兄元素对象
                    var inp=un.previousSibling;
                    alert(inp);
                }
                //弟关系
                function getNextEle(){
                    //获取当前元素对象
                    var un=document.getElementById("un");
                    //获取兄元素对象
                    var inp=un.nextSibling;
                    alert(inp);
                }
        </script>
    </head>
    <body>
        <h3>js的document对象学习</h3>
        <hr />
        <input type="button" id="" value="测试通过ID获取" onclick="testById()"/>
        <input type="button" id="" value="测试通过name获取" onclick="testByName()"/>
        <input type="button" id="" value="测试通过标签名获取" onclick="testByTagName()"/>
        <hr />
        用户名：<input type="text" name="" id="uname" value="张三" /><br />
        爱好：<br />
            <input type="checkbox" name="fav" id="" value="1" />唱歌<br />
            <input type="checkbox" name="fav" id="" value="1" />跳舞<br />
            <input type="checkbox" name="fav" id="" value="1" />旅游<br />
            <input type="checkbox" name="fav" id="" value="1" />吃鸡<br />
        <hr />
        <input type="button" id="" value="测试父子关系" onclick="testGetChild()" />
        <input type="button" id="" value="测试子父关系" onclick="getParent()" />
        <input type="button" id="" value="测试兄关系" onclick="getPreEle()" />
        <input type="button" id="" value="测试弟关系" onclick="getNextEle()" />
        <hr />
        <div id="showdiv" style="border: solid 1px; background-color: orange; width: 300px; height: 300px;" >
            <input type="text" value="张三" id="un" style="margin: 10px;"/>
            <input type="text" value="李思思"style="margin: 10px;"/>
            <input type="text" value="王五"style="margin: 10px;"/>
            <input type="text" value="赵信"style="margin: 10px;"/>
            <input type="text" value="慎"style="margin: 10px;"/>
        </div>

    </body>
</html>

05-js的document操作元素属性

<html>
    <head>
        <title>操作元素属性</title>
        <meta charset="UTF-8"/>
        <!--
            获取HTML元素对象
            操作元素属性：
                获取：
                    元素对象.属性名//返回属性值
                修改：
                    元素对象.属性名=值
                注意：
                    不要修改标签的name和id属性
        -->
        <script type="text/javascript">
            //获取元素属性
            function getFieldData(){
                //获取HTML元素对象
                var inp=document.getElementById("uname");
                //获取元素属性
                alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
            }

            //修改元素属性
            function updateFiledData(){
                //获取HTML元素对象
                var inp=document.getElementById("uname");
                //修改元素属性
                inp.type="button";
                inp.id="un";

            }
        </script>
    </head>
    <body>
        <h3>操作元素属性</h3>
        <input type="button" id="" value="操作属性--获取" onclick="getFieldData()" />
        <input type="button" id="" value="操作属性--修改" onclick="updateFiledData()" />
        <hr />
        用户名：<input type="text" name="uname" id="uname" value="zhangsan" />
    </body>
</html>

06-js的doument操作元素内容

<html>
    <head>
        <title>操作元素内容</title>
        <meta charset="UTF-8"/>
        <!--
            获取HTML元素对象
            操作元素的内容
                获取：
                    元素对象.innerHTML
                        返回所有的内容包括HTML标签
                    元素对象.innerText
                        返回所有的文本内容，不包括HTML标签
                修改：
                    元素对象.innerHTML="新的内容"
                        HTML标签会被解析，覆盖原有内容
                    元素对象.innerText="新的内容"
                        HTML标签不会被解析，覆盖原有内容
                    注意：
                        如果在修改是需要保留原有内容，则使用：
                            元素对象名+="新的内容";
        -->
        <script type="text/javascript">
            //操作元素内容
                //获取
                function getData(){
                    //获取HTML元素对象
                    var showdiv=document.getElementById("showdiv");
                    //获取元素内容
                    alert(showdiv.innerHTML); //返回所有的内容包括HTML标签
                    alert(showdiv.innerText);//返回所有的文本内容，不包括HTML标签
                }
                //修改
                function updateData(){
                    //获取HTML元素对象
                    var showdiv=document.getElementById("showdiv");
                    //修改元素内容
                        //showdiv.innerHTML+="<u>你的，去前面探路的干活</u>";//HTML标签会被解析，覆盖原有内容
                        showdiv.innerText="<u>你的，去前面探路的干活</u>";//HTML标签不会被解析，覆盖原有内容
                }



        </script>
        <style type="text/css">
            #showdiv{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <h3>操作元素内容</h3>
        <input type="button" id="" value="操作元素内容---获取" onclick="getData()"/>
        <input type="button" id="" value="操作元素内容---修改" onclick="updateData()"/>
        <hr />
        <div id="showdiv">
            <b>皇军，前面有八路的干活儿</b>
        </div>
    </body>
</html>

07-js的document操作元素样式

<html>
    <head>
        <title>操作元素样式</title>
        <meta charset="UTF-8"/>
        <!--
            获取HTML元素对象
            操作样式：
                添加样式：
                    元素对象名.style.样式名=样式值
                修改样式：
                    元素对象名.style.现有样式名=新的样式值
                注意：
                    还以通过元素对象.className="类选择器名"来添加样式。
        -->
        <script type="text/javascript">
            //操作元素样式
                //添加样式
                function addCss(){
                    //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    //添加样式
                    showdiv.style.border="solid 1px";
                    showdiv.style.width="200px";
                    showdiv.style.height="200px";
                    showdiv.style.backgroundColor="orange";
                }
                //使用类选择器添加
                function addCssByClass(){
                    //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    //添加样式
                    showdiv.className="common";
                }
                //修改样式
                function updateCss(){
                    //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    //修改样式
                        showdiv.style.backgroundColor="darkcyan";
                }

                var arr=["red","darkcyan","orange","blue","gray"];
                //闪图
                function testColor(){
                    window.setInterval(function(){
                        //获取元素对象
                        var showdiv=document.getElementById("showdiv");
                        //随机
                        var num=Math.floor(Math.random()*5); 
                        //修改背景色
                        showdiv.style.backgroundColor=arr[num]
                    },100);
                }


        </script>
        <style type="text/css">
            .common{

                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: red;

            }
        </style>
    </head>
    <body>
        <h3>操作元素样式</h3>
        <input type="button" id="" value="添加样式---style" onclick="addCss()"/>
        <input type="button" id="" value="添加样式--classnName" onclick="addCssByClass()"/>
        <input type="button" id="" value="修改样式" onclick="updateCss()"/>

        <input type="button" id="" value="开始闪现模式" onclick="testColor()" />
        <hr />
        <div id="showdiv">

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

08-js的document操作文档结构

<html>
    <head>
        <title>操作文档结构</title>
        <meta charset="UTF-8"/>
        <!--
            文档结构:指的是HTML文档的树形结构。
            节点：HTML文档树中的基本元素单位称为一个节点。
            获取HTML元素对象
            操作文档结构
                新建节点:
                    var 变量名=document.createElement("标签名")//返回创建的HTML元素对象
                添加节点    
                    节点对象.appendChild(节点对象);
                删除节点
                    节点对象.removeChild(节点对象);
        -->
        <script type="text/javascript">
            //文档操作
                function operDocu(){
                    //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    //创建节点
                    var inp=document.createElement("input");
                        inp.type="file";//设置类型
                    //创建节点--换行符
                    var br=document.createElement("br");
                    //创建节点--删除按钮
                    var bt=document.createElement("input");
                        bt.type="button";
                        bt.value="删除";
                        bt.onclick=function(){
                            showdiv.removeChild(inp);
                            showdiv.removeChild(bt);
                            showdiv.removeChild(br);
                        }
                    //将节点添加到指定的节点中
                    showdiv.appendChild(inp);
                    showdiv.appendChild(bt);
                    showdiv.appendChild(br);
                }
        </script>
    </head>
    <body>
        <h3>操作文档结构</h3>
        <input type="button" id="" value="点击上传" onclick="operDocu()"/>
        <hr />
        <div id="showdiv" style="border: solid 1px;">

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

09-js-百度-360双搜索实现

<html>
    <head>
        <title>双搜</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
        /*设置标题样式*/
            h1{
                font-size: 60px;
                margin-top:40px ;
            }
            /*设置div样式*/
            #showdiv{

                margin: auto;
                width: 700px;
                text-align: center;
                margin-bottom: 20px;
            }

            input[type=text]{
                width: 500px;
                height: 40px;
            }
            input[type=button]{
                width: 100px;
                height: 40px;
            }
        </style>
        <script type="text/javascript">
            //双搜
            function doubleSearch(){
                //获取搜索框对象
                var search=document.getElementById("search");
                var sval=search.value;
                //获取百度和360的搜索框
                var wd=document.getElementById("wd");
                var q=document.getElementById("q");
                //赋值
                wd.value=sval;
                q.value=sval;
                //提交表单
                    //获取表单对象
                    var bf=document.getElementById("bf");
                    var qf=document.getElementById("qf");
                    //提交
                    bf.submit();
                    qf.submit();
            }
        </script>
    </head>
    <body>
        <h1 align="center">欢迎使用百度-360双搜</h1>

        <!--声明form表单用来进行数据的提交-->
        <form action="http://www.baidu.com/s" method="get" target="_baidu" id="bf">
            <input type="hidden" name="wd" id="wd"/>

        </form>
        <form action="http://www.so.com/s" method="get" target="_q" id="qf">
            <input type="hidden" name="q" id="q"/>

        </form>
        <!--声明div用来划分搜索框-->
        <div id="showdiv">
            <input type="text" name="" id="search" value="" />
            <input type="button" id="" value="牛逼一下" onclick="doubleSearch()"/>
        </div>
        <!--声明div用来划分iframe-->
        <div id="div01">
            <iframe src="" width="49%" height="500px" name="_baidu"></iframe>
            <iframe src="" width="49%" height="500px" name="_q"></iframe>
        </div>


    </body>
</html>

小结

01-js的常用方法和对象学习
02-js的window对象学习-方法（1)
03-js的window学习-属性学习(2)
04-js的window对象-document-获取HTML元素
05-js的document操作元素属性
06-js的doument操作元素内容
07-js的document操作元素样式
08-js的document操作文档结构
09-js-双搜

小技能点：

1.$快捷键  document对象
2。 window.setInterval("timer()",1000);记得要写"";
3.用JS设置样式的时候    showdiv.style.border="solid 1px";  记得写""
4.<span></span> 行内元素
5.eval方法  将字符串转换为js代码执行
6.Prompt  提示框
7.使用opener属性调用父页面函数window.opener.testOpener();
8.//获取父元素对象
var p=child.parentNode;
9.//获取兄元素对象
                    var inp=un.previousSibling;
10.//获取弟元素对象
                    var inp=un.nextSibling;
11.//父子关系
                 function testGetChild(){
                    //先获取父级元素对象
                     var p=document.getElementById("showdiv");
                     //获取子元素对象数组
                     var clds=p.childNodes;
                     //遍历
                     var arr=[];
                     for(var i=0;i<clds.length;i++){
                        if(clds[i].nodeType==1){
                            arr.push(clds[i]);
                        }
                     }
                     alert(arr.length);
                 }
神一样的我
关注
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3992
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
JS的Document类型
一心向晚
09-15 9400
Document HTMLDocument继承自Document。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用 1.属性 documentElement指向HTML页面中的<html>元素。 title 获取文档的标题 URL 获取URL domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL...
2分钟通过javascript的opener方式实现调用父窗口方法示例
Guoye的专栏
05-08 1896
父窗口的JS代码： // 打开上传文件窗口 function uploadImgFile(id){ // open里面的参数详情，查看MDN，更系统的详情资源 window.open("${base}/ajax/picupload.action?parentImgUrlId="+id,"","height=300, width=500, toolbar =no, menubar=no...
JavaScript中document的四种方法
热门推荐
qiangzhogshou的博客
11-26 1万+
1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...
JavaScript总结
Terisadeng的博客
10-18 267
1、多个$(doument).(function(){});执行顺序，主要看他们所在的位置决定，如果多个$(doument).(function(){});在同一页面的&lt;script&gt;元素内编写，则按照书写顺序执行。 如果是一个$(doument).(function(){});在页面内&lt;script&gt;元素内编写，一个是在引入的外部js文件中编写，这时 就要看引入这个js文...
day02-JavaScript-Vue
最新发布
qq_63763836的博客
08-31 1404
文章目录1 JavaScript1.1 介绍1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法1.5.1.2 String对象语法格式属性和方法1.5.1.3 JSON对象自定义对象json对象1.5.2 BOM对象1.5.2.1 Window对象1.5.2.2 Location对象1.5.3 D
JavaScript-ECMAScript编程
qq_46096136的博客
09-30 8195
1、JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。2、JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。3、JavaScript和Java的区别?JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。Java运行在JVM当中。JavaScript和Java没有任何关系。
JavaScript-时区
MountGao的博客
08-13 3346
JavaScript-时区 简介 时区是地球上的区域使用同一个时间定义。以前，人们通过观察太阳的位置（时角）决定时间，这就使得不同经度的地方的时间有所不同（地方时）。1863年，首次使用时区的概念。时区通过设立一个区域的标准时间部分地解决了这个问题。 世界各国位于地球不同位置上，因此不同国家，特别是东西跨度大的国家日出、日落时间必定有所偏差。这些偏差就是所谓的时差。 历史 在农业社会，世界各地一般采用各自的地方时。十九世纪随着长途铁路运输的发展，1870年代加拿大铁路工程师弗莱明首次提出全世界按统一标准
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 4033
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
Day.js -- 处理时间戳
i_Satan的博客
03-29 2109
在线文档 https://dayjs.fenxianglu.cn/ 安装 npm install dayjs 示例 import dayjs from "dayjs"; const myformat = "YYYY-MM-DD HH:mm:ss"; // -------------------------以字符串形式返回 当前时间 const data = dayjs().format(myformat); // => 2020-11-25 12:25:56 // -----
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
javascript-day1-if2-Kevin-CodeCrew:GitHub Classroom创建的javascript-day1-if2-Kevin-CodeCrew
04-27
JavaScript_Day1_If2 为每个练习创建一个新文件 练习10 向用户询问3张卡片。 如果总和等于21，则打印黑杰克！ 如果总和大于21，则打印BUST！ 如果总和小于21，则打印“总计为[TOTAL]” 练习11 要求用户输入他们的...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
day02-JavaScript-Vue.md
04-27
day02-JavaScript-Vue.md
js30:wesbose-javascript-30day-挑战
05-22
【标题】"js30:wesbos-javascript-30day-挑战" 是一个由知名前端开发者 Wes Bos 发起的JavaScript学习项目，旨在帮助学员在30天内通过实践掌握JavaScript核心技能。这个挑战涵盖了从基础到进阶的各种JavaScript概念...
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 9061
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
Day83 EasyUI和IDEA的使用
新世界的大门
05-11 1589
1
Day50 ajax和Json数据格式
新世界的大门
03-13 205
Ajax学习 http://www.runoob.com/ajax/ajax-tutorial.html 问题： 目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。 解决: 使用ajax技术 ajax原理: 请求由ajax引擎对象发送，响应数据，浏览...
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值