前端学习(二十四）一些总结（笔记）
javascript的组成部分？
ECMAScript 核心解释器
DOM 文档对象模型
BOM 浏览器对象模型
DOM
DOM树
html页面的结构关系
获取子节点
父级.children 获取第一层子节点
获取父节点
结构父级
oEle.parentNode
定位父级
oEle.offsetParent
创建节点
document.createElement('标签名');
插入
父级.appendChild(新节点);
从父级的后面添加
父级.insertBefore(新节点,在谁之前插入);
在某个节点之前插入
删除
父级.removeChild(子节点);
事件
事件对象
包含了事件触发的详细信息
ev 高版本浏览器
event 低版本浏览器
oBtn.onclick = function(ev){
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.pageX
oEvent.pageY
};
事件绑定(事件监听)
oEle.addEventListener('sEv', fn, false);
高版本
oEle.attachEvent('onsEv', fn);
低版本
定义函数
function addEvent(obj, sEv, fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
调用
addEvent(oBtn,'click',function(){
alert(1);
});
事件解绑
定义函数
function removeEvent(obj, sEv, fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
调用
removeEvent(oBtn,'click',function(){
alert(1);
});
匿名函数不能被解绑
原因：匿名函数虽然长得一样，但是不是一个
var show = new Function();
function show(){}
事件流
DOM事件流
冒泡阶段 捕获阶段
IE事件流
冒泡阶段
取消冒泡
ev.cancelBubble = true;
默认事件、默认行为
浏览器自己实现的功能
阻止默认事件
return false;
遇到addEventListener不兼容
ev.preventDefault&&ev.preventDefault();
事件委托、事件委派、事件派生
给父级添加事件
获取事件源
var oSrc = ev.srcElement||ev.target;
onmouseover和onmouseout的bug
换事件
onmouseenter
onmouseleave
DOMReady
方法一 推荐
document.addEventListener('DOMContentLoaded',function(){
},false);
方法二
document.onreadystatechange = function(){
if(document.readyState=='complete'){
}
};
================================================================
键盘事件
键盘按下事件
onkeydown
键盘抬起事件
onkeyup
区分按键：键码
oEvent.keyCode
backspce 8
回车 13
空格 32
=============================================================
拖拽回放
=============================================================
jquery
$(function(){
})();
推荐以下做法
$(document).ready(function(){
});
DOM操作
appendTo
prependTo
remove
------------------------------------------------------------
JQuery中的事件
都是绑定上去的
$().on 绑定事件
$().off 解绑事件
事件委托
$('ul').on('click','li',function(){
});
=============================================================
原生对象和jquery对象
原生对象
document.getElementById();
document.getElementsByTagName();
jquery对象
$();
原生对象和jquery对象不互通。
原生对象和jquery对象之间的转换
原生对象-》jquery对象
$(原生对象)
jquery对象-》原生对象
$().get(下标)
$()[下标]
$().each() //操作jquery元素的
$('ul li').each(function(index,oEle){
index 索引
oEle 遍历出来的原生对象
this 遍历出来的原生对象
oEle==this
});
=============================================================
获取相对位置
obj.offsetLeft
obj.offsetTop
$().position()
--------------------------------------------------
获取绝对位置
getPos().left/top
$().offset()
=============================================================
宽
$().width()
高
$().height()
宽+padding*2
$().innerWidth()
高+padding*2
$().innerHeight()
宽+padding*2+border*2
$().outerWidth()
高+padding*2+border*2
$().outerHeight()
=============================================================
插件机制
定义一个插件
$.fn.toRed = function(){
this.css('background','red');
};
批量定义插件 √
$.fn.extend({
名字:function(){}
});
============================================================
jquery中
return false
阻止默认事件
取消冒泡
============================================================
CSS3
选择器
transition
transform
text-shadow
linear-gradient
radial-tradient
border-radius
animation
-webkit-mask
浏览器前缀
box-shadow: x y blur color;
=====================================================
浏览器前缀
-webkit- Chrome、Safari、Opera
-moz- Firefox
-ms- IE
-o- Opera
不加前缀
-webkit-transition:1s all ease;
-moz-transition:1s all ease;
-ms-transition:1s all ease;
-o-transition:1s all ease;
transition:1s all ease;
用js操作浏览器前缀
css js
-webkit-transition WebkitTransition
-moz-transition MozTransition
-ms-transition msTransition
-o-transition OTransition
transition transition
setC3Style(obj,sName,sValue);
transform 变形
rotate 旋转 deg
translate 平移
scale 缩放
原点
中心点
transform-origin
CSS3简易时钟
1圈 360°
12h 1h == 30°
60m 1m == 6°
60s 1s == 6°
5 1
10 2
15 3
20 4
==============================================================
transform 多个值
有先后执行顺序，后面的先执行
transform 注意
不能操作行元素
文本切片
-webkit-background-clip:text;
-webkit-background-clip 一定要设置在背景颜色后面
==============================================================
移动端
手机、平板、watch、电视
pc端怎么写，移动端就怎么写。
而且还简单了。不需要注意兼容。东西少。
只不过移动端需要注意尺寸。
移动端方式：
定宽
百分比
----------------------------------------------
响应式
只有一套页面，在不能尺寸的设备上用不同的样式
弹性
rem
=============================================================
总结:
键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
获取键码
oEvent.keyCode
JQuery
$(document).ready();
事件
$().on(sEv,['委托'],function(){});
off
循环
$().each(function(index,oEle){
index 索引
oEle 原生对象
this 原生对象
});
原生对象和jquery对象的转换
原生对象-》jquery对象
$(原生)
jquery对象-》原生对象
$()[下标]
$().get(下标)
宽高
$().width()
$().height()
宽高+padding
$().innerWidth()
$().innerHeight()
宽高+padding+border
$().outerWidth()
$().outerHeight()
获取定位
相对定位
$().position().left/top;
绝对定位
$().offset().left/top;
插件扩展
//jquery中所有的this都是原生对象，只有一个例外
插件中的this是jquery对象
$.fn.xxx = function(){
};
$.fn.extend({
xxx:function(){}
});
取消冒泡，阻止默认事件
return false;
单独阻止默认事件
ev.preventDefault()
单独取消冒泡
ev.stopPropagation();
-------------------------------------------------------
CSS3
浏览器前缀
-webkit- Chrome,Safari,Opera
-moz- Firefox
-ms- IE
-o- old Opera
不加前缀
transform
原点
-webkit-transform-origin
transform的书写顺序：
后写的先执行
文本切片
-webkit-background-clip:text;
切记，一定要写在背景色后面。
