现在纯粹用 js 的人越来越少了,更多的人喜欢 jquery,可使我还是喜欢 javascript,下面给出一个用 javascript 写的背景切换的小例子,各位大虾不要骂,只是写给自己看的,也供 js 事件的产考依据。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
html 代码
- <!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">
- <head>
- <title>
- 背景切换
- </title>
- <link href="CSS/bgchage.css" type="text/css" rel="Stylesheet" />
- </head>
- <body>
- <div>
- <ul>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- </ul>
- </div>
- <!-- <div>1</div><div>2</div><div>3</div><div>4</div>-->
- </body>
- <script src="js/bgchage.js" type="text/javascript">
- </script>
- </html>
因为 javascript 逻辑顺序比较强,所以要考虑引用 js 的位置
css 代码
- body {
- font - size: 12px;
- }
- div {
- width: 950px;
- height: 800px;
- margin: 0 auto;
- border: solid 1px#d0d0d0;
- }
- li {
- list - style - type: none;
- border: solid 1px#d0d0d0;
- float: left;
- margin: 1px;
- padding: 0 5px;
- height: 12px;
- width: 10px;
- }
- /*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/
javascript 代码部分:
- window.onload=init;
- var element= document.getElementsByTagName("li");
- function init() //初始化背景色
- {
- var element= document.getElementsByTagName("li");
- for(var i=0; i<4;i++)
- {
- var k=i+1;
- element[i].style.background="url(images/"+k.toString()+".jpg)";
- }
- }
- function addclick()
- {
- for(var i=0; i<4;i++)
- {
- var k=i+1;
- if(window.attachEvent)
- element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
- else
- element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
- }
- }
- function bgchage(t) //根据色块改变背景色
- {
- document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
- }
- addclick();
js 部分要注意写事件的兼容,而且其实 jq 的思路就是将很多功能写成插件的形式供自己使用,用 javascript 写,可以写自己的类库,供反复使用,也无需承担 jquery 类库的负担。其实我也不是说 jquery 不好,从大的方面来说,jquery 的插件大小影响并不大,前端事件看了百度前端交流会的视频,发现人家的类库也都是 js 自己写的,这给了我继续学习 js 的动力。
来源: