网页内容搜索js代码例子,js搜索框代码

更新：2022-11-20 23:16

本文目录一览：

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>