javaScript基本知识学习2

最新推荐文章于 2024-10-13 19:04:04 发布

weixin_33686714

最新推荐文章于 2024-10-13 19:04:04 发布

阅读量73

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/iioschina/blog/712615

版权

2019独角兽企业重金招聘Python工程师标准>>>

对象

创建对象

工厂模式

原型模式

组合使用工厂和原型模式

动态原型模式

不存在的时候再去创建

寄生构造函数模式

创建具有额外方法的特殊数组,不能修改Array构造函数，因此可以使用这个模式

稳妥构造函数模式

继承

原型链

借用构造函数jicheng

组合继承

原型式继承

寄生式继承

寄生组合式继承

函数表达式

递归

闭包

私有变量

静态私有变量

模块模式

javascript是以对字面量的方式来创建单例对象的

理解window对象

BOM的核心

浏览器对象模型

浏览器的实例window对象

location对象

window.location document.location引用的是同一个对象

位置操作

assign,relaod

navigator对象

srceen对象

history对象

用户客户端检查

五大引擎:IE,Gecko，WebKit,KHTML,Opera

DOM 文档对象模型

节点层次

Node类型

Document类型

获得各种节点html.body等

获得查找元素

getElementById(),getElementByTagName()

Nodelist HTMLCollection

write() writeIn()动态写入

Element对象

getAttribute(),setAttribute(),removeAttribute(),

attributes属性

var id=element.attributes.getNamedItem(‘Id’).nodeValue();

使用方括号语法的简写形式

var id=element.attributes[‘id’].nodeValue;

document.createElement();

createTextNode()

Comment节点类型

CDATASection节点

Dom扩展

jquery的核心就是通过css选择符查询dom文档取得元素的引用，从而抛开getElementById和getElementByName

选择api 变成直接浏览器解析的原生api

Level1 querySelector()和

querySelectorAll()返回的是一个Nodelist的实例

Selectors API level2 规范新增一个方法matchesSelector(),接受css选择符

元素遍历

Element Traversal API 规范

HTML5

getElementsByClassName()方法

classList属性

提供一系列crud操作

焦点管理

Document.activeElement

focus

hasFocus

html中自定义的属性以data开头

innerHTML创建节点,但是在DON解析后是经过序列化之后的结果。

了解使用时没有作用域元素和有作用域的元素的区别

outerHTML属性

insertAdjacentHTNL()方法

DOM2,DOM3

DOM2级

样式访问元素的样式操作样式表元素大小

clientwidth clientHeight

滚动大小

遍历

treewalker nodeIterator

范围

dom中的范围

事件

js和html之间的交互是通过事件实现的。事件就是浏览器或文档中发生的一些特定的交互瞬间。

事件流

事件流是指从页面上接受事件的顺序。

IE的事件就是事件

事件捕获

netscape规定的，先从不怎么具体的然后到具体的元素，与事件冒泡相反

DOM中的事件流

事件捕获-》具体目标-》事件冒泡

事件如click,load,mouseover,相应事件的程序就是事件处理程序

练习的代码如下：

var ems=document.getElementById("myDiv").querySelectorAll("em");

var selecteds=document.querySelectorAll(".selected");

var strongs=document.querySelectorAll("p strong");

var i,len,strong;

for(i=0,len=strongs.length;i<len;i++){

strong=storngs[i];

strong.className="important";

}

//matcheSelector

if(document.body.matcheSelector('body.page1')){

//true匹配则返回true

}

//编写一个不同浏览器都支持的包装类

function matchesSelector(element,selector)

{

if(element.matchesSelector){

return element.matchesSelector(selector);

}else if(element.msMatchersSelector){

return element.msMatchersSelector(selector);

}else if(element.mozMatchersSelector){

return element.mozMatchersSelector(selector);

}else if(element.mozMatchersSelector){

return element.mozMatchersSelector(selector);

}else if(element.webkitMatchersSelector){

return element.webkitMatchersSelector(selector);

}else{

throw new Error("Not supported.");

}

if(matchesSelector(document.body,"body.page1")){

//executor....

}

//classlist属性

var classNames=div.className.slit(/\s+/);

var pos =-1,i,len;

for(i-0,len=classNames.length;i<len;i++){

if(classNames[i]=='user'){

pos=i;

break;

}

classNames.splice(i,1);

div.className=className.join(" ");

//html5对类名的操作

div.classList.remove('user');

div.classList.remove('disabled');

if(document.readState =='complete'){

//dosomething

}

//自定义属性

var div=document.getElementById('myDiv');

var appId=div.dataset.appId;

var myName=div.dataset.myname;

div.dataset.appId=23456;

div.dataset.myname="Michael";

if(div.dataset.myname){

alert("hello "+div.dataset.myname)；

}

//html5中元素的head属性

var head=document.head||document.getElementByTagName("head")[0];

var html=document.documentElement;

alert(html===document.childNodes[0]);

alert(html===document.firstChild);

var body=document.body;

var doctype=document.doctype;

var domain =document.domain;

//html5中的charset属性

alert(document.charset);

document.charset='UTF-8';

if(document.charset !=document.defaultCharset){

}

/**用户端检测

function getQueryStringArgs(){

var qs=(location.search.length>0?location.search.subString(1):""),

args={},

items=qs.length?qs.split('&'):[],

item=null,

name=null,

value=null,

i=0,

len=items.length;

for(i=0;i<len;i++){

item=ietms[i].split('=');

name=decodeURIComponent(item[0]);

value=decodeURIComponent(item[1]);

if(name.length){

args[name]=value;

}

return args;

}

var args=getQueryStringArgs();

//alert(args['q']);

//alert(args['num']);

function hasPlugin(){

name=name.toLowerCase();

for(var i=0;i<navigator.plugins.length;i++){

if(navigator.plugins[i].name.toLowerCase.indexOf(name)>-1){

return true;

}

return false;

}

//检查flash

//alert(hasPlugin('Flash'));

//alert(hasPlugin('QuickTime'));

history.go('baidu.com');

**/

//创建html文档

var htmldoc=document.implementation.createHTMLDocument('New Doc');

console.log(htmldoc.title);

console.log(typeof htmldoc.body);

//node比较 DOM3 类型，attributes childNodes都相等

var div1=document.createElement('div');

div1.setAttribute('class','box');

var div2=document.createElement('div');

div2.setAttribute('class','box');

console.log(div1.isSameNode(div1));

console.log(div1.isEqualNode(div2));

console.log(div1.isSameNode(div2));

//DOM3提供额外的数据引入新的方法 setUserData()

document.body.setUserData('name','Nichoals',function(){});

var value=document.body.getUserData('name');

//operation

var div=document.createElement('div');

div.setUserData('name','Nichoals',function(operation,key,value,src,dest){

if(operation ==1){

dest.setUserData(key,value,function(){});

}

});

var newDiv=div.cloneNode(true);

console.log(newDiv.getUserData('name'));

//cssTxt属性来改变css style

myDiv.style.cssText="width:25px;height:100px;background-color:green";

alert(myDiv.style.cssText);

//循环取得每一项样式

var prop ,value,i,len;

for(i=0,len=myDiv.style.length;i<len;i++){

prop= myDiv.style[i];

value=myDiv.style.getPropertyValue(prop);

alert(prop+"---"+value);

}

//是否支持DOM2中的规范

var supportsDOM2StyleSheets= document.implementation.hasFeature("SytleSheets","2.0");

alert(supportsDOM2StyleSheets);

//取得偏移量

function getElementLeft(element){

var actualLeft=element.offsetLeft;

var current=element.offsetParent;

while(current!=null){

actualLeft+=current.offsetLeft;

current=current.offsetParent;

}

return actualLeft;

}

function getElementTop(element){

var actualTop=element.offsetTop;

var current=element.offsetParent;

while(current!=null){

actualTop+=current.offsetTop;

current=current.offsetParent;

}

return actualTop;

}

//只显示<p>元素节点的迭代器

var filter={

acceptNode:function(node){

return node.tagName.toLowerCase()=="p"?

NodeFilter.FILTER_ACCEPT:

NodeFilter.FILTER_SKIP;

}

};

var iterator=document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);

//能访问所有节点

var iterator=document.createNodeIterator(docuemnt,NodeFilter.SHOW_ALL,null,false);

//返回div中的node节点

<p><b>Hello</b>World!</p>

<ul>

</ul>

</div>

var div=document.getElementById('div1');

var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);

var node=iterator.nextNode();

while(node!=null){

alert(node.tagName);

node=iterator.nextNode();

}

//迭代器读取div下的节点