網頁內容搜索js代碼例子,js搜索框代碼

本文目錄一覽：

• 1、靜態網頁如何用js實現查找功能？
• 2、如何查找網頁元素對應的JS代碼（如圖）
• 3、js搜索框代碼

靜態網頁如何用js實現查找功能？

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “

html

 head

  title New Document /title

  meta name=”Generator” content=”EditPlus”

  meta name=”Author” content=””

  meta name=”Keywords” content=””

  meta name=”Description” content=””

 /head

script type=”text/javascript”

!–

window.onload = function(){

var o = document.getElementById(‘openUrl’);

o.onclick = function(){

    // 輸入的字元與網址的對應關係

var url = {

‘aaa’ : ‘0001.html’,

‘bbb’ : ‘0002.html’,

‘ccc’ : ‘0003.html’,

‘ddd’ : ‘0004.html’

}

var key = document.getElementById(‘key’).value;

// 如果存在改對應關係則打開，否則打開默認網址

window.open(url[key] || ‘默認網址’);

}

}

//–

/script

 body

  input type=”text” id=”key” /input type=”button” id=”openUrl” value=”打開網址”/

 /body

/html

如何查找網頁元素對應的JS代碼（如圖）

如果會調試，可以用打開瀏覽器的調試功能。

以chrome為例，按F12打開調試窗口，切換到Sources選項卡，最右邊的Event Listener Breakpoints里勾選Mouse下的mouseover即可，當滑鼠移動到圖片上時觸發mouseover事件，chrome可響應事件設置斷點，跟蹤js代碼查看就可以。

js搜索框代碼

    /* 問題不夠明確 */

    input class=”ipt_search” type=”search” placeholder=”請輸入搜索內容”/

    script

        /* 搜索input */

        var searchIpt = document.getElementsByClassName(‘ipt_search’)[0];

        /* 搜索內容 */

        var searchValue = searchIpt.value;

    /script