08css、JS

08.css、JS-2018/07/18

• 1.css的属性
  • 文字属性：font-size:大小，font-family字体类型，font-color:颜色
  • 文本颜色：color:颜色，test-decoration下划线(属性值：none/underline),text-align对齐方式（左中右）
  • 背景属性：
    • background-color背景颜色
    • background-image背景图片（属性值URL（“图片地址”））
    • background-repeat平铺方式
      • 属性值：repeat默认横向纵向平铺
      • no-repeat不平铺
      • repeat-y纵向
      • repeat-x横向
  • 列表属性：list-style-type列表前的小标志，list-style-image列表前的小图片（属性值url("图片地址"））
  • 尺寸属性：width宽度height高度
  • 显示属性：
    • display属性：
      • none隐藏,block块级显示，inline行级显示
  • 浮动属性：
    • float属性：left,right；clear:清除浮动（属性值：左右、both）
    • 缺点：（1）影响相邻的元素不能正常显示（2）影响父元素不能正常显示
• 2.css的盒子模型
  • border:
    • border-width边框宽度
    • border-color边框颜色
    • border-style边框线型
    • border-top上边框
    • border-bottom下边框
    • border-left左边框
    • border-right右边框
  • padding:代表边框内壁与内部元素之间的距离（auto居中）
    • 10px代表上下左右间距
    • 1px 2px 3px 4px；上右下左
    • 1px 2px 上下/左右
    • 1px 2px 3px;上/左右/下
    • padding-top上边框
    • padding-bottom下边框
    • padding-left左边框
    • padding-right右边框
  • margin:代表边框外壁与其他元素之间的距离
    • 同padding
• 3.javascript(js)
  • js是可以嵌入到HTML中，是基于对象和事件驱动的脚本语言
  • 特点：（1）交互性（2）安全性：不能访问本地磁盘（3）跨平台
  • js作用
    • 能动态修改（增删）HTML和CSS的代码
    • 能动态的校验数据
  • 被引入的方式
    • 内嵌脚本input type="button" value="button" onclick="alert('xxx')"/
    • 内部脚本：藏在head里边的
      • script type="text/javascript" //<> alert("xxx"); /script //<>
    • 外部脚本 :首先创建一个JS文件，其次在HTML中引入
      • script type="text/javascript" src="demo1.js" /script //<>
      • js代码放在哪都行，但是在不影响HTML功能的前提下，越晚加载越好。

• 4.js基本语法

  • 变量：
    • (1) var x = 5; x='hello'; var y="hello";(''和""相同)
    • (2)x=5;
  • 原始数据类型（typeof）(1/2/3是伪对象，可以调用方法)
    • (1)number数字
    • (2)string字符串类型
    • (3)boolean布尔类型
    • (4)null空类型
    • (5)underfined未定义
  • 类型转换
    • number/boolean转成string,通过toString();
    • 数字字符串string转成number,通过parseInt(),parseFloat();“123xxx”-->123
    • 强制转换：Boolean()强转成布尔（空字符串为假），Number()强转成数字（布尔的true是1,false是0,只能强转数字字符串）。
  • 引用数据类型
    • var obj = new Object();
    • var num = new Number();
  • 运算符
    • (1)赋值运算符 var x = 5;
    • (2)算数运算符
      • - * / % +: 遇到字符串变成连接 -：先把字符串转成数字然后进行运算 *: 先把字符串转成数字然后进行运算 /: 先把字符串转成数字然后进行运算
    • (3)逻辑运算符 && ||
    • (4)比较运算符 < > >= <= != == ===:全等：类型与值都要相等
    • (5)三元运算符 3<2?"大于":"小于"
    • (6)void运算符(点击不跳转)
      • <a href="javascript:void(0);">xxxxxx</a>
    • (7)类型运算符
      • typeof:判断数据类型 返回我的数据类型
      • instanceof：判断数据类型 是否是某种类型 

      • var obj = new Object(); 
        alert(typeof obj);//object 
        alert(obj instanceof Object);//true

  • 逻辑语句

    • (1)if-else语句

      //条件:数字非0 字符串非空就为true  
      if(9){ 
      　　alert("true--"); 
      }else{ 

      　　alert("false--"); 
      }

    • (2)switch语句

      var x = "java"; 
      switch(x){ 
          case "css": alert("css"); break; 
          case "js": alert("js"); break; 
          case "java": alert("java"); break; 
          default: alert("def"); 
      }

    • (3)for 语句

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

    • (4)for迭代

      var arr = [1,3,5,7,"js"]; 
      for(index in arr){//index代表角标 
          //alert(index); 
          alert(arr[index]); 
      } 

• 5.js内建对象
  • (1)Number
    • 创建方式：
      • var myNum=new Number(value);
      • var myNum=Number(value);（强转）
    • 属性和方法：
      • toString():转成字符串
      • valueOf()：返回一个 Number 对象的基本数字值
  • (2)Boolean
    • 创建方式：
      • var bool = new Boolean(value);
      • var bool = Boolean(value);
    • 属性和方法：
      • toString():转成字符串
      • valueOf()：返回一个 Boolean 对象的基本值(boolean)
  • (3)String
    • 创建方式：
      • var str = new String(s);
      • var str = String(s);
    • 属性和方法：
      • length:字符串的长度
      • charAt(index):根据索引，返回字符
      • charCodeAt(index):返回索引字符unicode
      • indexOf(‘char’):返回字符的索引
      • lastIndexOf(‘char’);逆向返回字符的索引
      • split(‘char’);将字符串按照特殊字符切割成数组
      • substr(index，num):从起始索引号提取字符串中指定数目的字符
      • substring(index1，index2):提取字符串中两个指定的索引号之间的字符，包头不包尾
      • toUpperCase();转大写
  • (4)Array
    • 创建方式：
      • var arr = new Array();//空数组
      • var arr = new Array(size);//创建一个指定长度的数据，超出长度还可以加
      • var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
      • var arr = [];//空数组
      • var arr = [1,2,5,"java"];//创建数组直接实例化元素
    • 属性和方法：
      • length:数组长度
      • join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
      • pop():删除并返回最后元素
      • push()：向数组的末尾添加一个或更多元素，并返回新的长度
      • reverse();反转数组
      • sort();排序
  • (5)Date
    • 创建方式：
      • var myDate = new Date();
      • var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
    • 属性和方法
      • getFullYear():年
      • getMonth():月 0-11
      • getDate():日 1-31
      • getDay()：星期 0-6
      • getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
      • toLocaleString();获得本地时间格式的字符串
  • (6)Math
    • 创建方式：
      • Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
      • 不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
    • 属性和方法
      • PI：圆周率
      • abs():绝对值
      • ceil():对数进行上舍入
      • floor():对数进行下舍入
      • pow(x,y)：返回 x 的 y 次幂
      • random():0-1之间的随机数
      • round():四舍五入
  • (7)RegExp
    • 创建方式：
      • var reg = new RegExp(pattern);
      • var reg = /^正则规则$/;
    • 规则的写法：
      • [0-9]
      • [A-Z]
      • [a-z]
      • [A-z]
      • \d 代表数字
      • \D 非数字
      • \w 查找单词字符
      • \W 查找非单词字符
      • \s 查找空白字符
      • \S 查找非空白字符
      • n+ 出现至少一次
      • n* 出现0次或多次
      • n? 出现0次或1次
      • {5} 出现5
      • {2,8} 2到8次,包头包尾
    • 方法： test(str):检索字符串中指定的值。返回 true 或 false
    • 需求：
      • 校验邮箱：

        var email = "haohao_827@163.com";
        var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
        reg.test(email);

• 6.js的函数

  • js函数定义的方式
    • (1)普通方式
      • 语法：function 函数名(参数列表){函数体}
      • 示例： function method(){ alert("xxx"); } method();
      • (2)匿名函数
      • 语法：function(参数列表){函数体}
      • 示例： var method = function(){ alert("yyy"); }; method();
    • (3)对象函数
      • 语法：new Function(参数1,参数2,...,函数体);
      • 注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
      • 示例： 

        var fn = new Function("a","b","alert(a+b)");
        fn(2,5);

  • 函数的参数

    • (1)形参没有var去修饰
    • (2)形参和实参个数不一定相等(可以多不能少，少的形参为undefined)

    • (3)arguments对象，是个数组，会将传递的实参进行封装

      function fn(a,b,c){ 
          //var sum = a+b+c; 
          //alert(sum);
           //arguments是个数组 会将传递的实参进行封装 
          for(var i=0;i<arguments.length;i++){ 
              alert(arguments[i]); 
          } 
      }
      fn(1,2,4,8); 

  • 返回值

    • (1)在定义函数的时候不必表明是否具有返回值
    • (2)返回值仅仅通过return关键字就可以了，return后的代码不执行 function fn(a,b){ return a+b; //alert("xxxx"); } alert(fn(2,3));

  • js的全局函数

    • (1)编码和解码
      • encodeURI() decodeURI() encodeURIComponet() decodeURIComponent() escape() unescape()
      • 三者区别： 进行编码的符号范围不同，实际开发中常使用第一种
    • (2)强制转换
      • Number()
      • String()
      • Boolean()
    • (3)转成数字
      • parseInt()
      • parseFloat()
    • (4)eval()方法
      • 将字符串当作脚本进行解析运行 

        //var str = "var a=2;var b=3;alert(a+b)";
        //eval(str);
        function print(str){ 
            eval(str); 
        }
        print("自定义逻辑");

• 7.js的事件（事件、事件源、响应行为）

  • js的常用事件
    • onclick:点击事件
    • onchange:域内容被改变的事件
    • onfocus:获得焦点的事件
    • onblur:失去焦点的事件
    • onmouseover:鼠标悬浮的事件
    • onmouseout:鼠标离开的事件
    • onload:加载完毕的事件 等到页面加载完毕在执行onload事件所指向的函数

  • 事件的绑定方式

    • (1)将事件和响应行为都内嵌到html标签中<input type="button" value="button" onclick="alert('xxx')"/>
    • (2)将事件内嵌到html中而响应行为用函数进行封装 <input type="button" value="button" onclick="fn()"/>

    • (3)将事件和响应行为 与html标签完全分离 <input id="btn" type="button" value="button"/>

      var btn = document.getElementById("btn"); 
      btn.onclick = function(){ alert("zzz"); };

  • this关键字
    • this经过事件的函数进行传递的是html标签对象
  • 阻止事件的默认行为
    • IE：window.event.returnValue = false;
    • W3c: 传递过来的事件对象.preventDefault();
    • 通过事件返回false也可以阻止事件的默认行为
  • 阻止事件的传播
    • IE：window.event.cancelBubble = true;
    • W3c: 传递过来的事件对象.stopPropagation();

• 8.js的bom

  • (1)window对象

    • 弹框的方法：
      • 提示框：alert("提示信息");
      • 确认框：confirm("确认信息"); 有返回值：如果点击确认返回true；如果点击取消 返回false
      • 输入框：prompt("提示信息"); 有返回值：如果点击确认返回输入框的文本；点击取消返回null

    • open方法： window.open("url地址");

    • 定时器：

      • setTimeout(函数,毫秒值); setTimeout( function(){ alert("xx"); },3000 );
      • clearTimeout(定时器的名称);
      • setInterval(函数,毫秒值);
      • clearInterval(定时器的名称)

  • (2)location：location.href="url地址";

  • (3)history:back();forward();go();