Web中常用的Javascript技巧(1)

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
事件源对象 


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[索引]

 

对象绑定事件 


插件数目

 
navigator.plugins 


取变量类型

 
typeof($js_libpath) == "undefined" 


下拉框

 
下拉框.options[索引] 
下拉框.options.length 


查找对象 


document.getElementsByName("r1"); 
document.getElementByIdx(id); 



定时 


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"

 
自动刷新 


<meta HTTP-EQUIV="***" CONTENT="8;URL=http://c98.yeah.net">

 
简单邮件

 
<a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"> 


快速转到位置 


obj.scrollIntoView(true)

 


 
<a name="first"> 
<a href="#first">anchors</a> 


网页传递参数

 
location.search();


可编辑

 
obj.contenteditable=true 


执行菜单命令

 
obj.execCommand 


双字节字符 


/[^\x00-\xff]/ 


汉字 


/[\u4e00-\u9fa5]/ 


让英文字符串超出表格宽度自动换行

 
word-wrap: break-word; word-break: break-all; 


透明背景

 
<IFRAME src="http://www.blog.com.cn/1.htm" width=300 height=180 allowtransparency></iframe> 


获得style内容

 
obj.style.cssText 


HTML标签

 
document.documentElement.innerHTML 


第一个style标签

 
document.styleSheets[0] 


style标签里的第一个样式

 
document.styleSheets[0].rules[0] 


防止点击空链接时,页面往往重置到页首端。

 
<a href="javascript:function()">word</a> 


上一网页源

 
asp: 
request.servervariables("HTTP_REFERER") 
javascript: 
document.referrer 


释放内存

 
CollectGarbage();


禁止右键 


document.oncontextmenu = function() { return false;} 


禁止保存 


<noscript><iframe src="http://www.blog.com.cn/*.htm"></iframe></noscript>


禁止选取


<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()> 


禁止粘贴

 
<input type=text onpaste="return false"> 


地址栏图标 


<link rel="Shortcut Icon" href="favicon.ico">

favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 
收藏栏图标 

<link rel="Bookmark" href="favicon.ico"> 



查看源码


关闭输入法

 
<input style="ime-mode:disabled"> 


自动全选

 
<input type=text name=text1 value="http://www.blog.com.cn/123" onfocus="this.select()"> 


ENTER键可以让光标移到下一个输入框

 
<input onkeydown="if(event.keyCode==13)event.keyCode=9">


文本框的默认值

 
<input type=text value="http://www.blog.com.cn/123" onfocus="alert(this.defaultValue)"> 


title换行

 
obj.title = "123&#13sdfs&#32" 


获得时间所代表的微秒 


var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime() 


窗口是否关闭 


win.closed 


checkbox扁平

 
<input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"> 


获取选中内容 


document.selection.createRange().duplicate().text


自动完成功能

 
<input  type=text  autocomplete=on>打开该功能  
<input  type=text  autocomplete=off>关闭该功能 


窗口最大化 


<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 


无关闭按钮IE

 
window.open("aa.htm", "meizz", "fullscreen=7"); 


统一编码/解码

 
alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) 
encodeURIComponent对":"、"/"、";" 和 "?"也编码 



表格行指示


//各种尺寸 


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


<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0"> 


//正则匹配 


匹配中文字符的正则表达式: [\u4e00-\u9fa5] 
匹配双字节字符(包括汉字在内):[^\x00-\xff] 
匹配空行的正则表达式:\n[\s| ]*\r 
匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/  
匹配首尾空格的正则表达式:(^\s*)|(\s*$)(像vbscript那样的trim函数) 
匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 
匹配网址URL的正则表达式:http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? 
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2006/11/08/2912548.html ,如需转载请自行联系原作者
相关文章
|
6天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
504 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
4月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
98 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
64 2
|
4月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
59 1
JavaScript控制台:提升Web开发技能的秘密武器
|
3月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
61 4
|
4月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
61 12
|
5月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
245 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping

热门文章

最新文章