整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

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

          、什么是JavaScript中的window?

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

          2、什么是document?

          document是window的一個(gè)屬性,這個(gè)屬性是一個(gè)對(duì)象;

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

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

          3、什么是JavaScript中的DOM?

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

          DOM全稱:Document Object Model,即文檔模型對(duì)象;

          學(xué)習(xí)DOM就是學(xué)習(xí)如何通過document對(duì)象操作網(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)對(duì)應(yīng)事件被觸發(fā)時(shí)候就會(huì)自動(dòng)執(zhí)行function中的代碼。

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

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

          <div class="container">

          <div class="content-list">

          </div>

          <div class="content-body">

          <div class="content-right-top">

          <div class="slider">

          <div class="slider-img">

          <a href="#">

          <img src="images/ads/1.jpg" alt=""/>

          <img src="images/ads/2.jpg" alt=""/>

          <img src="images/ads/3.jpg" alt=""/>

          <img src="images/ads/4.jpg" alt=""/>

          <img src="images/ads/5.jpg" alt=""/>

          </a>

          </div>

          <div class="slider-dot">

          <a href="#">

          <ul>

          <li>

          相約情人節(jié)

          <p>全場(chǎng)115元起</p>

          </li>

          <li>

          新款上線

          <p>全場(chǎng)357元起</p>

          </li>

          <li>

          憤怒小鳥特賣

          <p>全場(chǎng)89元起</p>

          </li>

          <li>

          男鞋促銷第一

          <p>全場(chǎng)3.1折起</p>

          </li>

          <li>

          春季新品發(fā)布

          <p>全場(chǎng)4.1折起</p>

          </li>

          </ul>

          </a>

          </div>

          </div>

          <div class="slider-right">

          <div class="slier-right-top">

          </div>

          <div class="slier-right-bottom">

          </div>

          </div>

          </div>

          <div class="content-right-bottom">

          <div class="list-tittle">

          <ul class="tabs">

          <li>家用電器</li>

          <li>日常美食</li>

          </ul>

          </div>

          <div class="list-content">

          <ul>

          </ul>

          </div>

          </div>

          </div>

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

          /*對(duì)應(yīng)圖片滾動(dòng),對(duì)應(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í)蠻簡(jiǎn)單的,可以自己創(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)畫展示使用絕對(duì)位置定位,使得它從流中脫離出來,具體樣式如下圖:

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

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

          接下來就是使得它開始動(dòng)起來,動(dòng)起來需要使用什么方法呢?當(dāng)然了有兩種方法,一種是CSS3,另一種是使用計(jì)時(shí)器配合動(dòng)畫方法animate。CSS3這種屬于純樣式設(shè)計(jì),對(duì)于固定的來說,還是可以的,至于動(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è)輪播就出來,效果如下

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


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


          主站蜘蛛池模板: 精品少妇一区二区三区视频| 无码日韩人妻AV一区免费l | 无遮挡免费一区二区三区| 蜜桃视频一区二区| 亚洲中文字幕久久久一区| 人妻激情偷乱视频一区二区三区| 久久精品综合一区二区三区| 国产在线精品一区在线观看| 精品人妻无码一区二区三区蜜桃一 | 一区二区三区视频免费| 色窝窝免费一区二区三区| 亚洲综合一区二区精品久久| 国产午夜精品一区二区三区| 国产成人无码一区二区三区在线| 日本在线视频一区二区三区 | 国产一区二区三区电影| 亚洲精品色播一区二区| 亚洲一区二区观看播放| 久久精品国产第一区二区三区 | 人妻天天爽夜夜爽一区二区| 亚洲国产一区二区a毛片| 亚洲AV本道一区二区三区四区| 国产成人精品无码一区二区三区| 中文字幕在线一区二区三区| 成人国产一区二区三区| 国产激情з∠视频一区二区| 丝袜人妻一区二区三区网站| 中文字幕精品一区二区精品| 国产伦一区二区三区高清| 一区二区三区午夜| 日本一区二区三区高清| 无码人妻精品一区二区三区夜夜嗨 | 国产一区二区三区在线2021 | 亚洲bt加勒比一区二区| 国产综合视频在线观看一区| 日本一区二区三区不卡视频中文字幕 | 精品一区二区三区中文| 黄桃AV无码免费一区二区三区| 国产成人无码精品一区在线观看| 无码欧精品亚洲日韩一区| 一区二区无码免费视频网站|