亲宝软件园·资讯

展开

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

人气:0
想了解JavaWeb学习笔记分享(必看篇)的相关内容吗,在本文为您仔细讲解JavaWeb学习笔记的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaWeb学习笔记,下面大家一起来学习吧。

自定义列表

    <dl></dl>:表示列表的范围

        **在里面 <dt></dt>:上层内容

        **在里面 <dd></dd>:下层内容

 

有序列表

    <ol></ol>:有序列表的范围

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

        **在ol标签里面 <li>具体内容</li>

   

无序列表

    <ul></ul>:无序列表的范围

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

        **在ul标签里面 <li>具体内容</li>

 

图像标签

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

        ** <img src="图片的路径"/>

 

路径的介绍

    *分类:两类

    **绝对路径 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     ../表示上层路径    

               

超链接标签

    **链接资源

    -- <a href="链接到资源的路径">显示在页面上的内容</a>

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

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

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

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

    --<a href="#">链接标题</a>:当超链接不需要跳转到页面时,在href中添加#(占位符)就可以了

    **定位资源

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

            <a name="top">顶部</a>

        --回到这个位置

                <a href="#top">回到顶部</a>

               

        --原样输出标签:<pre>需要原样输入的内容</pre>

           

表格标签

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

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

    *<table></table> : 表示表格的范围

    **在table里面,表示一行 <tr></tr>

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

        ***在tr里面,表示一行里边的单元格 <td></td>

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

    *表格的标题,放在table里边 <caption></caption>

    *操作技巧:

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

    *合并单元格

        **rowspan :跨行(纵向合并)

            <td rowspan="3" align="center">13</td>

        **colspan :跨列(横向合并)

            <td colspan="3" align="center">表格练习</td>

 

表单标签

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

* <form></form> :定义一个表单范围

*属性:

        ** action :提交到的地址,默认提交到 当前的页面

        ** method : 表单的提交方式

            --常用的有两种: get 和 post ,默认是get请求

        ** get 和 post 的区别

            1)get请求地址栏会携带提交的数据,post不会携带(数据在请求体里面)

            2)get请求安全级别较低,post较高

            3)get请求数据大小有限制,post没有限制

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

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

        --大部分的输入项可使用 <input type="输入项类型"/>

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

 

        ***普通输入项:<input type="text"/>

        ***密码输入项:<input type="password"/>

        ***单选输入项:<input type="radio"/>

            --在里边需要属性 name

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

            --必须要有一个value值

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

                ***checked="checked"

        ***复选输入项:<input type="checkbox"/>

            **在里边需要属性 name

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

            **必须要有一个value值

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

                ----checked="checked"

        ***文件输入项:<input type="file"/>

        ***下拉输入项(不是在input标签里面的)

            <select name="birth">

                <option value="0">请选择</option>

                <option value="1991">1991</option>

                <option value="1992">1992</option>

                <option value="1993">1993</option>

            </select>

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

                ----selected="selected"

        *** 文本域(如:注册账号时填写个人信息简介的方框)

            <textarea cols="5" rows="20"></textarea>

        ***隐藏项(不会显示在页面上,但是存在于 html代码里面)

            <input type="hidden"/>

        ***提交按钮

            <input type="submit"/>

            <input type="submit" value="按钮标题"/>

            --提交之前地址: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形式

 

        ***使用(点击)图片来提交

            <input type="image" src="图片路径"/>

 

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

            <input type="reset"/>

            <input type="reset" value="按钮标题"/>

 

        ***普通按钮(和js在一起使用的)

            <input type="button" value=""/>

 

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

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

 

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

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

 

html的头标签的使用

    **html两部分组成 head 和 body

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

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

    **<meta>标签 :设置页面的一些相关内容

        --<meta name="keywords" content="" />

        --<meta http-equiv="refresh" content="10;url=Test_form.html" />定时跳转到指定页面

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

        --可以统一设置超链接的打开方式 <base target="_blank" />

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

 

框架标签的使用

    **<frameset>

        **rows :按照行进行划分

            <frameset rows="80,*"> 分成上下两部分,上边80,下边任意

        **cols :按照列进行划分

            <frameset cols="80,*"> 分成左右两部分,左边80,右边任意

    **<frame> 具体显示的页面

        **<frame name="lower_left" src="b.html">

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

 

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

        **<a href="http://www.baidu.com" target="right">百度</a><br/>

    <frameset rows="80,*">

        <frame name="top" src="a.html">

        <frameset cols="120,*">

            <frame name="left" src="b.html">

            <frame name="right" src="http://www.baidu.com">

        </frameset>

    </frameset>

知识总结

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

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

    3)标题标签 <h1></h1>......<h6></h6> :从h1到h6字体越来越小,自动换行

    4)注释

 

CSS的简介

    **CSS:层叠样式表

        ** 层叠:一层一层的

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

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

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

 

CSS和html的结合方式(四种结合方式)

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

        -- <div style="background-color:red;color:green;" id="" class="" >天之道,损有余而补不足,是故虚胜实,不足胜有余。</div>

    2)使用html的一个标签实现 <style>标签,写在head里面

        -- <style type="text/css">

                css代码;

         </style>

 

    ----代码实现<head>   

                <style type="text/css">

                    div{

                        background-color:blue;

                        color:red;

                    }       

                </style>

                </head>

                <body>   

                    <div id="" class="">

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

                    </div>

                </body>

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

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

               

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

        ---- <style type="text/css">

                @import url(div.css);

         </style>

    4)使用头标签 link,引入外部css文件 放在<head></head>里边

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

        -- <link rel="stylesheet" type="text/css" href="css文件的路径"/>

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

    ****优先级(一般)

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

        后加载的优先级高

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

 

css的基本选择器(三种)

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

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

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

        <head>   

            <style type="text/css">

                div{

                    background-color:blue;

                    color:red;

                }   

            </style>

        </head>

        <body>

            <div>aaaaaa</div>

         </body>

    2)class选择器 .名称 {}

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

        **<head>   

                <style type="text/css">

                    div.test{

                        background-color:blue;

                        color:red;

                    }   

                    p.test{

                        background-color:blue;

                        color:red;

                    }

            可以简写为:

                    .test{

                        background-color:blue;

                        color:red;

                    }

                </style>

         </head>

        **<body>

            <div class="test">aaaaaa</div>

            <p class="test">bbbbbbbbb</p>

         </body>   

    3)id选择器 #名称 {}

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

        --<div id="test">cccccccccc</div>

        --<head>   

                <style type="text/css">

                    div#test{

                        background-color:blue;

                        color:red;

                    }   

                    p#test{

                        background-color:blue;

                        color:red;

                    }

            可以简写为:

                    #test {

                        background-color:blue;

                        color:red;

                    }

                </style>

         </head>

        --<body>

            <div id="test">aaaaaa</div>

            <p id="test">bbbbbbbbb</p>

         </body>

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

 

css的扩展选择器(了解)

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

        **<div><p>wwwwwwwwww</p></div>

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

        --<head>   

                <style type="text/css">

                    div p {

                        background-color:blue;

                        color:red;

                    }    

                </style>

         </head>

        --<body>

            <div><p>wwwwwwwwww</p></div>

            <p>aaaaaa</p>

         </body>

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

        **<div>1111</div>

         <p>2222</p>

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

        --<head>   

                <style type="text/css">

                    div,p {

                        background-color:blue;

                        color:red;

                    }    

                </style>

         </head>

        --<body>

            <div>1111</div>

            <p>2222</p>

         </body>

    3)伪(类)元素选择器

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

        **比如 超链接

            **超链接的状态

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

                 :link :hover :active :visited

        代码实现:       

        <head>   

                <style type="text/css">

                    /*原始状态*/

                    a:link {

                        background-color:red;

                    }

                    /*悬停状态*/

                    a:hover {

                        background-color:green;

                    }

                    /*点击状态*/

                    a:active {

                        background-color:blue;

                    }

                    /*点击之后状态*/

                    a:visited {

                        background-color:gray;

                    }                               

                </style>

         </head>

        <body>

            <a href="http://www.baidu.com">点击链接到百度网页</a>

        </body>   

 

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

    1)边框 border :统一设置

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

        --<head>   

                <style type="text/css">

                    div {

                        width: 200px;

                        height: 100px;

                        border: 2px solid blue;

                    }

                    #div12 {

                        border-right: 2px dashed yellow;

                    }

                </style>

         </head>

        --<body>

            <div id="div11">AAAAAAAAA</div>

            <div id="div12">BBBBBBBBB</div>

         </body>

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

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

        <head>   

                <style type="text/css">

                    div {

                        width: 200px;

                        height: 100px;

                        border: 2px solid blue;

                    }

                    #div21 {

                        padding: 20px;

                    }

                    #div22 {

                        padding-left: 30px;

                    }

                </style>

         </head>

        <body>

            <div id="div21">AAAAAAAAA</div>

            <div id="div22">BBBBBBBBB</div>

         </body>

    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)使用一个标签 <script type="text/javascript"> js代码;</script>

 

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

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

        -- <script type="text/javascript" src="js的路径"></script>

    注意:使用第二种方式的时候,就不要在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("<hr/>");

            ***document.write("<table border='1' bordercolor='red'>");

            ***document.write("</table>");

练习:实现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标签放到</body>后面

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

        --在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地址

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

                    <body>

                    <input type="button" value="JumpBaidu" onclick="href1();"/>

                    <script type="text/javascript">

                        function href1() {

                            //alert("aaaa");

                            location.href = "http://www.baidu.com";

                        }    

                    </script>

                    </body>

        -- 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得到元素(标签)   

            <body>   

                <input type="text" id="nameid" value="aaaaa"/><br/>

                <script type="text/javascript">

                    // 使用getElementById得到input标签的对象

                    var input1 = document.getElementById("nameid");

                    // 得到input里面的value值

                    alert(input1.value);

                    // 向input里面设置一个值value

                    input1.value = "bbbbbbb";

                </script>

            </body>       

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

            <body>   

                <input type="text" name="name1" value="aaaaa"/><br/>

                <input type="text" name="name1" value="bbbb"/><br/>

                <input type="text" name="name1" value="ccccc"/><br/>

                <script type="text/javascript">

                    var input1 = document.getElementsByName("name1"); // 传递的参数是标签里面的name的值

                    for(var i =0;i<input1.length;i++) { // 通过遍历,得到每个标签里面的具体的值

                        var inputs = input1[i]; // 每次循环得到input对象,赋值到inputs里面

                        alert(inputs.value); // 得到每个input标签里面的value值

                    }

                </script>

            </body>

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

            <body>   

                <input type="text" name="name1" value="aaaaa"/><br/>

                <input type="text" name="name1" value="bbbb"/><br/>

                <input type="text" name="name1" value="ccccc"/><br/>

                <script type="text/javascript">

                    var inputs1 = document.getElementsByTagName("input"); //传递的参数是标签的名称

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

                        var input1 = inputs1[i];

                        alert(input1.value);

                    }

                </script>

            </body>

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

            <input type="text" name="name1" value="aaaaa"/>

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

            alert(input1.value);

 

案例:window弹窗案例

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

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

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

 

案例:在末尾添加节点

    1)创建li标签

    2)创建文本

    3)把文本加入到li下面

    4)把li加入到ul下面

    <body>

        <ul id="ulid">

            <li>1111</li>

            <li>2222</li>

            <li>3333</li>

        </ul> <br/>

        <input type="button" value="add" onclick="add1();"/>

        <script type="text/javascript">

            function add1() {

                // 获取到ul标签

                var ul1 = document.getElementById("ulid");

                // 创建标签

                var li1 = document.createElement("li");

                // 创建文本

                var tex1 = document.createTextNode("4444");

                // 把文本加入到li下面

                li1.appendChild(tex1);

                // 把li加入到ul下面

                ul1.appendChild(li1);

            }

        </script>

     </body>

 

元素对象(element对象):要操作element,首先必须要获取到element 使用document里面相应的方法获取

    **方法

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

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

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

 

        <input type="text" name="name1" id="inputid" value="aaaa"/>

        <script type="text/javascript">

            // 先要获取input标签

            var input1 = document.getElementById("inputid");

            // alert(input1.value);

            alert(input1.getAttribute("value")); //获取属性里面的值           

            alert(input1.getAttribute("class"));

            input1.setAttribute("class","haha"); // 设置属性的值   

            alert(input1.getAttribute("class"));

            input1.removeAttribute("name");

        </script>

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

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

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

        <body>

            <ul id="ulid1">

                <li>aaaaaa</li>

                <li>bbbbbb</li>

                <li>cccccc</li>

            </ul>

            <script>

                // 获取到ul标签

                var ul1 = document.getElementById("ulid1");

                // 获取ul下面的子标签

                // var lis = ul1.childNodes;//兼容性很差

                // alert(lis.length); // 有的显示的是3 有的显示的是7

                var lis = ul1.getElementsByTagName("li");

                alert(lis.length);

            </script>

        </body>

 

Node对象的属性

    **nodeName

    **nodeType

    **nodeValue

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

**标签节点对应的值

    nodeType : 1

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

nodeValue : null

**属性节点对应的值

    nodeType : 2

nodeName : 属性名称

nodeValue : 属性的值

**文本节点对应的值

    nodeType : 3

nodeName : #text

nodeValue : 文本内容

 

        **<body>

            <span id="spanid">文本内容</span>

            <script type="text/javascript">

                // 获取标签对象

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

                // alert(span1.nodeType); // 1

                // alert(span1.nodeName); // SAPN

                // alert(span1.nodeValue); // null

                // 属性

                var id1 = span1.getAttributeNode("id");

                // alert(id1.nodeType); // 2

                // alert(id1.nodeName); //id

                // alert(id1.nodeValue); // spanid

                //获取文本

                var text1 = span1.getfirstChild;

                // alert(text1.nodeType); // 3

                // alert(text1.nodeName); //#text

                // alert(text1.nodeValue); // 文本内容

</script>

</body>

Node对象的属性二

    <ul>

    <li>aaaaaa</li>

<li>bbbbb</li>

</ul>

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

    *** parentNode :父节点

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

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

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

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

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

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

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

        <body>

        <ul id="ulid">

            <li id="li1">aaaaa</li>

            <li id="li2">bbbbb</li>

            <li id="li3">ccccc</li>

            <li id="li4">ddddd</li>

        </ul>

        <script type="text/javascript">

        /*    // 得到li1

            var li1 = document.getElementById("li1");

            // 得到ul

            var ul1 = li1.parentNode;

            alert(ul1.id); */

 

        /*    // 获取ul的第一个子节点

            // 得到ul

            var ul1 = document.getElementById("ulid");

            // 第一个子节点

            var li1 = ul1.firstChild;

            alert(li1.id);

            var li4 = ul1.lastChild;

            alert(li4.id); */

            //获取li的id是li3的上一个和下一个兄弟节点

            var li3 = document.getElementById("li3");

            var li4 = li3.nextSibling;

            var li2 = li3.previousSibling;

            alert(li4.id);

            alert(li2.id);

        </script>

    </body>   

 

操作dom树

    ** appendChild方法:

        *** 添加子节点到末尾

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

    ** insertBefore(newNode,oldNode);

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

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

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

            1)创建标签

            2)创建文本

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

    **代码实现:(在<li>貂蝉</li>之前添加 <li>董小宛</li>)

        <body>

        <ul id="ulid21">

            <li id="li11">西施</li>

            <li id="li12">王昭君</li>

            <li id="li13">貂蝉</li>

            <li id="li14">杨玉环</li>

        </ul>

        <input type="button" value="insert" onclick="insert1();"/>

        <script type="text/javascript">

            // 在<li>貂蝉</li>之前添加 <li>董小宛</li>

            function insert1()    {

                // 1、获取到li13标签

                var li13 = document.getElementById("li13");

                // 2、创建li

                var li15 = document.createElement("li");

                // 3、创建文本

                var text15 = document.createTextNode("董小宛");

                // 4、把文本添加到li下面

                li15.appendChild(text15);

                // 5、获取ul

                var ul21 = document.getElementById("ulid21");

                // 6、把li添加到ul下面(在<li>貂蝉</li>之前添加 <li>董小宛</li>)

                ul21.insertBefore(li15,li13);

            }

        </script>

    </body>   

    **removeChild方法:删除节点

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

        **代码实现 : 删除<li id="li24">杨玉环</li>

        <body>

        <ul id="ulid31">

            <li id="li21">西施</li>

            <li id="li22">王昭君</li>

            <li id="li23">貂蝉</li>

            <li id="li24">杨玉环</li>

        </ul>

        <input type="button" value="remove" onclick="remove1();"/>

        <script type="text/javascript">

            // 删除<li id="li24">杨玉环</li>

            function remove1()    {

                // 1、获取到li24标签

                var li24 = document.getElementById("li24");

                // 2、获取父节点ul标签

                // 有两种方式 1)通过id获取 2)通过属性 parentNode获取

                var ul31 = document.getElementById("ulid31");

                // 3、执行删除(通过父节点删除)

                ul31.removeChild(li24);

            }

        </script>

    </body>   

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

        ***两个参数:1)新的节点(替换成的节点) 2)旧的节点(被替换的节点)

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

    ** cloneNode(boolean) : 复制节点

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

        <body>

            <ul id="ulid41">

                <li id="li31">西施</li>

                <li id="li32">王昭君</li>

                <li id="li33">貂蝉</li>

                <li id="li34">杨玉环</li>

            </ul>

            <div id="divv">

               

            </div>

            <input type="button" value="clone" onclick="clone1();"/>

            <script type="text/javascript">

                // 把ul列表复制到另外一个div里面

                /*

                    1、获取到ul

                    2、执行复制方法 cloneNode方法复制 参数true

                    3、把复制之后的内容放到div里面去

                        ** 获取到div

                        **    appendChild方法

                */

                function clone1()    {

                    // 1、获取ul

                    var ul41 = document.getElementById("ulid41");

                    // 2、复制ul,放到类似剪切板里面

                    var ulcopy = ul41.cloneNode(true);

                    // 3、获取到div

                    var divv = document.getElementById("divv");

                    // 4、把副本放到div里面去

                    divv.appendChild(ulcopy);

                }

            </script>

        </body>       

    **操作dom总结:

        **获取节点使用方法

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

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

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

        **插入节点的方法

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

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

        **删除节点的方法

            removeChild方法 : 通过父节点删除

        **替换节点的方法

            replaceChild方法 : 通过父节点替换

 

innerHTML属性(重点)

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

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

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

        alert(span1.innerHTML);

    ** 第二个作用:向标签里面设置内容(可以是html代码)

        <body>

            <span id="sid">测试文本</span>   

            <div id="div11">

               

            </div>

            <script type="text/javascript">

                // 获取span标签

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

                //alert(span1.innerHTML); // 测试文本

                // 向div里面设置内容 <h1>AAAAA</h1>

                // 获取div

                var div11 = document.getElementById("div11");

                div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

            </script>

        </body>   

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

        var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

        div11.innerHTML = tab;

 

案例:动态显示时间

    ** 得到当前时间

        var date = new Date();

        var d1 = date.toLocaleString();

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

        setInterval方法 定时器

    ** 显示到页面上

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

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

        <body>

            <div id="times">

               

            </div>

            <script type="text/javascript">

                function getD1() {

                    // 当前时间

                    var date = new Date();

                    // 格式化

                    var d1 = date.toLocaleString();

                    // 获取div

                    var div1 = document.getElementById("times");

                    div1.innerHTML = d1;

                }

                // 使用定时器实现每一秒写一次时间

                setInterval("getD1();",1000);

            </script>

        </body>   

 

案例:全选练习

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

        ** checked 属性

        ** checked = true; 选中

        ** checked = false; 未选中

** 创建一个页面   

        ** 复选框 和 按钮

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

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

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

    **代码实现

        <body>

            <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

            <br/>

            <input type="checkbox" name="love"/>篮球

            <input type="checkbox" name="love"/>排球

            <input type="checkbox" name="love"/>羽毛球

            <input type="checkbox" name="love"/>乒乓球

            <br/>

            <input type="button" value="全选" onclick="selAll();"/>

            <input type="button" value="全不选" onclick="selNo();"/>

            <input type="button" value="反选" onclick="selOther();"/>   

            <script type="text/javascript">

                // 实现全选操作

                function selAll() {

                    /*

                        1、获取要操作的复选框 使用getElementsByName();

                        2、返回的是数组

                            **属性 checked 判断复选框是否选中

                                ** checked = true; // 表示选中

                                ** checked = false; // 表示未选中

                            **遍历数组,得到的是每一个checkbox

                            ** 把每一个checkbox属性设置为true 即checked = true;

                    */

                    // 获取要操作的复选框

                    var loves = document.getElementsByName("love");

                    // 遍历数组,得到每一个复选框

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

                        var love1 = loves[i]; // 得到每一个复选框

                        love1.checked = true; // 设置属性为true

                    }

                }

                // 实现全不选操作

                function selNo() {

                    /*

                        1、获取到要操作的复选框

                        2、返回的是数组,遍历数组

                        3、得到每一个复选框

                        4、设置复选框的属性 checked = false;

                    */

                    // 获取要操作的复选框

                    var loves = document.getElementsByName("love");

                    // 遍历数组,得到每一个复选框

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

                        var love1 = loves[i]; // 得到每一个复选框

                        love1.checked = false; // 设置属性为true

                    }

                }

                function selOther() { // 实现反选

                    var loves = document.getElementsByName("love");

                    // 遍历数组,得到每一个复选框

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

                        var love1 = loves[i]; // 得到每一个复选框

                        if(love1.checked == true) {

                            love1.checked = false;

                        }

                        else {

                            love1.checked = true;

                        }

                    }

                }

                function selAllNo() { // 一个多选框实现全选 全不选切换

                    /*

                        1、得到上边的复选框 通过id来获取

                        2、判断该复选框是否选中 if条件 checked == true

                        3、如果是选中,下面是全选

                        4、如果不是选中,下面是全不选

                    */

                    var box1 = document.getElementById("boxid");

                    if(box1.checked == true) {

                        selAll();

                    }

                    else {

                        selNo();

                    }

                }

            </script>

        </body>   

 

案例:下拉列表左右选择

    ** 下拉选择框

        <select>

            <option>111</option>   

            <option>111</option>   

        </select>       

    ** 创建一个页面

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

        ** 四个按钮, 都有事件

    ** 代码实现:

        <body>

        <div id="s1" style="float:left;">

            <div>

            <select id="select1" multiple="multiple" style="width:100px;height:100px;">

                    <option>1111111</option>   

                    <option>22222222</option>   

                    <option>33333333</option>   

                    <option>444444444</option>   

            </select>

            </div>

            <div>

            <input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>

            <input type="button" value="全部添加到右边" onclick="allToRight();"/>

            </div>

        </div>

        <div id="s2">

            <div>

            <select id="select2" multiple="multiple" style="width:100px;height:100px;">

                    <option>AAAAAAAA</option>

                    <option>BBBBBBBB</option>

            </select>

            </div>

            <div>

            <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>

            <input type="button" value="全部添加到左边" onclick="allToLeft();"/>

            </div>

        </div>

            <script type="text/javascript">

                // 实现选中添加到右边

                function selToRight() {

                    /*

                        1、获取 select1 里面的 option

                            * 使用getElementsByTagName(); 返回的是数组

                            * 遍历数组,得到每一个 option

                        2、判断option是否被选中

                            * 属性 selected ,判断是否被选中

                                ** selected = true; 选中

                                ** selected = false;未选中   

                        3、如果选中,把选择的添加到右边去

                        4、得到 select2

                        5、添加选择的部分

                            * appendChild 方法

                    */

                    // 获取到 select1 里面的option

                    // 得到 select1

                    var select1 = document.getElementById("select1");

                    // 得到 select2

                    var select2 = document.getElementById("select2");

                    // 得到 option

                    var options1 = select1.getElementsByTagName("option");

                    // 遍历数组

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

                        // 第一次循环 i=0 length:5

                        // 第二次循环 i=1 length:4

                        // 第三次循环 i=2 length:3

                        // 再往后就不满足条件了 后边的都循环不到了

                        var option1 = options1[i]; // 得到每一个option对象

                        // 判断是否被选中

                        if(option1.selected == true) {

                            // 添加到 select2 里面

                            select2.appendChild(option1);

                            i--; // 注意这一点,不写 会出问题

                        }

                    }

                }

                // 全部添加到右边

                function allToRight() {

                    var select2 = document.getElementById("select2");

                    var select1 = document.getElementById("select1");

                    var options1 = select1.getElementsByTagName("option");

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

                        var option1 = options1[i];

                        select2.appendChild(option1);

                        i--;

                    }

                }

                // 右边的添加到左边的操作类似

            </script>

        </body>

 

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

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

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

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

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

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

**代码实现:

        <body>

        <select id="countryid" onchange="add1(this.value);">

            <option value="0">--请选择--</option>   

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

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

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

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

        </select>

        <select id="cityid">

            <option value="" selected>

            <option value="">

        </select>

       

        <script type="text/javascript">

            // 创建一个数组存储数据

            // 使用二维数组

            var arr = new Array(4);

            arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

            arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

            arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

            arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

            function add1(val) {

                /*    实现步骤:

                    1、遍历二维数组

                    2、得到的也是一个数组(国家对应关系)

                    3、拿到数组中的第一个值和传递过来开的值作比较

                    4、如果相同,获取到第一个值后面的元素

                    5、得到 city 的 select

                    6、添加过去 使用 appendChild 方法

                        ** 需要创建option (三步操作)

                */

                // 由于每次都要向city里面添加option,第二次添加,前边第一次的会保留,追加

                // 所以每次添加之前,判断一下city里面是否有option,如果有,删除

                // 获取 city 的 select

                var city1 = document.getElementById("cityid");

                // 得到 city 里面的 option

                var options1 = city1.getElementsByTagName("option");

                // 遍历数组

                for(var k=0;k<options1.length;k++) {

                    // 得到每一个 option

                    var op = options1[k];

                    // 删除这个 option 通过父节点删除

                    city1.removeChild(op);

                    k--;// 每次删除 长度都会减一 k都会增加一 不执行此操作 会出错

                }

 

                // 遍历二维数组

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

                    // 得到二维数组里面的每一个数组

                    var arr1 = arr[i];

                    // 得到遍历之后的数组的第一个值

                    var firstvalue = arr1[0];

                    // 判断传递过来的值和第一个值是否相同

                    if(firstvalue == val) { // 相同

                        // 得到第一个值后面的元素

                        // 遍历数组 arr1

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

                            var value1 = arr1[j]; // 得到国家之后 城市的名称

                            // alert(value1);

                            // 创建 option

                            var option1 = document.createElement("option");

                            // 创建文本

                            var text1 = document.createTextNode(value1);

                            // 把文本添加到option里面

                            option1.appendChild(text1);

                            // 添加值到 city 的 select 里面

                            city1.appendChild(option1);

                        }

                    }

                }

            }   

        </script>

        </body>

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

加载全部内容

相关教程
猜你喜欢
用户评论