0001:原生的ajax的封装
0002:事件代理。
0003:
1.DOM基础
getElementById
getElementByTagName
getElementByName
getElementsByClass
querySelector
querySelectorAll
getAttribute
setAttribute
removeAttribute
domobj.tagName
domobj.innerHTML
innerHTML与innerText的区别。http://akunamotata.iteye.com/blog/440863
domobj.id
domobj.title
domobj.style
domobj.className
document.getElementsByTagName('li')[0]
document.getElementsByTagName('li')[0].value
document.getElementsByTagName('li')[0].checked
document.getElementsByName('add')[0].value
下面两种获取属性的方法相同:
document.getElementById('box').getAttribute('mydiv')
==============================================
属性 :
childeNodes
innerHTML
style
firstChild 返回第一个子节点
lastChild
返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling
返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName
返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
==============================================
原生操作dom的方法。
appendChild(node)
removeChild(childreference)
cloneNode(deepBoolean) 但是id属性会被修改
insertBefore(newElment,targetElement) 当前节点前插入新的节点
==============================================
2.层级节点属性
childNodes
原生js中常用的方法,内置对象,机制
1.js遍历数组和对象。用for遍历数组用for in 遍历对象。
2. foreach在原生的js中Array并没有这个方法,需要去模仿,本质太过复杂,自己去网页上看吧(本地);
3. document.a.b.value;
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超过50个字符!");
document.a.b.focus();
return false;
}
}
</script>
<form name=a οnsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>
4. DOM2下addEventListener attachEvent的区别。
-----------------------------------------------------------------------
addEventListener与attachEvent的区别(之所以用他的原因1.绑定位置元素。2.可以解绑。3.可以绑定多个元素)
1. 支持的浏览器
addEventListener在支持DOM2的浏览器中使用,如FF, Chrome等
attachEvent为IE所用
2. 处理程序执行阶段
addEventListener的第三个参数为true时,在捕获阶段执行,为false时,在冒泡阶段执行
attachEvent的均在冒泡阶段执行
3. 作用域
addEventListener的作用域为元素作用域,this为element的引用
addEvent的为全局作用域,this为window的引用
4. 事件处理程序执行顺序
addEventHander:执行顺序与添加顺序一致
attachEvent:执行顺序与添加顺序相反
5. element.removeEventListener(type, handler, phase);
参数必须与addEventListener的参数一样。注意:handler不可以是匿名函数
6.3.5 移除事件处理程序
element.detachEvent(type, handler);
参数必须与attachEvent的参数一样。注意:handler不可以是匿名函数
js也可以触发自定义事件,但是我们不知道何用。
------------------------------------------------------------------
5. 通过对三个函数的分析,我们可以知道:escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参 数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。
6. __proto__ prototype 方法
a.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function)
b. Function.prototype也是唯一一个typeof XXX.prototype为 “function”的prototype。其它的构造器的prototype都是一个对象。如下
c. console.log(Function.prototype.__proto__ === Object.prototype) // true
d.所有对象的__proto__都指向其构造器的prototype
e.可以看到p.__proto__与Person.prototype,p.constructor.prototype都是恒等的,即都指向同一个对象。
f.建议用我们所说的Person.prototype.run={}而不推荐用Person.prototype={},后边这样子写会覆盖默认的继承的属性和方法。
7.js创建二维数组。
a、 创建二维数组方法一:先创建一个一维数组,然后该一维数组的所有成员再创建一维数据
var persons = new Array();
persons[0] = new Array();
persons[1] = new Array();
persons[2] = new Array();
persons[0][0] = "zhangsan";
persons[0][1] = 25;
persons[1][0] = "lisi";
persons[1][1] = 22;
b.var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];
多维数组的length属性返回的是多维数组第一维的长度,而不是多维数组中元素的个数。
8. 判断多维数组的长度,需要先判断是不是数组对象,然后判断长度,本地网页中有。
//判断某个对象是不是数组
function isArray(obj) {
return obj && ( typeof obj === 'object') && (obj.constructor == Array);
}
9.分清克隆和继承的区别。
10.function People(name)
{
this.name=name;
//对象方法
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//类方法
People.Run=function(){
alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
alert("我的名字是"+this.name);
}
注意第二的类方法,如果放在function里边,类似闭包,也算是类方法。(自己理解)
11.类的property方法,的property属性=new 出来的对象。
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg
12.
trigger()绑定
$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
多个事件绑定同一个函数
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
多个事件绑定不同函数
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
绑定自定义事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
传递数据到函数
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
适用于未创建的元素
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
13.js获取元素的宽高。
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。
小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
现 在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。
代码:
var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
14. call方法的使用
这个是flash调用我们js方法的时候用call方法。
ExternalInterface.call("vjjFlash", "eventType");
如果我们js直接调自己的js方法的话:
15. call方法和apply方法的运用的区别。
上面中人,如果后边传arguments的的话,就用apply,如果直接写了一个参数的话就用call。
16. this和arguments是我们每个函数自带的隐藏属性。
17.http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html
18.
var script = function(src, charset) {
var s = document.createElement("script");
s.charset = charset || 'utf-8';
s.type = "text/javascript";
s.async = true;
s.src = src;
document.getElementsByTagName("body")[0].appendChild(s);
}
script(videoPlusSrc);
19.//$("img").get().reverse();
20. 原生js表单控制:
====================================
21.
那如果点击一个li,想知道他的index 原生dom的方法 就是使用js闭包和立即执行匿名函数
var targetNode = document.getElementById('list').getElementsByTagName('li');
var i = 0;
var targetLength = targetNode.length;
for (i; i < targetLength; i++) {
targetNode[i].onclick = (function(num) {
return function() {
alert(num);
}
})(i);
}
=====================================================
22.
document方法:
getElementById(id) 返回指定结点的引用
getElementsByTagName(name) 返回文档中所有匹配的元素的集合
createElement(name) 创建指定类型的新结点
createTextNode(text) 创建一个纯文本结点
element方法:
getAttribute(id) 返回指定属性的值
setAttribute(id,value) 给属性赋值
removeAttribute(id) 移除指定属性和它的值
getElementsByTagName(name) 返回结点内所有匹配的元素的集合
node方法:
appendChild(child) 给指定结点添加一个新的子结点
removeChild(child) 移除指定结点的子结点
replaceChild(newChild,oldChild) 替换指定结点的子结点
insertBefore(newChild,refChild) 在同一层级的结点前面插入新结点
hasChildNodes() 如果结点有子结点则返回true
node属性:
nodeName 以字符串的格式存放结点的名称
nodeType 以整型数据格式存放结点的类型
nodeValue 以可用的格式存放结点的值
parentNode 指向结点的父结点的引用
childNodes 指向子结点的引用的集合
firstChild 指向子结点结合中的第一个子结点的引用
lastChild 指向子结点结合中的最后一个子结点的引用
23. 自己练习的一段代码:
原生的js已经开始支持一些jquery的方法了。
http://www.cnblogs.com/xiaopen/p/5540884.html
24.getComputedStyle/currentStyle http://www.jb51.net/article/78335.htm
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
currentStyle是IE浏览器的一个属性,返回的是CSS样式对象
element指JS获取的DOM对象
element.style //只能获取内嵌样式
element.currentStyle //IE浏览器获取非内嵌样式
window.getComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式
注:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Yvette Lau">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>Document</title>
<style>
#test{
width:500px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body>
<div id = "test"></div>
<div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
</body>
</html>
<script type = "text/javascript">
window.onload = function(){
var test = document.getElementById("test");
var tag = document.getElementById("tag");
//CSS样式对象:CSS2Properties{},CSSStyleDeclaration
console.log(test.style); //火狐返回空对象CSS2Properties{},谷歌返回空对象CSSStyleDeclaration{}
console.log(tag.style); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//element.style获取的是内嵌式的style,如果不是内嵌式,则是一个空对象
console.log(tag.style.backgroundColor);//pink
console.log(tag.style['background-color']);//pink
//获取类似background-color,border-radius,padding-left类似样式的两种写法啊
console.log(test.currentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ,火狐返回CSS2Properties{……}
console.log(window.getComputedStyle(test))
//效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)
console.log(test.currentStyle.width);//500px(IE)
console.log(window.getComputedStyle(test).width); //500px;
console.log(window.getComputedStyle(test)['width']);//500px;
//document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]
}
</script>
为了简单,我们也可以对获取样式做一个简单的封装。
function getStyle(element, attr){
if(element.currentStyle){
return element.currentStyle[attr];
}else{
return window.getComputedStyle(element,null)[attr];
}
}
console.log(getStyle(test,"cssFloat"));//left
console.log(getStyle(test,"float")); //left,早前FF和chrome需要使用cssFloat,不过现在已经不必
console.log(getStyle(test,"stylefloat"));//火狐和谷歌都是undefined
console.log(getStyle(test,"styleFloat")); //IE9以下必须使用styleFloat,IE9及以上,支持styleFloat和cssFloat
console.log(window.getComputedStyle(test).getPropertyValue("float"))
对应float样式,IE中使用的是styleFloat,而早前的FF和chrome使用的是cssFloat,现在FF和Chrome已经支持float,还有一些其他的属性,不再一一列出,为了不去记忆这些差异点,我们引出两个访问CSS样式对象的方法:
getPropertyValue方法和getAttribute方法
IE9及其它浏览器(getPropertyValue)
window.getComputedStyle(element, null).getPropertyValue(“float”);
element.currentStyle.getPropertyValue(“float”);
getPropertyValue不支持驼峰写法。(兼容IE9及以上,FF,Chrom,Safari,Opera)
如:window.getComputedStyle(element,null).getPropertyValue(“background-color”);
对于IE6~8,需要使用getAttribute方法,用于访问CSS样式对象的属性
element.currentStyle.getAttribute(“float”);//不再需要写成styleFloat
element.currentStyle.getAttribute(“backgroundColor”);//属性名需要写成驼峰写法,否则IE6不支持,如果无视IE6,可以写成”background-color”
25.事件代理。
addEventListener这个方法也不能解决未知元素的问题,只能通过在父元素上添加事件,然后通过event.target || event.srcElement;可以获取真正的事件源。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> </style> </head> <body> <div id="box"> <div class="content">hhahha</div> <span>这个世界是属于我们的么</span> </div> <script type="text/javascript"> window.onload = function(){ debugger; document.querySelector('.content').addEventListener('click',function(){ alert("nihao"); },false); } var i = 0; document.querySelector("#box").onclick = function(event){ i++; //或者事件目标 eventsource这个就是我们的真正产生点击的dom var eventsource = event.target || event.srcElement; console.log(eventsource); //event.target.tagName 这个获取的是标签的名字 //event.target.innerText 这个获取的是标签的内部 var div = document.createElement("span"); div.setAttribute('class','content'); var ss = document.createTextNode("我们都是好孩子"+i); div.appendChild(ss); document.querySelector("#box").append(div); }; </script> </body> </html>
26.js原生获取屏幕的宽度。document.documentElement.clientWidth