JavaScript学习笔记

    <hr />

“自律的人有多厉害?”

        </head>

《意志力》一书中涉及,人类的执著是有限的。要是意志力全体用来抑制欲望、抵抗难熬,哪还有力气去完结指标。

       
push():向数组末尾添加二个或四个因素,并重回新的长度,也得以加上二个数组。
           
需求专注的是,假若push的元素是一个数组,则会把这几个数组当成3个因平昔对待,例如:
                原数组arr1的值为[1, 2, 3],此时若是pusharr2=[a, b,
c],则arr1的length的值为4,要是打印arr1[3],则会将arr2的值全体出口,当arr2数组中成分发生变化时,此时即使再打字与印刷arr1,则也会产生变化,能够精晓为将arr2的引用放入了arr3中,并不是将arr2数组的凡事值复制到arr第11中学。
       
pop():删除并重回数组中的最后八个因素,假设没有要刨除的值,则重返undefined。
        reverse():颠尾数组中的成分。

“自律,是妇人最贵的化妆品”

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

一天24时辰根本不够用,揉开了掰碎了也完不成这多少个职分。平时在晚间临睡前看着还没形成的职分单消极不已,责怪本人。自律的裨益还没来看呢,自个儿就曾经快要被焦虑拖垮了。

                //达成弹出窗口的不二法门

摸底本身的实际想法,找到本身真的的急需,放任那么些避人耳目的假努力,问问自身,你实在想要的是什么。

                <script type=”text/javascript”>

重重人露宿风餐地约束了,学到晚上,百折不回地强暴痛心不已,把团结激动地乌烟瘴气,结果没见到效率。或者,能够从“适时调节”和“用对方向”那八个方面展开调整,说不定结果会大不相同。

                function open1() {

说干就干!她马上依据文中所提倡的这样,专门买3个企盼台式机,给本身定了累累安顿,列下了详尽的打卡表。她要滴水穿石早睡早起,读书一钟头,百折不挠好好吃早餐,每天练习半时辰,下载了各样学习App,背单词的、读书的、听书的……对了,外语不能够丢下,还要学泰语,学时间管理,报各样网络课程,听大佬们传授成功经验……

            属性:
                opener:重临创设此窗口的窗口的引用。

……

                }

而是您说,笔者随便!自律才能美,作者正是得自律,不然我就会成为身材走样的黄脸婆。嗯……先问问你的腿答不应允吗!

                for(var i = 0; i < arguments.length; i++)

只有在不利的自身认知基础上,才能找到自律的的确方向。盲目地约束,只怕只是竹篮打水一场空,而且还累的要死。

    <ul id=”ulid” style=”float: left;”>

自律本人并没有错,它之所以能被大千世界接受,也是因为它的确可行,成功的人大致自律,不过自律的人不必然都会成功。

            <td>

那一个布置表就像催命的鬼,3个个钻在脑里催:这么多还没做完呢!你的约束呢?

    </ul>

您是何许的?你的长短处是何许?哪些措施适合您?哪些措施只好听一听一笑了之?你供给哪方面包车型地铁成人?

    </table>

怎么调整呢?能够从下面这些地点试一试:

                <input type=”button” id=”id3″ value=”选择” name=””
onclick=”s1(‘300’, ‘王五’)”>

开拓微信搜索栏,输入“自律”二字,种种热文一览无余:

            for(var j = 1; j < i + 1; j++)

不盲目自律,在认清自身和现实、调整好团结的来头和心情后,你一定能够喜欢地持之以恒下去。好饭不怕晚,清醒地约束,才会走得更快啊!

        </script>

跟个性作对,只可以八公山上。人类天生趋利避害,当自律只好带来难受感受的时候,当然不或许坚持不渝下去。我们会用各个方法来规避它,比如蘑菇、比如下落做事品质。

            {

“你的不自律,正在稳步毁掉你”

<html>

……

——JavaScript第壹天总计
1、什么是JavaScript
② 、js和HTML的组成艺术
叁 、js的数据类型
4、js的语句
五 、js的运算符
6、js的数组
7、js的函数
捌 、js的全局变量和一部分变量
⑨ 、script标签地点
十 、js的函数重载

例如,小周喜欢吃,吃东西正是他的欲念。假如他能及时压抑住“立马就得吃”的欲望,站起身来,进厨房好好做一顿可口的,健康又营养。或然外出寻觅好菜馆,没准儿就改成美味的食物活地图。但是,假设她黔驴技穷适时地压制,希望即刻赢得满足,恐怕就会陷在垃圾堆食物里不能自拔,只怕专断虚与委蛇。久而久之,肉肉不找他找哪个人吧?

</head>

找准自身的人生方向。每一个人的活着碰到不相同,人生方向应该分歧。杰克 Ma当然成功,然而如果人们都想当第四个马云(英文名:杰克 Ma),可能也不是件幸福的工作。

                    </script>

你的亮点是如何?以往风靡长板理论,约等于基本竞争力。很多时候,决定你能力和地方的,不是您的败笔,而是你的独到之处。你不会瑜伽怎么了?因为您会写一手好文案就够了,升职的时候领导看的是的办事业绩,不是您会多少个瑜伽高难度姿势。

        {

别人的怎么着措施是切合小编的?是自身急需的啊?

            win1.document.getElementById(“nameid”).value = name1;

1、盲目自律才会毁了生存

    </script>

盲目自律,缺乏自己认知。有的是人就像林芳一样,看到自律的益处,就登时想也不想地就去做,其实,旁人的方法方法对团结是或不是有用、是不是适宜,那都亟待先想理解了,再去行动。他能每一天五点起来,你3个上夜班的,半夜两点到家睡下,晚上五点持之以恒起床,那不是自残嘛。

4、JS的Math对象
 
  Math对象并不像Date和String那样是指标的类,因而并不曾构造方法,所以无法创建对象,Math的法子都是静态方法。

找到本人的真的引力。很多时候无法坚韧不拔自律,是因为您做的并不是协调确实想做的。

        </tr>

想要把喜欢的、不爱好的事做下来,就决然得先从欣赏的事情里积累力量。

            <input type=”button” value=”选择” onclick=”open1()”
name=””>

再收看他时,她又回涨到了在此之前的活着状态,甚至更不佳:在此以前他还能得意洋洋,安稳过好小生活。未来她变得更拖沓、更放纵,甚至有些自暴自弃——反正作者不怕不得已自律,笔者当成太战败了。果然,我正是那种无法得逞的人。

    怎么样利用DOM解析HTML:
       
首先会基于HTML的层级结构在内部存款和储蓄器中分红1个树形结构,然后再经过不一样的目的来操作HMTL。

成百上千人误解了束缚,只学到了束缚的样式,而没有学到自律的卓越。

            <td>王五</td>

背十分钟英文单词就要头晕,可是一旦是做要好喜好的事,多个钟头也不嫌多。都说兴趣是最好的教育工作者,诚不小编欺。心思学中讲,快乐的时刻觉得短暂,难熬的时日觉得漫长。同样的,假诺是坚定不移做感兴趣的事情,自律就不再是惨痛的。

        var args = “”;
        var body = “”;
        var add = new Function(args, body);

理所当然,人生中有那多少个大家不愿意不喜欢不过也不可能不得做的事体,而找到本人的真正重力,它会带给你不休向上的力量,让您有充足的能量,去完毕那多少个不喜欢的事。

            编号:<input type=”text” id=”numid”
name=””><br/>

“自律的人生,到底有多爽?”

 

儿时听过这么的三个传说:螃蟹和小猫看到老鹰在穹幕飞,十二分让人羡慕。于是拜托老所鹰教它们飞翔。老鹰慷慨地倾囊相授,如何飞、怎么着才能飞的快、飞的帅。螃蟹和小猫尤其认真地学了,花了十分短十分短的年月去演练飞翔。最终,螃蟹依然横着走,小猫还是四肢跑着前行。

                            clearInterval(Iid);

自律不起效用,很多时候,是因为大家都用有限的年华和生命力跟自个儿的弱项较劲。短处还没补上来呢,长处倒给丢得大致了,捡了芝麻丢了西瓜。与其如此,还不如拿出分析成功人员的时辰,来分析分析本身:

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

自律是对欲望的自笔者管理。它并不是唯有地抑制欲望,而是起八个调剂的效率。

    <html>

封锁的本质不是拼速度拼时间,而是拼成效。天天注意赶紧写而不认真想的自作者,写拾3个时辰,根本没有每一日高效写作三钟头的汤小小。所以,在本人的能力基础上,追求效用和性能,甩掉小编感动的耗时间,是很重点的。

            var a = 10;
            var b = true;
            var c = “hello world”;
        两种原始类型:
            string、number、boolean、null、undifined
            null表示对象引用为空。
            undifined表示定义了变量不过没有赋值。
        每行结尾的支行可有可无,提出编写。
        二种档次的评释:
            单行注释:// 注释内容
            多行注释:/* 注释内容 */

罔顾事实,强行自律。看人家分享桑塔纳腰、人鱼线,想着自身也要有。所以要时刻去健身,也要练出好身材。不是说了呢?“自律,是女性最贵的化妆品”,为了美,必须自律!可是大嫂,你有旧年的腿伤你忘啦?那是事先盲目去学羽球摔坏的。一个深蹲,或然您就得回医院再一次来过。

        <body>

骨子里怕什么啊?旁人很好,你也很好。只可是起步有一定,升高有速度,只要您一步一步踏实地走,总能走到温馨人生的高处。

                    // alert(input1.value);

升高效率和材质,而不是单纯拉长时间。写出《多谢你,愿意做自小编的儿女》这一爆款文的理想写作者冯尘,在她的分享课中讲到,认真写好一篇文,比每一天更新主要。学生时代,大多都有过在教室疯狂自习却效用不高的经历。

    <!DOCTYPE html>

成功人员之所以成功,不完全是因为自律,还有私人住房条件和财富的加持。借使一味效仿,罔顾自个儿的活着实际,付出的可能不只是岁月,还有任何意外的代价。

            方法:
                alert():在页面弹出2个唤起窗口

调整节奏。不是非得不断都干“正事”才是束缚,那样会让祥和陷入分秒必争的竞技中,累的半死,还不见得有效果。顺应自然规律,才会长时间。呼吸还尊崇个有吸有呼呢,做业务也要有浮动有放松,节奏有张有弛,才走的可比远。平昔紧绷着,整个人都会倒霉的。

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

活着强度一下子加大,节奏弹指间变快。在此之前懒散的生存图景一下子有失了,路上蒙受他时,感觉他走路都带风,每分每秒都在赶时间。

                    <input type=”button” value=”清除setInterval”
onclick=”clearI()” name=””>

当外界纷繁鼓吹自律的利益时,假使实在像那样去“自律”了,反而恐怕会毁了上下一心的生存。

                    alert(input1.getAttribute(“id”));   
//能够收获其它性质

4、怎么着才能心旷神怡地约束

        </tr>

协调是和谐最大的仇敌,也是和谐最好的情侣。

                    function back1()

摆正心态。不盲目自贬,也不盲目崇拜。人是爱相比较的古生物,从小父母拿大家跟外人家的小孩儿比,长大了,大家自个拿自个儿跟大牛们比。看到旁人那么卓越,心里一阵不知道该如何是好:人家那么美观还那么拼命,笔者可如何是好啊?

            }

就此你看,自律并不唯有缠绵悱恻压抑一种办法。关键在于,能够在适龄的空子进行调剂,能或不能够用对地点。

    有何对象:
        navigator:能够赢得浏览器的连锁消息。
            appName:浏览器名称
            document.write(navigator.appName);   
//注意navigator要小写

知己知彼一气浑成,跟自个儿的私欲打仗,你却连友好都不知情,怎么能赢呢?

    分析:
        (1)创建<li>标签
                document.createElement(“li”);
        (2)创造文本
                document.createTextNode(“文本内容”);
        (3)将文件添加到<li>标签中
                li.appendChild(node);
        (4)将<li>标签添加到<ul>标签中
                ul.appendChild(li);

林芳正是那般五个小伙。平时灰头土脸地挤大巴去上班,好不不难下班了,当然要放宽放松,刷刷剧,打打游戏,看看娱乐新闻。当公众中号们跟约好了一般,发轫鼓吹自律的显要时,林芳被突然点醒:笔者不能够再那样下来了!笔者要封锁!

                setInterval(code,
millisec):遵照钦定的周期(以飞秒计)来调用函数或总结表达式 

善用调节的私欲的人,会把欲望放到合适的作业上,让它发挥积极效用,制止被动成效;会不冷不热压制、再适时释放出来。

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

2、封锁失败是因为只学格局,不学精髓

                    //获取input标签

去做团结真正感兴趣的,那一个才能提供纷来沓至的重力,才能让我们短期地坚韧不拔下去。

二 、JavaScript与HTML结合艺术(两种)
    第一种:
        <script type=”text/javascript” > JS代码 </script>
    第三种:使用script标签引入外部js文件。
        <script type=”text/javascript” src=”js文件路径” >
</script>
        不过,当引入外部js文件时,script标签内无法再写其余的js代码。
        
叁 、JavaScript原始类型和申明变量
    基本语法:
        变量、函数、运算符区分高低写。
        变量是弱类型的:(原始类型)

“自律到最好的人,拥有了开挂的人生”

        for(var i = 1; i < 10; i++)

您的天性特点是怎么?作者的优势是怎样?

        //获取ul下的装有子成分

认识自个儿。您有没有问过本人:为啥本人付诸了广大行走,却仍然在原地打转?大概应该在埋头付出以前,先好好审视一下和好,首先建立起恢复的本人认知。

                    参数:
                        code:要调用的函数或要实行的代码
                       
millisec:周期性执行恐怕调用code之间的时刻距离,以皮秒计。1秒 =
一千飞秒
                    setInterval(“alert(123)”, 3000);   
每三秒弹出1个对话框。
                    能够运用这些措施来制作系统时间、定时器等。

更别提工作了,状态更是差,常常能应付的工作也变得困苦起来,别说完美地抓牢,甚至还会因为精力不足,出现过多小错误。

                </script>

这哪个地方是封锁?那显明是在找虐。

                <script type=”text/javascript”>

外人的来头并不是你的来头,没有一位方可全部复制外人的人生。你把旁人的人生过了,你的人生谁来替你过啊?找准本身的人生方向,用本人的优势奔跑,速度才比较快。

 

“世界正在奖励自律的人”

3、JS的Date对象
    在Java中得到当前日子:
        Date date = new Date();
        在Java中有二种转换方法:
            new SimpleDateFormat().format()和toLocaleString();

往下翻,竟然还有十几页,总共19227条结果。

            <td>

自律自身就隐含一定的约束性,约束本人的各类欲望,而欲望是我们的个性。若是明白好成就感和平条约束感之间的平衡,自律是能够坚贞不屈下去的。就好像驴子,被胡萝卜引诱着前行,也就能忽视赶路的分神。但是不对的束缚,伤心感是超出成就感的。把手放在火上,疼了就会把手缩回来。当所谓的“自律”令人那么优伤,出于本性,自然也就不会再坚定不移下去了。

    eval(string):能够实施JS代码,也能够拓展数学生运动算。
    encodeULacrosseI():对字符进行编码
    decodeUSportageI():对字符进行解码
    encodeUCR-VIComponent():对字符进行编码
    decodeU昂科雷IComponent():对字符进行解码
        以上措施没有实质上的区分,只可是编码字符个数差别
    isNaN():检查有些值是或不是是数字,再次回到值为true和false
    parseInt():将二个字符串转换为整数。

三 、认清自律的本来面目

            </td>

    NaN:
        not a number:非数字。
        属于number类型。
        用来表示数值的一种情状,一种不正常的处境。
        一般情形下会在总括出现谬误的时候出现。
        判断当前的数据类型是或不是是NaN的首要字:isNaN()
           就算结果是非数字:true
           假若结果是数字:false
    ==和===的区别:
        ==判断的是值,和类型非亲非故。
        ===既判断值,又判断项目。

                return sum;

            document.write(“<hr/>” + add(1,2,3,4));

                    window.open(“select.html”, “”, “width=300,
height=300”);

            <script type=”text/javascript”>

    JS中怎么着收获当前岁月:
        var date = new Date();

    </script>

<head>

    DOM的多少个级别:
        (1)将HTML文书档案封装成对象。
        (2)在上述基础上添加新的效率,例如:对事件和CSS样式的帮忙。
        (3)帮助XML的一些新特征。
    DHTML:
        动态的HTML,它不是一门语言,是多项技艺的综合体的简称。
        包括HTML、CSS、DOM、JavaScript
        这多种语言的职务:
            HTML:负责提供标签,封装数据,那样方便操作数据。
            CSS:负责提供体制,对标签中的数据开始展览体制定义。
           
DOM:负责将标签及其内容分析,封装成对象,对象中装有属性和行事。
           
JavaScript负责提供程序设计语言,对页面中的对象进行逻辑操作。

时间:2016-10-25 19:05

        <li>bb</li>

    想要对标记型文档实行操作:
        首先要求对标记型文书档案中的全体内容都封装成对象。
            必要把HTML中的标签、属性、文本内容都封装成对象。
        然后须要分析标记型文书档案。

            <td>李四</td>

        <script type=”text/javascript”>

        function add1()

            var li1 = document.createElement(“li”);

        <li>33</li>

    <title>在最后添加节点</title>

                        var Iid = window.setInterval(“alert(123);”,
2000);

<!DOCTYPE html>

        <tr> 

<body>

    方法:
       
toLocaleString():依照当地时间格式,把Date对象的时光更换为字符串
        getFullYear():以3人数字再次来到当前年度
        getMonth():得到当前月份,须要留意的是,月份的界定是0 ~ 11
        getDate():得到当前运气,范围是1 ~ 31
        getDay():再次回到一周中的某一天,范围是0 ~ 6,从星期一启幕估量
        getHours():获取当前小时,范围0 ~ 23
        getMinutes():获取当前分钟
        getTime():重回从1969年三月27日到现在的皮秒数

            <td>200</td>

——JavaScript第二天

            <td>300</td>

            document.write(“<hr/>” + add(1,2,3));

            win1.document.getElementById(“numid”).value = num1;

                        var Tid = window.setTimeout(“alert(555);”,
5000);

=====================================================================
一 、在最终添加节点

                    <input type=”button” value=”清除setTimeout”
onclick=”clearT()” name=””>

            }

        }

            document.write(“<hr/>” + add(1,2));

                            clearTimeout(Tid);

        <li>aa</li>

            <td>姓名</td>

        <li>44</li>

        全局变量和一些变量:
           
全局变量:在script标签里面定义3个变量,这么些变量在页面中js部分都得以接纳
            局地变量:在措施内部定义贰个变量,只可以在艺术内部使用。

 

        </body>

十 、JS的法门重载
    

        </tr>

        <head>

               
confirm():展现带有一段音讯以及确认按钮和收回按钮的对话框
                   
在弹出的对话框中当选鲜明,重回true,选中撤废,重临false。

    安全题材:
       
由于现行反革命作客的是本土文件,谷歌(谷歌)浏览器的安全级别很高,不容许访问当半夏件,所以不能推行以上代码,假如在服务器中就不设有上述问题了。

</body>

8、JS的DOM对象
    Document Object Model,文书档案对象模型。
        文书档案:超文本文书档案(超文本标记文书档案),HTML、XML。
        对象:提供了品质和章程。
        模型:使用性质和格局来操作超文本标记型文书档案。
   
可以利用JS中DOM里面提供的对象,使用这个目的的个性和艺术,对标记型文书档案进行操作。

        <tr>

    用到的办法:
        createElemnt():为钦点标签成立一个要素的实例。
        createTextNode():从钦定值中创制文本字符串。
        appendChild(node):将点名节点添加到节点之后。

</html>

⑤ 、JS的大局函数
    由于该函数不属于其余对象(类),所以能够一向动用。

            <td>张三</td>

                    }

    </html>

        {

                <script type=”text/javascript”>

    <input type=”button” value=”添加节点” onclick=”add1()”
name=””>

                {

                    //到下一个页面

                        {

        screen:获取浏览器显示屏的新闻,例如宽度、中度、分辨率
            document.write(screen.width);    获取荧屏宽度
            document.write(screen.height);    获取显示屏中度

                <input type=”text” id=”sp” value=”bbb” />

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

——介绍

                    {

        <li>cc</li>

            //成立3个li节点

                    sum += arguments[i];

            document.write(“<hr/>” + add(1,2,3,4,5));

                <a href=”c.html”>跳转到c</a>

                    function click()

            删除属性:removeAttribute(nmae)方法
                removeAttribute()方法无法去除value值。

    应用场景:
        使用微秒数处理缓存的效果:
            http://www.baidu.com?毫秒数
           
因为每一遍请求的飞秒数都分化等,所以能够确定保障每便请求的数据都是新的。

    </script>

                var sum = 0;

    </ul>

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

                    }

            <td>

                </script>

</head>

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

                open(url, name, features,
replace):打开三个新的浏览器窗口或探寻3个已命名的窗口,一般选取两个参数即可
                    url:打开的新窗口的UQX56L地址
                    name:空字符串即可
                    features:窗口特征,比如窗口宽度和可观
                    创建1个按钮,当点击按钮时,打开三个新窗口:
                        <input type=”button” value=”打开”
onclick=”open1();” name=””>

    关于编解码U哈弗I:
        举办UPAJEROL跳转时可以完整选择encodeUKugaI实行编码。
    对字符串举行unicode编码:
        (1)escape不可能编码的字符有七十个:
            *+_./@_0-9a-zA-Z
        (2)encodeU奥迪Q7I不可能编码的字符有8一个:
            !#$&'()*+-./:;=?@_~0-9a-zA-Z
        (3)encodeU景逸SUVIComponent不能够编码的字符有柒15个:
            !'()*-._~0-9a-zA-Z

</html>

        alert(list.length);

            var text1 = document.createTextNode(“哈哈”);

            //成立文本

                        history.back();    //history.go(-1)
 -1表示到上一个页面 

            <td>编号</td>

                prompt(text, defaultText):突显可提醒用户输入的对话框
                    text:对话框中显得的始末。
                    default:对话框中输入框中暗中认可显示的文书。

    在Element对象中查找Element对象:
        在Element对象的界定内,可以用来寻找其余节点的唯一可行方法便是getElementsByTagName()方法,而该办法再次来到的是1个会晤。
        var list = uls.getElementsByTagName(“li”);

                        alert(text);

                    {

 

                        <script type=”text/javascript”>

                }

    <script type=”text/javascript”>

           
getAttribute()方法的裨益是足以拿走其余性质,而value只好取得“value”值。
 

    <ul id=”ulid” >

                            function open1()

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

        <li>44</li>

                    <script type=”text/javascript”>

        }

            <td>100</td>

            ul1.appendChild(li1);

        var uls = document.getElementById(“ulid1”);

        <tr>

2、JS的Array对象
    创造数组:
        var arr = [1, 2, 3];   
创设七个尺寸为3的数组,并且赋值为123。
        var arr = new Array(5);    创建3个尺寸为5的数组。
        var arr = new Array(1, 2, 3);   
创制1个长短为3的数组,并且赋值为123。
    属性:
        length:数组的长度。
    数组的章程:
        concat(array):连接数组
         
  连接只是把数组1和数组2作为二个字符串来看待,并不是将数组2添加到数组第11中学。
 
        join():依照3个内定的字符串来划分数组

    <script type=”text/javascript”>

                                window.open(“a.html”,””,”width=200,height=200″);

        <li>22</li>

        var list = uls.childNodes; 

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

                    //到上3个页面

                <input type=”button” id=”id1″ value=”选择” name=””
onclick=”s1(‘100’, ‘张三’)”>

——JavaScript第三天

 

玖 、script标签放置的职分
    理论上能够放在任意地点。
   
不过由于HTML解析是由上到下的,所以平时状态下位于</body>标签之后。

    JavaScript语言组成:
        核心:ECMAScript
            ECMA(澳洲总结机协会),JS语法由该集体制订。
        文书档案对象模型:DOM
            Document Object Model
        浏览器对象模型:BOM
            Browser Object Model

            removeChild():必须通过父节点删除。 

7、innerHTML属性

    差不离拥有浏览器都协理该属性,但不是DOM标准的组成都部队分。

    innerHTML属性能够用来读 / 写某给定成分里的HTML内容:
        获取文本的情节。
        向标签中安装剧情(能够是HTML代码)。

    innerHTML属性多与div或span标签同盟使用。

<html>

<head>

    <title></title>

    <style type=”text/css”>

        #did{

            width: 200px;

            height: 200px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <span id=”sid”>哈</span>

    <div id=”did”>

 

    </div>

    <script type=”text/javascript”>

        //获取span标签

        var span1 = document.getElementById(“sid”);

        alert(span1.innerHTML);

 

        //向div中装置剧情<h1>AAAA</h1>

        //获取div

        var div = document.getElementById(“did”);

        div.innerHTML = “<h1>AAAA</h1>”;

    </script>

</body>

</html>
 

===============================================================================
八 、案例:动态显示时间
    获得当前光阴:
        var date = new Date();
        var d = date.toLocaleString();
    设置定时期码:
        setInterval();
    将时刻呈现到页面上:
        每一秒向页面中写入叁遍时间,使用innerHTML属性。

<!DOCTYPE html>

<html>

<head>

    <title>动态展现时间</title>

</head>

<body>

    <p id=”p1″></p>

    <script type=”text/javascript”>

        // function fun(){

            var date = new Date();

            var p = document.getElementById(“p1”);

            var code = “document.getElementById(‘p1’).innerHTML = new
Date().toLocaleString()”;

            window.setInterval(code, 1000);

        // }

        // window.setInterval(fun(), 1000);

    </script>

</body>

</html>

===============================================================================
九 、案例:全选演习
    使用复选框中的checked属性判断是或不是选中:
        checked == true:选中
        checked == false:未选中
    成立一个页面:
        复选框和按钮:
            多个复选框。
            全选、清除、反选按钮。

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <input type=”checkbox” id=”c” onclick=”selAllNo()” name=””>
全选/清除 <br/>

    <input type=”checkbox” id=”c1″ name=”sel”> 篮球 <br/>

    <input type=”checkbox” id=”c2″ name=”sel”> 足球 <br/>

    <input type=”checkbox” id=”c3″ name=”sel”> 排球 <br/>

    <input type=”checkbox” id=”c4″ name=”sel”> 羽毛球 <br/>

 

    <input type=”button” id=”b1″ value=”全选” onclick=”selAll()”
name=””> 

    <input type=”button” id=”b1″ value=”清除” onclick=”selNo()”
name=””> 

    <input type=”button” id=”b1″ value=”反选” onclick=”selOther()”
name=””> 

 

    <script type=”text/javascript”>

        //全选

        function selAll(){

        /*

            ① 、获取要操作的复选框

                使用document.getElementsByName()方法取得

            贰 、再次来到的是数组

                checked属性能够判明复选框是还是不是被选中

                checked = true或者false。

                遍历数组,将checked全体设置为true。

        */

            //获取全体复选框

            var arr = document.getElementsByName(“sel”);

            //遍历数组,获得每1个复选框

            for (var i = 0; i < arr.length; i++)

            {

                //得到每2个复选框

                var sel = arr[i];

                //设为当选

                sel.checked = true;

            }

            fun();

        }

        //全不选

        function selNo(){

        /*

            壹 、获取要操作的复选框

            二 、再次来到的是数组,遍历数组

            ③ 、设置复选框属性 checked = false

        */

            //获得要操作的复选框

            var arr = document.getElementsByName(“sel”);

            //遍历数组,获得每叁个复选框

            for (var i = 0; i < arr.length; i++)

            {

                var sel = arr[i];

                sel.checked = false;

            }

            fun();

        }

        //反选

        function selOther(){

        /*

            ① 、获取要操作的复选框

            ② 、重返的是数组,遍历数组

            三 、获得每贰个复选框

            ④ 、判断复选框状态

                if(sel.checked == true)

            五 、设为相反值

        */

            //获得全体复选框

            var arr = document.getElementsByName(“sel”);

            //遍历数组

            for (var i = 0; i < arr.length; i++)

            {

                var sel = arr[i];

                //判断当前复选框状态

                if(sel.checked == true)

                {

                    sel.checked = false;

                }

                else

                {

                    sel.checked = true;

                }

            }

            fun();

        }

        //达成全选和全不选

        function selAllNo(){

        /*

            一 、获得全选复选框

                document.getElementById()

            二 、判断复选框是不是选中

                if条件

            三 、假如是选中,则选中全体复选框

            四 、假若未选中,则全不选具有复选框

        */

            //获得复选框

            var cAll = document.getElementById(“c”);

            //判断复选框是还是不是选中

            if(cAll.checked)

            {

                selAll();

            }

            else

            {

                selNo();

            }

            fun();

        }

        //判断假诺八个选拔都当选,则全选框也当选

        function fun()

        {

            var arr = document.getElementsByName(“sel”);

            for(var i = 0; i < arr.length; i++)

            {

                if(!arr[i].checked)

                {

                    document.getElementById(“c”).checked = false;

                    return;

                }

                else
                { 

                    document.getElementById(“c”).checked = true;

                }

            }
        } 

    </script>

</body>

</html>
 

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

⑩ 、案例:下拉列表左右取舍
    下拉摘取框:
        <select>
            <option> 111 </option>
            <option> 222 </option>
        </select>

    创制一个页面:
        七个下拉选择框:设置multiple属性
        多少个按钮,添加点击事件。

    选中添加到左侧:
        (1)获取左边select中的option
                getElementsByTagName();再次回到的是数组。
                遍历数组,获得每3个option。
        (2)判断option是不是被入选。
                selected = true;被选中
                selected = false;未选中
        (3)如若当选,把被选中的option添加到右手去。
        (4)获得左边的select
        (5)添加选中的option
           
appendChild()方法,须要留意的是,该办法类似于剪切,所以数首席执行官度会直接变化。

<!DOCTYPE html>

<html>

<head>

    <title>下拉列表左右挑选</title>

    <style type=”text/css”>

        #sel1 {

            width: 200px;

            height: 200px;

            float: left;

        }

        #sel2 {

            width: 200px;

            height: 200px;

        }

        #d1 {

            width: 100px;

            float: left;

            margin-left: 40px;

            margin-right: 40px;

            margin-top: 20px;

        }

        input {

            margin: 10px;

        }

</style>

</head>

<body>

    <select id=”sel1″ multiple=”multiple”>

        <option>111</option>

        <option>222</option>

        <option>333</option>

        <option>444</option>

        <option>555</option>

        <option>666</option>

        <option>777</option>

        <option>888</option>

    </select>

    <div id=”d1″>

        <input type=”button” value=”选中添加到右侧” name=””
onclick=”selToRight()”>

        <input type=”button” value=”全体添加到左边” name=””
onclick=”allToRight()”>

        <input type=”button” value=”选中添加到左边” name=””
 onclick=”selToLeft()”>

        <input type=”button” value=”全体抬高到右侧” name=””
 onclick=”allToLeft()”>

    </div>

    <select id=”sel2″ multiple=”multiple”>

    </select>

 

    <script type=”text/javascript”>

        var left = document.getElementById(“sel1”);

        var right = document.getElementById(“sel2”);

        //获取左边option集合

        function getLeft(){

            return
document.getElementById(“sel1”).getElementsByTagName(“option”);

        }

        //获取左边option集合

        function getRight(){

            return
document.getElementById(“sel2”).getElementsByTagName(“option”);

        }

        //将节点添加到右手option集合

        function toRight(node1){

            right.appendChild(node1);

        }

        //将节点添加到左边option集合

        function toLeft(node1){

            left.appendChild(node1);

        }

        //完成选中添加到右手

        function selToRight(){

        /*

            1、获取select1里面的option

                getElementsByTagName()

            贰 、判断是还是不是被入选

                属性selected为true表示被入选

                假设是false则代表未选中。

            三 、假如被入选,则将被入选的节点添加到右手

            4、得到select2

            五 、添加选用的局地

                appendChild(node)

        */

            //获取右侧option集合

            var arr = getLeft();

            for (var i = 0; i < arr.length; i++){

                if(arr[i].selected)

                {

                    toRight(arr[i]);

                    i–;

                }

            }

        }

        //全部添加到右手

        function allToRight(){

        /*

            ① 、获取右边select中的option对象

            ② 、重临数组,遍历数组

            三 、得到每二个option对象

            四 、获得左侧的select

            5、添加option

                appendChild()

        */

            var arr = getLeft();

            for (var i = 0; i <= arr.length; )

            {

                toRight(arr[0]);

            }

        }

        //选中添加到左侧

        function selToLeft(){

            var arr = getRight();

            for (var i = 0; i < arr.length; i++)

            {

                if(arr[i].selected)

                {

                    toLeft(arr[i]);

                    i–;

                }

            }

        }

        //全体抬高到左手

        function allToLeft(){

            var arr = getRight();

            for (var i = 0; i <= arr.length;)

            {

                toLeft(arr[0]);

            }

        }

    </script>

</body>

</html>

===============================================================================
1① 、案例:省市联合浮动
    成立二个页面,有八个下拉框。
    在率先个下拉框中丰盛:onchange()事件
       
onchange”change(this.value)”:this.value表示最近option的value值。

    ① 、首先创制三个二维数组来保存数据。
   
贰 、二维数组中的每一种元素是国家名称,国家名称前边的因素是所属国家的城池。

<!DOCTYPE html>

<html>

<head>

    <title>省市联合浮动</title>

</head>

<body>

 

    <select id=”country” onchange=”change(this.value)”>

        <option value=”0″>– 请选择 –</option>

        <option value=”中国”>中国</option>

        <option value=”美国”>美国</option>

        <option value=”德国”>德国</option>

        <option value=”日本”>日本</option>

    </select>

 

    <select id=”province” onchange=”show(this.value)”>

        <option value=”0″>– 请选择 –</option>

        <option value=”中国”>中国</option>

        <option value=”美国”>美国</option>

        <option value=”德国”>德国</option>

        <option value=”日本”>日本</option>

    </select>

 

    <input type=”button” value=”bt” onclick=”clear()” name=””>

    <script type=”text/javascript”>

        //创造数组来储存城市

        var country = new Array(4);

        country[0] = [“中国”, “江苏”, “北京”, “广州”, “上海”];

        country[1] = [“美国”, “华盛顿”, “芝加哥”, “底特律”];

        country[2] = [“德意志联邦共和国”, “柏林(Berlin)”, “布加勒斯特”, “莫斯科”];

        country[3] = [“日本”, “东京”, “北海道”, “大阪”, “神户”];

        country[4] = [0, “–请选择–“];

 

        var province = document.getElementById(“province”);

 

        function change(value)

        {

            /*

                ① 、遍历二维数组

                二 、获得的成分也是三个数组

                叁 、得到数组中的第③个值和传递的值实行比较

                肆 、若是五个值相同,就得到第3个值后边的因素

                五 、添加到第一个select中

                    得到province节点

                陆 、使用appendChild方法实行添加

                    创建option

                    创设文本

                    设置value

                    举行添加

            */

            //壹 、遍历二维数组

            for (var i = 0; i < country.length; i++)

            {

                //得到二维数组中的每一个数组

                var arr = country[i];

                //获得遍历后数组中的第①个值

                var city = arr[0];

                //判断传递的值和参数是不是同样

                if (city == value)

                {

                    //删除原option

                    clear();

                    //获得第多少个值前边的要素

                    //遍历arr数组

                    for(var j = 1; j < arr.length; j++)

                    {

                        //得到城市的称号

                        var val = arr[j];

                        //添加到province中

                        var option = document.createElement(“option”);

                        var text = document.createTextNode(val);

                        option.appendChild(text);

                        province.appendChild(option);

                    }

                }

            }

        }

        /*

            由于每一回都要向province中添加option,所以必要先清空在此以前的option值

        */

        function clear()

        {

            var option = province.getElementsByTagName(“option”);

            for(var i = 0; i < option.length; )

            {

                province.removeChild(option[i]);

            }

        }

    </script>

</body>

</html>

===============================================================================
1② 、案例:动态变化表格
    制造1个页面:多少个输入框和贰个按钮。

    /*
        壹 、获得输入的行和列的值
        ② 、生成表格
            外循环 — 行
            内循环 — 列
        叁 、展现到页面
            把表格的代码设置到div中
            使用innerHTML属性
    */

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type=”text/css”>

        table {

            border: 1px solid red;

        }

        td {

            border: 1px solid blue;

            width: 20px;

            height: 20px;

        }

    </style>

</head>

<body id=”b”>

    行:<input type=”text” size=”10″ id=”rows1″ name=”rows2″ />

    列:<input type=”text” size=”10″ id=”cols1″ name=”cols2″>

    <input type=”button” value=”生成” onclick=”create()” name=””>

    <script type=”text/javascript”>

        function create()

        {

            var rows = document.getElementById(“rows1”).value;

 

            var cols = document.getElementById(“cols1”).value;

 

            var s = “<table>”

 

            for (var r = 1; r <= rows; r++)

            {

                s += “<tr>”

                for (var c = 1; c <= cols; c++)

                {

                    s += “<td></td>”;

                }

                s += “</tr>”;

            }

            s += “</table>”

            document.getElementById(“b”).innerHTML = s;

        }

    </script>

</body>

</html>

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

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 += “</table>”;

——JavaScript第四天

壹 、表单提交格局
    (1)使用submit提交
            <form>
                ……
                <input type=”submit” />
            </form>
    (2)使用button提交
            function form1()

            {

                //获取form

                var form1 = document.getElementById(“form1”);

                //设置action

                form1.action = “html01.html”;

                //提交form表单

                form1.submit();

            }
    (3)使用超链接提交
            <a
href=”html01.html?username=aa张三”>使用超链接提交</a> 

贰 、常用方法
    onclick():鼠标点击事件
    onchange():改变事件
    onfocus():获得核心
    onblur():失去大旨 

 

                    {

            </td>

    <title>在最终添加节点</title>

9、Document的对象
    每一个载入浏览器的HTML文书档案都会成为Document对象。
    常用属性:
        forms[]:再次回到文书档案中有着form对象的引用。
        body:提供对<body>成分的直接待上访问。
    常用方法:
        getElementById():重回对富有钦点id的首先个指标的引用。
        getElementsByName():再次来到带有钦命名称的目的集合(数组)。
            获取首个对象:getElementByName(“name”)[0];
        getElementsByTagName():再次来到带有钦点表签名的靶子集合(数组)。
       
write():向文书档案写HTML表明式只怕JavaScript代码,可以输出变量(值)。

⑥ 、JS的函数重载
    面试:JS中是否存在重载?
        (1)JS中不设有重载。
        (2)可是能够通过其余情势来达到重载的目标。
        (3)在JS中一经艺术名相同,会调用最后五个格局。
        (4)参数会保存在arguments数组中。

        </head>

                        </script>

        <tr>

7、JavaScript数组
    二种概念方式:
        var arr = [1, “2”, true];
        var arr = new Array(5);
        var arr = new Array(1,2,3);
    数组有length属性。
    数组的长短是可变的。
    数组能够存放差别门类的多寡。

            var ul1 = document.getElementById(“ulid”);

            <td>操作</td>

            //将文本添加到li节点中

                            {

                </script>

            设置属性:setAttribute(name, value)
                <input type=”button” id=”inputid” onclick=”click()”
value=”aaaa” />

<body>

        location:表示请求ULANDL地址
           
href:设置或回到完整的U途锐L地址,要求注意的是,该href暗许已经开始展览encodeUCR-VI编码。
               
获取请求UCR-VL地址:document.write(decodeU昂CoraI(location.href));
               
设置URL地址:location.href=”http://www.baidu.com“;

            姓名:<input type=”text” id=”nameid”
name=””><br/>

        history:请求U揽胜L的历史记录
            length:重临浏览器历史列表中的U福睿斯L数量
            back():加载history列表中的前一个U奔驰G级L
            forward():加载history列表中的下三个U奥迪Q5L
            go():加载history列表中的某些具体页面 
            创造多少个页面:
                (1)创立第3个页面a.html,写3个链接到b.html
                (2)创造b.html,写3个超链接c.html
                (3)创建c.html
                <h1>BBBBBB</h1>

        typeof运算符:
           
通过typeof()运算符,能够查阅变量的项目,typeof(变量名),全数引用的项目都是object。
        通过instanceof运算符能够化解typeof对象类型判断的题材。
        区分undefined和null:
           
变量定义了未开头化大概访问对象不设有的习性,会出现undefined。
            访问的靶子不设有时,会并发null。

                    {

        window:
           
window对象是JS层级中的顶层对象。(全部的BOM对象都在window中举办操作)
            window对象表示贰个浏览器窗口或2个框架。
         
  window对象会在<body>或<frameset>现身时自动创立。

   
要求小心的是,在IE浏览器中会alert(3),而在火狐、谷歌(谷歌)浏览器中会打字与印刷alert(7),因为解析方法差异,火狐会把换行和空格也剖析为成分。
    所以childNodes属性的包容性很差。

    <script type=”text/javascript”>

        function s1(num1, name1)

    </html>

    </ul>

                        function clearI()

    <table border=”1px” bordercolor=”red”>

            </td>

                <input type=”button” id=”id2″ value=”选择” name=””
onclick=”s1(‘200’, ‘李四’)”>

                        {

            document.write(“<br/>”);

                    }

 

            //将li节点添加到ul节点中

</body>

            <title></title>

    基于对象:
        提供了不胜枚举目的,而已一贯运用。
    事件驱动:
        HTML做出的网站都以“静态效果”,而JavaScript能够达成“动态”效果。
    客户端:
        指浏览器。
    JS与Java的区别:
        JS是网景公司开发的一种脚本语言,可以在具有的主流浏览器中运转。
        JS是基于对象的,而Java是面向对象的。
        JS只供给分析就能够推行,而Java要求先编写翻译成字节码文件,再实施。
        JS是一种弱类型语言,而Java是一种强类型语言。

1、JavaScript简介
    JavaScript是依据对象和事件驱动的脚本语言,首要行使在客户端。
    特点:
        交互性:消息的动态交互
        安全性:不得以平素访问当地硬盘
        跨平台性:只要是能够解析JS的浏览器都得以推行,与平台非亲非故

                        }

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

                    }

1、JS的string对象
    创建string对象:
        var str = “abc”;
    方法和质量:
        属性:length,表示字符串的尺寸。
        (1)与HTML相关的法门
            bold():使用粗体展现字符串
            fontcolor(“颜色”):使用钦定颜色显示字符串
            fontsize(size):使用钦赐字号显示字符串
            link(“U宝马7系L”):将字符串展现为超链接
            sub():设置下标
            sup():设置上标
        (2)与Java相似的办法
            concat(string):连接字符串
           
charAt(index):再次回到钦命地方的字符串,借使脚标不存在,则赶回空字符串
           
indexOf(string):重返字符串所在地点,当字符串不存在时,再次回到-1
            split(regex):分隔字符串,再次回到字符串数组
            replace(string,
string):供给传递五个参数,第四个是原始字符串,第四个是要替换的字符串
            substr(fromindex, count):从钦点地方上马,截取count的字符
            substring(fromindex, endindex):包括头不带有尾

                        }

                <input type=”button” value=”后退”
onclick=”back1();”>

        供给专注的是:getElementsByTagName是Document的艺术。

肆 、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
        假设给定节点是贰天性能节点,再次回到值是以此脾气的值。
        借使给定节点是3个文件节点,再次回到值是那一个文件节点的剧情。
        要是给定节点是2个因素节点,重返值是null。

    <span id=”spanid”>哈哈</span>

    <br />

    <script type=”text/javascript”>

        //获取标签对象

        var span1 = document.getElementById(“spanid”);

        document.write(span1.nodeType + “<br />”);    //1

        document.write(span1.nodeName + “<br />”);    //SPAN

        document.write(span1.nodeValue + “<br />”);    //null

 

        //获取属性

        var id1 = span1.getAttributeNode(“id”);    //获取三个节点的质量

        document.write(id1.nodeType + “<br />”);    //2

        document.write(id1.nodeName + “<br />”);    //id

        document.write(id1.nodeValue + “<br />”)    //spanid

 

        //获取文本

        var text1 = span1.firstChild;    //获取第一个节点

        document.write(text1.nodeType + “<br />”);    //3

        document.write(text1.nodeName + “<br />”);    //#text

        document.write(text1.nodeValue + “<br />”);    //哈哈

    </script>

    总结:
        标签节点对应的值:
            nodeType:1
            nodeName:大写标签名,例如:SPAN
            nodeValue:null
        属性节点对应的值:
            nodeType:2
            nodeName:属性名称
            nodeValue:属性的值
        文本节点对应的值:
            nodeType:3
            nodeName:#text

                    function click2()

            nodeValue:文本内容

五 、父节点、子节点和兄弟节点
    父节点:parentNode
       
parentNode属性重回的节点永远是三个成分节点,因为唯有成分节点才有恐怕包蕴子节点。
        document节点没有父节点。
    子节点:
        childNodes:获取钦点节点的全数子节点集合。
        firstChild:获取钦赐节点的第三个子节点。
        lastChild:获取钦赐节点的末梢三个子节点。
    兄弟节点:
        nextsibling:重回多少个给定节点的下一个小兄弟节点。
        previousSibling:重临一个给定节点的上二个弟兄节点。 

                document.write(j + ” * ” + i + ” = ” + (i * j) +
”  “);

            //获取ul节点

            <title></title>

 

    属性:
        PI:π,圆周率

            function add() {

            var win1 = window.opener;//获得父窗体

        </tr>

                        history.forward();    //history.go(1)
 1表示到下1个页面

                        function clearT()

        <li>22</li>

<head>

    <body>

                    var input1 = document.getElementById(“inputid”);

        </script>

        <li>33</li>

                        var text = document.getElementById(“sp”).value;

                <input type=”button” id=”inputid2″ onclick=”click2()”
value=”aaaa” />

                    alert(document.getElementById(“sp”).value);

陆 、99乘法表示例
    <script type=”text/javascript”>

            </script>

            li1.appendChild(text1);

        {

<html>

===============================================================================
2、Element对象
        操作Element对象的习性:
            获取属性:getAttrubute(name)
                <input type=”text” id=”inputid” value=”aaaa”
name=””>

 

                <input type=”button” value=”前进”
onclick=”forward1();”>

    该操作只是对准标签实行操作,不可能操作属性。

6、操作DOM树
    方法:
        appendChild方法:
            将子节点添加到节点末尾。
            类似于剪切粘贴的遵循。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type=”text/css”>

        #div1 {

            width:200px;

            height: 150px;

            border: 1px solid red;

        }

 

        #div2 {

            width: 250px;

            height: 150px;

            border: 3px dashed green;

        }

    </style>

 

</head>

<body>

    <div id=”div1″>

        <ul id=”ulid1″>

            <li>AAA</li>

            <li>BBB</li>

            <li>CCC</li>

        </ul>

    </div>

 

    <div id=”div2″> </div>

 

    <input type=”button” value=”ADD” onclick=”add11()” name=””>

    <script type=”text/javascript”>

        function add11()

        {

            //得到div2

            var div2 = document.getElementById(“div2”);

            //获取ul

            var ul1 = document.getElementById(“ulid1”);

            //参加成分

            div2.appendChild(ul1);

        }

    </script>

</body>

</html>


        insertBefore(newNode,
oldNode)方法:在有个别节点此前插入3个新的节点。
            newNode:要插入的节点。
            oldNode:在何人以前插入,只可以通过父节点来添加。
            (1)创设标签
            (2)创设文本
            (3)将文件添加到标签中

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

 

    <ul id=”ul21″>

        <li id=”li11″>西施</li>

        <li id=”li12″>王昭君</li>

        <li id=”li13″>貂蝉</li>

        <li id=”li14″>杨玉环</li>

    </ul>

 

    <input type=”button” value=”insert” onclick=”insert1()”
name=””>

 

    <script type=”text/javascript”>

        //在任红昌之前插入二个鲁国唐生

        function insert1()

        {

            /*

                一 、首先取得到任红昌节点 id = li13

                2、创建li

                ③ 、创造文本 桃花庵主

                四 、将文件添加到li中

                5、获取ul

                6、将li添加到ul中

            */

            //一 、获取任红昌节点

            var li13 = document.getElementById(“li13”);

            //2、创建li节点

            var li15 = document.createElement(“li”);

            //叁 、创立文本

            var text = document.createTextNode(“唐伯虎”);

            //④ 、将文件添加到li中

            li15.appendChild(text);

            //5、获取ul标签

            var ul21 = document.getElementById(“ul21”);

            //六 、只好通过父节点来添加节点

            ul21.insertBefore(li15,li13);

        }

    </script>

</body>

</html>


        removeChild(node)方法:删除节点。 

            本身不可能去除本身,必须经过父节点来删除该节点。

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <ul id=”ul31″>

        <li id=”li21″>西施</li>

        <li id=”li22″>王昭君</li>

        <li id=”li23″>貂蝉</li>

        <li id=”li24″>杨玉环</li>

    </ul>

    <input type=”button” value=”remove” onclick=”remove1()”
name=””>

    <script type=”text/javascript”>

        //删除王昭君

        function remove1()

        {

            /*

                ① 、获取到任红昌标签

                ② 、获取父节点ul

                三 、执行删除(通过父节点来删除)

            */

 

            //1、获取li标签

            var li24 = document.getElementById(“li24”);

            //贰 、获取父节点 (1)通过id获取 (2)通过parentNode属性获取

            var ul31 = document.getElementById(“ul31”);

            //通过父节点删除

            ul31.removeChild(li24);

        }

    </script>

</body>

</html>


        replaceChild(newNode, oldNode)方法:替换节点。
            newNode:新的节点。
            oldNode:旧的节点。
            不能够和谐替换自身,供给利用父节点来成功替换操作。

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <ul id=”ul41″>

        <li id=”li31″>西施</li>

        <li id=”li32″>王昭君</li>

        <li id=”li33″>貂蝉</li>

        <li id=”li34″>杨玉环</li>

    </ul>

    <input type=”button” value=”replace” onclick=”replace1()”
name=””>

 

    <script type=”text/javascript”>

        //将王昭君替换来桃花庵主

        function replace1()

        {

            /*

                1、获取到li34

                二 、创造要替换的li标签

                三 、创设文本

                ④ 、将文件添加到li标签中

                5、获取ul父节点

                陆 、使用replaceNode方法替换节点

            */

 

            var li34 = document.getElementById(“li34”);

            var li = document.createElement(“li”);

            var text = document.createTextNode(“唐伯虎”);

            li.appendChild(text);

            var ul = document.getElementById(“ul41”);

            ul.replaceChild(li,li34);

        }

    </script>

</body>

</html>


        cloneNode(boolean):复制节点。
            boolean:是或不是复制子节点。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type=”text/css”>

        #di2{

            width: 200px;

            height: 200px;

            border: 3px dashed blue;

            float: left;

        }

        #di1{

            width: 200px;

            height: 200px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div id=”di1″>

        <ul id=”ul41″ style=”clear: both;”>

            <li id=”li31″>西施</li>

            <li id=”li32″>王昭君</li>

            <li id=”li33″>貂蝉</li>

            <li id=”li34″>杨玉环</li>

        </ul>

    </div>

    <div id=”di2″>

 

    </div>

    <input type=”button” value=”clone” onclick=”clone1()” name=””>

 

    <script type=”text/javascript”>

        function clone1()

        {

            //将ul列表复制到此外二个div中

            /*

                1、获取到ul

                ② 、执行复制方法 cloneNode方法,参数为true

                叁 、把复制之后的始末放到div中

                    获取div,然后选用appendChild(剪切粘贴)

            */

            //1、获取ul标签

            var ul = document.getElementById(“ul41”);

            //二 、获取要复制的div

            var div2 = document.getElementById(“di2”);

            //3、赋值ul

            var ul2 = ul.cloneNode(true);

            div2.appendChild(ul2);

        }

    </script>

</body>

</body>

</html>


    操作DOM总结:
        获取节点:
            getElementById():通过节点的ID属性,查找对应节点。
            getElementsByName():通过节点的name属性,查找对应节点。
            getElementsByTagName():通过节点名称,查找对应节点。
        插入节点:必须经过父节点插入
            appendChild():在结尾添加,也就是剪切粘贴。
            insertBefore():在有些节点以前插入。
        替换节点:
            replaceChild():必须通过父节点替换
        删除节点:

            window.close();

                    function forward1()

===============================================================================
叁 、获取某一节点下的富有节点:childNodes
    获取ul下的持有li。
    <ul id=”ulid1″>

Node接口的表征和措施:
    String nodeName:
        再次回到节点的名字。
    String nodeValue:
        再次回到节点的值。
    Number nodeType:
        重临节点的门类常量值之一。
    Document ownerDocument:
        重返只想那一个节点所属的文书档案。
    Node firstChild:
        再次来到指向在childNodes列表中的第③个节点。
    Node lastChild:
        重临指向在childNodes列表中的最终叁个节点。
    NodeList childNodes:
        再次来到全体子节点的列表。
    Node parentNode:
        返回一个给定节点的父节点。
    Node previousSibling:
       
指向前一个兄弟节点,假若那么些节点正是首先个弟兄节点,那么该值为null。
    Node nextSibling:
       
指向后二个弟兄节点,借使这几个节点正是终极3个小兄弟节点,那么该值为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。

                        document.getElementById(“sp”).setAttribute(“type”,”button”);

        <li>11</li>

⑩ 、弹窗案例
    创建贰个页面:
        有多少个输入项和三个按钮。
        按钮上添加一个点击事件,弹出2个新窗口:open()。
    创立弹出页面:
        使用表格,表格的每一行都有四个按钮,还有编号和人名。
       
按钮上有贰个风云,将近年来的编号和人名赋值到第三个页面包车型地铁文本框中。
    <html>

        </body>

<!DOCTYPE html>

        <li>11</li>

        <head>

                            }

        }

五 、JavaScript的运算符
    JavaScript中不区分整数和小数,所以除法中并未整数,会并发小数。
        alert(123 / 1000 * 一千);,输出结果为123。
   
字符串与数字相加,是字符串连接,倘使是相减,则字符串直接转换到数字再进行相减。
 
  boolean类型能够拓展览演出算,false是0或然null,非0或非null是true,私下认可用1展示。