JavaScript学习笔记

 

时间:2016-10-25 19:05

 

——介绍

1、JavaScript简介
    JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
    特点:
        交互性:信息的动态交互
        安全性:不可以直接访问本地硬盘
        跨平台性:只要是可以解析JS的浏览器都可以执行,与平台无关

    基于对象:
        提供了很多对象,而已直接使用。
    事件驱动:
        HTML做出的网站都是“静态效果”,而JavaScript可以实现“动态”效果。
    客户端:
        指浏览器。
    JS与Java的区别:
        JS是网景公司开发的一种脚本语言,可以在所有的主流浏览器中运行。
        JS是基于对象的,而Java是面向对象的。
        JS只需要解析就可以执行,而Java需要先编译成字节码文件,再执行。
        JS是一种弱类型语言,而Java是一种强类型语言。

    JavaScript语言组成:
        核心:ECMAScript
            ECMA(欧洲计算机协会),JS语法由该组织制定。
        文档对象模型:DOM
            Document Object Model
        浏览器对象模型:BOM
            Browser Object Model

2、JavaScript与HTML结合方式(两种)
    第一种:
       
    第二种:使用script标签引入外部js文件。
       
        但是,当引入外部js文件时,script标签内不能再写其他的js代码。
        
3、JavaScript原始类型和声明变量
    基本语法:
        变量、函数、运算符区分大小写。
        变量是弱类型的:(原始类型)
            var a = 10;
            var b = true;
            var c = "hello world";
        五种原始类型:
            string、number、boolean、null、undifined
            null表示对象引用为空。
            undifined表示定义了变量但是没有赋值。
        每行结尾的分号可有可无,建议编写。
        两种类型的注释:
            单行注释:// 注释内容
            多行注释:/* 注释内容 */

        typeof运算符:
            通过typeof()运算符,可以查看变量的类型,typeof(变量名),所有引用的类型都是object。
        通过instanceof运算符可以解决typeof对象类型判断的问题。
        区分undefined和null:
            变量定义了未初始化或者访问对象不存在的属性,会出现undefined。
            访问的对象不存在时,会出现null。

        全局变量和局部变量:
            全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
            局部变量:在方法内部定义一个变量,只能在方法内部使用。

4、JavaScript的语句
    if、switch、for、while、do-while
    switch语句:
        JDK1.7版本之后支持了String类型,而JS中支持所有的数据类型。

5、JavaScript的运算符
    JavaScript中不区分整数和小数,所以除法中没有整数,会出现小数。
        alert(123 / 1000 * 1000);,输出结果为123。
    字符串与数字相加,是字符串连接,如果是相减,则字符串直接转换成数字再进行相减。
    boolean类型可以进行运算,false是0或者null,非0或非null是true,默认用1显示。

    NaN:
        not a number:非数字。
        属于number类型。
        用来表示数值的一种状态,一种不正常的状态。
        一般情况下会在计算出现错误的时候出现。
        判断当前的数据类型是否是NaN的关键字:isNaN()
           如果结果是非数字:true
           如果结果是数字:false
    ==和===的区别:
        ==判断的是值,和类型无关。
        ===既判断值,又判断类型。

6、99乘法表示例
    

7、JavaScript数组
    三种定义方式:
        var arr = [1, "2", true];
        var arr = new Array(5);
        var arr = new Array(1,2,3);
    数组有length属性。
    数组的长度是可变的。
    数组可以存放不同类型的数据。

8、函数
    普通函数:
        function method(){ }
        function method2(a, b) { return a + b;}
        参数列表中不需要写var,直接写变量名。

    匿名函数:
        var add = function method(a, b) { return a + b; }
        通过add(1, 2);进行调用。

    内置对象:(动态函数)
        使用到js中的一个内置对象:Function
        var add = new Function("参数列表", "方法体和返回值");

        var args = "";
        var body = "";
        var add = new Function(args, body);

9、script标签放置的位置
    理论上可以放在任意位置。
    不过由于HTML解析是由上到下的,所以通常情况下放在标签之后。

10、JS的方法重载
    


——JavaScript第一天总结
1、什么是JavaScript
2、js和HTML的结合方式
3、js的数据类型
4、js的语句
5、js的运算符
6、js的数组
7、js的函数
8、js的全局变量和局部变量
9、script标签位置
10、js的函数重载






——JavaScript第二天

1、JS的string对象
    创建string对象:
        var str = "abc";
    方法和属性:
        属性:length,表示字符串的长度。
        (1)与HTML相关的方法
            bold():使用粗体显示字符串
            fontcolor("颜色"):使用指定颜色显示字符串
            fontsize(size):使用指定字号显示字符串
            link("URL"):将字符串显示为超链接
            sub():设置下标
            sup():设置上标
        (2)与Java相似的方法
            concat(string):连接字符串
            charAt(index):返回指定位置的字符串,如果脚标不存在,则返回空字符串
            indexOf(string):返回字符串所在位置,当字符串不存在时,返回-1
            split(regex):分隔字符串,返回字符串数组
            replace(string, string):需要传递两个参数,第一个是原始字符串,第二个是要替换的字符串
            substr(fromindex, count):从指定位置开始,截取count的字符
            substring(fromindex, endindex):包含头不包含尾

2、JS的Array对象
    创建数组:
        var arr = [1, 2, 3];    创建一个长度为3的数组,并且赋值为123。
        var arr = new Array(5);    创建一个长度为5的数组。
        var arr = new Array(1, 2, 3);    创建一个长度为3的数组,并且赋值为123。
    属性:
        length:数组的长度。
    数组的方法:
        concat(array):连接数组
            连接只是把数组1和数组2作为一个字符串来看待,并不是将数组2添加到数组1中。
 
        join():根据一个指定的字符串来分割数组

        push():向数组末尾添加一个或多个元素,并返回新的长度,也可以添加一个数组。
            需要注意的是,如果push的元素是一个数组,则会把这个数组当成一个元素来看待,例如:
                原数组arr1的值为[1, 2, 3],此时如果pusharr2=[a, b, c],则arr1的length的值为4,如果打印arr1[3],则会将arr2的值全部输出,当arr2数组中元素发生变化时,此时如果再打印arr1,则也会发生变化,可以理解为将arr2的引用放入了arr3中,并不是将arr2数组的全部值复制到arr1中。
        pop():删除并返回数组中的最后一个元素,如果没有要删除的值,则返回undefined。
        reverse():颠倒数组中的元素。

3、JS的Date对象
    在Java中获取当前时间:
        Date date = new Date();
        在Java中有两种转换方法:
            new SimpleDateFormat().format()和toLocaleString();

    JS中如何获取当前时间:
        var date = new Date();

    方法:
        toLocaleString():根据本地时间格式,把Date对象的时间转换为字符串
        getFullYear():以四位数字返回当前年份
        getMonth():得到当前月份,需要注意的是,月份的范围是0 ~ 11
        getDate():得到当前天数,范围是1 ~ 31
        getDay():返回一周中的某一天,范围是0 ~ 6,从周日开始计算
        getHours():获取当前小时,范围0 ~ 23
        getMinutes():获取当前分钟
        getTime():返回从1970年1月1日至今的毫秒数

    应用场景:
        使用毫秒数处理缓存的效果:
             http://www.baidu.com?毫秒数
            因为每次请求的毫秒数都不相同,所以可以保证每次请求的数据都是新的。

4、JS的Math对象
    Math对象并不像Date和String那样是对象的类,因此并没有构造方法,所以不能创建对象,Math的方法都是静态方法。

    属性:
        PI:π,圆周率

    方法:
        ceil(number):向上舍入
        floor(number):向下舍入
        round(number):四舍五入
        random():返回0 ~ 1之间的伪随机数
        max(x, y):返回x和y中的最大值
        min(x, y):返回x和y中的最小值


5、JS的全局函数
    由于该函数不属于任何对象(类),所以可以直接使用。

    eval(string):可以执行JS代码,也可以进行数学运算。
    encodeURI():对字符进行编码
    decodeURI():对字符进行解码
    encodeURIComponent():对字符进行编码
    decodeURIComponent():对字符进行解码
        以上方法没有本质上的区别,只不过编码字符个数不同
    isNaN():检查某个值是否是数字,返回值为true和false
    parseInt():将一个字符串转换为整数。

    关于编解码URI:
        进行URL跳转时可以整体使用encodeURI进行编码。
    对字符串进行unicode编码:
        (1)escape不能编码的字符有69个:
            *+_./@_0-9a-zA-Z
        (2)encodeURI不能编码的字符有82个:
            !#$&'()*+-./:;=?@_~0-9a-zA-Z
        (3)encodeURIComponent不能编码的字符有71个:
            !'()*-._~0-9a-zA-Z

6、JS的函数重载
    面试:JS中是否存在重载?
        (1)JS中不存在重载。
        (2)但是可以通过其他方法来达到重载的目的。
        (3)在JS中如果方法名相同,会调用最后一个方法。
        (4)参数会保存在arguments数组中。
        

7、JS的BOM对象
    Browser Object Model,浏览器对象模型。

    有哪些对象:
        navigator:可以获取浏览器的相关信息。
            appName:浏览器名称
            document.write(navigator.appName);    //注意navigator要小写

        screen:获取浏览器屏幕的信息,例如宽度、高度、分辨率
            document.write(screen.width);    获取屏幕宽度
            document.write(screen.height);    获取屏幕高度

        location:表示请求URL地址
            href:设置或返回完整的URL地址,需要注意的是,该href默认已经进行encodeURI编码。
                获取请求URL地址:document.write(decodeURI(location.href));
                设置URL地址:location.href=" http://www.baidu.com";

        history:请求URL的历史记录
            length:返回浏览器历史列表中的URL数量
            back():加载history列表中的前一个URL
            forward():加载history列表中的下一个URL
            go():加载history列表中的某个具体页面 
            创建三个页面:
                (1)创建第一个页面a.html,写一个链接到b.html
                (2)创建b.html,写一个超链接c.html
                (3)创建c.html
                

BBBBBB

                
                
                跳转到c
 
                

        window:
            window对象是JS层级中的顶层对象。(所有的BOM对象都在window中进行操作)
            window对象代表一个浏览器窗口或一个框架。
            window对象会在或出现时自动创建。

            属性:
                opener:返回创建此窗口的窗口的引用。

            方法:
                alert():在页面弹出一个提示窗口

                confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
                    在弹出的对话框中选中确定,返回true,选中取消,返回false。

                prompt(text, defaultText):显示可提示用户输入的对话框
                    text:对话框中显示的内容。
                    default:对话框中输入框中默认显示的文本。

                open(url, name, features, replace):打开一个新的浏览器窗口或查找一个已命名的窗口,一般使用三个参数即可
                    url:打开的新窗口的URL地址
                    name:空字符串即可
                    features:窗口特征,比如窗口宽度和高度
                    创建一个按钮,当点击按钮时,打开一个新窗口:
                        
                        

                close():关闭当前窗口(浏览器兼容性较差)

                setInterval(code, millisec):按照指定的周期(以毫秒计)来调用函数或计算表达式 
                    参数:
                        code:要调用的函数或要执行的代码
                        millisec:周期性执行或者调用code之间的时间间隔,以毫秒计。1秒 = 1000毫秒
                    setInterval("alert(123)", 3000);    每三秒弹出一个对话框。
                    可以使用这个方法来制作系统时间、定时器等。

                setTimeout(code, millisec):在指定的毫秒数之后来调用
                    与setInterval的区别是,setTimeout只会执行一次,而setInterval会重复执行。

                clearInterval():清除setInterval()设置的定时器
                    clearInterval()方法的参数必须是由setInterval()返回的ID值。
                clearTimeout():清除setTimeout()设置的定时器
                    clearTimeout()方法的参数必须是由setTimeout返回的ID值。

                    
                    
                    

8、JS的DOM对象
    Document Object Model,文档对象模型。
        文档:超文本文档(超文本标记文档),HTML、XML。
        对象:提供了属性和方法。
        模型:使用属性和方法来操作超文本标记型文档。
    可以使用JS中DOM里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作。

    想要对标记型文档进行操作:
        首先需要对标记型文档中的所有内容都封装成对象。
            需要把HTML中的标签、属性、文本内容都封装成对象。
        然后需要解析标记型文档。

    如何使用DOM解析HTML:
        首先会根据HTML的层级结构在内存中分配一个树形结构,然后再通过不同的对象来操作HMTL。

    对象:
        Document对象:
            整个HTML文档。
        Element对象:
            标签对象。
        Element -> 属性对象。
        Element -> 文本对象。
        Node节点对象:
            是Element对象的父对象。
            如果在Element对象中找不到想要的方法,可以去Node对象中寻找。

    DOM的三个级别:
        (1)将HTML文档封装成对象。
        (2)在以上基础上添加新的功能,例如:对事件和CSS样式的支持。
        (3)支持XML的一些新特性。
    DHTML:
        动态的HTML,它不是一门语言,是多项技术的综合体的简称。
        包括HTML、CSS、DOM、JavaScript
        这四种语言的职责:
            HTML:负责提供标签,封装数据,这样便于操作数据。
            CSS:负责提供样式,对标签中的数据进行样式定义。
            DOM:负责将标签及其内容解析,封装成对象,对象中具有属性和行为。
            JavaScript负责提供程序设计语言,对页面中的对象进行逻辑操作。


9、Document的对象
    每个载入浏览器的HTML文档都会成为Document对象。
    常用属性:
        forms[]:返回文档中所有form对象的引用。
        body:提供对元素的直接访问。
    常用方法:
        getElementById():返回对拥有指定id的第一个对象的引用。
        getElementsByName():返回带有指定名称的对象集合(数组)。
            获取第一个对象:getElementByName("name")[0];
        getElementsByTagName():返回带有指定表签名的对象集合(数组)。
        write():向文档写HTML表达式或者JavaScript代码,可以输出变量(值)。

10、弹窗案例
    创建一个页面:
        有两个输入项和一个按钮。
        按钮上添加一个点击事件,弹出一个新窗口:open()。
    创建弹出页面:
        使用表格,表格的每一行都有一个按钮,还有编号和姓名。
        按钮上有一个事件,将当前的编号和姓名赋值到第一个页面的文本框中。
   
        
            
        
        
 
            编号:
            姓名:
            
 
            
 
        
    


    
    
        
            
        
    
 
    
        
            
            
            
        
        
            
            
            
        
        
 
            
            
            
        
        
            
            
            
        
    
操作 编号 姓名
                
            
100 张三
                
            
200 李四
                
            
300 王五
    
        
    

    安全问题:
        由于现在访问的是本地文件,谷歌浏览器的安全级别很高,不允许访问本地文件,所以无法执行以上代码,如果在服务器中就不存在以上问题了。


——JavaScript第三天

Node接口的特性和方法:
    String nodeName:
        返回节点的名字。
    String nodeValue:
        返回节点的值。
    Number nodeType:
        返回节点的类型常量值之一。
    Document ownerDocument:
        返回只想这个节点所属的文档。
    Node firstChild:
        返回指向在childNodes列表中的第一个节点。
    Node lastChild:
        返回指向在childNodes列表中的最后一个节点。
    NodeList childNodes:
        返回所有子节点的列表。
    Node parentNode:
        返回一个给定节点的父节点。
    Node previousSibling:
        指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null。
    Node nextSibling:
        指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null。
    Boolean hasChildNodes():
        当childNode包含一个或多个节点时,返回true。
    NameNodeMap attributes:
        包含了代表一个元素的特性的Attr对象,仅用于Element节点。
    Node appendChild(node):
        将node节点添加到childNodes的末尾。
    Node removeChild(node):
        从childNodes中删除node节点。
    Node replaceChild(newNode, oldNode):
        将childNodes中的oldNode替换成newNode。
    Node insertBefore(newNode, refNode):
        在childNodes中的refNode之前插入newNode。

=====================================================================
1、在末尾添加节点
    在末尾添加节点
    
        
  • 11
  •         
  • 22
  •         
  • 33
  •         
  • 44
  •     
        分析:
            (1)创建
  • 标签
                    document.createElement("li");
            (2)创建文本
                    document.createTextNode("文本内容");
            (3)将文本添加到
  • 标签中
                    li.appendChild(node);
            (4)将
  • 标签添加到
      标签中
                      ul.appendChild(li);

          用到的方法:
              createElemnt():为指定标签创建一个元素的实例。
              createTextNode():从指定值中创建文本字符串。
              appendChild(node):将指定节点添加到节点之后。

          在末尾添加节点
          
          
          
              
    • 11
    •         
    • 22
    •         
    • 33
    •         
    • 44
    •     
  •     
    ===============================================================================
    2、Element对象
            操作Element对象的属性:
                获取属性:getAttrubute(name)
                   
                    

                getAttribute()方法的好处是可以获取任何属性,而value只能获取“value”值。
     
                设置属性:setAttribute(name, value)
                    
                    
                    
                    

                删除属性:removeAttribute(nmae)方法
                    removeAttribute()方法不能删除value值。


    ===============================================================================
    3、获取某一节点下的所有节点:childNodes
        获取ul下的所有li。
       
              
    • aa
    •         
    • bb
    •         
    • cc
    •     
        

        需要注意的是,在IE浏览器中会alert(3),而在火狐、谷歌浏览器中会打印alert(7),因为解析方式不同,火狐会把换行和空格也解析为元素。
        所以childNodes属性的兼容性很差。

        在Element对象中查找Element对象:
            在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法,而该方法返回的是一个集合。
            var list = uls.getElementsByTagName("li");
            需要注意的是:getElementsByTagName是Document的方法。
    ===============================================================================
    4、Node常用属性:

        Node 对象是整个 DOM 的主要数据类型。节点对象代表文档树中的一个单独的节点。节点可以是元素节点、属性节点、文本节点。
        Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。
        XML树结构中只有NODE,Element的属性,文本等都是节点。

        使用DOM解析HTML的时候,会将HTML中的标签、属性和文本都封装成对象,对应以下三个属性:
     
        nodeName
            如果节点是元素节点,nodeName返回这个元素的名称。
            如果是属性节点,nodeName返回这个属性的名称。
            如果是文本节点,nodeName返回一个内容为#text的字符串。
        nodeType
            Node.ELEMENT_NODE    元素节点
            Node.ATTRIBUTE_NODE    属性节点
            Node.TEXT_NODE    文本节点
        nodeValue
            如果给定节点是一个属性节点,返回值是这个属性的值。
            如果给定节点是一个文本节点,返回值是这个文本节点的内容。
            如果给定节点是一个元素节点,返回值是null。

        哈哈
        
        

        总结:
            标签节点对应的值:
                nodeType:1
                nodeName:大写标签名,例如:SPAN
                nodeValue:null
            属性节点对应的值:
                nodeType:2
                nodeName:属性名称
                nodeValue:属性的值
            文本节点对应的值:
                nodeType:3
                nodeName:#text
                nodeValue:文本内容
    ===============================================================================
    5、父节点、子节点和兄弟节点
        父节点:parentNode
            parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
            document节点没有父节点。
        子节点:
            childNodes:获取指定节点的所有子节点集合。
            firstChild:获取指定节点的第一个子节点。
            lastChild:获取指定节点的最后一个子节点。
        兄弟节点:
            nextsibling:返回一个给定节点的下一个兄弟节点。
            previousSibling:返回一个给定节点的上一个兄弟节点。 


        该操作只是针对标签进行操作,无法操作属性。
    ===============================================================================
    6、操作DOM树
        方法:
            appendChild方法:
                将子节点添加到节点末尾。
                类似于剪切粘贴的效果。

        
        
     
        
            
                
  • AAA
  •             
  • BBB
  •             
  • CCC
  •         
        
     
        
     
     
        
        

    ------------------------------------------------------------------------------------------------------------------------------
            insertBefore(newNode, oldNode)方法:在某个节点之前插入一个新的节点。
                newNode:要插入的节点。
                oldNode:在谁之前插入,只能通过父节点来添加。
                (1)创建标签
                (2)创建文本
                (3)将文本添加到标签中

        
     
        
            
  • 西施
  •         
  • 王昭君
  •         
  • 貂蝉
  •         
  • 杨玉环
  •     
     
        
     
        
    ------------------------------------------------------------------------------------------------------------------------------
            removeChild(node)方法:删除节点。 

                自己不能删除自己,必须通过父节点来删除该节点。

        
        
            
  • 西施
  •         
  • 王昭君
  •         
  • 貂蝉
  •         
  • 杨玉环
  •     
        
        

    ------------------------------------------------------------------------------------------------------------------------------
            replaceChild(newNode, oldNode)方法:替换节点。
                newNode:新的节点。
                oldNode:旧的节点。
                不能自己替换自己,需要使用父节点来完成替换操作。

        
        
            
  • 西施
  •         
  • 王昭君
  •         
  • 貂蝉
  •         
  • 杨玉环
  •     
        
     
        

    ------------------------------------------------------------------------------------------------------------------------------
            cloneNode(boolean):复制节点。
                boolean:是否复制子节点。

        
        
        
            
                
  • 西施
  •             
  • 王昭君
  •             
  • 貂蝉
  •             
  • 杨玉环
  •         
        
        
     
        
        
     
        
    ------------------------------------------------------------------------------------------------------------------------------
        操作DOM总结:
            获取节点:
                getElementById():通过节点的ID属性,查找对应节点。
                getElementsByName():通过节点的name属性,查找对应节点。
                getElementsByTagName():通过节点名称,查找对应节点。
            插入节点:必须通过父节点插入
                appendChild():在末尾添加,相当于剪切粘贴。
                insertBefore():在某个节点之前插入。
            替换节点:
                replaceChild():必须通过父节点替换
            删除节点:
                removeChild():必须通过父节点删除。 
    ===============================================================================
    7、innerHTML属性

        几乎所有浏览器都支持该属性,但不是DOM标准的组成部分。

        innerHTML属性可以用来读 / 写某给定元素里的HTML内容:
            获取文本的内容。
            向标签中设置内容(可以是HTML代码)。

        innerHTML属性多与div或span标签配合使用。

        
        
        
        
     
        
        

     

    ===============================================================================
    8、案例:动态显示时间
        得到当前时间:
            var date = new Date();
            var d = date.toLocaleString();
        设置定时代码:
            setInterval();
        将时间显示到页面上:
            每一秒向页面中写入一次时间,使用innerHTML属性。

        动态显示时间
        

        



    ===============================================================================
    9、案例:全选练习
        使用复选框中的checked属性判断是否选中:
            checked == true:选中
            checked == false:未选中
        创建一个页面:
            复选框和按钮:
                四个复选框。
                全选、清除、反选按钮。

        
         全选/清除
         篮球
         足球
         排球
         羽毛球
     
         
         
         
     
        

     

    ===============================================================================

    10、案例:下拉列表左右选择
        下拉选择框:
           

        创建一个页面:
            两个下拉选择框:设置multiple属性
            四个按钮,添加点击事件。

        选中添加到右边:
            (1)获取左边select中的option
                    getElementsByTagName();返回的是数组。
                    遍历数组,得到每一个option。
            (2)判断option是否被选中。
                    selected = true;被选中
                    selected = false;未选中
            (3)如果选中,把被选中的option添加到右边去。
            (4)得到右边的select
            (5)添加选中的option
                appendChild()方法,需要注意的是,该方法类似于剪切,所以数组长度会一直变化。

        下拉列表左右选择
        
        
        
            
            
            
            
        
        
     
        


    ===============================================================================
    11、案例:省市联动
        创建一个页面,有两个下拉框。
        在第一个下拉框中添加:onchange()事件
            onchange"change(this.value)":this.value表示当前option的value值。

        1、首先创建一个二维数组来保存数据。
        2、二维数组中的每个元素是国家名称,国家名称后面的元素是所属国家的城市。

        省市联动
     
        
     
        
     
        
        


    ===============================================================================
    12、案例:动态生成表格
        创建一个页面:两个输入框和一个按钮。

        /*
            1、得到输入的行和列的值
            2、生成表格
                外循环 -- 行
                内循环 -- 列
            3、显示到页面
                把表格的代码设置到div中
                使用innerHTML属性
        */

        
        
        行:
        列:
        
        


    ===============================================================================

    13、总结
        (1)在末尾添加节点:
                *   创建标签createElement方法
                *   创建文本createTextNode方法
                *   把文本添加到标签下面appendChild方法
        (2)元素对象
                获取标签的子标签:document.getElementsByTagName()
        (3)Node对象
                属性:nodeType、nodeName、nodeValue
        (4)操作DOM树
                父节点:parentNode(重点记住)
                appendChild()
                    添加到末尾
                    剪切粘贴的效果
                insertBefore(newNode, oldNode)
                    通过父节点添加
                removeChild(node)
                    通过父节点删除
                replaceChild(newNode, oldNode)
                    通过父节点替换
        (5)innerHTML属性(*****)
                获取文本内容
                向标签设置内容(可以设置HTML代码)
        (6)动态显示时间
                定时器:setInterval()
                在指定时间内重复执行JS代码
        (7)全选练习
                属性:checked
                checked == true表示复选框被选中,checked == false表示复选框未选中。
        (8)下拉列表左右选择
                属性:multiple
                    让下拉列表中的内容全部显示。
                selected == true:option被选中。
                selected == false:option未选中。
        (9)省市联动
                二维数组:数组中嵌套数组
                事件:onchange()
                参数:this.value,当前option的value值。
        (10)动态生成表格
                属性:innerHTML
                使用变量保存html代码
                tab += "";


    ——JavaScript第四天

    1、表单提交方式
        (1)使用submit提交
               


                    ......
                    
                

        (2)使用button提交
                function form1()

                {
                    //获取form
                    var form1 = document.getElementById("form1");
                    //设置action
                    form1.action = "html01.html";
                    //提交form表单
                    form1.submit();
                }
        (3)使用超链接提交
                使用超链接提交 

    2、常用方法
        onclick():鼠标点击事件
        onchange():改变事件
        onfocus():获得焦点
        onblur():失去焦点 

     

    转载于:https://www.cnblogs.com/wwwwyc/p/6375213.html

    你可能感兴趣的:(java,javascript,面试)