zoukankan      html  css  js  c++  java
  • JavaScript初步认识

    一 。 JavaScrip的嵌入方式:

      ----- <li onclick="alert('Hello')">条目一</li>         内嵌在html中

      ------<li onclick="init()">条目一</li>                 

          <script>
            function init(){
              alert("Hello");
              }
          </script>                                            调用script标签中的方法

      -------<script src="1.js"></script>                 调用外部的js代码

    二。 javascrip的组成

        ECMAScript(规范) + BOM(浏览器对象模型) + DOM(文档对象模型)

    三。javascript的层次结构

            -------- screen

            -------- navigator

        window -------- document

            -------- history

               --------  location

            -------- .....

    四。节点对象的获取方式

      document.getElementById("id");    通过ID获取指定节点对象

      document.getElementByTagName("TagName");      通过节点名称获取节点对象

          document.getElementByName("classname")        通过class=“username”指定的节点获取该节点,限定为表单节点

        

      document.form[]      获取页面所有的表单对象 <form>

      document.images[]      获取页面所有img标签对象 <img>

      document.links[]        获取页面所有超链接标签对象<a>

      利用节点关系获取(属性)

        parentNode(父节点)

        childNodes(子节点)

        firstChild(大儿子节点)

        lastChild (小儿子节点)

        nextSibling(下一个兄弟节点)

        previousSibling(上一个兄弟节点)

     五。 节点对象分类:

        元素节点  文本节点  属性节点

      六。 节点属性   

      a. nodeName(节点名称)
        元素节点的 nodeName 是标签名称
        属性节点的 nodeName 是属性名称
        文本节点的 nodeName 永远是 #text
        文档节点的 nodeName 永远是 #document

      b. nodeValue(节点值)
        对于文本节点,nodeValue 属性包含文本。
        对于属性节点,nodeValue 属性包含属性值。
        nodeValue 属性对于文档节点和元素节点是不可用的。

      c. nodeType(节点类型) : nodeType 属性可返回节点的类型。
        标签节点的类型值是 1
        属性节点的类型值是 2
        文本节点的类型值是 3

    七。节点的增删改查操作

      a. 节点的查操作如上

      b. 节点的增加操作    appendChild()或 innerHtml方式

      c. 节点的删操作       removeChild()

      d.节点改操作          replaceChild( nodeA,nodeB)  用nodeA节点替换节点nodeB

      e. 节点创建操作      document.createElement() : 创建一个标签节点     docuemnt.createTextNode("内容") :创建一个文本节点

    八。 javascript代码设置定时器

        var timer = setTimerOut(function() , time);  调用一次

        var timer = setInterval(func(), time);    反复被调用

          ---clearTimeout(timer)  移除由setTimeout()创建的定时器

          ---clearInterval(timer)  移除由setInterval()创建的定时器

    九。节点对象在做动画时注意:

       1. offsetLeft  offsetTop offsetWidth offsetheigh  获取元素的左边距 右边距 宽度(包括border padding) 高度(包括border padding)

       2. 元素没有被style->position属性修饰,改变其left,right属性不生效,但可以通过marginLeft marginTop可以改变位置。

         3. 在页面内置的style属性中修饰的属性是无法通过javascrip直接拿到,如:    

          <head>
            <meta charset="UTF-8">
            <title>test</title>
            <style>
              li{
                 160px;
                height: 80px;
                background-color: yellow;
                margin-top: 50px;
                text-align: center;
              }
            </style>
          </head>

          <javascript>     

            function getWidth(){
              var div = document.getElementById("id");
              return div.style.width;
              }

          <javascript>

           这种方式是无法拿去到width的值,因为他被定义在css样式表中。但是可以通过如下方式获取:

        function getStyle(obj,attr){

          // 兼容IE
          if(obj.currentStyle){
            return obj.currentStyle[attr];
          }else{

            //兼容市面上大部分的浏览器
            return getComputedStyle(obj,false)[attr];
            }
          }

    十: javascript的演示代码

      

    <!DOCTYPE html>
      <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
          li{
           160px;
          height: 80px;
          background-color: yellow;
          margin-top: 50px;
          text-align: center;
           }
        </style>
      </head>
        <script href="1.js">
          window.onload = function(){
          var ali = document.getElementsByTagName("li");
          for(var i=0;i<ali.length;i++){
            ali[i].onmouseover = function(){
            startMove(this,400);
            }
          ali[i].onmouseout = function(){
          startMove(this,160);
          }
         }
        }

        function startMove(obj,Itarger){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
        var currentwidth = obj.offsetWidth;
        var speed = (Itarger - currentwidth)/10;
        speed = speed>0? Math.ceil(speed):Math.floor(speed);
        if(currentwidth == Itarger){
          clearInterval(obj.timer);
         }else{
          obj.style.width = currentwidth + speed +"px";
         }
       },30);
      }

        function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }else{
        return getComputedStyle(obj,false)[attr];
      }
    }
    </script>
    <body>
    <ul>
    <li>条目一</li>
    <li>条目二</li>
    <li>条目三</li>
    <li>条目四</li>
    </ul>

    </body>
    </html>

        

  • 相关阅读:
    vue-fullcalendar插件
    iframe 父框架调用子框架的函数
    关于调试的一点感想
    hdfs 删除和新增节点
    hadoop yarn 实战错误汇总
    Ganglia 安装 No package 'ck' found
    storm on yarn(CDH5) 部署笔记
    spark on yarn 安装笔记
    storm on yarn安装时 提交到yarn失败 failed
    yarn storm spark
  • 原文地址:https://www.cnblogs.com/android-er/p/5595394.html
Copyright © 2011-2022 走看看