zoukankan      html  css  js  c++  java
  • JavaScript

    1     JavaScript简介

    基于对象(非面向对象)

    1.1 JavaScript概述

    一个完整的JS实现由一下3部门组成,核心(ECMAScript)、文档对象模型(Document Objrct Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。

    DOM树:文档对象,JS操作DOM

    1.2 JS Hello World

    <!DOCTYPE html>
    <html>
    <head>
             <meta charset="UTF-8">
    <title>JavaScript引入方式</title>
    <script type="text/javascript">
             alert("JS Hello World");//弹窗输出
             //文档对象
             document.write("learn javascript now")//页面输出
    </script>
    </head>
    <body>
    </body>
    </html>

    1.3 JavaScript基础语法

    JavaScript 引入方式

    内部;外部;

    JavaScript 注释

    单行: // ;

    多行: /* */ ;

    JavaScript 变量

    JavaScript 是弱类型语言,统一用var 来定义变量;

    JavaScript基本数据类型

    数值类型;

    字符串类型;

    布尔类型;

    Undefined(表示变量不含有值);

    Null(置空变量));

    JavaScript运算符

    1,算术运算符;

    2,赋值运算符;

    3,比较运算符;

    4,逻辑运算符;

    5,三目运算符;

    6,字符串连接“+”

    JavaScript选择与循环

    1,if...else 语句;

    2,switch 语句;

    3,for 循环语句;

    4,while/do..while 语句;

    JavaScript函数

    function fun1() {
                       // body...
                       alert("第一个函数");
             }
             fun1();

    注意区分Break和Continue

    2     JavaScript操作DOM节点

    2.1 JavaScript 处理DOM 事件

    <!DOCTYPE html>
    <html>
    <head>
             <meta charset="utf-8">
             <title>JavaScript处理DOM事件</title>
    <script type="text/javascript">
             function fuck(){
                       alert("点我干嘛?");
             }
    </script>
    </head>
    <body>
    <input type="button" value="点我一下" onclick="fuck()"/>
    </body>
    </html>

    2.2 JavaScript 操作DOM 节点 

    1,JavaScript 修改DOM 节点

    2,JavaScript 添加DOM 节点

    3,JavaScript 删除DOM 节点

    function modifyDOM1(){
            document.getElementById('text1').value="这里输入ID";
            document.getElementById('pwd1').value="这里输入密码";
        }
        function modifyDOM2() {
            document.getElementById("sp1").innerHTML="用户名";
            document.getElementById("sp2").innerHTML="密码";
        }
    

      

    <script type="text/javascript">
        function addDOM1() {
            /* 创建p标签,里面加入内容 */
            var p=document.createElement("p");
            var nodeText=document.createTextNode("文本框前面的文字内容");
            p.appendChild(nodeText);
            /* 找到父节点,插入DOM */
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            parent.insertBefore(p,child);
        }
    function addDOM2() {
            /* 在后面插入节点 */
            var h4=document.createElement("h4");
            var nodeText=document.createTextNode("游戏新闻");
            h4.appendChild(nodeText);
            var parent=document.getElementById("parent");
            parent.appendChild(h4);
        }
    </script>

    appendChild()函数作用

    (1)向双标签内部添加内容

    (2)父节点下的子节点后面添加DOM

    function removeDOM() {
            /* 获取父节点 */
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            /* 父节点remove */
            parent.removeChild(child);
        }

    2.3 JavaScript修改DOM 节点CSS 样式

    document.getElementById("boy").style.color="red";
    

    3     JavaScript对象

    3.1 JavaScript对象定义

    1,JavaScript 对象定义

    2,JavaScript 动态的添加属性和方法

    3,JavaScript 动态的删除属性和方法

    4,JavaScript 对象构造方法

    var p=new Object();
    p.name="Java and Oracle"; // 动态的添加属性
    p.func=speak;  // 动态的添加方法
    //delete 属性、方法
    //赋值为undefined
     function person(name,age){
            this.name2=name;
            this.age2=age;     
        }

    3.2 JavaScript字符串对象

    1,字符串对象实例化方法

    2,字符串length 属性

    3,字符串indexOf 方法使用indexOf() 来定位字符串中某一个指定的字符首次出现的位置

    4,字符串replace()方法使用replace() 方法在字符串中用某些字符替换另一些字符

    var s1="直接定义字符串";
    
    var s2=new String("使用new关键字定义字符串");
    

    3.3 JavaScript日期对象

    1,日期对象实例化

    2,getTime()方法,返回1970 年1 月1 日至今的毫秒数。

    3,getFullYear() 从Date 对象以四位数字返回年份。

    4,getMonth() 从Date 对象返回月份(0 ~ 11)。

    5,getDate() 从Date 对象返回一个月中的某一天(1 ~ 31)。

    6,getHours() 返回Date 对象的小时(0 ~ 23)。

    7,getMinutes() 返回Date 对象的分钟(0 ~ 59)。

    8,getSeconds() 返回Date 对象的秒数(0 ~ 59)。

    9,getDay() 从Date 对象返回一周中的某一天(0 ~ 6)。

    var date=new Date();
    

     3.4 JavaScript数组

    1,数组的声明;

    2,数组的遍历;

    3,数组元素排序sort()方法;

    4,数组元素组合成字符串join()方法;

    5,合并数组元素concat()方法;

    6,颠倒数组元素reverse()方法;

    var arr=new Array();
    var arr2=new Array(3);

    4     JavaScript常用函数 

    4.1 JavaScript 全局函数

    全局函数不属于任何一个内置对象。

    JS 包含以下7 个全局函数,用于一些常用的功能:escape(),eval(),isNan(),isFinite(),parseFloat(),paaseInt(),unescape();

    Eval()方法:执行代码;

    <script type="text/javascript">
             var str="1+2+3";
             alert(eval(str));
    </script>
    

    4.2 window对象常用方法及事件

    alert();弹出消息框confirm() prompt()

    window.alert("太简单了,整理啥?");
    window.confirm("简单到爆炸");
    window.prompt("观察prompt、基本不会使用,呵呵");

     setTimeout();执行一次

    setinterval();执行多次

    open();打开窗口

    window.onload 发生在文档全部下载完毕的时候。(HTML onload事件)

    window.onresize 发生在窗口大小发生变化的时候。(了解)

    function tuan() {
             alert("xxxxx");
    }
    window.setTimeout("tuan()",3000);
    var n=1;
    function q() {
             document.write("xxxxx");
             n++;
    }
    
    window.setInterval("q()",1000);

    window.open();        打开窗口

    window. onload();    发生在文档全部下载完毕的时候

    <script type="text/javascript">
    
                       window.onload=function(argument) {
    
                                alert("window对象提供的加载完成");
    
                       };
                       function loadInfo(argument) {
    
                                alert("HTML提供的加载完成");
                       }
    
    </script>
    

      暂时先到这里

     

    oraclepeixun
  • 相关阅读:
    CentOS7上Mongodb安装、卸载
    CentOS7上Redis安装与配置
    vmware centos7系统虚拟机复制到其他电脑后不能联网问题解决
    流程项目点水笔记
    CentOS7图形界面启动报错unable to connect to X server
    本地Chrome测试JS代码报错:XMLHttpRequest cannot load
    iptables相关操作以及简单理解端口和服务之间关系
    git revert 和 git reset的区别
    Linux中_ALIGN宏背后的原理——内存对齐
    SPI协议及其工作原理浅析
  • 原文地址:https://www.cnblogs.com/dldrjyy13102/p/7502842.html
Copyright © 2011-2022 走看看