小技巧:获得网页控件方法大全

 更新时间:2016年9月20日 19:05  点击:1964

编写JS的时候,总会调用的网页上的控件,今天有心情,把获得网页上的控件方法写了下,有不足,请补充.
【总结】一般我喜欢使用:document.getElementById()和document.all().现在觉得document.all.*比较不错!
关于其更深一步的原理暂不清楚,希望有明白的人给个深入讲解的链接!!


本帖以获得页面的text文本为例,获得控件后为其赋值为"你好!"
【附一:方法大全】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获得网页控件的方法大全</title>
<script language="javascript">
 function AXzhz()
 { 
  //【AX为文本框的id,通过下面的方法对文本框赋内容】
 
  //【根据控件ID】
  document.getElementById("AX").value="你好!" ;
  //document.all("AX").value="你好!"; 
  //document.all.AX.value="你好!";
  //不成功 document.AX.value="你好!";
 
  //document.body.all("AX").value="你好!";
  //document.body.all.AX.value="你好!";
  //不成功 document.body.getElementById("AX").value="你好!";
 
  //formid.AX.value="你好!"; 
  //不成功 formid.getElementById("AX").value="你好!";
  //不成功 formid.all.getElementById("AX").value="你好!";
  //formid.all.AX.value="你好!";
  //formid.all("AX").value="你好!";
 
  //【根据控件name,返回的是一个数组集合,再通过下标获得控件】
  //document.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.all.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.getElementsByName("textfield")[0].value="你好!";
 
  //【根据标签,返回的是一个数组集合,严格来说是获得标签中的内容,估计用到的机会不是很多】 
  //document.getElementsByTagName("td")[1].innerHTML="你好!";   
 }
</script>
</head>
<body>
<form id="formid">
<table width="200" border="1">
<!--title是鼠标在上面的时候出现的提示-->
  <tr title="快啊快啊!!" onclick="AXzhz()">
    <td bgcolor="#FF9933">你点我啊!!<br>
 <INPUT TYPE="text"value="根据标签测试时使用,请仔细观察结果!">
 </td>  
  </tr>
  <tr>
  &nbs

<

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符组成的。在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

这里有一些可能会遇到的正则表达式示例:
JScript
 VBScript
 匹配
 
/^[ t]*$/
 "^[ t]*$"
 匹配一个空白行。
 
/d{2}-d{5}/
 "d{2}-d{5}"
 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。
 
/<(.*)>.*</1>/
 "<(.*)>.*</1>"
 匹配一个 HTML 标记。
 

下表是元字符及其在正则表达式上下文中的行为的一个完整列表:  字符
 描述
 

 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'n' 匹配一个换行符。序列 '\' 匹配 "" 而 "(" 则匹配 "("。
 
^
 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 'n' 或 'r' 之后的位置。
 
$
 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 'n' 或 'r' 之前的位置。
 
*
 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
 
+
 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
 
?
 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
 
{n}
 n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。
 
{n,}
 n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
 
{n,m}
 m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
 
?
 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
 
.
 匹配除 "n" 之外的任何单个字符。要匹配包括 'n' 在内的任何字符,请使用象 '[.n]' 的模式。
 
(pattern)
 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '(' 或 ')'。
 
(?:pattern)
 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
 
(?=pattern)
 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

<

  使层能够遮挡住下面的列表,只要在层中加入一个和层相同大小的<Iframe>就可以了。

  具体做法如下:

<DIV>
<!--//原来的内容//-->
<IFRAME width="100%" height="100%" style="position:absolute; top:0px; z-index:-1; border-style:none;"></IFRAME>
</DIV>

  这个方法对于透明的或外形不规则的层无效。




  目前,WWW网站已经成为互联网最重要的组成部分,是您通往成功的关键。因此,创建WWW网站不仅是您网路行销的基础,更是每一个参与网路行销活动的企业或个人的第一步,也是极为重要的一步。首先,我们应该了解一下成功的网站应该具备哪些特点:

  结构清晰并且便于使用。如果人们看不懂或很难看懂您的网站,那么,他如何购买您的产品或服务呢?尽量使用一些醒目的标题或文字来突出您的产品或服务。并且始终牢记即使您拥有最棒的产品,如果客户从您的网站上不清楚您在卖什么或不清楚如何受益的话,他们是不会购买的。

  导向清晰。使用超文本链接或图片链接,使人们能够在您的网站上自由前进或后退,而不要让他们使用浏览器上的前进或后退。记住在所有的图片上使用“ALT”标识符注明图片名称或解释,以便那些不愿意自动加载图片的观众能够了解图片的含义。

  快速的下载时间。不要妄想人人都使用33.6K的猫。很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站,请记住在互联网上30 秒的等待时间与我们平常10分钟等待时间的感觉相同。因此,要尽量避免使用过多的图片及体积过大的图片。

  非图形的内容。许多网站的设计者使用了动态“Gif”图片和Java动画以使网站上的图形或文字产生动态的效果。这不仅仅会增加网页下载时间,它更会分散观众对您网站其他信息的注意力。由于在互联网浏览的大多是一些寻找信息的人们,因此您要确定您的网站将为他们提供的是有价值的内容,而不是过度的装饰。

  方便的反馈及订购程序。这是一个通常被网站设计者忽略的问题。让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望,您是否能够让他们尽快实现吗?是在线还是离线?




<

当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。

替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

很多人看来对这两个属性感到迷惑(最近这个问题在Web Standards Group邮件列表里变多了), 所以我写下我的想法,如何去用它们。

alt属性

为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。
来源:.

Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。比如:.

使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

在写替换文字前仔细想想,保证那些文字确实为那些看不到图像的人提供了说明信息,并且在上下文中有意义。对于那些装饰性的图片可以使用空的值(alt="",引号中间没有空格),而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它,如果你忽略了,那么一些屏幕阅读器会直接阅读图像文件的文件名,那些文字浏览器,比如Lynx会显示图像文件的文件名,而那对于你的浏览者就没什么用了。

包含文字的图像图片设置替换文字是最简单的,图像中包含的文字一般来说就可以作为alt属性值。

至于替换文字的长度,看看WCAG 2.0(网站内容可用性指南2.0)是怎么说的:

Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

我把它理解为“尽可能短,尽需要长”。

即使你想让它显示为提示(tool tip),也不要给文字元素使用alt属性,这并不是它的用法。至今据我所知,那样做仅能在Windows的IE浏览器和古老的Netscape 4.*(windows版本)有效。没有一个Mac的浏览器会将它显示为提示(tool tip)。

当浏览器把替换文字显示为提示(tool tip)后,那些错误使用alt属性的行为也受到了鼓励。一些人开始写无意思的替换文字,因为他们趋向于认为它是一个额外的说明信息,而不是不能显示图像的替换。其他人可能不想让提示(tool tip)出现,然后就完全忽略了写alt属性值。这些错误的做法,都给那些不能看到图像的浏览者造成了困难。

额外的说明信息和非本质的信息请使用title属性。

title属性

title属性为设置该属性的元素提供建议性的信息。
来源: .

title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。

<
[!--infotagslink--]

相关文章

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢,导致php脚本超时了,但也有其它很多原因,下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25
  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题,访问页面时出现408错误,下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因: HTT...2017-01-22
  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件,有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法,喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06
  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下: 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果:...2014-05-31
  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-02
  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13
  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单,更新一条数据的某个字段,一般这样写:复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值,mysql也很简单,修改下where即...2013-10-04
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • js基础知识(公有方法、私有方法、特权方法)

    本文涉及的主题虽然很基础,在许多人看来属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • 安卓手机wifi打不开修复教程,安卓手机wifi打不开解决方法

    手机wifi打不开?让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能,但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21
  • PHP 验证码不显示只有一个小红叉的解决方法

    最近想自学PHP ,做了个验证码,但不知道怎么搞的,总出现一个如下图的小红叉,但验证码就是显示不出来,原因如下 未修改之前,出现如下错误; (1)修改步骤如下,原因如下,原因是apache权限没开, (2)点击打开php.int., 搜索extension=ph...2013-10-04
  • c#中分割字符串的几种方法

    单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25
  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13
  • 连接MySql速度慢的解决方法(skip-name-resolve)

    最近在Linux服务器上安装MySql5后,本地使用客户端连MySql速度超慢,本地程序连接也超慢。 解决方法:在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21
  • C#方法的总结详解

    本篇文章是对C#方法进行了详细的总结与介绍,需要的朋友参考下...2020-06-25
  • Zend studio文件注释模板设置方法

    步骤:Window -> PHP -> Editor -> Templates,这里可以设置(增、删、改、导入等)管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板,分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04