• 概述


    浏览器组成1.shell部分-外壳 2.内核部分-渲染引擎(语法规则和渲染) js引擎 其他模块

    主流浏览器(根据内核区分):

    IE:Trident

    Firefox:Gecko

    Google Chrome:以前是Webkit内核,现在是Blink内核

    Safari:Webkit

    Opera:Webkit

    html+css+JavaScript遵循结构+样式+行为相分离

    JavaScript具体在html中可以做什么?

    1.直接写入html输入流

      意思就是我们可以在script标签里面一样的写html标签,浏览器可以解析到,并输出。位置的话,script标签位置不固定,随便放,head下,body下都行,或者跟head、body平级。

    像这样:

    <script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
    </script>

    注意:只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

    土话来讲就是说:document.write可以正常作为html标签输出来用,但是,你不能放在函数里,因为函数即js的代码是不会再一开始加载html页面时就执行,

    比如一个按钮,你点击后才会触发函数,如果你在这个函数里写了document.write,那么你前面html正常写的都会被你write的内容覆盖掉。

    2.事件

    我们写在<script></script>中的函数,都可以在html标签里面通过不同事件来调用

    像这样:

    <button type="button" onclick="alert('欢迎!')">点我!</button>

    onclick就是一个点击事件,alert是浏览器的,可以直接用,当然也可以用我们自己写在<script>里的函数。

    3.改变html的内容

    像这样:

    x=document.getElementById("demo"); // 找到元素
    x.innerHTML="Hello JavaScript!"; // 改变内容

    方法是 HTML DOM 中定义的,就是浏览器自带的,我们记住了用就ok啦

    4.改变html图像

    像这样:

    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
    element.src="/images/pic_bulboff.gif";
    }
    else
    {
    element.src="/images/pic_bulbon.gif";
    }
    }
    </script>
    <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>

    5.改变html的样式

    像这样:

    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000"; // 改变样式

    6.验证输入

    像这样:

    var x=document.getElementById("demo").value;
    if(isNaN(x)||x.replace(/(^s*)|(s*$)/g,"")==""){
    alert("不是数字");
    }

  • 相关阅读:
    并查集-B
    ->的用法
    PTA-1042 字符统计
    PAT 1040有几个PAT
    assembly x86(nasm)修改后的日常
    python接口自动化之操作常用数据库mysql、oracle
    os模块常用方法
    python 多线程编程并不能真正利用多核的CPU
    连接mysql数据库
    python之用yagmail模块发送邮件
  • 原文地址:https://www.cnblogs.com/hebiao/p/13361983.html
Copyright © 2020-2023  润新知