AngularJSBOM DOM Event事件笔记….

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”)属性显示

相关文章