《javascript入门篇》笔记

本文是本人源自慕课网《Javascript入门篇》笔记。


  • confirm 消息对话框
    var r=confirm("Press a button")
    if (r==true)
    {
    document.write("You pressed OK!")
    }
    else
    {
    document.write("You pressed Cancel!")
    }

  • prompt 消息对话框
    var myname=prompt("请输入你的姓名:");
    if(myname!=null) {
    alert("你好"+myname);
    }
    else {
    alert("你好 my friend.");
    }

  • window.open([URL], [窗口名称], [参数字符串])
    window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

  • window.close
    用法:window.close(); //关闭本窗口或<窗口对象>.close(); //关闭指定的窗口

  • 综合作业:
    function openWindow(){
    var k_open;
    var temp=confirm("是否要打开新的网页?");
    if(temp)
    {
    k_open=prompt("请输入你要打开的网址:","http://www.imooc.com/");
    window.open(k_open,'_blank','width=400,height=500,menubar=no,toolbar=no');
    }
    }

  • document.getElementById(“id”) // 通过ID获取元素
    var mychar=document.getElementById("con");
    document.write("结果:"+mychar); //输出获取的P标签。

  • Object.innerHTML
    var mychar=document.getElementById("con");
    document.write("原标题:"+mychar.innerHTML+"
    "); //输出原h2标签内容
    con.innerHTML = "Hello World!"
    document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
    //Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
    //注意书写,innerHTML区分大小写。

  • Object.style.property=new style;
    var mychar = document.getElementById("pcon");
    mychar.style.color="red";
    mychar.style.fontSize="20";
    mychar.style.backgroundColor ="blue";

  • Object.style.display = value;
    function hidetext()
    {
    var mychar = document.getElementById("con");
    mychar.style.display="none"
    }
    function showtext()
    {
    var mychar = document.getElementById("con");
    mychar.style.display="block"
    }

  • 控制类名(className 属性);
    <script type="text/javascript">
    function add(){
    var p1 = document.getElementById("p1");
    p1.className = "one";
    }
    function modify(){
    var p2 = document.getElementById("p2");
    p2.className = "two";
    }

  • 取消属性设置
    var mydiv = document.getElementById("txt");
    mydiv.removeAttribute("style");

  • myarray.length; //获得数组myarray的长度

  • var mynum=new Array(65,90,88,98);// 给数组赋值

  • 综合练习
    function compare(a,b)
    {
    if(a>b)
    {
    return a;
    }
    else if(a<b)
    {
    return b;
    }else
    {return "两数相等"}
    }
    document.write(" 5 和 4 的较大值是:"+compare(5,4)+"
    ");
    document.write(" 6 和 3 的较大值是:"+compare(6,3)+"
    ");
    document.write(" 88 和88 的较大值是:"+compare(88,88) );

  • onclick事件
    <input name="点击我" type="button" value="点击我" onclick="openwin()" >

  • onmouseover事件
    <input name="确定" type="button" value="确定" onmouseover="message()" >

  • onmouseout事件
    <a href="http://www.imooc.com" onmouseout="message()">点击我</a>

  • onblur事件
    <a href="http://www.imooc.com" onblur="message()">点击我</a>

  • onselect事件
    <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
    // 类似的还有:onchange、onload

  • 学习资料:慕课网Javascript入门教程
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,828评论 0 8
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,142评论 1 10
  • 放置位置 放在 部分最常用的方式是在页面中head部分放置 元素,浏览器解析head部分就会执行这个代码,然后才解...
    SpareNoEfforts阅读 671评论 0 0
  • **1.document.write(""); 输出语句 ****2.JS中的注释为// ****3.传统的HTM...
    reallychao阅读 1,739评论 1 40
  • 语法: 模式描述了一个表达式模型。 修饰符(modifiers)描述了检索是否是全局,区分大小写等。注意:当使用构...
    BaibaiWang阅读 369评论 0 0