前端一周01 JavaScript DOM、 事件 e
2017-11-20 本文已影响0人
尘榆骡厌
// 前端
HTML CSS JavaScript
HTML 超文本标记语言
标签
单标签
双标签
h1-h6 标题标签
p 段落标签
div/span 无语义标签
// Javascript
// 变量申明的不同
java:
需要加上数据类型 String name = null;
name 只能储存String类型的值
js:
关键字：var var name = null;
name 可以储存所有类型的值
name = 123;
// 数据类型
js: undefined 未定义
var name;
声明一个变量，不给变量赋值 那么变量的值就是undefined
// 数组
js:
声明一个数组： var arr = []; var arr = new Array();
向数组添加元素
// push() 把元素当做是数组最后一个元素添加到数组中
arr.push("123");
// prop() 把数组最后一个元素从数组中移除
arr.prop();
// join(); 把数组中所有的元素连成一个字符串
arr.join("")
// DOM
document object model //文档对象模型
对我们操作HTML 提供方法
// dom树
// 节点
由dom树的一个结构可以看出
整个文档 -- 他就是一个文档节点
每一个HTML标签都是一个元素节点
标签内的内容其实就是一个文本节点
标签的属性就是属性节点
页面中所有的一切都是节点
// 访问节点
// 1. 获取HTML元素
1. getElementById() // id是唯一
通过元素节点的id名来去获取到元素
获取到是一个单独的元素，直接获取到
console.log() 相当于java中的 System.out.println()
// 在控制台输出
var ep = document.getElementById('p');
console.log(ep); // 在控制台输出 System.out.println()
ep.style.background = 'yellow';
// 1. 获取到HTML的元素
// 2. 操作HTML元素
2. getElementsByTagName()
通过标签名来去获取HTML元素
通过标签名获取HTML元素，它获取的其实是一个元素集合
var ps = document.getElementsByTagName('h1');
// ps 是一个集合 可以通过下标去寻找
// ps 下标是从 0
// console.log(ps[0]);]
ps[0].style.background = 'yellow';
3. getElementsByClassName()
通过class类名来去获取HTML元素
获取到的也是一个集合
var ps = document.getElementsByClassName('p');
// var t = ps[0].innerHTML;
// var t = ps[1].innerHTML;
// // innerHTML 获取元素的内容
// console.log(t);
for(var i=0;i<ps.length;i++){
// System.out.println(ps[i].innerHTML)
console.log(ps[i].innerHTML)
}
style.background // 给元素添加背景色
font-size ...
innerHTML // 获取元素内容
// 2. 修改HTML元素
先获取到元素，才能去修改
var p = document.getElementsByTagName('p')[0];
var btn = document.getElementsByTagName('button')[0];
// 给btn添加点击事件
// onclick 点击事件
btn.onclick = function(){
p.innerHTML = '我是修改后的p标签'
p.className = 'red';
}
// 节点家族
// childNode
获取元素的子节点
text 文本节点 nodeType = 3;
h1 元素节点 nodeType = 1;
div 元素节点 nodeType = 1;
在HTML h1,div,ul 都是标签 对应获取的节点 他就是元素节点
区分节点的类型: 通过nodeType去区分
// children
只是获取元素的子元素节点
var oDiv = document.getElementById('head_container');
var childs = oDiv.children;
console.log(childs);
// previousSibling
找到元素的上一个节点
var ul = document.getElementById('ul');
// previousSibling
var pre = ul.previousSibling;
console.log(pre);
// nextSibling
找到元素的下一个节点
var ul = document.getElementById('ul');
// nextSibling
var next = ul.nextSibling.nextSibling;
console.log(next);
// parentNode
找到元素的父节点
var ul = document.getElementById('ul');
// parentNode
var parent = ul.parentNode;
console.log(parent);
// 3. 创建
// createElement()
创建节点
// 创建节点
// createElement
var h1 = document.createElement('h1');
h1.innerHTML = '我是h1';
console.log(h1);
// 4. 添加
// appendChild()
向元素内添加一个子节点
var p = document.createElement('p');
p.innerHTML = '我是p';
p.style.color = 'blue';
oDiv.appendChild(p);
// 5. 删除
// removeChild()
移除节点
// 向页面添加一个元素
// 向元素中再添加一个元素
// 事件 event
onload 页面加载事件
页面加载完成发生
onunload 退出页面
页面关闭时发生
onclick 点击事件
鼠标点击时发生
ondbclick
鼠标双击时候发生
onmouseover 鼠标移入事件
onmouseenter 同上
输入移入目标时发生
onmouseleave 鼠标移出事件
onmouseout 同上
鼠标移出目标时发生
onmousedown 鼠标按下事件
鼠标按下时发生
onmouseup 鼠标弹起事件
鼠标弹起时发生
onmousemove 鼠标移动事件
鼠标移动时发生
event 事件对象
在一个事件发生时它都会伴随着一个事件对象
onkeyup 键盘按键弹起时执行 只执行一次
onkeydown 键盘按下时执行 可以执行多次
onkeypress 键盘按下之后弹起之前执行执行 ，输出字符 可以执行多次
onfocus 输入框（input）获取焦点时候发生
// onfocus 获取焦点
inp.onfocus = function(){
console.log('hello');
}
onblur 输入框（input）失去焦点时候发生
// onblur 失去焦点
inp.onblur = function(){
console.log('beybey');
}
oninput 输入框（input）在输入的时候发生
// oninput 输入时候发生
inp.oninput = function(){
var v = inp.value;
console.log(v);
}
onsubmit 表单提交时发生
// onsubmit
info.onsubmit = function(){
if(user.value != "" && user.value.length >= 3){
if(pas.value != "" && pas.value.length >= 6){
console.log(user.value,pas.value)
alert('表单提交了')
}else{
alert('密码长度不能小于6');
return false;
}
}else{
alert('用户名长度不能小于3');
return false;
}
}
onreset 重置 <input type='reset' />
<input type="reset" value="重置" />
//<div class="box">
</div>
<button>添加</button>
<button>删除</button>
<button>返回</button>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var btn = document.getElementsByTagName('button')[0];
var btn1 = document.getElementsByTagName('button')[1];
var btn2 = document.getElementsByTagName('button')[2];
// add
btn.onclick = function(){
var span = document.createElement('span');
oDiv.appendChild(span);
}
// remove
btn1.onclick = function(){
// removeChild()
var span = document.getElementsByTagName('span');
for(var i=span.length-1;i>=0;i--){
oDiv.removeChild(span[i]);
}
}
btn2.onclick = function(){
// removeChild()
del(0);
}
function del(num){
var span = document.getElementsByTagName('span');
// span是一个集合，不能直接删除
if(span.length != 0){
oDiv.removeChild(span[num]);
}
}
</script>
Xshot-0032.png
<script>
var oDiv = document.getElementsByClassName('box')[0];
// 鼠标按下
oDiv.onmousedown = function(event){
var disx = oDiv.offsetLeft; // div距窗口左边的距离
var disy = oDiv.offsetTop;// div距窗口上边的距离
var mX = event.clientX; // 鼠标按下时的横坐标
var mY = event.clientY; // 鼠标按下时的纵坐标
var dX = mX - disx; // 鼠标按下时距离盒子左边的距离
var dY = mY - disy; // 鼠标按下时距离盒子上边的距离
console.log(dX,dY);
document.onmousemove =function(event){ // 鼠标移动的时候，让盒子跟着鼠标一起走
var x = event.clientX; // 鼠标移动时的横坐标
var y = event.clientY; // 鼠标移动时的纵坐标
var px = x - dX; //鼠标移动时盒子距离窗口左边的距离
var py = y - dY; //鼠标移动时盒子距离窗口上边的距离
//oDiv.style.marginLeft = px + 'px';
//oDiv.style.marginTop = py + 'px';
if(px<0){
px = 0;
}
if(py<0){
py = 0;
}
var sW = document.body.clientWidth;
var sH = document.body.clientHeight;
if(px>sW-oDiv.offsetWidth){
px = sW-oDiv.offsetWidth;
}
if(py>sH-oDiv.offsetHeight){
py = sH-oDiv.offsetHeight;
}
oDiv.style.left = px + 'px';
oDiv.style.top = py + "px";
return false;
}
document.onmouseup = function(){ // 鼠标松开的时候，解绑鼠标移动事件
document.onmousemove = null;
}
}
</script>
