• Javascript


    Javascript--脚本语言 ,是由Netscape公司开发的 ,与微软公司开发的Jscript不同,但是都可简写为js,javascript无法独立运行,需要依赖于宿主文件。

    一,javascript的基本语法

    1,数据类型与变量类型

    数据类型基本与c#相同:整数型,小数型,布尔型,日期时间,字符串,数组。。。

    变量类型:通用类型var

    强制转换:parseint()       parsefloat()    判断是否为一个合法的数字类型:isNaN()

    2,数组

    var 数组名=new Array();长度一般可省略

    a.length---长度

    3,函数

    function 函数名(形参)

    {

    }

    二,DOM操作

    DOM---Document  Object Model 文件对象模型

    对象---object  描述一个对象用表示特点的名词和表示行为的动词

    1,window对象操作

    (1)alert()

    window.alert():弹出一个警告对话框

    (2)confirm()

    window.confirm():弹出一个可供选择的对话框,点击确定之后返回true,点击取消返回false,可用变量来接收

    (3)open()

    open(“地址”,“_blank/_self”,"新窗口的特点")

    var a = window.open("http://www.sina.com.cn");
    在新窗口中打开页面,返回新的窗口。a也是一个window类型的变量。

    open 的语法:var retval = window.open(url, name, features);

    open的参数详解

    url(可选的):类型:string  指定要显示文档的URL。如果没有指定URL,将显示空白的新窗口。

    name(可选的):类型:string 指定窗口的名字,这个名字在一个窗体或锚元素中被用作目标属性的值。

            name的值:_blank:   url被加载到一个新的未命名的窗口

                   _parent:  url被加载到当前网页的上一级 ,如果当前网页没有上一级,则等同于_self

                    _self:  当前文档被替换为指定的url。

                    _top: 加载的url替换任何可能被加载的框架集。如果没有定义框架集,则等同于_self

    features(可选的):类型:string  包含一个由逗号隔开的项目列表,每个项目包含一个选项和值,由一个等号链接 如("fullscreen=yes,toolbar=yes")

          features的值:channelmode = { yes | no | 1 | 0 }  :指定是否在影院模式下显示窗口。默认是0

                              fullscreen = { yes | no | 1 | 0 }:指定是否显示浏览器全屏模式。默认是no,在此模式下浏览器的标题栏和菜单栏会隐藏,但总是会提供一个按钮或者其他可见的线索来帮助用户关闭窗口

             width/height = number  :指定窗口的宽度/高度(以像素为单位) 最低宽度为250, 最低高度为150,指定浏览器内容区域的最低宽度、高度

             top/ left = number  :指定窗口距离页面顶部/左边的位置 ,这个值是相对于屏幕的左上角 该值必须大于或等于0

                             location = { yes | no | 1 | 0 }  :指定是否显示导航栏(地址栏)。默认是yes

            resizable = { yes | no | 1 | 0 }  :指定是否可以调整窗口大小。默认是yes

            menubar = { yes | no | 1 | 0 }  :指定是否显示菜单栏。默认是yes

            scrollbars = { yes | no | 1 | 0 } :指定是否显示水平和垂直滚动条。默认是yes

            status = { yes | no | 1 | 0 }  :指定是否要在窗口的底部添加状态栏。默认是yes

            toolbar = { yes | no | 1 | 0 }:指定是否显示工具栏。默认是yes

     (4)close():关闭当前页面

    (5)setTimeout(“要执行的代码”,毫秒数):在指定的毫秒数之后执行代码一次

    function showTime()
    {
    var date = new Date();
    document.getElementById("hh").innerHTML = date;
    window.setTimeout("showTime()",1000);
    }      //在当前页面显示时间,并且每隔一秒时间刷新一次(相当于电子表的功能)

    *************************************************************

    var a;
    function openAD()
    {
    a = window.open("http://www.sina.com.cn","_blank","width=200 height=200 toolbar=no top=0 left=0");

    window.setTimeout("closeAD()",5000);
    }
    function closeAD()
    {
    a.close();
    }
    window.setTimeout("openAD()",5000);    //打开页面,五秒后弹出广告(新浪首页),再过5秒广告关闭

    (6)setInterval(“要执行的代码”,毫秒数):每隔指定的毫秒数就执行一次代码(循环)

    function showTime()
    {
    var date = new Date();
    document.getElementById("hh").innerHTML = date;
    }
    window.setInterval("showTime()",1000);        //在当前页面显示时间,并且每隔一秒时间刷新一次(相当于电子表的功能)

    (7)window.moveTo(x,y):移动窗口到指定坐标

    window.resizeTo(width,height):调整窗口大小到指定宽度和高度

    window.scrollTo(x,y):将窗体中的滚动条拉到指定位置

    (二)历史操作

    window.history.go(n):n可为正数也可为负数。当n为正数时则表示前进到第n个页面,当n为负数时则后退到第n个页面

    (三)地址栏操作

    window.location.href()

    //定时刷新页面(每隔一秒刷新一次页面)
    function showSelf()
    {
    window.location.href="Untitled-3.html";
    }
    window.setInterval("showSelf()",1000);

    (四)文档操作

    window.document

    (1)找到对象

    document.getElementById()

    document.getElementsByName()

    document.getElementsByTagName()

    var a=document.getElementsByTagName("div");

    for(var i=0;i<a.length;i++)

    {

    a[i].style.border="5px solid blue";

    }      //找多个元素

    **********************************

    var a=document.getElementById("hh");

    a.style.height="100px";   //找单个元素

    (2)操作属性

    document.getAttribute("属性名"):获取属性的值

    document.setAttribute():设置属性的值

    var b=document.getElementById("hh");

    b.setAttribute("属性名","属性值")

    document.removeAttribute("属性名"):删除属性

    (3)操作样式

    1.操作内联样式

    var a=document.getElementById("hh");

    a.style.xxxx="";

    2.操作样式表的class选择器

    var a=document.getElementById("hh");

    a.className="dd";

    a.setAttribute("class","dd");

    案例:设置奇偶行不同颜色

    <style type="text/css">
    div{ height:20px;}
    .odd
    { background-color:blue;}
    .even
    { background-color:green;}
    </style>
    </head>

    <body >
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>
    <script language="javascript">
    var a=document.getElementsByTagName("div");
    for( var i=0;i<a.length;i++)
    {
    if(i%2==0)
    {
    a[i].className="even";
    }
    else
    {
    a[i].setAttribute("class","odd");
    }
    }
    </script>

    (4)操作内容

    1,表单元素    

    赋值:obj.value="";
    取值:var s = obj.value;

       案例:将文本框的输入内容赋值给按钮

    <script language="javascript">
    function clickMe()
    {
    //一、把文件框的值取出来
    //1.找到文本框
    var t = document.getElementById("txt");
    //2.把值取出来
    var s = t.value;
    //二、给按钮把值赋上去
    //1.找到按钮
    var b = document.getElementById("btn");
    //2.把值赋上去
    b.value = s;
    }
    </script>
    </head>

    <body>
    <form action="" method="get">
    <input id="txt" name="txt" type="text" />
    <input id="btn" name="btn" type="button" value="点击" onclick="clickMe()" />
    </form>
    </body>
    </html>

    2,非表单元素

    取值:var s=obj.innerHTML;

    赋值:obj.innerHTML="";

    案例:将div里面的内容显示出来

    <script language="javascript">
    function showInfo()
    {
    var dd = document.getElementById("d");
    var s = dd.innerHTML;
    alert(s);
    }
    </script>
    </head>

    <body>
    <div id="d">这是里面的内容</div>
    <span onclick="showInfo()">点击</span>
    </body>
    </html>

    (5)操作相关元素

    var a=document.getElementById("id");  找到元素

    var b=a.nextSibling;   找a的下一个同辈元素(该元素必须与a在同一行,且中间不能有空格)

     var b=a.previousSibling; 找a的上一级同辈元素(同上)

    var b=a.parentNode;    找a 的上一级父级元素

    var b=a.childNodes;     找a的下一级子元素(找出来的是数组) a.firstChild:第一个子元素 a.lastChild:最后一个子元素  childNodes[n]:第n个子元素

    操作方法:a.appendChild(元素对象):追加一个子元素(注意是元素对象,不是一个HTML字符串,即括号里面不加引号)

    a.insertBefore(要插入的元素对象,相对于哪个元素):在某个元素前面插入一个新元素对象(a是相对于要插入的元素的上一级元素)

    a.removeChild(要移除的元素对象):移除子元素

    a.replaceChild(新元素,旧元素):替换对象

    如何在子元素中找指定的元素?

    1,遍历   for(var i=0;i<a.length;i++){a[i].tagName=="DIV"}

    2,   a.getElementBytagName("div")

    如何向元素中追加一个子元素

    1,先造一个元素

    var n=document.createElement("div");  //造元素

    n.style.backgroudColor="blue";  // 设样式

    n.innerHTML="this is a new div";  //设内容

    2,加进去

    a.appendChild(n);

  • 相关阅读:
    npm WARN saveError ENOENT: no such file or directory的解决方法
    简单的webpack打包案例
    JS中用encodeURIComponent编码,后台JAVA解码
    说 Redis
    let the cat out of the bag
    简述C# volatile 关键字
    螃蟹怎么分公母?是用冷水上锅还是热水蒸呢?
    Mysql截取字符串 更新字段的部分内容
    Ajax 获取数据attr后获取不到
    如何限制域名访问?白名单机制
  • 原文地址:https://www.cnblogs.com/William-1234/p/4442040.html
Copyright © 2020-2023  润新知