javascript特效300例----抄书喽

-javascript300例-

#body_div { background-color: #202425; color: white; margin: 0 auto; border: 5px green solid; width: 100%; height: 100%; padding: 0 auto; float: left }
#left_bar { width: 10%; height: 300px; background-color: #EA2000; float: left; overflow: scroll; position: fixed; z-index: 99999; top: 0 }
#left_bar li { white-space: nowrap }
#right_bar { width: 80%; background-color: #7FB447; margin-left: 20%; overflow: auto }
#right_bar div { border: 6px black solid; text-align: center }
#right_bar div span { font-size: 30px; font-style: italic; font-weight: bold; color: blue }

目录.不方便写代码，倒序排列直到目录正数第九个小项

1. 百度一下,博客园不能使用js
2. 底部
3. 自动刷新页面
4. 让页面后退和前进
5. 动态关闭页面
6. 页面载入等待界面
7. n秒后不操作自动关闭窗口
8. 修改网页标题
9. 禁止网页放入框架
10. 跳转到其他页面
11. 进入页面问候语
12. 网页里动态加载js
13. 设为首页
14. 收藏本页
15. 判断页面是否加载完毕
16. 浏览器不用缓存加载
17. 显示广告，自动关闭
18. 关闭按钮的右下角广告
19. id获取网页某一部分
20. name获取网页复选框
21. 标签名获取多个元素
22. 打印一个元素所有属性
23. 遍历html文档
24. 动态创建网页新元素
25. 删除元素
26. 主动触发按钮单击事件
27. 替换元素内容
28. 修改元素属性值
29. 引用同级元素
30. 克隆元素
31. 隐藏和显示元素
32. 倒排序

三十

得到所有子元素，先移除，再倒着添加，，，.removeChild(...),,,,,appendChild(...)

二十九

				隐藏，.style.display='none',,,显示，，，.style.display=''
				还有一个是添加hidden属性，，.setAttribute('hidden','');.removeAttribute('')
			

二十八

				得到要克隆的元素对象使用.cloneNode(true),可得到，然后加入dom树
			

二十七

				树上遍历子节点判断类型不可取，现在有.previousSbiling,,,,,.nextSbiling,,,,
			

二十六

得到元素对象，.width=....,,,,.height=.....,,,,该元素具有的属性
			判断他是否有这个属性if(.width == null)
			

二十五

.innerHTML='',,,,,,,,,还有是.textContent

二十四

得到要触发的节点，调用他的.click()

二十三

				得到该元素对象，使用父节点的去除子节点方式，
				.parentNode.removeChild(...);
			

二十二

				一种是在元素本身的.innerHTML就可以是html元素，直接写文本
				一种操作dom.得到对象，.appendChild(document.createElement(''));
				,,,,,,,,,文本节点，，，，document.createTextNode('');
			

二十一

				对document.body对象使用，这些函数：.childNodes，，，，所有子节点数组【不限于1级】
				.parentNode，，，，父节点，.nodeType【参：http://www.w3school.com.cn/jsref/prop_node_nodetype.asp】
				值1表示：元素节点
				值2：属性节点。。。。。。还有其他。。。并介绍.nodeName,,,,,.nodeValue

二十

				var a= document.getElementById('');
				for(var i in a)
				console.log('属性名：'+i+"属性值："+a[i]);
			

十九

				document.getElementsByTagName('');
			

十八

				当有两个或多个任意标签name相同时，即可获得一个数组
				var doms = document.getElementsByName('');
				doms[i].tagName;标签名
			

十七

				document.getElementById('');
			

十六

				书上的是采用body宽高来动态定位广告div，
				ad为广告的div的对象，
				定位方法：ad.style.top=document.body.scrollTop+document.body.clientHeight-120;//120div高度
				ad.style.left = document.body.scrollLeft+document.body.clientWidth-200;//宽200
				我觉得应该使用position:fixed;bottom:0;right:0;z-index:99999;这个固定位置加最外层的方式
			

十五

			省略了一些
				选择一个div，添加img节点超时隐藏，
				.innerHTML="标签体";
				setTimeout,window.onload,.style.display = 'none';
			

十四

				动态修改需要点击的链接，加上时间参数，表示过期。
				var links = document.getElementsByTagName("a");
				for(var i=0;i<links.length;i++){
					var lin1 = links[i];
					var href1 = lin1.href;
					if(href1.indexOf('?')>-1)//已有参数
						href1+='&time='+new Date().getTime();
					else
					href1+='?time='+new Date().getTime();
					lin1.href = href1;
				}
			

十三

					window.onload = function(){};事件回调，所有元素加载完，
					如果只是文档本身的话，
					document.onreadystatechange=function(){
					if(document.readyState == 'ompelete')
						alert('文档加载完毕');
					};
				

十二

					IE和火狐分别处理
					if(window.external.AddFavorite)//IE
						window.external.AddFavorite('./当前页全名','收藏名');
					else
						window.sidebar.addPanel('收藏名','网址',"");
				

十一

				不同浏览器设置不同：
				if(document.all){//IE
					document.body.style.behavior='url(#default#homepage)';//设置行为
					document.body.setHomePage('首页网址');
				}else if(window.sidebar){//其他
					var thePref = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
					thePref.setCharPref('browser.startup.homepage','首页网址');
				}
				

十

					基本就是在头部添加dom【script】节点：
					var head1 = document.getElementsByTagName('head').item(0);
					var myscript = document.createElement('script');
					myscript.src='脚本路径';
					myscript.type='text/javascript';
					myscript.defer=true;//表示程序下载完再解析执行
					head1.appendChild(myscript);
				

九

					也就是直接运行js,但我觉得在等待加载完，document.ready();这个好像加载并不完整，【参：他说的也不完整：http://www.cnblogs.com/a546558309/p/3478344.html】
					具体区别没说出来与window.onload();
					但我推荐使用这个：if(window.addEventListener){
						window.addEventListener('load',function(){},false);
					}
					这个加载完全了，dom树
				

一

					使用函数，window.location.reload();刷新页面
					定时，setTimeout('function()',1000);//定时刷新，前面为方法名加(),第二个参数为毫秒数，执行方法间隔时间
					备注：头部加入<meta http-equiv="refresh" content="1">,,也是1秒钟刷新一次
				

二

					前提是有历史纪录，window.history.forward();到之前的网页
					window.history.back();到后面一页
					备注：window.history.go(n);n为正时，表示前进n页，负数同理
				

三

					使用window.close();
				

四

					数据加载完后，node1.style.display='';取消隐藏
					获取页面需要后续加载数据dom节点node1【利用ajax异步加载之类的】(前提设置隐藏起来,display:none这样的css代码)，
				

五

					给body设置onclick响应，点击后开始计时，时间到了执行,window.close();
					计时函数：setInterval(function(){},10000);第二个参数为毫秒
				

六

					document.title="新标题";
				

七

					if(self!=top)
					top.location.href=self.location.href;
					如果自己不是顶层框架则刷新成
				

八

					self.location.href="新网址";
				

到底了