zoukankan      html  css  js  c++  java
  • JavaScript WebAPI复习(一)

    /*
    *
    * JavaScript分三个部分:
    * 1. ECMAScript标准----JS基本的语法
    * 2. DOM:Document Object Model 文档对象模型
    * 3. BOM:浏览器对象模型
    *
    * DOM的作用:操作页面的元素
    * DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树
    *
    * 获取元素:
    * 2种方式:
    * 根据id从整个的文档中获取元素---返回的是一个元素对象
    * document.getElementById("id属性的值")
    * 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
    * document.getElementsByTagName("标签的名字");
    * 操作基本标签的属性
    * src,title,alt,href,id属性
    * 操作表单标签的属性
    * name,value,type,checked,selected,disabled,readonly
    * 元素的样式操作
    * 对象.style.属性=值;
    * 对象.className=值;
    *
    * 为元素添加事件的操作
    * 事件:就是一件事,有事件源,触发和响应
    *
    * this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象
    *
    *
    * 内置对象:系统自带的对象
    * 自定义对象:自己写的对象
    * 浏览器对象:
    * DOM
    * DOM对象:------->通过DOM方式获取的元素得到的对象
    *
    * 元素:element:页面中的标签
    * 节点:Node:页面中所有的内容,标签,属性,文本
    * 根元素:html标签
    * 页面中的顶级对象---:document
    *

    * 阻止超链接默认的跳转事件: return false;
    * 获取元素的方式
    * 根据id获取元素
    * document.getElementById("id属性的值");
    * 根据标签名字获取元素
    * document.getElementsByTagName("标签的名字");
    *
    *
    * 有的浏览器不支持, IE低版本的浏览器不支持,IE8以下的
    * 根据name属性的值获取元素
    * document.getElementsByName("name属性的值");
    * 根据类样式的名字获取元素
    * document.getElementsByClassName("类样式的名字");
    * 根据选择器获取元素
    * document.querySelector("选择器");返回一个对象
    * 根绝选择器获取元素
    * document.querySelectorAll("选择器");返回数组,多个元素组成的
    *
    * 设置元素的样式的方式
    * 对象.style.属性=值;
    * 对象.className=值;
    *
    *
    * innerText和textContent的兼容问题
    * 目前的浏览器都支持innerText,应该是属于ie的标准
    * textContent本身是火狐支持,IE8不支持
    *
    * innerText和innerHTML的区别
    * 都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHTML
    * 如果要获取标签中的文本,innerText,也可以使用innerHTML
    * 如果想要获取的是有标签,也有文本---innerHTML
    *
    * 自定义属性的操作
    * 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
    * 自定义属性无法直接通过DOM对象的方式获取或者设置
    * 对象.getAttribute("自定义属性名字");获取自定义属性的值
    * 对象.setAttribute("属性名字","值");设置自定义属性及值
    * 移除自定义属性
    * 对象.removeAttribute("属性的名字");
    *

    *
    * 节点:
    * 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
    * 文档:document---页面中的顶级对象
    * 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
    * 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
    * 节点的类型:1标签节点,2属性节点,3文本节点
    * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
    * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
    * nodeValue:标签---null,属性---属性的值,文本---文本内容
    * if(node.nodeType==1&&node.nodeName=="P")
    *
    * 获取节点及元素的代码(下面呢)
    *
    *
    *
    * 元素的创建
    * 三种元素创建的方式
    * 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
    * 2. 父级对象.innerHTML="标签代码及内容";
    * 3. document.createElement("标签名字");得到的是一个对象,
    * 父级元素.appendChild(子级元素对象);
    * 父级元素.inerstBefore(新的子级对象,参照的子级对象);
    * 移除子元素
    * 父级元素.removeChild(要干掉的子级元素对象);
    *
    * 事件的绑定:为同一个元素绑定多个相同的事件
    * 三种方式:
    * 1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
    * my$("btn").onclick=function(){};
    * 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
    * my$("btn").addEventListener("click",function(){},false);
    * 3. 对象.attachEvent("有on的事件名字",事件处理函数);
    * my$("btn").attachEvent("onclick",function(){});
    *

    为元素绑定事件的三种方式:
    * 1.
    * 对象.on事件类型=事件处理函数;
    * 2.IE8不支持
    * 对象.addEventListener("没有on的事件类型",事件处理函数,false);
    * 3.谷歌和火狐不支持
    * 对象.attachEvent("有on的事件类型",事件处理函数);
    *
    * 为元素解绑事件的三种方式:
    * 1.
    * 对象.on事件类型=null;
    * 2.
    * 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
    * 3.
    * 对象.detachEvent("有on的事件类型",事件处理函数);
    *
    * 事件冒泡:元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套
    *
    * 阻止事件冒泡:
    * 两种
    * 1.
    * e.stopPropagation(); e---事件参数对象,谷歌和火狐都支持,IE8不支持
    * IE8和谷歌支持
    * window.event.cancelBubble=true;
    *
    * window.event就是事件参数对象----e是一样的
    *
    * BOM:Browser Object Model 浏览器对象模型---操作浏览器
    * 历史记录的后退和前进 history: back()后退 forward()前进
    * 地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的
    * 获取系统和浏览器的信息的 navigator userAgent属性---获取系统,浏览器的信息的
    *
    *
    * 地址栏上#及后面的内容
    * console.log(window.location.hash);
    * 主机名及端口号
    * console.log(window.location.host);
    * 主机名
    * console.log(window.location.hostname);
    * 文件的路径---相对路径
    * console.log(window.location.pathname);
    * 端口号
    * console.log(window.location.port);
    * 协议
    * console.log(window.location.protocol);
    * 搜索的内容
    * console.log(window.location.search);
    *
    * 定时器:
    * 该定时器会返回自己的id值
    * var timeId=window.setInterval(函数,时间);
    * 执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器
    * window.clearInterval(定时器的id值);清理定时器

  • 相关阅读:
    django--模型层(orm)-查询补充及cookie
    django-模型层(model)-多表相关操作(图书管理练习)
    Linux-正则表达式与三剑客
    网络配置命令优先级和元字符
    Linux-Nginx和NFS
    Linux-内存进程和软件安装
    乌龟棋
    倍增 Tarjan 求LCA
    切蛋糕
    HDU1505 City Game/玉蟾宫/全0子矩阵 悬线法
  • 原文地址:https://www.cnblogs.com/cuilichao/p/9401924.html
Copyright © 2011-2022 走看看