BOM DOM Event事件笔记....

Posted 2020-08-06 SessionOne

js//获取文件标题
document.body //body
document.title //网页标题
document.doctype//文档对象
document.url//路径

//服务器相关
//align
document.domain//域名

//---操作文本节点---

//获取父节点
var arrayObj = document.getElementsByTagName(‘div‘);
for(var i = 0 in arrayObj){
alert(arrayObj[i].nodeType);
}
//创建文本节点
var text1 = document.createTextNode(‘这是‘);
var text2 = document.createTextNode(‘内容‘);
//--添加节点
arrayObj[0].appendChild(text1);
arrayObj[0].appendChild(text2);

//--合并文本节点
arrayObj[0].normalize();
//
//--拆分文本节点splitText(2)
//0-2不含2
//--删除节点内容childNodes.deleteData(0,2);
//
//--插入文本节点内容insertDate(0,‘插入后‘)
//
//位置,替换量,‘新的内容
//--替换文本内容replaceData(0,4,‘0000‘)
//
//
//--截取substringData(位置,长度);
//
//.children忽略空白文本节点
//
//--滚动到指定位置scrollIntoView();
//--DOM操作表格
//--表格主体 table对象
//.tHead 头
//.tFoot 尾
//.tBodies[0];主体部分
//.tBodies[0].rows所有行
//.tBodies[0].rows[0].cells所有单元格
//.tBodies[0].rows[0].cells[0].innerhtml内容
//删除 表中元素操作
//deleteCaption();表名
//deleteTHead();表头
//deleteTFoot();表尾
//.tBodies.deleteRow(2);删除哪一行
//.tBodies.rows[0].deleteCell;s删除那行那个单元格

//--DOM操作CSS
//window.onload=function(){
//获取id
var divs = document.getElementById(‘‘)
//divs.style.color颜色
//style.backgroundColor
//浮动 .cssFloat属性
//--获取计算样式
//var obj = window.getComputedStyle(具体元素divs,伪类‘:hover‘)=计算后的样式表最终显示元素时
//IE中有另外一个样式 div.currentStyle
//兼容性问题
//var styleObj= window.getComputedStyle(具体元素divs,伪类‘:hover‘)?div.currentStyle:
//window.getComputedStyle ? window.getComputedStyle() : NUll || div.getComputedStyle;
//
//
//}
//修改ID改变css样式不建议
//两个类选择器css样式可同时起作用 可以叠加 样式冲突问题
//.className = ‘class1 class2‘;
//.className = ‘null‘;
//
//--操作外联样式link href = ".css"
//标签选择器 id选择器 类选择器
//body #id .class
//拿到link标签
// var linkarr = document.getElementsByTagName(‘link‘);
// linkarr.sheet; //IE :styleSheet 样式表对象
// document.styleSheet;//返回的文档的全部样式
var style2 = document.styleSheet[0];
style2.disabled = true;//禁用属性
styleSheet.title;//文档内嵌时给style添加属性

style2.cssRules[0];//css规则列表 chrome在服务器好使
style2.cssRules[0].cssText;//css文本字符串
style2.cssRules[0].selectorText;//获取选择器的名称,字符串

//IE拿到CSS规则列表
//style2.rules;
//插入样式CSS规则 完整的选择器 插入位置0
style2.insertRules(‘p{color:red;}‘,0);
//删除CSS规则 下标
style2.deleteRule(0);

//IE中可使用的 样式选择器名称 规则 位置
style2.addRule(‘p‘,‘background-color:red‘,0);

//IE删除CSS规则 位置
style2.removeRule(0).style
//选择器名称
//

//css内容溢出增加滚动条 overflow:sctoll
// 滚动条影响内容尺寸ClientWidth = 大小-滚动条宽度
//
//获取的是滚动内容的宽高 scrollWidth Height
//外边距不影响实际尺寸
//内边距影响实际尺寸

//--获取内容实际尺寸
//三种方法
//(1)offsetWidth Height
//(2)scrollWidth Height
//(3)ClientWidth Height
//
//--获取元素周边的距离
//offsetTop Left
//clientTop Left
//getBoundingClientRect()方法 返回对象是四个方向距离
//etBoundingClientRect().Top right left
body.scrollTop = scrollHeight
锚点
####封装跳到顶部
scrollTop=0;

var obj = document.getElementById("button-id");
var bodys = document.getElementById("body");
obj.addEventListener(‘click‘,toTop)
function toTop(){

if (bodys.scrollTop != 0) {
bodys.scrollTop = 0;
};

}

------------------------------事件-------------------------------
行内添加属性<input onclick = "function()">
外联的属性 .onclick = 函数不带括号

常用事件:
可以在客户端的事件 :鼠标事件 键盘事件 HTML事件
change文本框失去焦点 blur表单对像失去焦点 click点击 load加载
鼠标在元素上移动时onmousemove 改变窗口大小时onresize
双击ondblclick

事件详解:
(1)鼠标事件
onmousedown 鼠标按下 按下触发
onmouseup 鼠标抬起 抬起触发
onmouseOver 鼠标经过 一次经过触发
onmousemove 鼠标移动 鼠标移动触发
onmouseout 鼠标移出 移出触发
(2)键盘事件
不需要调用者
onkeydown 键盘按下 按下触发
onkeypress 键盘重按下 字符键触发
onkeyup 键盘抬起 抬起触发
(3)input事件
onselected 选中事件 文本选中后触发
onchange 文本改变 文本改变后触发
onfocus 获取焦点状态 在焦点状态时触发
onblur 失去焦点 失去焦点时触发 结束编辑后触发
(4)HTML事件
window.onload 加载文档
window.onunload
window.onresize 重新调整浏览器大小 开始结束调用两次
window.onscroll 滚动触发 chrome IE刷新调用 其他不会
(5)表单事件 借助于form
获取表单对象
提交属性 submit
重置属性 reset

form.onsubmit 提交事件 点击提交按钮触发
form.onreset 重置事件 重置按钮触发

 

事件对象
(1)鼠标对象
0 1 2 W3C
左 中 右按键
0 1 2 3 4 IE
空 左 右 左右一起 中键

//兼容性方法
//隐藏参数event就是事件对象例子:
function (event){
alert(event.button);// 0 1 2 3 4 值
var eve = event||window.evente;
//判断是否是W3C标准 或 IE标准
if (event){
return event.button;
}else if(window.event){
switch(){//IE转W3C
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}
调用
button.onclick = function (event){

}

(2)屏幕坐标
事件对象调用 隐藏对象 坐标属性

document.onclick = function (event){
event.clientXY//浏览器可视区域坐标
event.screenXY//显示器可视区域坐标
event.pageXY//浏览器内容区域坐标

}

对象添加监听器2016.8.24
----addEventListener(‘load‘,function(){

},false);是否冒泡
重复添加监听时候 要先remmoveEventListener
重复监听一个对象 相同函数执行一次

事件流机制 时间目标 触发单击事件对象

------IE监听器-------------------
IE 事件处理函数 IE8 不支持W3C的现代绑定方法(add,)
IE中 事件监听器 attachEvent(‘onload‘,函数)
detachEvent(‘onload‘,函数)
注意:
不能省略on
能事件覆盖 但有顺序倒序问题

IE中this传递不了事件对象
this==Window

解决获取事件对象 冒泡捕获
e = window.event;
e.scrElement = 事件目标==触发对象
e.scrElement.attachEvent

事件兼容 IE 与 W3C
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);//W3C
}else if(obj.attachEvent){
obj.attachEvent(‘on‘+type,fn);//IE
}
}
addEvent(window,‘click‘,函数名);

 

//=================//=================//=================

表单处理
form获取
var fm = document.forms[0];
var fm = document.forms["yourForm"];

======禁止表单提交
需要获取form 表单
e.preventDefault()方法禁止
form.submit(); 提交 按钮上加事件调用方法

获取外联样式表的 getComputerStyle(div)["width"];只读 IE不支持
IE支持
function getStyle( obj,attr){
if(obj.getComputerStyle){
getComputerStyle(obj)[attr];
}else{
obj.currentStyle[attr];
}

}
============js动画 ===============================
(1)速度动画
实现: ./JS动画
============框架================
./JS动画框架
============链式动画============
分步骤动画
==============================
=============================jquery =========================

AngularJS框架 React框架 node.js

//css属性
$(#id).css("color","颜色");
//行内样式属性
$(#id).attr("style","color:red");
$(#id).attr("name","login");

//通配符*选择器
$("*").css("","")
//属性选择器
$("[name]").css();
//选中以 隐藏
$("[sec$=‘.jpg‘]").hide();

var div = document.getElementsByTagName(‘div‘)[0];
$("div")[0]

//组合选择器
$("p,li").html("...");
//关联选择器
$("p span").htnl("...");//间接关系可以
//父子选择器
$("div >span").html("...");//直接关系 间接不可以
//拿到下一个 标签选择器
$("p+li").css("...")

//拿到后面所有标签 选择器
$("p~li").css("...")) ;

//并且过滤选择器
$("li:first").css("...");最后一个
$("li:last").css("...");第一个
$("li:eq(3)").css("...");下标为3的li标签
$("li:gt(3)").css("...");大于下标 属性 不包括下标值
$("li:lt(3)").css("...");小于下标 不包括下标值
$("li:gt(0)":lt(3)).css("...");大于0小于3下标 包括小于lt的下标
$("li:even").css("...");//下标为偶数
$("li:odd").css("...");下标为奇数

//not(选择器)去除某个点
$("li:not(#div-id)").css("");

//内容过滤选择器
$("div:countains("123")").css("...");包含123的选择器
//获取空元素
$("div:empty").css("...");
//当前的li中是否含有p 拿到p
$("li:has(p)").css("...");
=========================可见性选择器=======
隐藏:style display:none;//位置也被隐藏
$("div:hidden").show("3000")选择到标签
visibility:hidden;图形隐藏
$("div:visible").css("...","...")选择到标签
input type="hidden" 隐藏
$("div:hidden").attr("type","button")属性显示