源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript 基础问答 四

  • 时间:2022-08-12 13:07 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript 基础问答 四
[b] 二、导航功能增强[/b]   [b]1. 下拉菜单中的链接([url=http://www.javascripter.net/faq/linksina.htm#top]Links in Select Menu[/url])[/b] [b]Q[/b]:我如何实现在下拉菜单中链接到不同的页面? [b]A[/b]:要创建一个所示的下拉菜单: 你可以使用下面的代码:
[list=1] [*]<form> [/*][*]<select  [/*][*]onChange="if(this.selectedIndex!=0) [/*][*]self.location=this.options[this.selectedIndex].value"> [/*][*]<option value="" selected>Select a page [/*][*]<option value="startpag.htm">JavaScript FAQ [/*][*]<option value="numbers.htm">Numbers [/*][*]<option value="strings.htm">Strings [/*][*]<option value="navigati.htm">Navigation [/*][*]<option value="colors.htm">Colors [/*][*]<option value="http://www.javascripter.net">JavaScripter.net [/*][*]</select> [/*][*]</form> [/*][/list]
只需要把菜单项及其相应的URL改为你需要就可以了。你可以使用绝对地址(就像[url=http://www.javascripter.net/]http://www.javascripter.net[/url]),也可以使用相对地址(像 mypage.htm)。   [b]2.  按钮链接([url=http://www.javascripter.net/faq/buttonli.htm#top]Button Links[/url])[/b] [b]Q[/b]:我怎么才能把一个按钮变为指向另外一个页面的超链接呢? [b]A[/b]:要创建一个按钮就像一个: 你可以使用这段代码:
[list=1] [*]<form>  [/*][*]<input type=button  [/*][*]value="insert button text here" [/*][*]onClick="self.location='Your_URL_here.htm'"> [/*][*]</form> [/*][/list]
只需要改为你需要的按钮文本和目标地址。试一下这个: 你可以使用绝对地址(像[url=http://www.javascripter.net/]http://www.javascripter.net[/url])也可以使用相对地址(像mypage.htm)。   [b]3.  后退按钮([url=http://www.javascripter.net/faq/backbutt.htm#top]Back Button[/url])[/b] [b]Q[/b]:我能让按钮像浏览器的“后退”按钮一样吗? [b]A[/b]:要创建你自己的[b]后退[/b]按钮,可以使用这段代码:
[list=1] [*]<form> [/*][*]<input type=button value="Back" [/*][*]onCLick="history.back()"> [/*][*]</form>[/*][/list]
现在试一下:
  [b]4. 前进按钮([url=http://www.javascripter.net/faq/forwardb.htm#top]Forward Button[/url])[/b] [b]Q[/b]:我能让按钮像浏览器中的“前进”按钮一样吗? [b]A[/b]:要创建自己的“前进”按钮,使用这段代码:
[list=1] [*]<form> [/*][*]<input type=button value="Forward" [/*][*]onCLick="history.forward()"> [/*][*]</form>[/*][/list]
如果浏览器上的[b]前进[/b]按钮当前不可用,那么这个“[b]前进[/b]”按钮同样不能工作。这种情况就是当前页是你浏览历史中的最后一页。换句话说,如果你是使用浏览器的“[b]后退[/b]”按钮到达的这个页面(或者[url=http://www.javascripter.net/faq/backbutt.htm]脚本编写的[b]后退[/b]按钮[/url]),那么这个前进按钮就可以工作。现在试一下吧!   5[b]. 查询字符串([url=http://www.javascripter.net/faq/querystr.htm#top]Query Stirngs[/url])[/b] [b]Q[/b]:我的脚步可以访问当前URL中的查询字符串吗? [b]A[/b]:查询字符串(或搜索字符串)是URL中的一个可选部分,它跟在文件名后面,以问号引导(?)。例如,下面的URL在HTML文件名后包含了一个查询字符串 ?myqueryhttp://www.myfirm.com/file.html?myquery 你的脚本可以使用JavaScript的location.search属性访问当前URL中的查询字符按。点击下面按钮试一下看看!(为了查看地址中的URL,你可能想要在顶层浏览器窗口中显示这个页面。) 创建这些按钮的代码是:
[list=1] [*]<form> [/*][*]<input type=button value="Add query ?test"   [/*][*]onClick="selfself.location= [/*][*]self.location.protocol+'//' [/*][*]+self.location.host [/*][*]+self.location.pathname+'?test'"> [/*][*] [/*][*]<input type=button value="Show query"  [/*][*]onClick="alert('Query string: '+self.location.search)"> [/*][*] [/*][*]<input type=button value="Remove query"  [/*][*]onClick="selfself.location= [/*][*]self.location.protocol+'//' [/*][*]+self.location.host [/*][*]+self.location.pathname"> [/*][*]</form>[/*][/list]
[b]注意:[/b]查询字符串有时候可能不会如预期一样的工作。例如,如果你将这个页面保存本地磁盘上,上面在Internet Explorer 4.x就不会工作(但是在Netscape Navigator中依然有效)。   [b]6. 向页面传递参数([url=http://www.javascripter.net/faq/passingp.htm#top]Passing parameters to a page[/url])[/b] Q:我可以从也页面向另外一个页面传递参数吗? A:可以。有几种不同的方式可以实现: [list] [*]把参数保存在[url=http://www.javascripter.net/faq/cookies.htm]cookie[/url]中 [/*][*]把参数保存在另外一个窗口或框架的变量中 [/*][*]把参数存在可以修改的属性top.name(浏览器窗口的名字)中 [/*][*]把参数作为一个[url=http://www.javascripter.net/faq/querystr.htm]查询字符串[/url]拼接在目标页面的URL后面[/*][/list]这里是一个简单的例子来演示所有这些传递参数的方法。传递的值应该是字符换“It_worked”。当你点击下面的按钮时,按钮的事件脚本会存在这些值(1)在名为parm_value的cookie中,(2)以顶层变量top.parm_value保存以及(3)在top.name属性中。然后,脚本引导浏览器到parm_get.htm,它的URL包含一个值为[url=http://www.javascripter.net/faq/escape.htm]URL编码[/url]的查询字符串。   [b]7. 查找文本([url=http://www.javascripter.net/faq/searchin.htm#top]Searching for text[/url])[/b] [b]Q[/b]:我怎样在页面查询一个特定的文本字符串? [b]A[/b]:在Netscape Navigator 4.x中,可以使用window.find(string) 方法查找;参见查找对话框。在Internet Explorer 4.x或更新版本中,创建一个文本范围对象(下面的例子中是TRang),然后使用TRang.findText(string)。 示例:下面的脚本根据用户输入的文本查找并在页面上高亮显示。
这个示例的代码为:
[list=1] [*]<form name="f1" action=""  [/*][*]onSubmit="if(this.t1.value!=null && this.t1.value!='') [/*][*]findString(this.t1.value);return false" [/*][*]> [/*][*]<input type="text" name=t1 value="" size=20> [/*][*]<input type="submit" name=b1 value="Find"> [/*][*]</form> [/*][*] [/*][*]<script language="JavaScript"> [/*][*]<!-- [/*][*]var TRange=null [/*][*] [/*][*]function findString (str) { [/*][*] if (parseInt(navigator.appVersion)<4) return; [/*][*] var strFound; [/*][*] if (navigator.appName=="Netscape") { [/*][*] [/*][*]  // NAVIGATOR-SPECIFIC CODE [/*][*] [/*][*]  strFound=self.find(str); [/*][*]  if (!strFound) { [/*][*]   strFound=self.find(str,0,1) [/*][*]   while (self.find(str,0,1)) continue [/*][*]  } [/*][*] } [/*][*] if (navigator.appName.indexOf("Microsoft")!=-1) { [/*][*] [/*][*]  // EXPLORER-SPECIFIC CODE [/*][*] [/*][*]  if (TRange!=null) { [/*][*]   TRange.collapse(false) [/*][*]   strFound=TRange.findText(str) [/*][*]   if (strFound) TRange.select() [/*][*]  } [/*][*]  if (TRange==null || strFound==0) { [/*][*]   TRange=self.document.body.createTextRange() [/*][*]   strFound=TRange.findText(str) [/*][*]   if (strFound) TRange.select() [/*][*]  } [/*][*] } [/*][*] if (!strFound) alert ("String '"+str+"' not found!") [/*][*]} [/*][*]//--> [/*][*]</script> [/*][*][/*][/list]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部