zoukankan      html  css  js  c++  java
  • JavaScript基本内容

    注释:

    /*多行
    注释*/
    
    //单行注释

     变量:

    //变量均为对象,常用类型:String、Number、Boolean、Array、Object
    var value = "hello";    //变量声明只能用var,不能用具体类型,变量本身的类型会在声明后类型推断
    value = 9;  //而且类型推断,还具有动态类型
    document.write(value);

     使用id表示元素,再访问该元素:

    <head>
        <script>
            document.getElementById("test").innerHTML="test";
        </script>
    </head>
    <body>
        <p id="test">操纵html元素</p>
        <!--将js放在最后,可以确保在所有元素创建完毕之后,再执行脚本-->
        <script>
            document.getElementById("test").innerHTML="test";
        </script>
    </body>

    由于js可以用document.write向页面写入含有标签的文本,但是又可以通过标签的id的属性来改变其值,所以这就是写入动态的文本。

    //document.write('<p id="test">hello</p>');     //可以在字符串中使用引号,只要不匹配包围字符串的引号即可
    document.write("<p id='test'>hello</p>");
    document.getElementById("test").innerHTML = "test";

     数字(使用科学记数法):

    //所有 JavaScript 数字均为 64 位(2^64,8B)
    var y = 123e5;      // 123 * 10^5 = 12300000
    var z = 123e-5;     // 0.00123
    var a = 0377;   //八进制(前缀为0)
    var b = 0xFF;   //16进制

    日期对象Date:

    //Date 对象自动使用当前的日期和时间作为其初始值
    var fullDate = new Date();
    //设定指定时间
    fullDate.setFullYear(2008, 11, 20);     //年,月(0-11 — 11:12月),日
    //仅设置日期:如果增加天数会改变月份,那么Date对象会自动完成转换
    fullDate.setDate(fullDate.getDate() + 5);
    document.write(fullDate + "<br />");
    //获得时分秒
    document.write(fullDate.getHours() + "<br />");     //分、秒都是同样的做法

    创建数组:

    var car1 = new Array();
    car1[0] = "hello";
    car1[1] = 123;
    // or condensed array
    var car_2 = new Array(3);
    var car2 = new Array("Audi", "BMW", "Volvo");
    // or literal array
    var car3 = ["Audi", "BMW", "Volvo"];

    逻辑对象Boolean:

    如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false;其他情况为true。

    算数对象Math:

    //使用内置的Math对象
    document.write(Math.round(4.4) + "<br />");    //四舍五入
    document.write(Math.random() + "<br />");      //随机小数:0到1
    document.write(Math.floor(Math.random() * 100) + "<br />");     //随机小数*扩大倍数M,再通过下舍入函数floor生成最后的随机数:0到M
    document.write(Math.max(1, -1) + "<br />" + Math.min(1, -1) + "<br />");    //比大小

     正则对象RegExp:

    //RegExp对象常用3个方法:test、exec、compile
    var pattern = new RegExp("e");
    document.write(pattern.test("hello") + "<br />");   //输出bool值
    document.write(pattern.exec("hello") + "<br />");   //找到则返回pattern(模式)的值,否则为null
    //第二个参数: exec方法会改变:找到第一个模式(pattern),并记录位置;如果再次执行exec,则从上次的位置后检索
    var pattern1 = new RegExp("e", "g");
    do {
        var result = pattern1.exec("hello");
        document.write(result);
    } while (result != null);
    document.write("<br />");
    //compile方法用于改变RegExp,如改变模式(pattern)、增删第二个参数
    pattern.compile("h");
    document.write(pattern.test("hello") + "<br />");

    创建自定义对象:

    直接创建实例、对象构造器(函数):

    //直接创建实例
    person1 = new Object();
    person1.age = 56;
    document.write(person1.age + "<br />");
    //写法二
    var person2 = {
        //属性,以键值对形式存在
        firstname: "Bill",
        lastname: "Gates",
        id: 5566
    };
    document.write(person2.lastname + "<br />");
    document.write(person2["lastname"] + "<br />");
    //使用函数定义,对象构造器,再实例化
    function person3(age)
    {
        this.age = age;
    }
    var boy = new person3(10);
    document.write(boy.age + "<br />");
    //此外,对已存在的对象(不管是通过哪种方式创建的),还可以随时添加新的属性、方法
    boy.firstname = "Bill";
    document.write(boy.firstname + "<br />");

    添加方法:

    //添加方法
    function hello()
    {
        alert("hello");
    }
    function person()
    {
        this.hello = hello;
    }
    var girl = new person();
    girl.hello();
    //对已经存在的对象,添加新的方法
    document.hello = hello;
    document.hello();

     遍历一个对象的所有属性:

    var person = { fname: "Bill", lname: "Gates", age: 56 };
    for(x in person)
    {
        document.write(x + ": " + person[x] + "<br />");    //这里不能写成person.x
    }

     函数:

    全局变量:在函数外的变量为全局,任何脚本都能用。

    数字+字符串:会将数字当作字符串处理。

    for循环:

    var person={fname:"Bill",lname:"Gates",age:56};
    for (x in person)
    {
        txt = txt + person[x];
    }

     抛出自定义异常:

    function CustomException()
    {
        try
        {
            throw "customException";
        }
        catch(err)
        {
            alert(err);
        }
    }
    CustomException();

     在数据被发送到服务器之前,进行表单验证。

     当网页被加载时,浏览器会创建页面的DOM模型树,即构造对象之间的树形关系(模型):

     找到HTML元素:通过id、标签名、class:

    <p id="test" class="test">test文本</p>
    <script>
        var x = document.getElementById("test");
        var y = document.getElementsByTagName("p");     //这个对象中的所有p元素
        var z = document.getElementsByClassName("test");
        document.write("id: " + x.innerHTML + "<br />");
        document.write("TagName: " + y[0].innerHTML + "<br />");
        document.write("class: " + z[0].innerHTML + "<br />");
    </script>

    改变HTML属性:

    <img id="test" src="1.png" />
    <script>
        //document.getElementById(id).attribute = new value
        var x = document.getElementById("test");
        x.src = "2.png";
    </script>

    改变 HTML 元素的样式 (CSS):

    <p id="test">Hello</p>
    <script>
        //document.getElementById(id).style.property = new style
        var x = document.getElementById("test");
        x.style.color = "#FF0000";
    </script>
    <h1 id="id1">Header</h1>
    <button onclick="document.getElementById('id1').style.color = '#FF0000'">点击测试</button>

    处理 HTML DOM 事件:

    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
    
    <h2 id="test2">Hello</h2>
    <script>
        var x = document.getElementById("test2");
        x.onclick = function () { changeText() };
        function changeText()
        {
            x.innerHTML = "Thanks";
        }
    </script>

    onload可用来处理cookie等事务:

    <script>
        document.onload = checkCookies();
        function checkCookies()
        {
            //是否使用Cookies
            if (navigator.cookieEnabled == true)
                alert("Enabled cookies");
        }
    </script>

    onchange事件:

    <!--在点击页面中的其他地方后(离开输入字段),会触发onchange事件-->
    <input id="test" type="text" onchange="TextChange()" />
    <script>
        function TextChange()
        {
            var x = document.getElementById("test");
            x.value = x.value.toUpperCase();
        }
    </script>

    鼠标相关操作:

    <p onmouseover="mOver(this)" onmouseout="mOut(this)">测试文本</p>
    <p onmousedown="mDown(this)" onmouseup="mUp(this)">测试文本</p>
    <script>
        //放上去,又拿开
        function mOver(obj)
        {
            obj.innerHTML = "鼠标放在了这里";
        }
        function mOut(obj)
        {
            obj.innerHTML = "鼠标离开了这里";
        }
        //点击下去,又松开,就点完了(有了down、up,就不用click了)
        function mDown(obj)
        {
            obj.innerHTML = "点击不放";
        }
        function mUp(obj)
        {
            obj.innerHTML = "松开";
        }
    </script>

    添加或删除 HTML 元素:

    <!--添加新元素:创建新元素,再将新元素加入某个元素-->
    <div id="div1">
        <p>段落</p>
    </div>
    <script>
        //创建
        var p = document.createElement("p");
        var text = document.createTextNode("新段落");
        p.appendChild(text);
    
        //添加
        var element = document.getElementById("div1");
        element.appendChild(p);
    </script>

    类似的,删除:

    <div id="div1">
        <p id="p1">段落1</p>
        <p id="p2">段落2</p>
    </div>
    <script>
        //通过这个元素的父亲,来删掉它
        var child = document.getElementById("p1");
        child.parentNode.removeChild(child);      //child.parentElement.removeChild(child);
        //易懂的写法
        //var child = document.getElementById("p1");
        //var parent = document.getElementById("div1");
        //parent.removeChild(child);
    </script>

     创建三种消息框——警告框、确认框、提示框:

    //警告框alert:下面换行
    alert("hello" + "
    " + "world");    //应该用concat方式,写在一起达不到效果
    //确认框:往往需要根据返回值,来确定选择结果
    var result = confirm("choose");
    if (result == true) {
        alert("OK");
    }
    else {
        alert("no");
    }
    //提示框:往往用于,进入一个页面之前提示用户输入某些值:prompt("提示文本","默认值")。点击确认后,返回值为输入框的值;取消,为null
    document.write(prompt("请输入姓名", "Bill Gates"));
  • 相关阅读:
    start tag, end tag issues in IE7, particularly in xslt transformation
    用SandCastle为注释生成chm文档
    Firebug
    架构的重点
    Linux Shell常用技巧(十) 管道组合
    Linux JDK升级
    Linux Shell常用技巧(十二) Shell编程
    Packet Tracer 5.0实验(一) 交换机的基本配置与管理
    Linux Shell常用技巧(六) sort uniq tar split
    Linux Shell常用技巧(二) grep
  • 原文地址:https://www.cnblogs.com/quanxi/p/6390556.html
Copyright © 2011-2022 走看看