JavaScript Tips Highly Recommended_Javascript Tips
Event source object
event.srcElement.tagName
event.srcElement.type
Capture release
event.srcElement.setCapture();
event.srcElement.releaseCapture();
Event key
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
Event return value
event.returnValue
Mouse position
event. x
event.y
Form active element
document.activeElement
Bind event
document.captureEvents(Event.KEYDOWN);
Access form element
document. all("txt").focus();
document.all("txt").select();
Form command
document.execCommand
Form COOKIE
document. cookie
Menu event
document.oncontextmenu
Create element
document.createElement("SPAN");
Get element based on mouse:
document.elementFromPoint(event.x,event. y).tagName=="TD
document.elementFromPoint(event.x,event.y).appendChild(ms)
Form pictures
document.images[index]
Form event binding Define
document.onmousedown=scrollwindow;
Element
document.Form.elements[index]
Object binding event
document.all.xxx.detachEvent('onclick',a) ;
Number of plug-ins
navigator.plugins
Get variable type
typeof($js_libpath) == "undefined"
Drop-down box
Drop-down box.options[index]
Drop-down Box.options.length
Find object
document.getElementsByName("r1");
document.getElementById(id);
Timing
timer=setInterval('scrollwindow()',delay );
clearInterval(timer);
UNCODE encoding
escape(),unescape
Parent object
obj.parentElement(dhtml)
obj.parentNode(dom)
Exchange Table rows
TableID.moveRow(2,1)
Replace CSS
document.all.csss.href = "a.css";
Display side by side
display:inline
Hide focus
hidefocus=true
Wrap line according to width
style="word-break:break-all"
Auto refresh
Simple email
Quick Go to location
obj.scrollIntoView(true)
Anchors
anchors
Web page passing parameters
location.search();
Editable
obj.contenteditable=true
Execute menu command
obj.execCommand
Double-byte characters
/[ ^x00-xff]/
Chinese characters
/[u4e00-u9fa5]/
Let the English string automatically wrap when it exceeds the width of the table
word-wrap: break-word; word-break: break-all ;
Transparent background
Get style content
obj.style.cssText
HTML Tag
document.documentElement.innerHTML
The first style tag
document.styleSheets[0]
The first style in the style tag
document.styleSheets[0].rules[0 ]
Prevent the page from being reset to the top of the page when clicking on an empty link.
word
Previous web page source
asp:
request.servervariables("HTTP_REFERER")
javascript:
document.referrer
Release memory
CollectGarbage();
Disable right click
document.oncontextmenu = function() { return false;}
Disable saving
Disable selection
Address bar icon
favicon.ico The name is preferably the same 16*16 colors and placed in the root directory of the virtual directory
Favorite bar icon
View source code
Turn off input method
Automatically select all
< input type=text name=text1 value="123" onfocus="this.select()">
ENTER key can move the cursor to the next input box
Default value of text box
title newline
obj.title = "123 sdfs "
Get the microsecond represented by the time
var n1 = new Date("2004-10-10".replace(/-/g, "/")).getTime()
Whether the window Close
win.closed
checkbox flat
Get selected content
document.selection.createRange().duplicate().text
Autocomplete function
Turn on this function
Maximize window
No close button IE
window.open("aa.htm", "meizz", "fullscreen=7");
Uniform encoding/decoding
alert(decodeURIComponent(encodeURIComponent( "http://hello.com?as= hehe")))
encodeURIComponent also encodes ":", "/", ";" and "?"
Table row instructions
< tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'">
Various sizes
Copy code The code is as follows:
s = "rnVisible area width of web page:" document.body.clientWidth;
s = "Height of visible area of rn web page:" document.body .clientHeight;
s = "rnThe height of the visible area of the webpage:" "document.body.offsetWeight" (including the width of the edge)"; Including the width of the edge)";
s = "rnThe full text width of the webpage body:" document.body.scrollWidth;
s = "rnThe full text height of the webpage body:" document.body.scrollHeight;
s = "rnThe webpage was scrolled high:" document.body.scrollTop;
s = "rnThe webpage was scrolled to the left:" document.body.scrollLeft;
s = "rnThe main body of the webpage:" window.screenTop;
s = "rnThe left side of the text of the web page:" window.screenLeft;
s = "The high screen resolution:" window.screen.height;
s = "rnScreen resolution Rate width: " window.screen.width;
s = "rnScreen available work area height:" window.screen.availHeight;
s = "Screen available work area width:" window.screen.availWidth ;
Filter numbers
Copy code The code is as follows:
// Special purpose
Copy code The code is as follows:
No caching
Copy code The code is as follows:
Regular matching
Copy code The code is as follows:
match Chinese characters Regular expression: [u4e00-u9fa5]
Matching double-byte characters (including Chinese characters): [^x00-xff]
Regular expression matching blank lines: n[s| ]*r
Regular expression matching HTML tags: /<(.*)>.*1>|<(.*) />/
Regular expression matching leading and trailing spaces: (^ s*)|(s*$) (trim function like vbscript)
Regular expression matching email address: w ([- .]w )*@w ([-.]w )*.w ( [-.]w )*
Regular expression matching URL: http://([w-] .) [w-] (/[w- ./?%&=]*)?
The following is an example:
Use regular expressions to limit the input content of the text box in the web form:
Use regular expressions to limit only Chinese input: onkeyup="value=value.replace(/[^u4E00-u9FA5 ]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
1. Use regular expressions to limit the input of only full-width characters: onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData(' text').replace(/[^uFF00-uFFFF]/g,''))"
2. Use regular expressions to limit the input of numbers: onkeyup="value=value.replace(/[^d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
3. Use regular expressions Only numbers and English can be entered: onkeyup="value=value.replace(/[W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace (/[^d]/g,''))"
Clear image toolbar
Copy code The code is as follows:
or
Close silently
Copy code The code is as follows:
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 = '';
document.body.insertAdjacentHTML("beforeEnd", str);
document.all.noTipClose.Click();
}
else
{
window.opener =null;
window.close();
}
}
else
{
window.close()
}
}
取得控件得绝对位置(1)
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]
获得控件的绝对位置(2)
复制代码 代码如下:
oRect = obj.getBoundingClientRect();
oRect.left
oRect.
光标停在文字最后
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]
//Special effects for page entry and exit
Enter page
Exit page
This is the page being loaded Some special effects when entering and calling out. duration represents the duration of the special effect, in seconds. Transition indicates which special effect to use
, the value is 1-23:
0 Rectangular reduction Refresh from top to bottom
5 Refresh from top to bottom
6 Refresh from left to right
7 Refresh from right to left
8 Vertical blinds
9 Horizontal blinds
10 Misaligned horizontal blinds
11 Misaligned Vertical blinds
12 point spread
13 left and right to middle refresh
14 middle to left and right refresh
15 middle to upper and lower
16 upper and lower to middle
17 lower right to upper left
18 Upper right to lower left
19 Upper left to lower right
20 Lower left to upper right
21 Horizontal bar ;meta name="ROBOTS" content="Attribute value">
The attribute values include the following:
The attribute value is "all": the file will be retrieved, and the links on the page can be queried;
Attribute value is "none": the file will not be retrieved, and the link on the page will not be queried;
Attribute value is "index": the file will be retrieved;
Attribute value is "follow": the link on the page will be queried Link;
The attribute value is "noindex": the file is not retrieved, but the link can be queried;
The attribute value is "nofollow":
//Print pagination
page1
page2 p>
//Set up printing
classid ="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=5,60,0,360"
>< ;/object>
< a href="http://www.meadroid.com/scriptx/docs/printdoc.htm?static" target=_blank>Detailed manual, for more information, click here
// Built-in print preview
WebBrowser.ExecWB(1,1) opens
Web.ExecWB(2,1) closes all current IE windows and opens a new window
Web.ExecWB(4,1) Save web page
Web.ExecWB(6,1) Print
Web.ExecWB(7,1) Print preview
Web.ExecWB(8,1) Print Page settings
Web.ExecWB(10,1) View page properties
Web.ExecWB(15,1) It seems to be revoked and needs to be confirmed
Web.ExecWB(17,1) Select all
Web .ExecWB(22,1) Refresh
Web.ExecWB(45,1) Close the form without prompting
//Remove Header and footer when printing
//Browser verification
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;");
}
//屏蔽按键
Shield the right mouse button, Ctrl N, Shift F10, Alt F4, F11, F5 refresh, backspace key
//Shield printing
< ;style>
@media print{
* {display:none}
}
//Moving layer, dragging
1.meizz
2.
//Document status changes
<script> <br>var doc=window.frames["f"].document; <br>function s(){ <br> if (doc.readyState=="complete"){ <br> document.all.f.style.height=doc.body.scrollHeight <br> document.all.f.style.width=doc.body.scrollWidth <br> } <br>} <br>doc.onreadystatechange=s <br></script>
//刷新后不变的文本框
//访问剪贴板
(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增加参数
<script> <br>var _st = window.setTimeout; <br>window.setTimeout = function(fRef, mDelay) { <br> if(typeof fRef == 'function'){ <br> var argu = Array.prototype.slice.call(arguments,2); <br> var f = (function(){ fRef.apply(null, argu); }); <br> return _st(f, mDelay); <br> } <br> return _st(fRef,mDelay); <br>} <br>function test(x){ <br> alert(x); <br>} <br>window.setTimeout(test,1000,'fason'); <br></script>
//自定义的apply,call
Function.prototype.apply = function (obj, argu) {
if (obj) obj.constructor.prototype._caller = this;
var argus = new Array();
for (var i=0;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
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("Download URL error!");
}
//window.confirm("Download completed.");
}
//Check the connection Is it valid?
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); 🎜>
//readyState is the progress of xmlhttp returning data, 0=loading, 1=not initialized ,2=Loaded, 3=Running, 4=Complete
//Is the component installed?
isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}" , "componentID"))
//Check whether the web page exists
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;
}
//Connect to the database
//Use data island
srno:
times:
//Get parameters
search
//Editable SELECT

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
