• javaScript


          javaScript

    为什么需要使用JS?

      答:编写网页特页面效,操作页面元素,和服务器交互。

    怎样使用JS.

       1内嵌

                <script type="text/javascript">*/

    document.write("hello js");

    function show()

    {

    }

    </script>

       2外嵌

                    <script type="text/javascript" src="js/a.js" ></script>

       3直接在事件中写:javascript:动作

                <button onclick="javascript:alert(0)" style=" 50px;" value="">点击</button>

    window.onload=function()跟随页面加载  window.onscroll=function ()跟随鼠标滚动

    console.log(d);控制台输出 function定义一个方法 onclick点击

    字符串方法

    方法

    说明

    charAt(index)

    返回指定位置上的字符

    inderOf(“index”)

    查找某个指定的字符串在字符串中首次出现的位置

    Substring(index1,index2)

    返回从index1 index2之间的字符串不包含index2

    Split(str)

    将字符串分割成数组

    数组方法

    方法

    说明

    .push(“数值”);

    在数组中追加数值

    .join(“*”)

    把数组按*分开为字符串

    浏览器对象

    对象名称

    说明

    window

    窗口对象,可以用来控制当前窗口,或打开新的窗口

    screen

    屏幕对象,获取屏幕相关信息

    navigator

    浏览器对象,通过这个对象可以判断用户所使用的浏览器

    history

    历史对象,可以用来前进或后退一个页面

    location

    地址对象,可以用来获取当前URL的信息

    javaScript计时事件

    在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

    localStorageSessionStorage

    存储对象,可以用来存储数据,和cookie相似,区别是它是为了更大容量存储设计的,在使用上也更加方便

     

    列:location 方法试列

    <script type="text/javascript">

    //返回地址

    document.write(window.location.host+"<br/>")(主机IP加端口)

    document.write(window.location.hostname+"<br/>")(主机IP)

    //location 方法  href加载一个页面

    function cas(){

    window.location.href="index.html";

    }

    //reload() 从新加载页面reload()(刷新)

    function textreload(){

    window.location.reload();

    }

    </script>

    </head>

    <body>

    <button onclick="cas();">跳转</button>

    <a onclick="textreload()"></a>

    </body>

    History对象

    history.Back()

    加载history对象中的前一个URL

    history.Forward()

    加载history对象中的下一个URL

    history.Go()

    加载history对象中的某个具体URL

    其中 history.back() --等于-->> history.go(-1) 浏览器中的后退

    History.forward() --等于-->> history.go(1) 浏览器中的前进

     

    javaScript弹窗 不同的浏览器对弹窗有可能拦截

    警告框

    Window.alert()

    用于确保用户可以得到某些信息

    确认框

    Window.confirm()

    用于验证是否接受用户操作

    提示框

    Window.prompt()

    用户提示用户在进入页面输入某个值

    if(confirm("是否确定")){
        alert("确定")
    }else{
        alert("取消")
    }
    var d=prompt("你好马强")
    if(d!=null){
        alert("你刚才输入的名字为"+d)
    }

    Window.location对象

    Location.href

    返回当前页面的URL url(地址)

    Location.pathname

    返回URL的路径名 文件

    Location.assign()

    加载新的文档

     

    Close();

    关闭当前对象

    Open(“地址”,”窗口名”,”属性”);

    弹出一个新的窗口

    open("../html/hello.html","新窗口","height=20px,width=20px")

    Open的属性

     

    javaScript计时事件 1000=1

    Setlnterval(show,2000)

    间隔指定的毫秒数不停地执行指定的代码

    Clearlnterval()

    用于停止setlnterval()方法执行的函数代码

    setTimeout(show,2000)

    暂停指定的毫秒数后执行指定的代码

    clearTimeout()

    用于停止执行setTimeout()方法的函数代码

     function show() {
             alert(0);
         }
        // 间隔指定的毫秒数不停地执行指定的代码
            function demo01() {
            var t =setInterval(show,2000);
            }
         //暂停指定的毫秒数后执行指定的代码
         function demo02() {
            var p=setTimeout(show,2000);
         }
        </script>
    </head>
    <body>
    <button onclick="fun()" >点击</button>
    <a onclick="demo01();">测试Setlnterval</a>
    <a onclick="demo02();">测试setTimeout</a>

    Date(); 方法 var d=new Date(); var n =d.getHours();

    .getHours()

    获得小时

    .getMinutes()

    获得分钟

    .getSeconds()

    获得秒数

     

    Dom常用的方法

    查找HTML元素

    Document.getElementById()

    通过id获取对象

    Document.getElementsByTagName()

    通过标签名获取对象 生成一个数组

    Document.getElementsByName()

    通过名字获取对象 生成一个数组

    Document.getElementsByClassName

    通过class获取对象

    document.getElementById("切换前的ID").innerText="切换后的名字";
    var sum=parseInt(value);把字符串转换为数字

    var value=document.getElementById("re").value;查找用户输入的数值(字符串)

     

     

    改变HTML元素

    Document.write()

    改变HTML输出流

    对象.innerHTML=新的HTML

    改变HTML内容

    对象.attribute(属性)=新属性值

    改变HTML属性

     

    改变CSS样式

    对象.style.property(属性)=新样式

    通过id属性获取对象

     

     

     

    Dom常用的方法

    查找HTML元素

    试列:   

     <script type="text/javascript">
                function  areplace() {
                    var obj=document.getElementById("bookname");
                    obj.innerText="切换后的名字";
                }

    //通过input获取对象 返回数组
                function shoall() {
                    var obj=document.getElementsByTagName("input");
                    var strall="";
                    for(var i=0;i<obj.length;i++){
                        strall += obj[i].value+" "
                    }
                    document.getElementById("strall").innerHTML=strall;
                }

    //通过name获取对象 返回数组
                function shows() {
                    var obj=document.getElementsByName("season");
                    var strall="";
                    for(var i=0;i<obj.length;i++){
                        strall += obj[i].value+" "
                    }
                    document.getElementById("s").innerHTML=strall;
                }
        </script>
    </head>
    <body>
    <div class="bb">
        <div style="float: left;width: 150px;height: 100px">
            <img src="../images/1.jpg">
        </div>
        <div style="float: right" >
            <span id="bookname">书名:岛上书店</span><br/>
            <button onclick="areplace()">换换名称</button><br/>
            <span>四季名城</span><br/>
            <input class="a" name="season" type="text" value="春">
            <input class="a" name="season" type="text" value="夏"><br/>
            <input class="a" name="season" type="text" value="秋">
            <input class="a" name="season" type="text" value="冬"><br/>
            <input type="button" onclick="shoall()" value="input内容">
            <input type="button" onclick="shows()" value="四季名称">

    //清空页面
            <input type="button" onclick="javascirpt:document.write('')" value="清空页面内容">
            <span id="strall"></span>
            <span id="s"></span>
        </div>
    </div>

     

    窗竹影摇书案上,野泉声入砚池中。 少年辛苦终身事,莫向光阴惰寸功
  • 相关阅读:
    ES6常用新特性
    jquery基础总结 -- 转载
    正则验证
    prop attr 到底哪里不一样?
    分页导航 获取当前页码 的 分页导航哦
    使用Bootatrap的心得
    使用padding来合理布局自己的容器类
    使用angular-ui-router替代ng-router
    使用jitpack来获取github上的开源项目
    关于移动端的UI事件分类
  • 原文地址:https://www.cnblogs.com/qhantime/p/10731730.html
Copyright © 2020-2023  润新知