栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

javascript 应用小技巧方法汇总

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

javascript 应用小技巧方法汇总

javascript 在前端应用体验小技巧继续积累。

事件源对象 event.srcElement.tagName 
event.srcElement.type
捕获释放 event.srcElement.setCapture(); 
event.srcElement.releaseCapture(); 
事件按键 event.keyCode event.shiftKey 
event.altKey event.ctrlKey
事件返回值 event.returnValue
鼠标位置 event.x event.y
窗体活动元素 document.activeElement
绑定事件 
document.captureEvents(Event.KEYDOWN);
访问窗体元素 document.all("txt").focus(); 
document.all("txt").select();
窗体命令 document.execCommand
窗体cookie document.cookie
菜单事件 document.oncontextmenu
创建元素 document.createElement("SPAN"); 
根据鼠标获得元素: 
document.elementFromPoint(event.x,event.y).tagName=="TD 
document.elementFromPoint(event.x,event.y).appendChild(ms) 
窗体图片 document.images[索引]
窗体事件绑定 
document.onmousedown=scrollwindow;
元素 document.窗体.elements[索引]
对象绑定事件 
document.all.xxx.detachEvent('onclick',a);
插件数目 navigator.plugins
取变量类型 typeof($js_libpath) == "undefined"
下拉框 下拉框.options[索引] 
下拉框.options.length
查找对象 document.getElementsByName("r1"); 
document.getElementById(id);
定时 
timer=setInterval('scrollwindow()',delay); 
clearInterval(timer);
UNCODE编码 escape() ,unescape
父对象 obj.parentElement(dhtml) 
obj.parentNode(dom)
交换表的行 TableID.moveRow(2,1)
替换CSS document.all.csss.href = "a.css";
并排显示 display:inline
隐藏焦点 hidefocus=true
根据宽度换行 
style="word-break:break-all"
自动刷新 
简单邮件  
快速转到位置 
obj.scrollIntoView(true)
锚  anchors
网页传递参数 location.search();
可编辑 obj.contenteditable=true
执行菜单命令 obj.execCommand
双字节字符 /[^x00-xff]/ 汉字 
/[u4e00-u9fa5]/
让英文字符串超出表格宽度自动换行word-wrap: break-word; word-break: break-all;
透明背景 
获得style内容 obj.style.cssText
HTML标签 
document.documentElement.innerHTML
第一个style标签 document.styleSheets[0]
style标签里的第一个样式 
document.styleSheets[0].rules[0]
防止点击空链接时,页面往往重置到页首端。 word
上一网页源 asp: request.servervariables("HTTP_REFERER") 
javascript: document.referrer
释放内存 CollectGarbage();
禁止右键document.oncontextmenu = function() { return false;}
禁止保存 
禁止选取
地址栏图标  favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
收藏栏图标 
查看源码 
关闭输入法 
自动全选
ENTER键可以让光标移到下一个输入框 
文本框的默认值 
title换行 obj.title = "123
sdfs "
获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/")).getTime()
窗口是否关闭 win.closed
checkbox扁平 
获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 表格行指示

//各种尺寸

s += "rn网页可见区域宽:"+ document.body.clientWidth;  
s += "rn网页可见区域高:"+ document.body.clientHeight;  
s += "rn网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)";  s += "rn网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";  s += "rn网页正文全文宽:"+ document.body.scrollWidth;  
s += "rn网页正文全文高:"+ document.body.scrollHeight;  
s += "rn网页被卷去的高:"+ document.body.scrollTop;  
s += "rn网页被卷去的左:"+ document.body.scrollLeft;  
s += "rn网页正文部分上:"+ window.screenTop;  
s += "rn网页正文部分左:"+ window.screenLeft;  
s += "rn屏幕分辨率的高:"+ window.screen.height;  
s += "rn屏幕分辨率的宽:"+ window.screen.width;  
s += "rn屏幕可用工作区高度:"+ window.screen.availHeight;  
s += "rn屏幕可用工作区宽度:"+ window.screen.availWidth; 

//过滤数字

复制代码 代码如下:

//特殊用途

复制代码 代码如下:

//不缓存

复制代码 代码如下:

//正则匹配

复制代码 代码如下:匹配中文字符的正则表达式: [u4e00-u9fa5]
匹配双字节字符(包括汉字在内):[^x00-xff] 匹配空行的正则表达式:n[s| ]*r
匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/ 
匹配首尾空格的正则表达式:(^s*)|(s*$)(像vbscript那样的trim函数)
匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)? 以下是例子: 利用正则表达式限制网页表单里的文本框输入内容: 用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
1.用正则表达式限制只能输入全角字符: onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
2.用正则表达式限制只能输入数字:onkeyup="value=value.replace(/[^d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
3.用正则表达式限制只能输入数字和英文:onkeyup="value=value.replace(/[W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"

//消除图像工具栏

复制代码 代码如下:  or

//无提示关闭

复制代码 代码如下:function Close() { var ua=navigator.userAgent var ie=navigator.appName=="Microsoft Internet Explorer"?true:false if(ie) {       var IEversion=parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))))   if(IEversion< 5.5)   {    var str  = ''
       str += '
';
       document.body.insertAdjacentHTML("beforeEnd", str);
       document.all.noTipClose.Click();   }       else   {
       window.opener =null;
       window.close();       }    } else {
  window.close()    } }

//取得控件得绝对位置(1)

复制代码 代码如下:
//获得控件的绝对位置(2)

oRect = obj.getBoundingClientRect(); 
oRect.left oRect.

//最小化,最大化,关闭

 
 
 
 
 
 
 
 
 

//光标停在文字最后

复制代码 代码如下:

//页面进入和退出的特效

进入页面
推出页面 
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使 用哪种特效,取值为1-23:
  0 矩形缩小    1 矩形扩大    2 圆形缩小   3 圆形扩大    4 下到上刷新 
  5 上到下刷新   6 左到右刷新    7 右到左刷新    8 竖百叶窗   9 横百叶窗 
  10 错位横百叶窗    11 错位竖百叶窗   12 点扩散    13 左右到中间刷新 
  14 中间到左右刷新   15 中间到上下   16 上下到中间    17 右下到左上   18 右上到左下 
  19 左上到右下    20 左下到右上   21 横条    22 竖条    23

//网页是否被检索

  其中属性值有以下一些:   属性值为"all": 文件将被检索,且页上链接可被查询;   属性值为"none": 文件不被检索,而且不查询页上的链接;   属性值为"index": 文件将被检索;   属性值为"follow": 查询页上的链接;   属性值为"noindex": 文件不检索,但可被查询链接;   属性值为"nofollow":

//打印分页

page1

  
page2

 

//设置打印

 
 
  
 
 
 

具体使用手册,更多信息,点这里

//自带的打印预览

WebBrowser.ExecWB(1,1) 打开 
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 Web.ExecWB(4,1) 保存网页 
Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1) 打印页面设置 
Web.ExecWB(10,1) 查看页面属性 Web.ExecWB(15,1) 好像是撤销,有待确认 
Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 关闭窗体无提示 
 
.Noprint{display:none;} 
.PageNext{page-break-after: always;}  
   
    

//去掉打印时的页眉页脚

 
 

//浏览器验证

function checkBrowser() {   this.ver=navigator.appVersion   this.dom=document.getElementById?1:0   this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;   this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;   this.ie4=(document.all && !this.dom)?1:0;   this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;   this.ns4=(document.layers && !this.dom)?1:0;   this.mac=(this.ver.indexOf('Mac') > -1) ?1:0; 
  this.ope=(navigator.userAgent.indexOf('Opera')>-1); 
  this.ie=(this.ie6 || this.ie5 || this.ie4)   this.ns=(this.ns4 || this.ns5)   this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope)   this.nbw=(!this.bw)   return this; 
}

//计算内容宽和高

      

//无模式的提示框

function modelessalert(Msg) { 
  window.showModelessDialog("javascript:alert(""+escape(Msg)+"");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;"); 
}

//屏蔽按键

 
   
  
 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键 
   
屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键  


//屏蔽打印 @media print{ * {display:none} }

//移动的图层,拖动

1.meizz 
 2. 
 wlecome 
 

//文档状态改变

 

//刷新后不变的文本框

 
   
  .sHistory {behavior:url(#default#savehistory);}  
  
  


//访问剪贴板

(1)拖拽访问

event.dataTransfer.setData("URL", oImage.src); 
sImageURL = event.dataTransfer.getData("URL") (2)普通访问 
window.clipboardData.setData("Text",oSource.innerText); 
window.clipboardData.getData("Text");

//操作cookie

function Setcookie(sName, sValue) { 
document.cookie = sName + "=" + escape(sValue) + "; "; } function Getcookie(sName) { var acookie = document.cookie.split("; "); for (var i=0; i < acookie.length; i++) {  
 var aCrumb = acookie[i].split("=");  if (sName == aCrumb[0])  return unescape(aCrumb[1]); }  } 
function Delcookie(sName) { 
document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;"; }

//setTimeout增加参数

复制代码 代码如下:

//自定义的apply,call

复制代码 代码如下:Function.prototype.apply = function (obj, argu) { if (obj) obj.constructor.prototype._caller = this;  var argus = new Array();
for (var i=0;i   argus[i] = "argu[" + i + "]"; var r; eval("r = " + (obj ? ("obj._caller(" + argus.join(",") + ");") : ("this(" + argus.join(",") + ");"))); return r; };
Function.prototype.call = function (obj) { var argu = new Array();
for (var i=1;i   argu[i-1] = arguments[i]; return this.apply(obj, argu); }; 

//下载文件

复制代码 代码如下:function DownURL(strRemoteURL,strLocalURL) {
try {   var xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");   xmlHTTP.open("Get",strRemoteURL,false);   xmlHTTP.send();   var adodbStream=new ActiveXObject("ADODB.Stream");   adodbStream.Type=1;//1=adTypeBinary   adodbStream.Open();
  adodbStream.write(xmlHTTP.responseBody);
  adodbStream.SaveToFile(strLocalURL,2);   adodbStream.Close();
  adodbStream=null;   xmlHTTP=null;    } catch(e) {   window.confirm("下载URL出错!"); } //window.confirm("下载完成."); }

//检验连接是否有效

复制代码 代码如下:function getXML(URL)  { var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET",URL, false);  try {    xmlhttp.Send();
} catch(e){} finally  {   var result = xmlhttp.responseText;   if(result)    {    if(xmlhttp.Status==200)    {     return(true);
   }    else     {     return(false);
   }   }   else    {
   return(false);   } } }
//POST代替FORM

复制代码 代码如下:

//readyState是xmlhttp返回数据的进度,0=载入中,1=未初始化,2=已载入,3=运行中,4=完成

//组件是否安装
isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "componentID"))

//检查网页是否存在

复制代码 代码如下:function CheckURL(URL) {   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   xmlhttp.Open("GET",URL, false);   try   { 
    xmlhttp.Send();      var result = xmlhttp.status;   }   catch(e) {return(false); }   if(result==200)   {      return true;
  }   xmlhttp = null;   return false;
}

//连接数据库

复制代码 代码如下:

//使用数据岛

复制代码 代码如下:

srno:

times:

  
  
   
  


20041025-01null
20041101-092004年10月1日2点22分0秒

//获得参数

复制代码 代码如下:
search

//可编辑SELECT

复制代码 代码如下:              

//设置光标位置

复制代码 代码如下:function getCaret(textbox) { var control = document.activeElement;
textbox.focus(); var rang = document.selection.createRange();
  rang.setEndPoint("StartToStart",textbox.createTextRange())
control.focus(); return rang.text.length; } function setCaret(textbox,pos) { try
{   var r =textbox.createTextRange();
   r.moveStart('character',pos);    r.collapse(true);    r.select(); } catch(e) {} } function selectLength(textbox,start,len) {
try {   var r =textbox.createTextRange();  
  r.moveEnd('character',len-(textbox.value.length-start));
  r.moveStart('character',start);      r.select(); } catch(e) {//alert(e.description)} } function insertAtCaret(textbox,text) {
textbox.focus(); document.selection.createRange().text = text; }
//页内查找

复制代码 代码如下:function findInPage(str) { var txt, i, found,n = 0; if (str == "")
{   return false; }
txt = document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {   txt.moveStart("character", 1);   txt.moveEnd("textedit"); } if (found) {   txt.moveStart("character", -1);   txt.findText(str);
  txt.select();   txt.scrollIntoView();   n++;   } else
{   if (n > 0)   {
   n = 0;    findInPage(str);   }   else   {
   alert(str + "...            您要找的文字不存在。n n请试着输入页面中的关键字再次查找!");
  } } return false; }

//操作EXECL

复制代码 代码如下:
//自定义提示条

tip 

//插入文字

复制代码 代码如下:document.onclick =function(){  var oSource = window.event.srcElement;  if(oSource.tagName!="DIV")  return false; 
var sel = document.selection;  if (sel!=null) {  var rng = sel.createRange();  if (rng!=null)  rng.pasteHTML("插入文字"); 
}  }

//netscapte下操作xml

doc = new ActiveXObject("Msxml2.DOMdocument"); doc = new ActiveXObject("Microsoft.XMLDOM") ->> doc = (new DOMParser()).parseFromString(sXML,'text/xml')

//判断键值

复制代码 代码如下:


//Javascript document.


请按任意一个键。。。。

//禁止FSO

1.注销组件
regsvr32 /u scrrun.dll 2.修改PROGID 
HKEY_CLASSES_ROOTscripting.FileSystemObject scripting.FileSystemObject
3.对于使用object的用户,修改HKEY_CLASSES_ROOTscripting.
//省略号

            overflow: hidden; text-overflow:ellipsis">
就是比如有一行文字,很长,表格内一行显示不下.

//检测media play版本


//图象按比例

 

//细线SELECT

 

//import

function import() { for( var i=0; i'); 
 else 
  document.write('@import "' + file + '" ;'); 
} };

//js枚举

function getComputerName() { var objWMIService = GetObject("Winmgmts:rootcimv2"); for(e = new Enumerator(objWMIService) ; !e.atEnd() ; e.moveNext()) 
{   var getComputer = e.item(); 
  return getComputer.Name; } 
}

//条件编译


//取得innerText


//mergeAttributes 复制所有读/写标签属性到指定元素。

   
This is a sample DIV element.  
 
This is another sample DIV element.  
 

以上所述就是本文的全部内容了,希望大家能够喜欢。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/101738.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号