JS应用技巧
JS获取网页中HTML元素的几种方法分析getElementById getElementsByName getElementsByTagName 大概介绍getElementById ，getElementsByName ，getElementsByTagName
后两个是得到集合，byid只是得到单个对象
getElementById 的用法
举个例子：
同一页面内的引用方法:
1、使用id：
link1.href，返回值为https://www.wendangku.net/doc/5715692614.html,
2、使用name：
document.all.link1.href，返回值为https://www.wendangku.net/doc/5715692614.html,
3、使用sourseIndex：
document.all(4).href //注意，前面还有HTML、HEAD、TITLE和BODY，所以是4
4、使用链接集合：
document.anchors(0).href
//全部的集合有all、anchors、applets、areas、attributes、behaviorUrns、bookmarks、boundElements、cells、childNodes、children、controlRange、elements、embeds、filters、
forms、frames、images、imports、links、mimeTypes、options、plugins、rows、rules、scripts、styleSheets、tBodies、TextRectangle，请参考MSDN介绍。
其实方法3和方法4是一样使用的集合，只是一个是all，可以包括页面所有标记，而anchors只包括链接。
5、getElementById：
document.getElementById("link1").href
6、getElementsByName：
document.getElementsByName("link1")[0].href //这也是一个集合，是所有name等于该方法所带参数的标记的集合
7、getElementsByTagName：
document.getElementsByTagName("A")[0].href //这也是一个集合，是所有标记名称等于该方法所带参数的标记的集合
8、tags集合：
document.all.tags("A")[0].href
//与方法7一样是按标记名称取得一个集合
除此之外：
event.scrElement可以获得触发时间的标记的引用;
document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用;
https://www.wendangku.net/doc/5715692614.html,ponentFromPoint(event.clientX,event.clientY)可以获得鼠标所在处元素的引用;
还可以通过元素的父子节点和兄弟节点关系来引用，如nextSibling(当前节点的后一节点)、previousSibling(当前节点的前一节点)、childNodes、children、firstChild、lastChild、parentElement等都是父子节点和兄弟节点的一些引用;还不仅限于此。
上面是同一页面内的常见引用方法，另外还涉及到不同页面中的
getElementsByName返回的是所有name为指定值的所有元素的集合
“根据NAME 标签属性的值获取对象的集合。”
集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在
一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型.
document.getElementsByName, document.getElementsByTagName,
document.formName.elements 这类方法所得到的结果都是集合.
例：
获取文件指定的元素
document.getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用：
Temp = document.getElementsByName('happy')来引用
当Temp只有1个的时候,那么就是Temp[0],有多个的时候,用下标法Temp[i]循环获取
也有例外:
在ie 中getElementsByName(“test“)的时候返回的是id=test的object数组，而firefox 则返回的是name= test的object的数组。
按照w3c的规范应该是返回的是name= test的object的数组。
firefox和ie中的getElementByID相同:获取对ID 标签属性为指定值的第一个对象的引用。
注意getElementsByName 有s在里面
document.getElementById()可以控制某个id的tag
document.getElementsByName()，返回的是一个具有相同name 属性的元素的集合，而不是某个，注意有“s”。
而document.getElementsByTagName() 返回的是一组相同TAG 的元素集合。
同一个name可以有多个element，所以用
document.getElementsByName("theName")
他return 一个collection，引用的时候要指名index
var test = document.getElementsByName('testButton')[0];
id那个，是唯一的
还应该注意:对类似没有name属性，对它name属性为伪属性
document.getElementsByName() 会失效，当然TD可以设置ID属性，然后用document.getElementsByID("DDE_NODAY"); 调用。
JavaScript 调用C#变量实例
cs页面代码
public string tmp;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
tmp = "test,test1";
}
用javascript实现评估用户输入密码的强度
密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的密码进行安全评估,并显示出相应的提示信息,那么对用户设置一个安全的密码将有很大帮助。同时也使得网站更具人性化,更有吸引力.
什么是一个安全的密码呢?本程序按以下的方式进行评估.
1.如果密码少于5位,那么就认为这是一个弱密码.
2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.
3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码.
4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码.
具体程序如下(演示地址:https://www.wendangku.net/doc/5715692614.html,/reg):
< script language=javascript>
//程序设计:环球万维https://www.wendangku.net/doc/5715692614.html,
//本程序是环球万维原创程序,若需转载,请注明网址及出处,谢谢.
//以上信息与文章正文是不可分割的一部分,所以如果您要转载本文章,您必须保留以上信息.
//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN){
if (iN>=48 && iN <=57) //数字
return 1;
if (iN>=65 && iN <=90) //大写字母
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8; //特殊字符
}
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}
//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW){
if (sPW.length<=4)
return 0; //密码太短
Modes=0;
for (i=0;i //测试每一个字符的类别并统计一共有多少种模式. Modes|=CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } //pwStrength函数 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 function pwStrength(pwd){ O_color="#eeeeee"; L_color="#FF0000"; M_color="#FF9900"; H_color="#33CC00"; if (pwd==null||pwd==''){ Lcolor=Mcolor=Hcolor=O_color; } else{ S_level=checkStrong(pwd); switch(S_level) { case 0: Lcolor=Mcolor=Hcolor=O_color; case 1: Lcolor=L_color; Mcolor=Hcolor=O_color; break; case 2: Lcolor=Mcolor=M_color; Hcolor=O_color; break; default: Lcolor=Mcolor=Hcolor=H_color; } } document.getElementById("strength_L").style.background="/Lcolor"; document.getElementById("strength_M").style.background=Mcolor; document.getElementById("strength_H").style.background=Hcolor; return; } < /script> < form name=form1 action="" > 输入密码:< input type=password size=10 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)> < br>密码强度: < table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display:inline'> < tr align="center" bgcolor="#eeeeee"> < td width="33%" id="strength_L">弱< /td> < td width="33%" id="strength_M">中< /td> < td width="33%" id="strength_H">强< /td> < /tr> < /table> < /form> 上传图片时产生图片预览的JS代码 onpropertychange="document.all.imgID.src='file:///'+this.value"> 图片链接 缩略图
用Javascript和CSS让DIV中的图片居中
这个也是一种让图片在屏幕中居中的方法，用于IE6、Firefox和Opera下都有效！代码如下：
相关资料:
“父窗口”与“弹出子窗口”之间的刷新和传值
W eb开发中适当运用一些弹出子窗口有很多好处,可以节省页面设计代价,获得好的用户体验,在最近项目开发中我遇到了几个父子窗口的问题,现在整理给大家,希望有所帮助.
情景一: 打开某一子窗口, 子窗口中任一按钮点击时候不能弹出新页面，进行完操作后,关闭该子窗口,刷新父窗口.
1: 页面A:父窗口,其中有一个打开子窗口的链接,页面C
A中有如下js代码:
2: 页面B,此为中间页,起过渡作用
B html 代码如下:
3:页面C ,要打开的子窗口.
它关闭时候刷新父窗口很简单,只要把A中
页面C 改为
情景二:打开某一需要用到activex控件子窗口, 子窗口中任一按钮点击时候不能弹出新页面，进行完操作后,关闭该子窗口,刷新父窗口。
此时候就不能用 window.showModalDialog（）事件打开模式对话框了，因为activex控件会报错，必须用window.open()
1: 页面A:父窗口,其中有一个打开子窗口的链接,页面
B
A中有如下js代码.
2: 页面B,要打开的子窗口，关闭时候触发
window.opener.location.reload();window.close();即可刷新父窗口并且关闭子窗口.
情景三:打开某一子窗口, 让用户选择要添加的东东，譬如要添加到文章里的相片选择后关闭子窗口，然后选择的东东出现在父窗口里。
在下图中，我点击"添加照片"链接然后弹出子窗口，在子窗口中选择后点击"添加照片"按钮，子窗口自动关闭，并且父窗口"已添加照片："下面列出了我选择的照片。
实现方法：类似情景一需要中间页面B ，只是子窗口C中点击"添加按钮"时触发的js事件中，除了获得选中的checkbox的值外,还要把获得的值回传给父窗口,传值回去的代码如下：
window.parent.returnValue="选中的checkbox";
window.parent.close();
而父窗口要捕获此值就要在情景一中所说的open()事件中添加获得返回值
注意这里的str是获取的返回值, 而picobj是你要显示被选择东东所放位置的div的id ,这里是
点击网页空白处弹出网页的JavaScript广告代码
现在一些网站广告都采用了点击网页空白处弹出网页的效果，这样的方法有一些好处，就是一般的浏览器不会禁止这种方式的弹出页面，而且对于网站来说，这种弹出方式也比较容易接受，哈哈，icech用过几次还是不错的，网上还有一些判断cookie和时间的方法，道理都是一样的，增加相应的功能就可以了，以下是最基本的代码：
< SCRIPT LANGUAGE="javascript">
var ClickSuccess = false;
var opened = false;
function myclick() {
if (!opened && !ClickSuccess){
if (window.Event)
{
top.document.captureEvents(Event.CLICK);
document.captureEvents(Event.CLICK);
}
top.document.onclick = goto;
document.onclick = goto;
self.focus();
ClickSuccess=true;
}
}
function goto() {
if (!opened) {
popwin = window.open("");
if (popwin) {
opened = true;
}
//self.focus(); }
}
myclick();
< /SCRIPT>
网页内容拷贝增加版权信息的JavaScript代码
一些网站怕文章被复制，使用了很多种方法来保护自己的安全，其实现在的技术，已经没有什么能够阻止一个想要COPY你内容的方法了，除非用图片形式能稍微阻止一下，还不如我们大度一些，在复制内容的过程中增加一个自己的版权信息就好了。
以下的方法是在COPY网页内容的时候会在复制后的内容后面增加一段网站的版权信息，代码十分简单，你只要修改那段版权信息代码就可以自己用了！
代码如下：
简易计算器的实现(JSP)
用JSP编写的一个简易计算器实现代码如下： <%@ page contentType="text/html;charset=gb2312"%>
简易计算器
//接收运算符号 String oper=request.getParameter("op"); Double dnum1=0.0; Double dnum2=0.0; Double result=0.0; //java中String -> int if(num1!=null&&num2!=null&&oper!=null) { dnum1=Double.parseDouble(num1); dnum2=Double.parseDouble(num2); //计算 if(oper.equals("+")) { //加 result=dnum1+dnum2; } else if(oper.equals("-")) { //减 result=dnum1-dnum2; } else if(oper.equals("×")) { //乘 result=dnum1*dnum2; } else { //除 result=dnum1/dnum2; } } %>