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 用来操作此窗口 , 相同的窗口名称 无法同时展示两个
  config  :   窗口的配置参数
      使用字符串来描述窗口配置, 字符串由多个键值对组成, 键与值之间使用等号连接, 多个键值之间使用逗号分割 .
      -   常用配置参数: 
          -   height  :   窗口高度 px
          -   width   :   窗口宽度 px
          -   left    :   新的窗口距离 屏幕左上角的横向偏移位置
          -   top     :   新的窗口距离 屏幕左上角的垂直偏移位置
  
      -   不常用配置参数:(多数浏览器不支持) 都是boolean类型参数 , 可以指定的值为:yes|no|1|0 
              -   location    :   新窗口是否显示地址栏
              -   menubar     :   是否显示菜单栏
              -   resizable   :   窗口是否可调整大小
              -   scrollbars  :   是否显示滚动条
              -   titlebar    :   是否显示标题栏
              -   tollbar     :   是否显示工具栏
  specs   :   是否允许加载历史文件 true表示允许
  

• 关闭窗口的函数:
  window.close();

定时器

一次性定时器

格式:
setTimeout(“执行的语句”,延迟毫秒);

周期性定时器

• 开启周期性定时器
  格式:
  var x = setInterval(“执行的语句”,周期时长毫秒);
  返回值:周期性定时器对象

• 关闭周期性定时器
  格式:
  clearInterval(周期性定时器对象);

屏幕信息的获取(window子对象 screen) ###

screen : 用于获取屏幕信息的对象
- 获取屏幕宽度
var width = screen.width;
- 获取屏幕高度
var height = screen.height;
- 获取屏幕可用宽度
var width = screen.availWidth;
- 获取屏幕可用高度
var height = screen.availHeight;

window子对象 history

    history:
    函数: 
    back():浏览器后退一页
    forward():浏览器前进一页
    go(数字) , 正数表示前进指定页数, 负数表示后退指定页数

indow子对象location

    location:
    属性: 
        href:表示当前浏览器 加载的网址地址 !
    函数: 
        assign(url) :跳转页面到指定url
        replace(url):替换当前页面到指定url (替换不等于跳转, 被替换掉的页面, 无法通过后退打开)   
        reload(): 刷新网页
    这个知识点, 重要的地方是, 我们可以通过JS的运算, 得到一些数据, 然后通过网址 提交给服务器 !

事件

事件：指 HTML 对象在状态改变、操作鼠标或键盘时触发的动作
鼠标事件
键盘事件
状态改变事件
event 对象
事件触发后将会产生一个 event 对象
-在任何的事件触发的代码中, 都可以通过event对象 来操作
常用属性:
- clientX : 鼠标事件触发时的坐标点X
- clientY : 鼠标事件触发时的坐标点Y
- keyCode : 键盘事件 , 触发时的键盘按键的code值

JQuery

Jquery的onload实现 ###

$(function(){
    //当网页加载完毕时执行
});

选择器

基本选择器

• id选择器
  格式:
  var $obj =$(“#id值”);
• 类选择器
  格式:
  var $obj =$(“.class值”);
• 标签名称选择器
  格式:
  var $obj =$(“标签名称”);

层级选择器

• 子选择器 *
  格式:
  var $obj =$(“父元素选择器>子选择器”);
• 后代选择器 *
  格式:
  var $obj =$(“父元素选择器 后代选择器”);
• 后一个兄弟选择器
  格式:
  var $obj =$(“选择器+兄弟选择器”);
• 后所有兄弟选择器
  格式:
  var $obj =$(“选择器~兄弟选择器”);

筛选选择器

first:匹配第一个元素

last:匹配最后一个元素

not:过滤not条件:$(“div:not(.class)”);

even:匹配下标偶数

odd:匹配下标奇数

eq:选择指定索引值 :$(“div:eq(1)”)

gt:匹配索引值大于x的:$(“div:gt(5)”)

lt:匹配索引值小于x的:$(“div:lt(5)”) 示例:$(function(){
$(“p:first”).css({“color”:”#090”});$(“p:not(#a)”).css({“font-size”:”10px”});
$(“p:gt(2)”).css({“font-size”:”16px”});

});

jQuery常用函数

获取和修改元素文本内容

在原生JS的操作中, 我们使用元素对象的inenrHTML属性 来修改元素的文本内容.

在Jquery中, 提供了两个方法, 可以用来获取/设置文本内容

1.  $obj.html(文本) | var 文本 = $obj.html();
    获取元素文档内容

2.  var 获取文本 = $obj.text()
    获取元素文本内容

html函数与text函数区别:

使用html函数获取文本时, 会获取到子标签 
使用text函数获取文本时, 只能获取到不包含标签的文本内容

获取和修改元素的属性值

在JS代码中, 我们可以通过 dom对象.属性名 来操作一个元素的属性 !
在Jquery中可以通过attr函数 操作所有的属性:
获取属性值:

var  value = $obj.attr("属性名");

设置属性值:

$obj.attr("属性名","属性值");

删除属性值:

$obj.removeAttr("属性名");

修改元素样式

css函数 两个方法的重载:
1. 用于一次指定多个样式
格式: $obj.css(json格式的样式对象); 2. 用于一次指定一个样式 格式:$obj.css(“样式key”,”样式值”);
案例:
$(“img”).css(“box-shadow”,”3px 3px 3px 3px #aaa”);

calss属性值的设置与获取

添加class属性值
$obj.addClass(“值”); 删除class属性值$obj.removeClass(“值”);
替换class属性值
$obj.toggleClass(“值”);

显示和隐藏函数

• 基本效果
  显示: $obj.show(); 隐藏:$obj.hide();
  切换: $obj.toggle();
• 左上折叠效果
  显示: $obj.show(time毫秒); 隐藏:$obj.hide(time毫秒);
  切换: $obj.toggle(time毫秒);
• 上下折叠效果
  显示: $obj.slideDown(time毫秒); 隐藏:$obj.slideUp(time毫秒);
  切换: $obj.slideToggle(time毫秒);
  如果使用到图片上, 元素必须存在确定的宽度 ,才可以实现上下折叠
• 淡入淡出效果
  显示: $obj.fadeIn(time毫秒); 隐藏:$obj.fadeOut(time毫秒);

自定义动画

    $obj.animate(参数1,参数2,[参数3]);
    参数1.    JSON对象, 描述动画执行结果的样式
    参数2.    从当前样式, 过渡到参数1样式的 毫秒时间
    参数3.    可选参数, function类型 , 动画执行完毕的监听函数 (当动画执行完毕, 自动执行此函数)

JQuery事件

绑定和解绑事件

• 绑定事件:
  $obj.bind(“事件类型”,处理函数);
• 解绑事件:
  $obj.unbind(“事件类型”);
• 模拟事件触发:
  $obj.trigger(“事件类型”);

事件函数 ####

    $obj.click(fn)// 当点击
    $obj.dblclick(fn)//当双击
    $obj.blur(fn)//当失去焦点
    $obj.focus(fn)//当获取焦点
    $obj.change(fn)//当状态改变 ,常用于下拉选框
    $obj.keydown(fn)//当键盘按下
    $obj.keyup(fn)//当键盘弹起
    $obj.mouseover(fn)//当鼠标指针位于元素上
    $obj.mouseout(fn)//当鼠标指针从元素上滑出
    $obj.submit(fn)//表单提交事件, 等同于form元素的onsubmit事件, return false 可以阻止表单提交    *****
    $obj.load(fn)//当元素加载完毕
    $obj.unload(fn)//当元素销毁

组合事件

    hover(over,out);
    参数1.    function类型 , 鼠标移入时触发的事件代码
    参数2.    function类型 , 鼠标移出时触发的事件代码

动态绑定事件

格式: 
注意: 添加动态绑定事件的未来元素, 必须有一个已经存在的父元素 !

$父元素对象.on("事件类型","寻找子元素的选择器",func处理函数);

文档函数

• 创建元素
  var $obj =$(“html元素”);
  例如:
  创建一个按钮:
  var $obj =$(‘’);
• 将Jquery元素对象, 添加到网页中
  
  • 通过父元素 向父元素内部追加
    格式: $父元素.append($新元素);
  • 通过父元素 向父元素内部前置
    格式: $父元素.prepend($新元素);
  • 通过一个元素, 向这个元素的后面添加
    格式: $obj.after($新元素);
  • 通过一个元素, 想这个元素的前面添加
    格式: $obj.before($新元素);
• 从网页中 删除一个节点
  格式:
  $要删除的元素.remove();
• 清空一个节点
  格式:
  $要清空的元素.empty();
• 克隆一个节点
  
  • var $新对象 =$原对象.clone(); //克隆元素, 不克隆元素事件;
  • var $新对象 =$原对象.clone(true); //克隆元素, 克隆元素事件;

文档查找

children(选择器) 查找子元素
next() 查找后面的兄弟元素 
prev() 查找前面的兄弟元素
siblings() 查找兄弟元素
find(选择器) 查找子元素及后代元素
parent() 查找父元素
parents(selector) 查找祖先元素

工具函数

$.each 遍历
可应用于 遍历对象 , 遍历数组

• 遍历对象
  遍历Jquery对象, 得到其中的每一个dom对象
  格式:
  $obj.each(function(){
  //在这里this 表示每次遍历的dom对象
  });
• 遍历数组
  遍历一个JS数组, 得到每一个下标的数据
  $.each(数组,function(i,value){
  //i表示遍历时的数据下标
  //value表示遍历时的数据
  });

去除数组中重复元素 (此函数直接操作原数组, 无返回值)

    格式: $.unique(数组);

合并数组: 将两个数组合并 ( 将第二个数组中的所有内容,
追加到第一个数组中)

    格式: $.merge(数组1,数组2);

去除字符串中的前后空格: (不会对原字符串产生影响, 返回值为去除空格的文本)

    格式: 
        $.trim(字符串);

HTML5

获取用户地理位置

步骤:判断浏览器是否支持获取,支持则获取
也可以使用脚本工具进行获取

WEB存储

浏览器存储数据的两个对象:

• localStorage
  没有时间限制的数据存储方式 !在用户未清除浏览器数据时 , 数据一直存在 !

• sessionStorage
  当览器关闭后, 会话结束, 数据清除!

  注意: 这两个对象 ,在操作上, 只是名称不同, api完全一致 !

在使用web存储之前, 应验证浏览器是否支持web存储
(支持的浏览器: IE8+ 和 其他浏览器)

if(typeof(Storage) !== "undefined"){
    //支持web存储
}else{
    //不支持web存储
}

常用函数:

保存数据:   storage.setItem(key,value);
获取数据:   var value = storage.getItem(key);
删除单个数据:storage.removeItem(key);
删除所有数据:storage.clear();
获取指定索引下的key:    var key = storage.key(index);
获取键值对的数量: var length = storage.length;