javascript技巧大全

最新推荐文章于 2024-08-19 15:26:06 发布
最新推荐文章于 2024-08-19 15:26:06 发布
阅读量564 收藏
点赞数
分类专栏： JS知识 文章标签： javascript 正则表达式 autocomplete input function command
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxmcl/article/details/1642137
版权
  • 事件源对象
    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.οnmοusedοwn=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"
  • 自动刷新
    <meta HTTP-EQUIV="refresh" 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="/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="/*.htm"></iframe></noscript>
  • 禁止选取<body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false"οnmοuseup="document.selection.empty()> 
  • 禁止粘贴
    <input type=text οnpaste="return false">
  • 地址栏图标
    <link rel="Shortcut Icon" href="favicon.ico">
    favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
  • 收藏栏图标
    <link rel="Bookmark" href="favicon.ico">
  • 查看源码
    <input type=button value=查看网页源代码 οnclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">
  • 关闭输入法
    <input style="ime-mode:disabled">
  • 自动全选
    <input type=text name=text1 value="123" οnfοcus="this.select()">
  • ENTER键可以让光标移到下一个输入框
    <input οnkeydοwn="if(event.keyCode==13)event.keyCode=9">
  • 文本框的默认值
    <input type=text value="123" οnfοcus="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)"><br>
  • 获取选中内容
    document.selection.createRange().duplicate().text
  • 自动完成功能
    <input  type=text  autocomplete=on>打开该功能 
    <input  type=text  autocomplete=off>关闭该功能   
  • 窗口最大化
    <body οnlοad="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对":"、"/"、";" 和 "?"也编码
  • 表格行指示
    <tr οnmοuseοver="this.bgColor='#f0f0f0'" οnmοuseοut="this.bgColor='#ffffff'">


    //各种尺寸


    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;  

  • //过滤数字


    //特殊用途


    //不缓存



    //正则匹配



    //无提示关闭


    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  = '<object id=noTipClose classid= "clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">'
           str += '<param name= "Command" value= "Close"></object>';
           document.body.insertAdjacentHTML( "beforeEnd", str);
           document.all.noTipClose.Click();
      }
          else
      {
           window.opener = null;
           window.close();
          }
       }
     else
     {
      window.close()
       }
    }

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


    <script language= "javascript"> 
    function getoffset(e)
    { 
      var t=e.offsetTop; 
      var l=e.offsetLeft; 
      while(e=e.offsetParent)
     { 
      t+=e.offsetTop; 
      l+=e.offsetLeft; 
     } 
      var rec =  new  Array(1);
     rec[0]  = t;
     rec[1] = l;
      return rec
    } 
    </script>

    //获得控件的绝对位置(2)


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

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



    //光标停在文字最后




    <object id=min classid= "clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
    <param name= "Command" value= "Minimize"></object> 
    <object id=max classid= "clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
    <param name= "Command" value= "Maximize"></object> 
    <OBJECT id=close classid= "clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> 
    <PARAM NAME= "Command" value= "Close"></OBJECT> 
    <input type=button value="/最小化 οnclick=min.Click()> "
    <input type=button value="/最大化 οnclick=max.Click()> "
    <input type=button value="/关闭 οnclick=close.Click()> "

     


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

     


    <input type=button value=导入收藏夹 οnclick= "window.external.ImportExportFavorites(true,'http://localhost');">
    <input type=button value=导出收藏夹 οnclick= "window.external.ImportExportFavorites(false,'http://localhost');">
    <input type=button value=整理收藏夹 οnclick= "window.external.ShowBrowserUI('OrganizeFavorites', null)">
    <input type=button value=语言设置   οnclick= "window.external.ShowBrowserUI('LanguageDialog', null)">
    <input type=button value=加入收藏夹 οnclick= "window.external.AddFavorite('http://www.google.com/', 'google')">
    <input type=button value=加入到频道 οnclick= "window.external.addChannel('http://www.google.com/')">
    <input type=button value=加入到频道 οnclick= "window.external.showBrowserUI('PrivacySettings',null)">

     


    <input type=text οnkeypress= "return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" οnpaste= "return !clipboardData.getData('text').match(//D/)" οndragenter= "return false">  

    <script language= "javascript">
    function cc()
    {
      var e = event.srcElement;
      var r =e.createTextRange();
     r.moveStart('character',e.value.length);
     r.collapse( true);
     r.select();
    }
    </script>
    <input type=text name=text1 value= "123" οnfοcus= "cc()">

    匹配中文字符的正则表达式： [/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- ./?%&=]*)?
    以下是例子：
    利用正则表达式限制网页表单里的文本框输入内容：
    用正则表达式限制只能输入中文：οnkeyup= "value="/value.replace(/["^/u4E00-/u9FA5]/g,'')" onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))"
    1.用正则表达式限制只能输入全角字符： οnkeyup= "value="/value.replace(/["^/uFF00-/uFFFF]/g,'')" onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^/uFF00-/uFFFF]/g,''))"
    2.用正则表达式限制只能输入数字：οnkeyup= "value="/value.replace(/["^/d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"
    3.用正则表达式限制只能输入数字和英文：οnkeyup= "value="/value.replace(/[/W]/g,"'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"

    //消除图像工具栏

     


    <IMG src="/"mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false"> 
    or
    <head>
    <meta http-equiv="imagetoolbar" content="no">
    </head>
zxmcl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web开发必知Javascript技巧大全
10-22
JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等，通过本文给大家介绍Web开发必知Javascript技巧大全，需要的朋友参考下吧
js打开客户端程序
05-30 1521
      请输入要运行的程序：确定重新输入 记事本 画图板 计算器 cmd Regedit Msconfig WINAMP IE .. %windir% %temp% WINAMP     function Run(command) { window.oldOnError = window.onerror;                window._command = command;
innerHTML、outerHTML、innerText、outerText的区别
12-18 984
 第一id="div">type="button">This is aDIV!OnClick="alert(div.innerHTML);">OnClick="alert(div.outerHTML);">OnClick="alert(div.innerText);">OnClick="alert(div.outerText);">第二innerHTML,和outerHTML好像都能动态改变网页内
IE后退清空表单
05-31 890
http://www.w3.org/1999/xhtml">>    ex1   我的信息还在  我的哪去了呢？？      _fcksavedurl=""/">" click here    
网页代码常用小技巧！
05-15 857
网页代码常用小技巧！ 1. oncontextmenu=window.event.returnvalue=false 将彻底屏蔽鼠标右键〈table border oncontextmenu=return(false)〉〈td〉no〈/table〉 可用于Table 2. 〈body
后台吊用JS方法
06-01 778
CS端butdel.Attributes.Add("onlick", "javascript:play(" + text1.Text + ")");客户端   function play(filename)   {   filename=http://www.yoq.net/recordfiles/+filename;   document.MediaPlayer1.FileN
js实现页面跳转的几种方式
04-16 668
第一种： window.location.href="login.jsp?backurl="+window.location.href;第二种： alert("返回"); window.history.back(-1);第三种： window.navigate("top.jsp");第四种：self.location=top.htm;第五种：alert("非法访问！");top
escape,encodeURI,encodeURIComponent函数比较
06-07 631
js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent1、   传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。                            例如：document.wr
2008年度75套最佳网页设计资源
05-17 481
字体60 套公司用设计字体 [Smashing Magazine]20 套免费手写字体与资源 [Fuel Your Creativity]50 套专业Web设计与印刷用字体 [Noupe]15 套漂亮的高质量免费字体 [Smashing Magazine]21 套来自 DeviantArt 的艺术字体 [Designflavr]设计专业人士使用的7套最佳字体 [Just C
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 362
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 451
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 83
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 78
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
Vue路由
程小白的博客
08-19 412
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 1012
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 980
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
JavaScript技巧大全：200+实例展示
本文档汇集了200多个JavaScript技巧代码，涵盖了网页开发中的各种实用场景。以下是一些精选的关键知识点： 1. 文本框焦点管理： `onBlur` 和 `onFocus` 事件在JavaScript中用于处理文本框的输入聚焦与失去焦点状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值