DHTML (一)

DOM

          Document Object Model,文档对像模型,表示的是文档内容的结构关系,可以是html也可以是xml。   HTML DOM Node Tree

HTML

           是超文标记语言,由标签组成的语言,是页面开发的基础语言。

              基本组成:

                   字体标签:font

                              属性:  

                                     color 颜色
                                          background-color 背景颜色
                                          size  字体大小
                                   标签:
                                         <b></b> 加粗
                                         <i></i> 倾斜
                                         <u></u> 下划线

                   列表标签:

                                    dl:     定义一个列表项目,具有缩进效果,无符号
                                         dt:    上层列表项
                                         dd:    下层列表项

                                    ol:    有符号、有顺序的列表项目    1aAIi
                                         li:    定义列表项        
                                         ul:    有符号、没有顺序的列表项目    圆形、方形
   

                   表格标签:table

                                  |--thead

                                  |--tbody

                                       |--tr

                                           |--th

                                           |--td

                                  |--tfoot

                   表单标签:form

                           标签:

                               input输入标签:

                                           常用标签:

                                                 type text 文本

                                                 type radio 单选框

                                                 type password 密码

                                                 type checkbos 复选框

                                                 type image 图片

                                                 type submit 提交

                                                 type button 按钮

                                                 type reset 重置

                                                 type file 文件

                                           textarea:多行文本

                                           select:下拉框

                                                   option:下拉框选项

                     对于单选和复选来说, 如何表示选中呢?
                                它们有一个属性用来标示是否选中  : checked = true| checked 选中  checked = false| null 未选中
                                对于select下拉选来说, 如何标示那一项选中呢?
                                有一个属性用来标示是否选中? selected 用来记录当前select选中项
       
                                <select id="city">
                                    <option value="北京" selected="selected">北京</option>
                                    <option value="北京">北京</option>
                                    <option value="北京">北京</option>
                                </select>

                    扩展:
                                有些时候希望输入信息有提醒功能
                                <input type="text" name="username" id="username" value="输入QQ号|手机号|邮箱号码" />
   
                                涉及到两个事件
                                当前的文本框 获到焦点了
                                username.onfocus = function(){
                                    if(username.value == "输入QQ号|手机号|邮箱号码" ){
                                        username.value = "";
                                    }
                                }

                          当前的文本框 失去焦点
                                    username.onblur = function(){
                                    if("" == trim(username.value)){
                                        //username.value == "输入QQ号|手机号|邮箱号码" ;

                                        //关键字 defaultValue  记录标签中 默认的value属性值,这个值不会被修改
                                        username.value == defaultValue;
                                    }
                                }

                                属性:
                                             action: 将form表单中的数据提交给指定的服务器地址
                                             method: post get

                                                             post                               get
                                           安全性:          提交的信息不在地址栏显示    在地址栏显示
                                           提交数据大小:   无限制                            2048个字符
                                           数据存放位置:  将请求的信息 提交给服务器 (信息包含2个部分 , 请求头, 请求体)
                                                                   请求体                           请求头   

    

                          为了封装数据: 现在呢 常用div+css的方式进行页面的布局设计
                                      div标签: 封装数据的标签 , 会标签的末尾进行换行        块级元素(标签)
                                      span标签:封装数据的标签 , 不换行                        行内元素(标签)

CSS

          是层叠样式表

          用于美化HTML,将HTML中的标签用CSS中的属性进行处理。

          HTML与CSS结合的4种方式:

               1,在标签中用style属性来设置

               2,在标签中用class属性来关联CSS样式

               3,通过@import导入CSS样式来设置

               4,在<head></head>之间通过<link></link>来进行css样式的设置

         CSS三种选择器的使用方式:

               1,HTML标签名方式

                           div{

                                color:red;

                           }

               2,class方式

                          .classname{

                               color:red;

                          }

               3,ID方式

                          #idname{

                               color:red;

                          }

          CSS扩展选择器:

               1,关联选择器

                             table tr td{

                                    color=red;

                             }

               2,组合选择器

                            table,p,div{

                                    color=red;

                            }

               3,伪元素选择器

                         link:鼠标点击之前的状态

                         visited:鼠标点击之后的状态

                         hover:鼠标停在当前标签上面的状态

                         active:鼠标点击的状态

JavaScript

           基于对象的程序设计语言(页面脚本语言)

           变量:
                     隐式类型    typeof(..)
                                    boolean
                                    number
                                    string

             是弱类型语言,示例:
                                    var s = "123";  variable
                                    var s = 123;
                                    var s = true;

           语句:

                           判断 
                                                  if(){} else {}
                                 选择
                                                  switch(){}
                                 循环
                                                  while(){};

                                            do{} while();

                                            for(){};

          运算符:

                               && 与

                               || 或

                               & | 位运算符

           存放数据的容器:

                               (java数组、java集合) javascript数组
                                 特点:

                                               长度可以动态变化。
                                                    存放的元素可以是任意类型的数据。

       with语句

                          简化对象中属性与行为的调用操作
                          语法:   
                                            with(obj){

                                                .....   
                                            }

                                            with(stu){

                                                //stu.setName("火");//旧
                                                //stu.getName();
                   
                                                setName("火");
                                                getName()
                                            }

        for in语句
                          遍历对象
           
                                            for( x in stu ){
                                                x//就是stu中的属性
                                                alert(x);// name, age
                                                //alert(stu.x)  不能成功
                                                alert(str[x]) 成功
                    
                                             }
           

           注意:

                1,在javascript中本身没有继承的属性或方法, 而java中有这个操作,通过extends来完成继承。

                      在js中,可以通过prototype来模拟出继承的这个体现
                       2,prototypp这个属性 可以获取当前对象的原型(相当于获取当前对象的父类)

                                  var p=new person();

                                  Student.prototype=p;

                                  var stu=new Student();

                                  stu.setName("done!");

                                  stu.getName();

        javascript常用操作:
                    将信息在页面中通过消息提示框弹出提示:

                        alert("");   
           
                    将信息在页面中 显示:
                            document.write("<font color='red'>文字</font>");

                  JavaScript和HTMLl结合方式
                                    1,在页面中 直接写<script type="text/javascript">.....</script>标签

                             2,加载一个js文件 <script type="text/javascript" src="1.js">

原文地址:https://www.cnblogs.com/zhanfuxing/p/3673474.html