BOM DOM 伊芙nt事件笔记….

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//浏览器内容区域坐标

}

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

},false);是不是冒泡
重复添加监听时候 要先remmove伊夫ntListener
再次监听二个对象 相同函数执行二次

事件流机制 时间指标 触发单击事件目的

——IE监听器——————-
IE 事件处理函数 IE8 不帮忙W3C的现代绑定方法(add,)
IE中 事件监听器 attach伊芙nt(‘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(“”,””)
//属性选拔器
AngularJS,$(“[name]”).css();
//选中以 隐藏
$(“[sec$=’.jpg’]”).hide();

var div = document.getElementsByTagName(‘div’)[0];
$(“div”)[0]

//组合选拔器
$(“p,li”).html(“…”);
//关联选用器
$(“p span”).htnl(“…”);//直接关系能够
//父子选拔器
$(“div >span”).html(“…”);//直接关乎 直接不得以
//得到下1个 标签选用器
$(“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(“两千”)选拔到标签
visibility:hidden;图形隐藏
$(“div:visible”).css(“…”,”…”)采用到标签
input type=”hidden” 隐藏
$(“div:hidden”).attr(“type”,”button”)属性展现

相关文章