绕不过去的坑。港拔蛋
1.js代码应该存放于HTML中</body>之前，这样能使浏览器更快加载脚本
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>Just a test</title>
</head>
<body>
something content here!
</body>
<script type="text/javascript" src="gallery.js"></script>
</html>
2.语法
<1>变量
var 声明 大小写敏感，允许字母，数字，美元符号，下划线（但是第一个字符不能为数字）
<2>字符串，数值，布尔值
<3> 数组
var beatles = Array(); //关键字申明
var beatles = []; //类似python数组申明
特别有意思的地方是，js中有个关联数组，类似python中的字典。可以用字符串来代替数字值。如下实例:
var lennon = [];
lennon['name'] = 'John';
lennon['year'] = 1940;
lennon['living'] = false;
<4> 对象
var lennon = Object(); //关键字声明
lennon.name = 'John';
lennon.year = 1940;
lennon.living = false;
----------------------------------------
var lennon = {name:'John', year:1940; living:false}; //大括号声明
<5>操作 算术操作符
跟python差不多，只不过支持 i++， i-- 累加累减。
<6>控制流
if语句，大部分跟python差不多，值得注意的是 js的比较操作符中分为严格比较（===）和不严格比较（==），区别 ==操作符认为空字符与false相同，而 === 操作符则认为两则不同。
if(condition){
statements;
}else{
}
逻辑操作符
&&与操作符，相当于python中的 and关键字
|| 或 操作符，相当于python中的 or 关键字
循环
while循环，for循环
var beatles = ['John', 'pual', 'George', 'Ringo'];
for(var i=0; i<beatles.length; i++){
alert(beatles[i])
}
函数 使用function关键字定义，值得注意的是函数的作用域，
如果函数中使用var 定义变量，则视其为局部变量，如果没有var声明，则为全局变量。
function shout(){
var beatles = ['John', 'pual', 'George', 'Ringo'];
for(var i=0; i<beatles.length; i++){
alert(beatles[i])
}
}
对象 使用关键字new 创建新的实例
var jeremy = new Person； //创建新实例
内建对象
数组length属性, 获取数组有多少个元素
Math.round（） 把十进制的数值舍入为最接近的整数
Date对象包括getDay(), getHours(), getMonth()等一系列方法
var current_date = new Date();
var today = current_date.getDay();
宿主对象， 是指浏览器提供的预定义对象，包括Form, Image, Element等
3. DOM
DOM有三种节点，元素节点（element node）, 文本节点(text node), 属性节点
getElementById( id )
根据元素id 获取元素节点 对象
getElementByTagName( tag )
根据标签 返回一个 对象数组
值得注意的是，该方法可以用通配符（‘*’）为参数，返回一个所有元素的对象数组
document.getElementById('purchases');
document.getElementByTagName('a');
getElementByClassName( class )
根据标签类属性，放回一个 元素对象
值得注意的是，该方法可以带多个类名元素，用空格分局即可，而且类名顺序不重要
可惜的是该方法许多老旧浏览器不支持，所以在考虑兼容性的时候需要重写，如下函数
function getElementsByClassName(node, classname){
if (node.getElementsByClassName){ //如果支持 使用老方法
return node.getElementByClassName(classname);
}else{
var results = [];
var elems = node.getElementByTagName('*');
for(var i=0; i<elems.length; i++){
if(elems[i].className.indexOf(classname) !=-1)
results[results.length]= elems[i];
}
}
}
getAttribute
object.getAttribute( attribute )获取元素属性
var paras = document.getElementsByTagName('p');
for(var i=0; i<paras.length; i++){
var title_text = paras[i].getAttribute('title');
if ( title_text ) alter(title_text);
}
setAttribute
object.setAttribut( attribute, value ) 设置属性值
3 js图片库
一 事件处理函数
showPic( this )
函数showPic以this为关键词时，其中this是指‘这个对象’ 具体表示的话为某某元素节点。
时间处理函数的处理工作机制，给某个元素添加了时间处理函数后，一旦时间发生，相应的js代码就会执行，被调用的嗲吗返回一个至，这个值将被传递那个时间处理函数，如 给某个链接添加一个onclick时间处理函数，并让这个处理函数所触发的js代码返回true 或者fasle。 js返回true，onclick时间处理函数就认为 这个链接呗点击了，js返回false，onclick事件处理函数就认为‘这个链接没有被点击’
二 childNodes属性
element.childNodes
childNodes可以用来获取任何一个元素的所有子元素
三nodeType
node.nodeType 属性有12中可取值，但是只有三种有实用价值。
元素节点 nodeType的值为 1；
属性节点 nodeType的值为 2；
文本节点 nodeType的值为 3；
四 nodeValue
node.nodeValue 获得节点的值 如:
<p id="description"> something here </p>
那么获取文本节点的值应该这样写
var description = document.getElementById( 'description' );
text = description.childNodes[0].nodeValue;
>>>text为something here
五 firstChild 和lastChild属性
node.firstChild = node.childNodes[0] 访问节点的第一个子节点
node.lastChild = node.childNodes(node.childNodes.length-1) 访问节点的最后一个子节点
4 最佳实践
平稳退化
不要使用 javascript: 伪协议
不要使用 内嵌的实践处理函数
javaScript应该与HTML分离
添加对象检测， 如 if（！getElementById） return false;
性能考虑
一 不管什么时候，只要查询DOM中的某些元素， 浏览器都会搜索整个DOM树，从中查找可能过匹配的元素
二 尽量减少文档中的标记数量
三 合并js文档，减少加载页面时发出的请求数量
四 把所有<script>标签都放到文档末尾 </body>之前
五 压缩脚本
共享onload事件
/*一个函数一个函数加载*/
window.onload = firstFunction;
window.onload = secondFunction;
/*创建匿名函数 加载 同时少量函数加载 最优方案*/
window.onload = function{
firstFunction( );
secondFunction( );
}
/* 同时加载多个函数*/
function addLoadEvent( func ){
var oldload = window.onload;
if( typeof window.onload != 'function' ){
window.onload = func;
}else{
window.onload = function( ){
oldload( );
func( );
}
}
}
>>>使用的时候可以这样 addLoadEvent( firstFunction );
addLoadEvent( secondFunction );
关于三元操作
variable = condition ? if true : if fasle
//是指判断条件是否为true, 如果为true 把 ？ 后的表达式赋值给variable，反之则把 : 后的表达式赋值给 variable
5 动态创建标记
document.write()
document.innerHTML()
document.write('<p>This is insert</p>')
//缺点是混杂HTML与js语言
document.innerHTML( '<p>i inserted <em>this</em> contetn</p> ' )
//可以插入一大片html但是 缺点是混杂HTML与js语言，容易出错
值得注意的是， document.write, document.innerHTML 都是HTML专有属性，如果浏览器读取XHTML文档是将忽略innerHTML和write
DOM方法动态创建
document.createElement( nodeName ) 创建元素节点
**parent.appendChild( child ) **
document.createTextNode( text)
var para = document.createElement( "p" ); //创建p元素节点
var testdiv = document.getElementById( "testdiv" )； //获得testdiv元素节点
testdiv.appendChild( para ); //p元素节点添加为testdiv节点的子元素
var text = document.createTextNode( "Hello World" )；
para.appendChild( text );
inserBefore( )在已有元素前插入一个新元素
parentElement.insertBefore( newElement, targetElement )
var gallery = document.getElementById( "imagegallery" );
gallery.parentNode.insertBefore( placeholder, gallery );
自定义inertAfter( )函数
function insertAfter( newElement, targetElement ){
var [aremt = targetElement.parentNode;
if( parent.lastChild == targetElement ){
parent.appendChild( newElement );
}else{
parent.insertBefore(newelement, targetElement.nextSibling);
}
}
网友评论