一、時間綁定的方法
1、在Dom元素上直接綁定
<input type="button" value="點我呦" οnclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="點我呦" οnclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>2、js代碼中綁定
<input type="button" value="點我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").οnclick=function testAlert(){
alert("hello world!");
}
</script>3、綁定事件監聽函數
這裏需要了解addEventListener()和attachEvent()的函數語法。
1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流瀏覽器、以及IE9.0及以上）
eventName:要綁定的事件名稱。注意寫法，比如點擊事件，寫成click,而不是onclick.
handle: 處理事件的函數名。但是寫法上沒有小括號。
useCapture:Boolean類型，是否使用捕獲，一般用false，具體涉及到的會在後邊總結。
2 elementObject.attachEvent(eventName,handle);（僅支持IE8及以下）
從網上找到了一個兼容的好辦法，相比較if。。else語句，這個方法用的是try..catch錯誤處理語句，可以避免瀏覽器出現錯誤提示。
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期瀏覽器
}
}
}
主要有on()、bind()、live()、delegate()等幾種，相對應的解綁就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind()，其他的都可以給後來追加的元素對象添加綁定事件。
2 這幾種方法中各自有對應支持的JQuery版本。
3 在給動態添加的頁面元素綁定事件時，通常用on()方法。
三、將location.search轉化爲對象的形式{}
function formateSearch(se){
if(typeof se!=="undefined"){
se=se.substr(1);
var arr=se.split("&"),
obj={},newarr=[];
$.each(arr,function(i,v){
newarr=v.split("=");
if(typeof obj[newarr[0]]==="undefined"){
obj[newarr[0]]=newarr[1];
}
});
return obj;
}
}4、設置、獲取、移除cookie
document.cookie='ac=123';
//設置一個cookie
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/';
}
}
setCookie('asd','123');
setCookie('qwe','rdf',3);
//獲取一個cookie
function getCookie(name){
var arr=document.cookie.split(';');
for(var i=0;i<arr.length;i++){
var tmp=arr[i].split('=');
if(name==tmp[0]){
return tmp[1];
}
}
return '';
}
//刪除一個cookie
function removeCookie(name){
setCookie(name,'asd',-1);
}
removeCookie('asd');五、輪播圖實現
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:20px;
}
#container{
position: relative;
width:600px;
height:400px;
border:3px solid #333;
overflow: hidden;
}
#list{
position: absolute;
z-index:1;
width:4200px;
height:400px;
}
#list img{
float:left;
width:600px;
height:400px;
}
#button{
position: absolute;
left:250px;
bottom:20px;
z-index:2;
height:10px;
width: 100px;
}
#button span{
float:left;
margin-right:5px;
width:10px;
height:10px;
border:1px solid #fff;
border-radius:5px;
-webkit-border-radius:5px;
background-color: #333;
cursor:pointer;
}
#button .on{
background-color: orangered;
}
.arrow{
position: absolute;
top:180px;
z-index:2;
display: none;
width: 40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height:39px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
cursor:pointer;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px;">
<img src="6.jpg" alt="1">
<img src="3.jpg" alt="1">
<img src="4.jpg" alt="2">
<img src="5.jpg" alt="3">
<img src="6.jpg" alt="4">
<img src="3.jpg" alt="4">
</div>
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var list=document.getElementById('list');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft<-2400){
list.style.left=-600+'px';
}
if(newLeft>-600){
list.style.left=-2400+'px';
}
}
//實現自動輪播效果
var timer=null;
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
play();
var container=document.getElementById('container');
function stop(){
clearInterval(timer);
}
container.οnmοuseοut=play;
container.οnmοuseοver=stop;
var buttons=document.getElementsByTagName('span');
var index=1;
function buttonsShow(){
//先清除之前的樣式
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
}
}
//數組從0開始
buttons[index-1].className='on';
}
prev.οnclick=function(){
index-=1;
if(index<1){
index=4;
}
console.log(index);
buttonsShow();
animate(600);
}
next.οnclick=function(){
index+=1;
if(index>4){
index=1;
}
console.log(index);
buttonsShow();
animate(-600);
}
//這裏使用了閉包
for (var i = 0; i < buttons.length; i++) {
// 這裏使用的是立即執行函數，
(function(i) {
buttons[i].onclick = function() {
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset);
index = clickIndex;
buttonsShow();
}
})(i)
}
}
</script>
</body>
</html>