JavaScript學(xué)習(xí)筆記：掌握了獲取元素和事件綁

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

、什么是JavaScript中的window？

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

2、什么是document？

document是window的一個(gè)屬性，這個(gè)屬性是一個(gè)對象；

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

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

3、什么是JavaScript中的DOM？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用戶和瀏覽器之間的交互行為被稱為事件，比如：鼠標(biāo)的點(diǎn)擊/移入/移出。

在JavaScript中所有的HTML標(biāo)簽都可以添加事件；

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

當(dāng)對應(yīng)事件被觸發(fā)時(shí)候就會(huì)自動(dòng)執(zhí)行function中的代碼。

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

代碼的格式可能有點(diǎn)亂，需要復(fù)制到編輯器上看。

</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();

/*對應(yīng)圖片滾動(dòng)，對應(yīng)說明也要加上active樣式*/

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

index++;

}

/*當(dāng)鼠標(biāo)懸停時(shí)候停止輪播*/

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

clearInterval(timer);

},function(){

timer=setInterval(slider,2000);

})

/*鼠標(biāo)懸停到那個(gè)說明就要顯示哪一張圖片*/

$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ù)交流群里面，有人冒出來問，誰有輪播插件，因?yàn)槲乙矝]用過，但是我覺得輪播這個(gè)功能其實(shí)蠻簡單的，可以自己創(chuàng)造，我覺得編程的樂趣就在于創(chuàng)造，創(chuàng)造出屬于你的東西，編程才有了靈魂。

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

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

主要HTML代碼

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

主要的樣式設(shè)計(jì)

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

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

代碼如下：

主要js代碼

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

那么整個(gè)輪播就出來，效果如下

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

在線咨詢

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

您的項(xiàng)目需求

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

整合營銷服務(wù)商

JavaScript學(xué)習(xí)筆記：掌握了獲取元素和事件綁

您的項(xiàng)目需求