JavaWeb学习笔记分享(必看篇)

自定义列表

   

：表示列表的范围

        **在里面

：上层内容

        **在里面

：下层内容

 

有序列表

   

：有序列表的范围

        --属性 type：设置排序方式，1(默认),a,i、、

        **在ol标签里面

具体内容

   

无序列表

   

：无序列表的范围

        --属性 type：circle(空心圆)、disc(默认的实心圆)、square(实心方块)

        **在ul标签里面

具体内容

 

图像标签

    --属性：src、width、height、alt(图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 或者是图片显示出错时显示的文字，但有些浏览器不显示，没有效果)

        **

 

路径的介绍

    *分类：两类

    **绝对路径 eg. http://www.baidu.com/b.jpg

    ***三种相对路径 一个文件相对于另外一个文件的位置

        --html文件和图片在同一个路径(目录)下，可以直接写文件名称

        --在html文件中，使用与其在同一个路径下的img文件夹下的a.jpg文件 使用方法：img\a.jpg

            **d:\htmlstudy\code\4.html

            **d:\htmlstudy\code\img\a.jpg

        --图片在html文件的上层目录中，此时图片使用方法：../c.png     ../表示上层路径    

               

超链接标签

    **链接资源

    -- 显示在页面上的内容

        **href：链接的资源的地址

        **target：设置打开的方式，默认是在当前页打开

            --_blank ：在一个新窗口打开

            --_self ：在当前页打开 默认的

    --链接标题：当超链接不需要跳转到页面时，在href中添加#（占位符）就可以了

    **定位资源

        --如果想要定位资源：定义一个位置

            顶部

        --回到这个位置

                回到顶部

               

        --原样输出标签：

需要原样输入的内容

           

表格标签

    *作用：可以对数据进行格式化，使数据显示更加清晰

    *属性 border(表格线粗细) bordercolor(表格线颜色) cellspacing(单元格间距离) width height

    *

： 表示表格的范围

    **在table里面，表示一行

    --设置对齐方式 align ：left center right

        ***在tr里面，表示一行里边的单元格

        **使用th也可以表示单元格：表示可以实现居中和加粗

    *表格的标题，放在table里边

    *操作技巧：

        **首先数有多少行，在数每行里面有多少个单元格   

    *合并单元格

        **rowspan ：跨行（纵向合并）

            13

        **colspan ：跨列（横向合并）

            表格练习

 

表单标签

*例如注册开心网时，可以提交数据到开心网的服务器，这个过程可以使用表单标签实现

*

：定义一个表单范围

*属性：

        ** action ：提交到的地址，默认提交到 当前的页面

        ** method ： 表单的提交方式

            --常用的有两种： get 和 post ，默认是get请求

        ** get 和 post 的区别

            1）get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）

            2）get请求安全级别较低，post较高

            3）get请求数据大小有限制，post没有限制

        ** enctype ：一般请求下不需要这个属性，做文件上传时候需要设置这个属性

    **输入项：可以输入内容或者选择内容的部分

        --大部分的输入项可使用

        ********在输入项里面需要有一个name属性

 

        ***普通输入项：

        ***密码输入项：

        ***单选输入项：

            --在里边需要属性 name

            --name的属性值必须要相同

            --必须要有一个value值

            ****实现默认选中的属性

                ***checked="checked"

        ***复选输入项：

            **在里边需要属性 name

            **name的属性值必须要相同

            **必须要有一个value值

            ****实现默认选中的属性

                ----checked="checked"

        ***文件输入项：

        ***下拉输入项（不是在input标签里面的）

           

               

请选择

               

1991

               

1992

               

1993

           

            ****实现默认选中的属性

                ----selected="selected"

        *** 文本域（如：注册账号时填写个人信息简介的方框）

           

        ***隐藏项（不会显示在页面上，但是存在于 html代码里面）

           

        ***提交按钮

           

           

            --提交之前地址：C:\Users\HappyDog\Desktop\index.html   

            **当在输入项里面写了name属性之后

            --file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245

 

            **?输入项name的值=输入的值&

            **参数类似于key-value形式

 

        ***使用（点击）图片来提交

           

 

        ***重置按钮 ：回到输入项的初始状态

           

           

 

        ***普通按钮（和js在一起使用的）

           

 

案例：使用表单标签实现注册页面

    表格单元格内容为空时，一般用占位符（ (转义空格)）来填充

 

html中的其他的常用标签的使用

    ** b(加粗) s(删除线) u(下划线) i(斜体) pre(原样输出) sub(下标) sup(上标) div(自动换行) span(在一行显示) p(段落标签)   

 

html的头标签的使用

    **html两部分组成 head 和 body

    **在head里面的标签就是头标签

    **title标签：表示在标签上显示的内容

    **标签 ：设置页面的一些相关内容

        --

        --定时跳转到指定页面

    **base标签 ：设置超链接的基本的设置

        --可以统一设置超链接的打开方式

    **link标签 ：引入外部文件

 

框架标签的使用

    **

        **rows ：按照行进行划分

            分成上下两部分，上边80，下边任意

        **cols ：按照列进行划分

            分成左右两部分，左边80，右边任意

    ** 具体显示的页面

        **

    *使用框架标签的时候，不能写在head和body里面，使用了框架标签，需要把body去掉，写在head外边

 

    *如果在左边的页面超链接，想让内容显示在右边的页面中，可以设置超链接里面的target属性，将target的值设置为框架中的名字

        **百度

   

       

       

           

           

       

   

知识总结

    1）html操作思想：使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化

    2）font标签 属性：size 取值范围1-7 color：十六进制数 #ffffff

    3）标题标签

......

：从h1到h6字体越来越小，自动换行

    4）注释

 

CSS的简介

    **CSS：层叠样式表

        ** 层叠：一层一层的

        ** 样式表：很多的属性和属性值

    **使页面显示效果更加好

    **CSS将网页内容和显示样式进行分离，提高了显示功能

 

CSS和html的结合方式（四种结合方式）

    1）在每个html标签上面都有一个属性 style，把CSS和html结合在一起

        --

天之道，损有余而补不足，是故虚胜实，不足胜有余。

    2）使用html的一个标签实现

 

    ----代码实现   

               

               

                   

                   

                        天之道，损有余而补不足，是故虚胜实，不足胜有余。

                   

               

    3）在style标签里面 使用语句

        @import url(css文件的路径)；

               

        -- 第一步：创建一个css文件

        ----

    4）使用头标签 link，引入外部css文件 放在里边

        -- 第一步：创建一个css文件

        --

    ****第三种结合方式的缺点：在某些浏览器下不起作用，一般使用第四种方式

    ****优先级（一般）

        由上到下，由内到外，优先级由低到高。

        后加载的优先级高

    ****格式：选择器名称{属性名:属性值;属性名:属性值;......}

 

css的基本选择器（三种）

    **要对那个标签里面的数据进行操作

    1）标签选择器 div {css代码}

        --使用标签名作为选择器的名称

           

           

       

       

           

aaaaaa

        

    2）class选择器 .名称 {}

        **每个html标签都有一个属性 class

        **   

               

        

        **

           

aaaaaa

           

bbbbbbbbb

            

    3）id选择器 #名称 {}

        **每个html标签上面都有一个属性 id

        --

cccccccccc

        --   

               

        

        --

           

aaaaaa

           

bbbbbbbbb

        

    **优先级 style > id选择器 > class选择器 > 标签选择器

 

css的扩展选择器(了解)

    1）关联选择器 嵌套标签的样式的设置

        **

wwwwwwwwww

        **设置div标签里面p标签的样式，嵌套标签里面的样式

        --   

               

        

        --

           

wwwwwwwwww

           

aaaaaa

        

    2）组合选择器 不同标签设置相同的样式

        **

1111

        

2222

        **把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

        --   

               

        

        --

           

1111

           

2222

        

    3）伪（类）元素选择器

        ** css里面提供了一些定义好的样式，可以拿过来使用

        **比如 超链接

            **超链接的状态

                --原始状态 鼠标放上去 点击 点击之后

                 :link :hover :active :visited

        代码实现：       

           

               

        

       

            点击链接到百度网页

           

 

css的盒子模型(了解) 对数据进行操作，需要把数据放到一个区域里面（div）

    1）边框 border ：统一设置

            也可以分别设置：上 border-top 下：border-bottom 左：border-left 右：border-right

        --   

               

        

        --

           

AAAAAAAAA

           

BBBBBBBBB

        

    2) 内边距 padding ：统一设置 内容距离上下左右四条边的距离

            也可以分别设置：上下左右

           

               

        

       

           

AAAAAAAAA

           

BBBBBBBBB

        

    3) 外边距 margin ：统一设置 div距离最外边四条边的距离

                也可以分别设置：上下左右。。。

 

css的布局的漂浮（了解） float ：left right

 

css的布局的定位 (了解)

    *position

        **属性值：

            --static：默认值，无特殊定位

            --absolute：

                将对象从文档流中拖出，使用left,right,top,bottom等属性相对于其进行绝对定位

            --relative：不会将对象从文档流中拖出，对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。

 

案例：图文混排案例

    **图片和文字在一起显示

案例：图像签名

 

javascript的简介：是基于对象和事件驱动的脚本语言，主要应用在客户端

    *基于对象：提供好了很多对象，可以直接拿过来使用

    *事件驱动：html做网站静态效果，javascript动态效果

    *客户端：专门指的是浏览器

    * js的特点：

        1）交互性 信息的动态交互

        2）安全性 js不能访问本地磁盘的文件

        3）跨平台性 java里面跨平台性，虚拟机；只要能够支持js的浏览器，都可以运行

   

    *javascript和java的区别：两者之间没有什么任何关系

        1）java是sun公司，现在是Oracle；js是网景公司

        2）java是面向对象的，js是基于对象的

        3）java是强类型的语言，js是弱类型的语言

            --比如：java里面 int i = "10";会报错

            --js: var i = 10; var i = "10";都不报错

        4）js只需要解析就可以执行，而java需要先编译成字节码文件，在执行

 

    *js的组成（三部分）：

        1）ECMAScript

            -- ECMA ：欧洲计算机协会

            --由ECMA组织制定的js语法，语句...

        2）BOM

            --broswer object model:浏览器对象模型

        3）DOM

            --document object model：文档对象模型

           

js与html的结合方式（两种）

    1）使用一个标签

 

    2）使用script标签，引入一个外部的js文件

        -- 创建一个js文件，写js代码

        --

    注意：使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行

 

js的原始类型和声明变量

    *java的基本数据类型：byte short int long float double char bolean

    *js定义变量 都是用关键字 var

    *js的原始类型（五个）

        --string 字符串 var str = "abc";

        --number 数字类型 var m = 123;

        --boolean true和false var flag = true;

        --null var date = new Date();

            **获取对象的引用，null表示对象引用为空，所有对象的引用也是object

        --undifined 定义一个变量，但是没有赋值 var aa;

    * typeof(变量名称) 查看当前变量的数据类型

   

js的语句

    **java里面的语句 if判断("="表示赋值；"=="等于，表示判断) switch语句 循环语句（for while do-while）

    **js里面的这些语句

        --if判断语句

        --switch(a) {

            case 5: ...

                    break;

            case 6: ...

                    break;

            default:...

            ........

        }

    **循环语句 for while do-while

        --var i = 5;

         while(i>0) {

            alert(i);

            i--;

         }

        --for(var i = 0;i<=5;i++){

            alert(i);

        }

 

js的运算符

    **js里面不区分整数和小数

        --var j = 123;

         alert(j/1000*1000);

         ** j/1000*1000 在java里面得到结果是0

         ** 在js里面不区分整数和小数， 123/1000*1000 = 0.123*1000 = 123

    **字符串的相加和相减的操作

        --var str = "123";

         alert(str + 1); 在java和js中的结果都是1231，做的是字符串的连接

         alert(str - 1); 相减时候，执行减法的运算，如果str中不是数字，会提示NaN：表示不是一个数字

    **boolean类型也可以操作

        ***如果设置成true，相当于这个值是1；如果设置成false，相当于这个值是0；

    ** == 和 === 区别

        **都是做判断

        ** == 比较的只是值； === 比较的是值和类型

    **直接向页面输出的语句（可以把内容显示在页面上），可以向页面输出变量，固定值和html代码。Document.write("") 里面是双引号，如果设置标签的属性需要使用单引号。

        -- document.write("aaaa");

        -- document.write("

---

");

            ***document.write("

");

            ***document.write("

");

练习：实现99乘法表

 

js的数组

    *java里面的数组 定义 int[] arr = {1,2,3};

    *js数组的定义方式（三种）

        1）var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以

        2）使用内置对象 Array对象

            var arr1 = new Array(5); // 定义一个数组，数组的长度是5

            arr1[0] = "1";

            ......

        3）使用内置对象 Array对象

            var arr2 = new Array(3,4,5); // 定义一个数组，数组里的元素是3,4,5

    * 数组里面有一个属性 length ：获取到数组的长度

    * 数组的长度是可变的，数组可以存放不同的数据类型的数据。

 

js的函数（方法）

    **在js里面定义函数（方法）有三种方式 函数的参数列表里面，不需要写var，直接写参数名称

        1）使用到一个关键字 function

            *** function 方法名(参数列表) {

                    方法体;

                    返回值可有可无（根据实际需要）;

             }

            代码实现：// 使用第一种方式创建函数

                            function test() {

                                alert("qqqqqq");

                            }

                            // 调用方法

                            test();

 

                            // 定义一个有参数的方法 实现两个数的相加

                            function add1(a,b) {

                                var sum = a+b;

                                alert(sum);

                            }

                            add1(3,5);

 

                            function add2(a,b,c) {

                                var sum1 = a+b+c;

                                return sum1;

                            }

                            alert(add2(7,8,9));

        2）匿名函数

            var add = function(参数列表) {

                方法体和返回值;

            }

            代码实现： var add3 = function(m,n) {

                            alert(m+n);

                        }

                        // 调用方法

                        add3(8,9);

        3）一般也称为动态函数，用的少，了解即可

            *使用到js里面的一个内置对象 Function

            var add = new Function("参数列表","方法体和返回值");

            var add4 = new Function("x,y","var sum;sum=x+y;return sum;");

            alert(add4(9,10));

            // 或者下边的代码

            var canshu = "x,y";

            var fangfati = "var sum;sum=x+y;return sum;";

            var add4 = new Function(canshu,fangfati);

            alert(add4(5,3));

 

js的全局变量和局部变量

    **全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用

        --在方法外部使用，在方法内部使用，在另一个script标签使用

    **局部变量：在方法内部定义一个变量，只能在方法内部使用

        --只能在方法内部使用，如果在方法的外部调用这个变量，提示出错

        --ie自带了一个调试工具，ie8以上的版本中，键盘上的F12,再页面下方出现一个条 看控制台可以看到错误

 

script标签应该放置的位置

    **建议把script标签放到后面

    **如果现在有这样一个需求：

        --在js里面需要获取到input里面的值，如果把script标签放在head里面，会出现问题

        --html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input的值，因为页面还没有解析到input那一行，肯定取不到

 

js的重载 js不存在重载，但是可以模拟实现

    例子：function add11(a,b) {

        return a+b;

    }

    function add11(a,b,c) {

        return a+b+c;

    }

    function add11(a,b,c,d) {

        return a+b+c+d;

    }

    alert(add11(2,2)); // NaN

    alert(add11(2,2,3)); // NaN

    alert(add11(2,2,4,5)); // 13

 

js的String对象

    ** 创建String对象 var str = "abc'；

    **方法和属性（文档）

        --属性 length ：字符串的长度

        --方法

            1）与html相关的方法

                -- bold():加粗 fontcolor():设置字符串的颜色 fontsize():设置字体的大小 link():将字符串显示成超链接

            2）与java相似的方法

                --concat():连接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成数组 replace("",""):替换字符串--传递两个参数：第一个参数是原始字符，第二个参数是要替换成的字符 substr(5,3)从第五位开始，向后截取三个字符 substring(3,5) 从第三位开始包括第三位到第五位结束，不包括第五位 [3,5)

 

js的Array对象

    **创建数组的三种方法

        1）var arr1 = [1,2,3];

        2）var arr1 = new Array(3); // 长度是三

        3）var arr1 = new Array(1,2,3); // 元素是1,2,3

        var arr = []; //创建一个空数组

    **属性 length：查看数组的长度

    **方法

        concat();连接数组 join();根据指定的字符分割数组 push();向数组末尾添加元素，返回数组的新的长度**如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去 pop();删除并返回数组的最后一个元素 reverse();颠倒数组中的元素的顺序

 

js的Date对象

    ** 在java里面获取当前时间

        Date date = new Date();

        // 格式化 //toLocaleString()

   

    ** js里面获取当前时间

        var date = new Date();

        // 转换成习惯的格式 date.toLocaleString();

 

js的Math对象 数学的运算

    ** 里面的都是静态方法，使用可以直接使用 Math.方法();

 

js的全局函数

    **由于不属于任何一个对象，直接写名称使用

    ** eval(); 执行js代码(如果字符串是一个js代码，使用方法直接执行)

        -- var str = "alert('1234');";

         // alert(str); //alert('1234');

         eval(str); // 1234

    ** .....

 

js的函数的重载 什么是重载？方法名相同，参数不同

    *js不存在函数的重载，只会调用最后一个方法，但是可以通过其他方式模拟重载。js的函数把传递的参数保存到 arguments数组里面 可以利用判断arguments数组的长度 来对应返回不同的处理结果

    模拟重载效果代码实现：

    function add1() {

        if(arguments.length ==2 ) {

            return arguments[0] + arguments[1];

        } else if ( arguments.length == 3) {

            return arguments[0] + arguments[1] + arguments[2];

        } else if ( arguments.length == 4) {

            return arguments[0] + arguments[1] + arguments[2] + arguments[3];

        } else {

            return 0;

        }

    }

    // 调用

    alert(add1(1,2)); //3

    alert(add1(1,2,3)); //6

    alert(add1(1,2,3,4)); //10

    alert(add1(1,2,3,4,5)); //0

 

js的bom对象

    **bom ：broswer object model:浏览器对象模型

    **有哪些对象？

        -- navigator ：获取客户机的信息（浏览器的信息）

        -- screen : 获取屏幕的信息

        -- location ：请求的url地址

            *** href属性

                1）获取到请求的url地址

                    --document.write(location.href);

                2）设置url地址

                    --页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮，页面可以跳转到另外一个页面

                   

                   

                   

                   

        -- history ：请求的url的历史记录

            -- 创建三个页面（模拟上下历史的效果）

                1）创建一个页面a.html 写一个超链接 到 b.html

                2）创建 b.html 超链接到 c.html

                3）创建 c.html

            -- 到访问的上一个页面

                history.back();

                history,go(-1);

            -- 到访问的下一个页面

                history.forward();

                history.go(1);   

        -- window（重点掌握） 窗口对象 顶层对象（所有bom对象都是在window里面操作的）

            **方法

                -- window.alert(); 简写为：alert(); 页面弹出一个窗口，显示内容

                -- confirm("显示的消息内容"); 确认提示框 有返回值 true和false

                -- prompt(); 输入的对话框（现在使用的不多） ，有两个参数：显示内容和默认值

                -- open("url地址","","窗口特征，比如窗口宽度和高度"); 打开一个新窗口

                -- close(); 关闭窗口（浏览器兼容性比较差）

                -- 做一些定时器

                    *** setInterval("js代码",毫秒数); window.setInterval("alert('123');",3000); 表示每三秒执行一次alert方法

                    *** setTimeout("js代码",毫秒数); 表示在毫秒数之后执行，但是只会执行一次

                    ***clearInterval(); 清除掉setInterval设置的定时器

                        -- var id1 = setInterval("alert('123');",3000);

                         clearInterval(id1);   

                    ***clearTimeout(); 清除掉setTimeout设置的定时器

 

js的dom对象

    **dom ：document object model: 文档对象类型

    **文档：超文本文档（超文本标记文档） html、xml

    **对象：提供了属性和方法

    **模型：使用属性和方法操作超文本标记型文档

    ***可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

    ***想要对标记型文档进行操作，首先需要把标记型文档里面的所有内容封装成对象

        -- 需要把html里面的标签、属性、文本内容都封装成对象

    ***要想对标记型文档进行操作，解析标记型文档

    ***解析过程：根据html的层级结构，会在内存中分配一个树形结构，需要把html中的每部分封装成对象

        *只能有一个根节点

            在根节点下面可以有多个子节点，没有子节点的节点称为叶子节点

        -- document对象：整个html文档

        -- element对象：标签对象

        -- 属性对象

        -- 文本对象

        ** Node节点对象：是这些对象的父对象

 

DHTML：是很多技术的简称

    ** html：封装数据

    ** css：使用属性和属性值设置样式

    ** dom：操作html文档（标记型文档）

    ** javascript：专门指的是js的语法语句（ECMAScript）

 

document对象 表示整个文档

    **常用方法

        -- write()方法：1)向页面输出变量 2)向页面输出html代码

        -- getElementById(); 表示通过id得到元素（标签）   

               

               

               

                   

        -- getElementsByName(); 通过标签的name的属性值得到标签，返回的是一个集合（数组）

               

               

               

               

               

           

        -- getElementsByTagName("标签的名称"); 返回的是一个集合（数组）

               

               

               

               

               

           

        ****注意的地方：只有一个标签，这个标签只能使用name获取到，这个时候，使用getElementsByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值

           

            var input1 = document.getElementsByName("name1")[0];

            alert(input1.value);

 

案例：window弹窗案例

    **实现过程：1）需要创建一个页面：两个输入项和一个按钮，按钮上边有一个事件，作用是弹出一个新窗口

         2）创建弹出页面：表格 每一行表格上有一个按钮和编号和姓名；按钮上有一个事件:把当前的编号和姓名，赋值到第一个页面相应的位置       

    **跨页面的操作 opener :可以得到创建这个窗口的窗口，也就是可以得到父窗口

 

案例：在末尾添加节点

    1）创建li标签

    2）创建文本

    3）把文本加入到li下面

    4）把li加入到ul下面

   

       

           

• 1111

           

• 2222

           

• 3333

       

       

       

    

 

元素对象（element对象）：要操作element，首先必须要获取到element 使用document里面相应的方法获取

    **方法

        ****获取属性里面的值 getAttribute("属性名称");

        ****设置属性的值 setAttribute(name,value);   

        ****删除属性 removeAttribute("属性名称"); 不能删除value

 

       

       

    ** 想要获取标签下面的子标签

        **使用属性 childNodes,但是这个属性兼容性很差

        **获得标签下面子标签的唯一有效方法，使用getElementsByTagName方法

       

           

               

• aaaaaa

               

• bbbbbb

               

• cccccc

           

           

       

 

Node对象的属性

    **nodeName

    **nodeType

    **nodeValue

    **使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

**标签节点对应的值

    nodeType : 1

nodeName : 大写标签名称，比如SPAN

nodeValue : null

**属性节点对应的值

    nodeType : 2

nodeName : 属性名称

nodeValue : 属性的值

**文本节点对应的值

    nodeType : 3

nodeName : #text

nodeValue : 文本内容

 

        **

            文本内容

           

Node对象的属性二

   

   

• aaaaaa
• bbbbb

**父节点 ul是li的父节点

    *** parentNode ：父节点

    **子节点 li是ul的子节点

        *** childNodes : 得到所有子节点，但是兼容性很差

        *** firstChild : 获取第一个子节点

        *** lastChild : 获取最后一个子节点

    **同辈节点 li与li之间是同辈节点

        **nextSibling : 返回一个给定节点的下一个兄弟节点

        **previousSibling :    返回一个给定节点的上一个兄弟节点

       

       

           

• aaaaa

           

• bbbbb

           

• ccccc

           

• ddddd

       

       

       

 

操作dom树

    ** appendChild方法：

        *** 添加子节点到末尾

        *** 特点：类似于剪切粘贴的效果

    ** insertBefore(newNode,oldNode);

        *** 在某个节点之前插入一个新的节点 通过父节点添加

        *** 两个参数 1）要插入的节点 2)在谁之前插入

        *** 插入一个节点，节点不存在，创建

            1）创建标签

            2）创建文本

            3）把文本添加到标签下面

    **代码实现：（在

貂蝉

之前添加

董小宛

）

       

       

           

• 西施

           

• 王昭君

           

• 貂蝉

           

• 杨玉环

       

       

       

       

    **removeChild方法：删除节点

        ***通过父节点删除，不能自己删除自己

        **代码实现 : 删除

杨玉环

       

       

           

• 西施

           

• 王昭君

           

• 貂蝉

           

• 杨玉环

       

       

       

       

    ** replaceChild(newNode,oldNode); 替换节点

        ***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

        ***不能自己替换自己，通过父节点替换

    ** cloneNode(boolean) : 复制节点

    **代码实现：把ul列表复制到另外一个div里面

       

           

               

• 西施

               

• 王昭君

               

• 貂蝉

               

• 杨玉环

           

           

               

           

           

           

               

    **操作dom总结：

        **获取节点使用方法

            getElementById() :    通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

        **插入节点的方法

            insertBefore方法 : 在某个节点之前插入

            appendChild方法 : 在末尾添加，类似于剪贴粘贴

        **删除节点的方法

            removeChild方法 : 通过父节点删除

        **替换节点的方法

            replaceChild方法 : 通过父节点替换

 

innerHTML属性（重点）

    ** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

    ** 第一个作用：获取文本内容

        var span1 = document.getElementById("sid");

        alert(span1.innerHTML);

    ** 第二个作用：向标签里面设置内容（可以是html代码）

       

            测试文本   

           

               

           

           

           

    ** 练习：向div里面添加一个表格

        var tab = "

aaaaa

bbbb

";

        div11.innerHTML = tab;

 

案例：动态显示时间

    ** 得到当前时间

        var date = new Date();

        var d1 = date.toLocaleString();

    ** 需要让页面每一秒获取时间

        setInterval方法 定时器

    ** 显示到页面上

        每一秒向div里面写一次时间 使用innerHTML属性

    ** 代码实现 动态显示时间    

       

           

               

           

           

           

 

案例：全选练习

    ** 使用复选框上面一个属性判断是否选中

        ** checked 属性

        ** checked = true; 选中

        ** checked = false; 未选中

** 创建一个页面   

        ** 复选框 和 按钮

            ***四个复选框表示爱好

            ***还有一个复选框操作全选和全不选 有一个事件

            ***三个按钮 全选 全不选 反选 每个按键都分别有事件

    **代码实现

       

            全选/全不选

           

            篮球

            排球

            羽毛球

            乒乓球

           

           

           

               

           

           

 

案例：下拉列表左右选择

    ** 下拉选择框

       

           

111   

           

111   

       

       

    ** 创建一个页面

        ** 两个下拉框 设置属性multiple

        ** 四个按钮， 都有事件

    ** 代码实现：

       

       

           

           

                   

1111111   

                   

22222222   

                   

33333333   

                   

444444444   

           

           

           

           

           

           

       

       

           

           

                   

AAAAAAAA

                   

BBBBBBBB

           

           

           

           

           

           

       

           

       

 

案例：下拉框联动效果(省市联动)

    ** 创建一个页面，有两个下拉选择框

    ** 在第一个下拉框里面有一个事件：改变事件 onchange事件

        ** 方法 add1(this.value); 表示当前改变的 option 里面的value值

    ** 创建一个二维数组，存储数据

        ** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

       

       

           

--请选择--   

           

中国   

           

美国

           

德国

           

日本

       

       

           

           

       

       

       

       

以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。