本文目录一览:
静态网页如何用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