CSS javascript web前端的研究

2015/1/10

## CSS ##

    >>扩展选择器；

        1)关联选择器；

            >> 当标签之间产生嵌套，

            标签和标签产生了关联；

            就可以使用该选择器；

            格式(空格隔开)：

            标签 标签{

            

                CSS代码；

            }

        2)组合选择器；

            >> 对多个不同的选择器设置相同的样式；

            格式(【,】隔开)：

            #ID名,.类名{

                CSS代码；

            }

        3)伪元素选择器；

            >> 用CSS预定义好的选择器；

            格式：

            标签:值{

                

                CSS代码；

            }

            <a>的四种状态(L V H A)：参见截图 0945；

# CSS的布局；

    >> 基本属性：

        1)盒子模型：

        border 设置默认的四条边框；

          |-- border-bottme

          |-- border-left

          |-- border-right

          |-- border-top

         padding 内边距；

         margin 外边距；

        2)float:left/right 参考CSSAPI

        3)position；

            |-- absolute 绝对定位；

## javascript ##

    >> 概述；

        一门脚本语言，基于对象和事件驱动；

        作用在客户(浏览器)端上；

        >> 特点：

        1)交互性好，用户与服务器的沟通；

        2)安全性，无法直接访问本地硬盘；

        3)跨平台，可被浏览器直接解析；

        >> Java和JavaScript没有关系；

        >> JavaScript 的组成；

        1)ECMAScript标准-- 定义语法；

        2)BOM-- 代表了整个浏览器；

        3)DOM-- 代表了整个文档；

        >> Java和javascript的区别；

        1) js基于对象，Java是面向对象；

        2) js只需要解析就可以执行，Java需要先编译；

        3) js是弱类型语言；

            

    >> 与HTML的结合；

        1) 通过对象和语句操作标签，显示动态的效果；

        2) 和HTML有两种结合方式；

            |-- <script> 标签；

                格式：

                <script type="text/javascript">

                </script>

                特点：

                可以放在文档的任意位置；

            |-- 引入外部文件；

                格式：

                <script type="text/javascript" src="js文件地址">

                </script>

                注意：

                如果引入了外部文件之后，script标签内部的代码不再被执行；

        3) 扩展问题；

            >> 引入外部文件如果没操作HTML文件，一般放在head中间；

            >> 如果涉及到了操作HTML文件，推荐放在</body> 标签后面；

    >> js的基本语法；

        1)关键字，标识符，注释；

        2)变量；

            声明关键字 var

            js的数据类型：

            Undefined

              |-- 声明变量但没有赋值；

            Null

              |-- 类型为Object；

            Boolean

            Number

              |-- 没有整形和浮点之分；

            String

              |-- "" 和 '' 都代表字符串；

         typeof(变量)：判断传入的变量的类型，技巧：可以查看变量的类型；

         3)运算符：

            3.1)算术运算符；

                |-- 运算结果和现实生活中一样，没有取整操作；

                注意：

                【+】字符串和数字，连接符；

                【-】字符串和数字，直接运算；

                NaN 非法数字，当非数字字符串和数字运算时；

                0/null 为true

                非零/非null 为false

                false默认情况下是1

            3.2)比较运算符；

                |-- 【==】只比较值

                |-- 【===】比较值和类型

        4)语句；

            4.1)判断语句；

                技巧：在条件表达式中将类型写在【==】右边；

                eg：if(num== 10) X

                    if(10== num) O

        5)数组；

            替代了Java中的集合/StringBuffered/StringBuilder等；

            长度可变；

            格式：

            var arrs= ["abc",12,true,"xxx"];

            var arrss= new Array("abc","c",123);

        6)函数：

            声明关键字：function

            >> 注意：

                函数无需定义返回值类型；

                参数列表不能写关键字，直接写变量名；

                没有重载；

                函数内部有个名为agruments的数组来存放传入的参数；

            >> 匿名函数；

                格式：

                var 引用名=function(){

                

                    执行体；

                };

                引用名();

        7)全局变量和局部变量；

            全局变量：

            定义在script标签内部的变量，都是全局变量，

            不单可以在当前标签中使用，还可以在其他标签中使用；

            局部变量：

            定义在方法内部的变量，才是局部变量；

                

# javascript 的常用对象；

        

    >> String;

    属性：

      |-- length -- 字符串长度；

    方法：

      1)和HTML标签相关的方法；

        参见老师的笔记：

      2)和Java中String相关的方法；

        参见老师的笔记：

    >> Array;

    属性：

      |-- length -- 数组长度；

    >> Date;

    方法；

      |-- toLocaleString(); 根据本地时间格式把Date转换成字符串；

      |-- toLocaleDateString(); 只有日期；

      |-- toLocaleTimeString(); 只有时间；

    >> Math;

    >> RegExp(正则)

    格式：

    var reg= new ReExp(表达式);

    var reg= /表达式/;

    var reg= /^表达式$/; (记住该写法，因为上面两种写法不准确)

    方法；

      |-- exec(str) 匹配成功则返回结果；

      |-- test(str) 匹配成功返回true；(记住该写法)

# javascript的全局函数；

    >> 概念：不需要创建对象直接使用的函数；

    eval(); 解析字符串当中的方法，并且将其执行；

    isNaN(); 判断传入的参数是否是非法数值，返回boolean；

# BOM；

    >> 概念：浏览器对象模型；

    >> 常见对象；

        |-- Window -- 窗口对象(重点)；

        |-- Navigator -- 和浏览器版本相关；

        |-- Screen -- 和浏览器屏幕相关；

        |-- History -- 和浏览器屏幕相关；

        方法：

          |-- forward(); 去下一页；

          |-- back(); 去上一页；

        |-- Location -- 和浏览器地址栏相关；

        属性；

          |-- href --获取当前地址的链接；

    >> Window对象；

    方法：

      |-- alert(); 弹出提示框；

      |-- confirm(显示的内容); 弹出询问框；

      |-- setInterval(); 每隔多少毫秒就执行一次；

      |-- setTimeout(); 到多少毫秒之后执行一次；

      |-- clearInterval(清除定时器)；

      |-- open(url,name,features); 打开一个新的窗口；

# DOM；