标签：阻止事件冒泡 move 函数名 元素对象 elb 层次结构 自己的 构造 opp
DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树
基本类型(简单类型,值类型):number,string,boolean
复杂类型(引用类型):object
空类型:undefined,null
基本类型的值在栈上
复杂类型的对象在堆上,地址(引用)在栈上值类型之间传递的是值
引用类型之间传递的是引用(地址)其他类型转数字
parseInt()---->转整数
parseFloat()--->转小数
Number()---->转数字-----要比上面两个严格
其他类型转字符串
toString()
String()
其他类型转布尔类型
Boolean()---->要么是true要么是false
+ - * / %+= -= *= /= %== 优先级别是最低的++ -- ++在前，先自增再运算；++在后，先运算再自增> < >= <= == === != !== （结果是布尔类型）&& || ! 与或非 （结果是布尔类型）流程控制: 代码的执行过程
顺序结构:代码的执行的顺序,从上到下,从左到右(不严谨)
分支结构: if,if-else ,if-esle if,switch-case ,三元表达式
循环结构:while 循环,do-while,for循环 for-in循环
总结分支:如果只有一个分支,就用if
如果有两个分支,就用if-else
如果多个分支,一般是范围的,推荐使用if-else if
如果多个分支,一般是具体的值,推荐使用switch-case
总结循环:
while:先判断后循环,有可能一次循环都不执行
do-while:至少执行一次循环体,再判断
for循环:知道了循环的次数,推荐使用for循环
<script>
//冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
var arr = [10, 0, 100, 20, 60, 30];
//循环控制比较的轮数
for (var i = 0; i < arr.length - 1; i++) {
//控制每一轮的比较的次数
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>数组定义的方式:
通过构造函数定义数组
var 数组名=new Array();空数组 Array()就是构造函数
var 数组名=new Array(长度);是设置数组的初始的长度,长度是可以改变的
var 数组名=new Array(值,值,值...);定义数组并设置数组中的元素值
字面量的方式定义数组
var 数组名=[];空数组
var 数组名=[10];这个数组有一个元素,值是10,长度是1
数组变量for(var i=0;i<数组名.length;i++){ }
函数定义:
function 函数名(){
函数体
}函数调用:
函数名();形参:函数定义的时候函数名字后面的小括号里的变量就是参数,是不需要写var
实参:函数调用的时候小括号里传入的变量或者是值,都是实参
* 返回值:函数中如果有return,那么这个函数就有返回值
* 如果函数中没有return,那么这个函数没有返回值
* 如果函数中有return,但是后面什么内容都没有,这个函数没有明确返回值
* 如果一个函数没有明确的返回值,函数调用了,并且接收了,那么此时接收的结果undefined
* 如果直接输出函数名字,那么是这个函数的代码
无参数无返回值的函数
function f1(){
}
有参数无返回值的函数,2个参数
function f2(x,y){
}
无参数有返回值的函数
function f3(){
return 100;
}
有参数有返回值的函数
function f4(x){
return "您好";
}作用域:变量的使用范围
变量：
预解析:在执行代码之前做的事情
面向对象的特性:封装,继承,多态,(抽象性)对象:有属性和方法,具体特指的某个事物
变量 instanceof 对象------->布尔类型,判断这个变量是不是这个类型的
属性----特征
方法----行为
对象分三种:内置对象,自定义对象,浏览器对象
* 内置对象:系统提供的
* 自定义对象：自己写的
* 浏览器对象:浏览器的
创建的对象的3种方式:
JSON格式的数据,都是键值对,成对的数据
var json={
"name":"小明",
"age":18,
"sex":"boy"
};对象设置属性的值的写法
对象获取属性的值的写法
var obj={
"name":"林子闲",
"age":20,
"sex":"男",
"wife":"乔韵"
};
for(var key in obj){ //key---是一个变量,这个变量中存储的是遍历的对象的属性的名字
console.log(key+"========"+obj[key]);
}new的时候，系统做了什么事?
offset系列:
scroll系列:卷曲
client系列:
- 根据id从整个的文档中获取元素---返回的是一个元素对象
document.getElementById("id属性的值")
- 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
- 根据name属性的值获取元素
document.getElementsByName("name属性的值");
- 根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");
- 根据选择器获取元素
document.querySelector("选择器");返回一个对象
- 根绝选择器获取元素
document.querySelectorAll("选择器");返回数组,多个元素组成的this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象
节点:Node:页面中所有的内容,标签,属性,文本
节点的作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素 节点的类型:1标签节点,2属性节点,3文本节点 * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点 * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---`#text` * nodeValue:标签---null,属性---属性的值,文本---文本内容 * if(node.nodeType==1&&node.nodeName=="P")那么这就肯定是一个p标签
根元素:html标签
- 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
- 自定义属性无法直接通过DOM对象的方式获取或者设置
- 对象.getAttribute("自定义属性名字");获取自定义属性的值
- 对象.setAttribute("属性名字","值");设置自定义属性及值
- 移除自定义属性
- 对象.removeAttribute("属性的名字");1 document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
2 父级对象.innerHTML="标签代码及内容";
3 document.createElement("标签名字");得到的是一个对象
* 父级元素.appendChild(子级元素对象);
* 父级元素.inerstBefore(新的子级对象,参照的子级对象);
* 移除子元素 —— 父级元素.removeChild(要干掉的子级元素对象);1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行之前的会被覆盖
my$("btn").onclick=function(){};
2. 对象.addEventListener("没有on的事件名字",事件处理函数,false); `IE678不支持`
my$("btn").addEventListener("click",function(){},false);
3. 对象.attachEvent("有on的事件名字",事件处理函数); `谷歌火狐不支持`
my$("btn").attachEvent("onclick",function(){});addEventListener 和attachEvent的兼容代码
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}1. 对象.on事件类型=null;
2. 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
3. 对象.detachEvent("有on的事件类型",事件处理函数); //获取当前节点的父级节点
console.log(my$("uu").parentNode);
//获取当前节点的父级元素
console.log(my$("uu").parentElement);
//获取当前节点的子级节点
console.log(my$("uu").childNodes);
//获取当前节点的子级元素
console.log(my$("uu").children);
//获取当前节点的第一个子级节点
console.log(my$("uu").firstChild);
//获取当前节点的第一个子级元素
console.log(my$("uu").firstElementChild);
//获取当前节点的最后一个子级节点
console.log(my$("uu").lastChild);
//获取当前节点的最后一个子级元素
console.log(my$("uu").lastElementChild);
//获取当前节点的前一个兄弟节点
console.log(my$("uu").previousSibling);
//获取当前节点的前一个兄弟元素
console.log(my$("uu").previousElementSibling);
//获取当前节点的后一个兄弟节点
console.log(my$("uu").nextSibling);
//获取当前节点的后一个兄弟元素
console.log(my$("uu").nextElementSibling);document.getElementsByTagName("p").innerHTML="<p>这是一个p</p>"; 不仅文本，还能标签等
document.getElementsByTagName("p").innerText="这是一个p"; 只能作用于文本
document.write("<p>这是一个p</p>") 是document对象的一个方法，重绘，既替换之前的整个页面，用的不多事件冒泡：
元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套
阻止事件冒泡：
1. e.stopPropagation(); IE8不支持 e —— 事件参数对象,
2. window.event.cancelBubble=true; 火狐不支持 window.event —— 事件参数对象，和e是一样的 定时器会返回自己的id值，是window对象，但window在写时可省略
复用性定时器
var timeId=window.setInterval(函数,时间); 页面加载完毕后,每过一定时间后执行函数
window.clearInterval(定时器的id值); 清理定时器
一次性定时器
var timeId=setTimeout("alert('hello')",1000); 页面加载完成后,一定时间后只执行一次函数
clearTimeout(timeId);
标签：阻止事件冒泡 move 函数名 元素对象 elb 层次结构 自己的 构造 opp
原文地址：https://www.cnblogs.com/huihuihero/p/10801056.html
