zoukankan      html  css  js  c++  java
  • JavaScript基础(二)

    JavaScript基础(二)

    Html DOM

    • DOM是文档对象模型(Document Object Model)
    • javascript可以通过寻找标签的id找到对应的标签
    • 对找到的标签可以做很多操作
    • 包括修改,删除
    • 也可对实践做出反应

    找到标签

    • id找标签 
      • x=document.getElementById(“demo”);
    • name找标签 
      • x=document.getElementByName(“demo”);
    • 类名找标签(找到所有段落的) 
      • x.getElementsByTagName(“p”);

    写入内容

    • 写入到输出流 
      • document.write();
      • (注意,如果要输出字符串,必须要有引号,输出变量和数字不用)
    • 改变元素内容 
      • x.innerHTML=”new text”;
    • 改变元素属性 
      • x.src = “newimg.jpg”;

    改变样式

    • x.style.color = “blue”;
    • x.style.visibiliyu = “hidden”;//设为隐藏和不可见

    本篇省去了很多深入的知识,只是适用于对javascrip的大体框架做一了解,更多详细的知识请查看w3school


    对行为作出反应

    • 点击 
      • onclick=“”(引号里面可以加一个语句或者一个函数)
    • 页面加载 
      • onload=“”//加载成功时执行
      • onunload=“”//加载失败时执行
      • 由于不同浏览器对于一些函数的支持不同,这两个反应可以区分不同浏览器
    • 鼠标悬停 
      • onmouseover=“”//鼠标在此标签上方悬停时执行
      • onmouseout=“”//鼠标离开后执行
      • 如果onmouseout的结果和一开始不同,离开后不会回到一开始的状态
    • 改变 
      • onchange=“”//值改变后执行
    • 按住和离开 
      • onmousedown=“”//鼠标按下不放
      • onmouseup=“”//鼠标松开后
      • 和鼠标悬停一样,如果松开后的效果和一开始不同,松开后不会回到一开始的状态
      • 发现一个小bug,按下后把鼠标一直按下脱离标签区域再松开,发现标签会一直保持按下状态
    • 聚焦 
      • onfocus=“”//一般只对input标签使用,点击输入框之后执行

    增加新节点(标签)

    • 创建新标签 
      • var para=document.createElement(“p”);
    • 创建标签文本内容 
      • var node=document.createTextNode(“这是新段落。”);
    • 为这个标签添加文本内容 
      • para.appendChild(node);
    • 找到一个节点并加入 
      • var element=document.getElementById(“div1”);
      • element.appendChild(para);

    删除节点(标签)

    • 找到要删除的节点 
      • var child=document.getElementById(“p1”);
    • 找到要删除节点的父节点 
      • var parent=document.getElementById(“div1”);
    • 删除掉这个节点 
      • parent.removeChild(child);
    • 也有快捷办法 
      • document.getElementById(“p1”).parentNode.removeChild(child);

    JavaScript对象

    • 和所有面向对象的语言一样,javascriot也有对象
    • 对象有其属性与方法,方法就是

    创建对象

    • 构造函数(这个构造函数和java不同)
    • 这里没有类的概念,原来java的类的位置就是现在构造函数的位置,类变量就可以看成是这里对象数属性
    • 如下面的程序,上半部分是构造函数,下面是这个对象的一个方法
    function person(firstname,lastname,age,eyecolor)
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
    
        this.changeName=changeName;
        function changeName(name)
        {
            this.lastname=name;
        }
    }

    for in 循环遍历对象属性

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

    数字

    • 所有数字都是64位的
    • 浮点数计算不精确,如果要计算最好先化为整数,再做除法
    • 整数最多15位
    • 八进制前面加0,十六进制前面加0x

    字符串

    • .length //求字符串长度
    • .big //变大
    • .small//变小
    • .bold//加粗
    • .itallics//斜体
    • .fixed//变细
    • .strike//划掉
    • .fontcolor//字体颜色
    • .fontsize//字体大小
    • .toLowercase//全小写
    • .toUppercase//全大写
    • .sub//下标
    • .sup//上标
    • .link//链接
    • .indexof//首次出现的位置,不在为-1
    • .match//匹配,返回匹配的或null
    • .replace(/bereplaced/,”replace”)//替换

    日期

    • Date() //获取时间
    • getTime()//获取时间戳
    • getDay()….hours,seconds….很多很多就不列举了

    数组


    布尔型

    • “false”是true
    • “”是false

    算数Math

    • .round()//四舍五入
    • .random()//0-1的随机数
    • .max,min

    正则表达式

    • 比如在验证邮箱的时候使用,验证是否是规定格式的
  • 相关阅读:
    python — 文件操作
    Android存储
    JAVA 里面 synchronized作用
    UML元素
    ubuntu18.04 命令行安装gradle
    UML时序图
    视觉SLAM中的数学——解方程AX=b与矩阵分解:奇异值分解(SVD分解) 特征值分解 QR分解 三角分解 LLT分解
    现行最小二乘过约束和欠约束如何求解
    SLAM-G2O分析
    自定义Gradle插件
  • 原文地址:https://www.cnblogs.com/bwjiang/p/7863256.html
Copyright © 2011-2022 走看看