那年学过的Web前端笔记

XML

XML中的注意事项:

HTML

CSS

JavaScript

控制台对象console

• 普通日志输出:
  console.log(文本);
• 错误信息输出:
  console.error(文本);
• 提示信息输出:
  console.info(文本);
• 警告信息输出:
  console.warn(文本);
• debug信息输出:
  console.debug(文本);

Math类

• 随机数:
  Math.random(); 产生一个0-1的随机浮点型数字
• 四舍五入:
  Math.round(x); 将浮点数字 , 四舍五入为整型数字

Number

• 转换数字:

    var  整型数字 = parseInt(字符串);
    var 整型|浮点型 = new Number(字符串);
  

• 截取数字:

    number.toFixed(小数点后保留位数);
  

正则表达式

步骤:
1. 创建正则表达式对象
var 对象名 = /正则表达式字符串/g;
2. 通过正则表达式对象的test方法, 验证数据是否匹配正则
var flag = 正则对象.test(要验证的数据); 返回值为boolean类型

    	案例: 
	    function testx(val){
	        var reg = /^(13[0-9]|14[4789]|15[012356789]|17[0-9]|18[0-9])[0-9]{8}$/g;
	        var flag = reg.test(val);
	        if(flag){
	            alert("用户名可用");
	        }else{
	            alert("很遗憾, 用户名不可用");
	        }
	    }

URI编码

• 将文字进行uri编码:
  var uriCode = encodeURI(“文字”);
• 将uri编码文字 进行解码
  var text = decodeURI(uriCode);

HTML DOM对象

通过文档对象(document) , 获取元素对象
四种方式:

• 通过元素的id属性, 获取一个元素对象
  var element = document.getElementById(“id值”);

• 通过元素的标签名称, 后获取一个元素对象数组
  var elements = document.getElementsByTagName(“标签名”);

• 通过元素的name属性值, 获取一个元素对象数组
  var elements = document.getElementsByName(“name属性值”);

• 通过元素的class属性值 , 获取一个元素对象数组
  var elements = document.getElementsByClassName(“class属性值”);

元素属性值的操作
属性值获取:
var value = 元素对象.属性名;

属性值设置:
元素对象.属性名 = 值;

特殊的属性操作:

• class属性值的设置与获取:

     获取属性值: 
     var classx = 元素对象.className;
     设置属性值:
     元素对象.className = class值;
  

• 设置与获取元素的文本内容

  获取文本内容:
  var text = 元素对象.innerHTML;
  设置文本内容:
  元素对象.innerHTML = 文本内容;
  

节点对象

查找元素节点

• 一次得到一个节点:
  • 元素对象.parentNode: 获取父元素
  • 元素对象.firstChild: 获取第一个子元素
  • 元素对象.lastChild : 获取最后一个子元素
• 一次得到一组节点:
  • 元素对象.childNodes: 获取所有子元素 (返回值为元素数组)

节点分类

元素节点分为:

文本节点    :   通过层次获取节点时, 会得到文本节点 , 比如: 通过父元素 获取所有子元素 , 就是包含文本节点 + 元素节点的
属性节点        :   通过元素调用attributes属性, 得到所有属性对象 !

所有的节点对象, 都拥有如下三个特殊的属性:

-   nodeName    :    用于获取节点名称
-   nodeValue   :    用于获取节点值 (元素节点为null , 文本节点为文本内容, 属性节点返回属性值)
-   nodeType    :   获取元素类型: 1表示元素节点 2表示属性节点  3表示文本节点

节点的操作

• 创建节点
  var element = document.createElement(“节点名称”);
• 插入节点
  通过父元素, 追加子元素
  父元素对象.appendChild(子元素对象);
  通过父元素 ,并提供一个参考子元素, 插入参考子元素之前 !
  父元素对象.insertBefore(子元素对象,参考元素);
  如果不存在参考元素, 则效果为追加 !
• 删除节点
  父元素.removeChild(子节点对象);

window对象

• 打开新窗口
  格式:
  var newWindow = window.open(url,[name],[config],[specs]);

    url     :   新打开的窗口 加载的资源地址
    name    :   新窗口的唯一标识, 不是展示出的窗口标题 ,类似窗口id