JavaScript學習筆記：掌握了獲取元素和事件綁

JavaScript學習筆記：掌握了獲取元素和事件綁定，可以做輪播圖片

、什么是JavaScript中的window？

JavaScript中window是一個全局對象，代表瀏覽器中一個打開的窗口，每個窗口都是一個window對象。

2、什么是document？

document是window的一個屬性，這個屬性是一個對象；

document代表當前窗口中的整個網(wǎng)頁；

document對象保存了網(wǎng)頁上所有的內(nèi)容，通過document對象就可以操作網(wǎng)頁上的內(nèi)容。

3、什么是JavaScript中的DOM？

DOM定義了訪問和操作HTML文檔(網(wǎng)頁)的標準方法；

DOM全稱：Document Object Model，即文檔模型對象；

學習DOM就是學習如何通過document對象操作網(wǎng)頁上的內(nèi)容。

4、JavaScript中如何通過選擇器獲取DOM元素？

querySelector：只會返回根據(jù)指定選擇器找到的第一個元素，例子：

let oDiv=document.querySelector("div");

console.log("oDiv"); //輸出：<div></div>

querySelectorAll：會返回指定選擇器找到的所有元素，例如：

let oDivs=document.querySelectorAll("div");

console.log("oDivs"); //輸出：NodeList由所有div元素組成的為數(shù)組。

5、JavaScript如何獲取和設置元素內(nèi)容？

獲取元素內(nèi)容：

1）innerHTML獲取的內(nèi)容包含標簽，innerText/textContent獲取的內(nèi)容不包含標簽；

2）innerHTML/textContent獲取的內(nèi)容不會去除兩端的空格，innerText獲取的內(nèi)容會去除兩端的空格。

設置元素內(nèi)容：

共同點：無論通過innerHTML/innerText/textContent設置內(nèi)容，新的內(nèi)容都會覆蓋原有的內(nèi)容；

區(qū)別：1）通過innerHTML設置數(shù)據(jù)，數(shù)據(jù)中包含標簽，會轉(zhuǎn)換成標簽之后再添加；

2）通過innerText/textContent設置數(shù)據(jù)，數(shù)據(jù)中包含標簽，不會轉(zhuǎn)換成標簽，會當做一個字符串直接設置。

6、什么是JavaScript中的事件？如何給元素綁定事件？

用戶和瀏覽器之間的交互行為被稱為事件，比如：鼠標的點擊/移入/移出。

在JavaScript中所有的HTML標簽都可以添加事件；

元素.事件名稱=function(){}；

當對應事件被觸發(fā)時候就會自動執(zhí)行function中的代碼。

掌握了以上JavaScript，就可以做某寶里面的輪播圖片了！

代碼的格式可能有點亂，需要復制到編輯器上看。

</div>

</a>

</div>

<ul>

<li>

相約情人節(jié)

</li>

<li>

新款上線

</li>

<li>

憤怒小鳥特賣

</li>

<li>

男鞋促銷第一

</li>

<li>

春季新品發(fā)布

</li>

</ul>

</a>

</div>

</div>

</div>

</ul>

</div>

<ul>

</ul>

</div>

css的代碼：

.content-list{

width:20%;

height:560px;

border:1px solid #ccc;

float:left;

}

.content-body{

width:79%;

height:560px;

border:1px solid #ccc;

float: right;

}

.content-body,.content-list{

margin-top: 10px;

}

.content-right-top{

width:100%;

height:320px;

border:1px solid #ccc;

}

.content-right-bottom{

width:100%;

height:220px;

border:1px solid #ccc;

}

.slider{

width:69%;

height:320px;

border:1px solid #ccc;

float:left;

position: relative;

}

.slider-right{

float: left;

width: 30%;

height:320px;

border:1px solid #ccc;

}

.slier-right-top{

height:160px;

border: 1px solid #ccc;

}

.content-right-bottom{

margin-top:5px;

}

.list-title{

height:30px;

border: 1px solid #ccc;

}

.footer{

text-align: center;

}

.slider-img>a>img{

width: 100%;

height:320px;

position: absolute;

z-index:9;

top:0;

left:0;

}

.slider-img>a>img:first-child{

z-index:11;

}

.slider-dot{

position: absolute;

z-index: 13;

bottom: 0;

width: 100%;

}

.slider-dot>a{

text-decoration: none;

}

.slider-dot>a>ul{

width: 100%;

bottom:0;

}

.slider-dot>a>ul>li{

display: inline-block;

list-style: none;

width:19.4%;

height:35px;

text-align: center;

font-size: 12px;

color:#fff;

background-color: rgba(0,0,0,0.5);

}

.slider-dot>a>ul>li:hover,.active{

background-color: rgba(0,200,0,0.8) !important;

}

.list-tittle>ul>li{

list-style: none;

display: inline-block;

color: white;

width: 80px;

height: 20px;

text-align: center;

border: 1px solid #ccc;

margin-left: 10px;

background-color: red;

}

js的代碼：

$(function(){

var index=0;

var timer=setInterval(slider,2000);

var $img=$(".slider-img>a>img");

var $li=$(".slider-dot>a>ul>li");

function slider(){

if(index>4){

index=0;

}

/*第二張顯示其他張隱藏*/

$img.eq(index).fadeIn().siblings().fadeOut();

/*對應圖片滾動，對應說明也要加上active樣式*/

$li.eq(index).addClass("active").siblings().removeClass("active");

index++;

}

/*當鼠標懸停時候停止輪播*/

$(".slider").hover(function(){

clearInterval(timer);

},function(){

timer=setInterval(slider,2000);

})

/*鼠標懸停到那個說明就要顯示哪一張圖片*/

$li.hover(function(e){

e.stopPropagation();

e.preventDefault();

index=$(this).index();

$img.eq(index).fadeIn().siblings().fadeOut();

$(this).addClass("active").siblings().removeClass("active");

},function(e){

e.stopPropagation();

e.preventDefault();

})

$.ajax({

url:'../data/product_1.json',

type:'get',

success:function(data){

var pro=data;

var list='';

$(pro).each(function(index,elem){

list+='<li id="'+elem.id+'"><a href=""><img src="'+elem.src+'"/></a></li>'

});

$(".list-content>ul").append(list);

}

})

技術(shù)交流群里面，有人冒出來問，誰有輪播插件，因為我也沒用過，但是我覺得輪播這個功能其實蠻簡單的，可以自己創(chuàng)造，我覺得編程的樂趣就在于創(chuàng)造，創(chuàng)造出屬于你的東西，編程才有了靈魂。

下面不多說，由于代碼有幾部分，所以圖片方式進行代碼演示：

首先準備一下材料：我使用的是jquery寫的，所以需要準備這個插件就可以了：

主要HTML代碼

解釋：整個輪播會分為3部分：一個大的div,包含了圖片、輪播節(jié)點、動畫插入。其中輪播節(jié)點與動畫展示使用絕對位置定位，使得它從流中脫離出來，具體樣式如下圖：

主要的樣式設計

解釋：輪播節(jié)點就是圖片地址一樣，輪到哪一張就亮哪一張。節(jié)點使用絕對位置，并設置位于第三層。

接下來就是使得它開始動起來，動起來需要使用什么方法呢？當然了有兩種方法，一種是CSS3，另一種是使用計時器配合動畫方法animate。CSS3這種屬于純樣式設計，對于固定的來說，還是可以的，至于動態(tài)的，后期不斷增加更改的，暫時沒去了解過，所以下面使用定時器這種方法：

代碼如下：

主要js代碼

上面的代碼，主要邏輯都有注釋，imglabel(i)用來實時跟蹤圖片，跟著圖片走；divanimate(i)用來每一張圖片插入動畫，里面的html屬于變量相當于組件復用，可以往里面?zhèn)魅肽阋f的話，和其他內(nèi)容。

那么整個輪播就出來，效果如下

創(chuàng)造是編程的樂趣，所以歡迎小伙伴們留言，一起討論提提升。

在線咨詢

上一篇：前端開發(fā)，不用 JavaScript 行不行？- 基
下一篇：HTML5兼容性代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

JavaScript學習筆記：掌握了獲取元素和事件綁

您的項目需求