js基础01

javascrip

最流行的脚本语言

几个框架与库

jQuery angular(模块化) react(虚拟DOM) vue axios

ui框架

ant-design elementui iview bootstrap amazedui

引入javascrip

1.内部标签

可以放在body与head中

<script>…………</script>

2.外部引入

<script type="text/javascriptt" src="js/popup.js"></script>

DOM

document object model 文档对象模型

节点 构成html文档的最基本单元

文档节点 整个html文档

元素节点 标签

属性节点 标签的属性

文本节点 文本内容

获取元素节点

1.通过document对象调用

getelementbyid 通过id获取一个元素节点对象

getelementsbytagname 通过标签名获取一组元素节点对象

getelementsbyname 通过那么属性获取一组元素节点对象

2.通过具体的元素节点调用

getelementsbytagname 返回当前节点的指定标签的后代节点

childnode children firstchild lastchild 获取后代

parentnode previoussibling nextsibling 获取父节点与兄弟节点

3.通过query选择器查询

document.queryselector(.类名 标签) 只返回第一个符合要求的值

document.queryselectorall(.类名 标签)

dom的增删改查

//实现创建<li>广州</li>
//创造元素节点，需要一个标签名的参数，该方法将创建好的对象作为返回值返回
var li=document.createElement("li")
//创建一个文本节点对象，需要文本内容作为参数，将新的节点返回
var text=document.createTextNode("广州")
//向父节点中添加一个子节点
li.appendChild(text)

//在指定的子节点前插入新的子节点
city.insertBefore(新节点，旧节点)

//替换父节点de子节点
city.replace(新节点，旧节点)
//删除父节点de子节点
city.remove(删除节点)
//

事件

事件是用户和浏览器之间的交互行为 关注的是事件发生之后的处理过程

onclick ondblclick onmousemove……等等

dom.onclick=function(){
alert()
}

事件对象

当事件的响应函数被触发的时候，浏览器都会将一个事件对象作为实参传递进响应函数

在事件对象中封装了当前事件的一切信息，如鼠标坐标，哪个按键被按下，鼠标滚轮滚动的方向

//获取坐标
dom.onmousemove=function(even){
    var x=event.clientX;
    var y=event.clientY;
}

事件的冒泡：

冒泡指的是事件的向上传递，当后代元素的事件被触发的时候，其祖先元素的相同事件也会 被同时触发

默认为冒泡，要取消冒泡需要在event中调用cancelbubble

事件的委派

将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数处理事件

事件的绑定

使用对象.事件=函数的形式绑定的响应函数 只能同时为一个元素的一个事件绑定一个响应函数不能绑定多个，如果绑定多个，后米娜的函数会覆盖掉前面的

使用addeventlistener可以同时为一个元素的相同事件同时绑定多个相应函数，当事件被出发的时候，响应函数将会按照函数的绑定顺序执行,如下列程序，点击btn1后会依次弹出123

btn1.addEventListener("click",function(){alert(1)},false)
btn1.addEventListener("click",function(){alert(2)},false)
btn1.addEventListener("click",function(){alert(3)},false)

但是addeventlistener不支持，需要使用attackevent函数，但是与addeventlistener执行顺序会相反，321

事件的传播

关于事件传播网景公司和微软公司有不同的理解；
微软公司认为事件其实应该从内向外传播，也就是事件触发时，应当先触发当前元素上的事件然后在向当前元素的祖先传播，也就是说事件应该在冒泡阶段执行，
网景公司认为事件应该是从外向内传播，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素；

最终，w3c综合了两个公司的方案，将事件传播分成了三个阶段，
1，捕获阶段
在捕获阶段时，从最外层的祖先元素向目标元素进行事件的捕获，但是此时并不会触发事件，
2，目标阶段
事件捕获到目标元素；
3，冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

通过style读取设置的是内联样式，无法读到css样式

js修改的是内联样式，无法修改css样式

//元素名.style.样式值=设定值
window.onload=function () {
var box1=document.getElementById("box1");
var box_button=document.getElementById("box_button")
var information_button=document.getElementById("information_button")
//修改样式
  box_button.onclick=function () {
    box1.style.backgroundColor="red";
    box1.style.height="300px";
    box1.style.width="300px";
}
//读取样式
  information_button.onclick=function(){
    alert(box1.style.backgroundColor);
  }
}

currentstyle 读取当前样式（只有ie浏览器支持）

getComputedStyle() 获取当前元素的样式 该方法会返回一个对象，对象中封装了当前元素的样式 (只读，不能修改，通过style修改)

//除ie8以外
var obj = getComputedStuly(box1,null)
alert(obj.height)
//ie8
box.currentstyle.height