js專案 封裝庫 下拉列表

2021-08-03 17:24:21 字數 1005 閱讀 2522

本篇,我們主要**一下部落格**頂部下拉列表的製作,其中會用到幾個知識點,滑鼠移入移出的 hover()方法、隱藏和顯示方法 hide()和 show()。

建立乙個頂部 header 局域,放入 logo 和個人中心,然後製作乙個下拉列表。

顏色引數:背景色:fbf7e1、移入背景色:ffcc00

建立下來選單,我們第一步需要把完整的顯示介面搭建起來。第二步,考慮需要隱藏的部分。最後通過滑鼠移入顯示隱藏部分,然後移出繼續隱藏。

//設定隱藏

base.prototype.hide = function

() return

this;

}

//設定顯示

base.prototype.show = function

() return

this;

}

//設定滑鼠移入移出

base.prototype.hover = function

(over, out)

return

this;

}

最後我們需要對「個人中心」本身使用 this 呼叫的時候,需要對類庫的構造部分進行擴充套件。

//前台呼叫

var $ = function

(_this)

//基礎庫

function

base

(_this)

}

//前台呼叫部分

$().getclass('member').hover(function

() , function

() );

js專案 封裝庫 連綴

在呼叫庫的時候,我們需要能夠在前台呼叫的時候可以同時設定多個操作,比如設定 css,設定innerhtml,設定 click事件等等。所謂連綴,最簡單的理解就是一句話同時設定乙個或多個節點兩個或兩個以上的操作 比如 getid box css color red html 標題 click func...

JS操作下拉列表

1 往下拉框中新增選項 var item new option title,value document.all.ddlname.add item 2 刪除下拉框中的某一項 var obj document.getelementbyid ddlname obj.remove obj.options ...

js控制select 下拉列表

通過js控制select下拉列表 通過js獲取select下拉列表的值class form control 1option events 利用以下函式,可以取到被選中的option的位 getselected function 或利用此函式可以獲取被選中的option的值 getselected f...