1,??ゆ??瀛?绗?覆??????杩??风?????锛?绗?涓?涓?蹇?椤绘??瀛?姣?锛????㈠??浠ユ??瀛?姣????板????涓???绾匡??婚?垮害涓?-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2锛?????瀛?绗?覆abcdefg??efg
var str = "abcdefg"; if (/efg/.test(str)) { ? var efg = str.substr(str.indexOf("efg"), 3); ? alert(efg); } 3锛??ゆ??涓?涓?瀛?绗?覆涓??虹?版?℃?版??澶???瀛?绗??缁?璁¤?涓?娆℃??
//灏?瀛?绗?覆??瀛?绗??瀛??ㄤ?涓?hash table涓?锛?key??瀛?绗??value??杩?涓?瀛?绗??虹?扮??娆℃??/pre>
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
?? var key = str[i];
?? if (!obj[key]) {
????? obj[key] = 1;
?? } else {
????? obj[key]++;
?? }
}
/*????杩?涓?hash table锛??峰??value??澶х??key??value*/
var max = -1;
var max_key = "";
var key;
for (key in obj) {
?? if (max < obj[key]) {
????? max = obj[key];
????? max_key = key;
?? }
}
alert("max:"+max+" max_key:"+max_key);
4锛?IE涓?FF?????煎?规?ч??棰?
(1) window.event锛?
琛ㄧず褰?????浜?浠跺?硅薄锛?IE??杩?涓?瀵硅薄锛?FF娌℃??锛?FF??杩?缁?浜?浠跺????芥?颁???浜?浠跺?硅薄
(2) ?峰??浜?浠舵?
IE??rcElement?峰??浜?浠舵?锛???FF??arget?峰??浜?浠舵?
(3) 娣诲??锛??婚?や?浠?
IE锛?element.attachEvent(??onclick??, function) element.detachEvent(??onclick??, function)
FF锛?element.addEventListener(??click??, function, true) element.removeEventListener(??click??, function, true)
(4) ?峰????绛剧????瀹?涔?灞???
IE锛?div1.value??div1[??value??]
FF锛?????iv1.getAttribute(??value??)
(5) document.getElementByName()??document.all[name]
IE锛?document.getElementByName()??document.all[name]??涓??借?峰??div??绱?
FF锛???浠?
(6) input.type??灞???
IE锛?input.type??璇?
FF锛?input.type??璇诲??
(7) innerText textContent outerHTML
IE锛?????innerText, outerHTML
FF锛?????textContent
(8) ????????d浠ｆ??TML??绱?
IE锛???浠ョ??d?ヤ唬??TML??绱?
FF锛?涓???浠?
杩????????轰?甯歌???锛?杩???涓?灏?锛??村???浠?缁???浠ュ????JavaScript??E娴?瑙??ㄥ??Firefox娴?瑙??ㄤ腑??宸?寮??荤?
5锛?瑙???avascript澶?浜哄????芥?伴??????棰?
(1) ??浠ュ?????瑙?瀹??藉??瑙???锛??规??涓???寮???浜哄??寮????????藉?ㄥ?芥?板??????缂?
(2) 灏?姣?涓?寮???浜哄?????芥?板?瑁??扮被涓?锛?璋??ㄧ???跺??灏辫??ㄧ被???芥?帮??充娇?芥?伴??????瑕?绫诲??涓???澶?灏?k
6锛?javascript?㈠??瀵硅薄涓?缁ф?垮????
javascript?㈠??瀵硅薄涓???缁ф?垮???颁????戒娇?ㄥ?颁??????芥?板??Prototype?????撅?绠?????浠ｇ??濡?涓?锛?
function Animal(name) {
?? this.name = name;
}
Animal.prototype.getName = function() {alert(this.name)}
function Dog() {};
Dog.prototype = new Animal("Buddy");
Dog.prototype.constructor = Dog;
var dog = new Dog();
7锛?FF涓??㈠????uterHTML
FF涓?????outerHTML锛?瑕?瀹???uterHTML杩???瑕??规??澶???
??璺?濡?涓?锛?
?ㄩ〉??腑娣诲??涓?涓??扮????绱?A锛?????涓?浠介??瑕??峰??outerHTML????绱?锛?灏?杩?涓???绱?append?版?扮??A涓?锛??跺???峰??A??innerHTML灏卞??浠ヤ???
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>?峰??outerHMTL</title>
<style>
div{ background:#0000FF;width:100px;height:100px;}
span{ background:#00FF00;width:100px;height:100px;}
p{ background:#FF0000;width:100px;height:100px;}
</style>
</head>
<body>
<div id="a"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
<script type="text/javascript">
function getOuterHTML(id){
?var el = document.getElementById(id);
?var newNode = document.createElement("div");
?document.appendChild(newNode);
?var clone = el.cloneNode(true);
?newNode.appendChild(clone);
?alert(newNode.innerHTML);
?document.removeChild(newNode);
}
getOuterHTML("a");
</script>
</body>
</html>
8锛?缂???涓?涓??规? 姹?涓?涓?瀛?绗?覆??瀛????垮害
??璁撅?
涓?涓??辨??瀛?绗????ㄤ?涓?瀛???锛?涓?涓?涓???瀛?绗????ㄤ袱涓?瀛???
function GetBytes(str){
??? var len = str.length;
??? var bytes = len;
??? for(var i=0; i<len; i++){
??????? if (str.charCodeAt(i) > 255) bytes++;
??? }
??? return bytes;
}
alert(GetBytes("浣?濂?as"));
9锛?缂???涓?涓??规? ?绘??涓?涓??扮?????澶???绱?
var arr = [1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique = function(){
??? var ret = [];
??? var o = {};
??? var len = this.length;
??? for (var i=0; i<len; i++){
??????? var v = this[i];
??????? if (!o[v]){
??????????? o[v] = 1;
??????????? ret.push(v);
??????? }
??? }
??? return ret;
};
alert(arr.unique());
10锛?????涓?浣跨??his???稿??搴???
锛?1锛???tml??绱?浜?浠跺??т腑浣跨???濡?
<input type=??button?? 慰nclick=??showInfo(this);?? value=???瑰?讳?涓???/>
锛?2锛??????芥?? function Animal(name, color) {
?? this.name = name;
?? this.color = color;
}
锛?3锛?
<input type="button" id="text" value="?瑰?讳?涓?" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //姝ゅ???this????????绱?
}
</script>
锛?4锛?CSS expression琛ㄨ揪寮?涓?浣跨??his?抽??瀛?
<table width="100px" height="100px">
? <tr>
??? <td>
??? <div style="width:expression(this.parentNode.width);">div element</div>
??? </td>
? </tr>
</table>
12锛?濡?浣??剧ず/????涓?涓?DOM??绱?锛?
el.style.display = "";
el.style.display = "none";
el??瑕???浣???DOM??绱?
13锛?JavaScript涓?濡?浣?妫?娴?涓?涓???????涓?涓?String绫诲??锛?璇峰???哄?芥?板????
String绫诲????涓ょ??????瑰?锛?
(1)Var str = ??hello world??;
(2)Var str2 = new String(??hello world??);
function IsString(str){
??? return (typeof str == "string" || str.constructor == String);
}
var str = "";
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));
14锛?缃?椤典腑瀹??颁?涓?璁＄??褰?骞磋??╁?灏??堕?寸?????拌?℃?剁?搴?锛?瑕?姹?缃?椤典?瀹??跺?ㄦ???剧ず????骞磋??┟??澶┟???睹??????绉???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
?? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
?? <title>??璁℃??lt;/title>
</head>
<body>
<input type="text" value="" id="input" size="1000"/>
<script type="text/javascript">
?? function counter() {
????? var date = new Date();
????? var year = date.getFullYear();
????? var date2 = new Date(year, 12, 31, 23, 59, 59);
????? var time = (date2 - date)/1000;
????? var day =Math.floor(time/(24*60*60))
????? var hour = Math.floor(time%(24*60*60)/(60*60))
????? var minute = Math.floor(time%(24*60*60)%(60*60)/60);
????? var second = Math.floor(time%(24*60*60)%(60*60)%60);
????? var str = year + "骞磋???+day+"澶?+hour+"??+minute+"??"+second+"绉?";
????? document.getElementById("input").value = str;
?? }
?? window.setInterval("counter()", 1000);
</script>
</body>
</html>
15锛?琛ュ??浠ｇ??锛?榧???????utton1??灏?Button1绉诲?ㄥ??utton2??????lt;div> <input type=??button?? id =??button1??value=??1??慰nclick=???????> <input type=??button?? id =??button2??value=??2??/??> </div>
<div>
?? <input type="button" id ="button1" value="1" 慰nclick="moveBtn(this);">
?? <input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
function moveBtn(obj) {
?? var clone = obj.cloneNode(true);
?? var parent = obj.parentNode;
?? parent.appendChild(clone);
?? parent.removeChild(obj);
}
</script>
16锛?JavaScript??????绉??版??绫诲??
绠???锛?Number锛?Boolean锛?String锛?Null锛?Undefined
澶???锛?Object锛?Array锛?Function
17锛?涓???ss??绛惧??avaScript涓?璋??ㄥ?濡?浣??煎??锛?border-left-color锛?-moz-viewport
borderLeftColor
mozViewport
18锛?JavaScript涓?濡?浣?瀵逛?涓?瀵硅薄杩?琛?娣卞害clone
function cloneObject(o) {
??? if(!o || 'object' !== typeof o) {
??????? return o;
??? }
??? var c = 'function' === typeof o.pop ? [] : {};
??? var p, v;
??? for(p in o) {
??????? if(o.hasOwnProperty(p)) {
??????????? v = o[p];
??????????? if(v && 'object' === typeof v) {
??????????????? c[p] = Ext.ux.clone(v);
??????????? }
??????????? else {
??????????????? c[p] = v;
??????????? }
??????? }
??? }
??? return c;
};
19锛?濡?浣??у??lert涓????㈣?
\n alert(??p\np??);
20锛?璇峰???帮?榧????瑰?婚〉??腑??浠绘????绛撅?alert璇ユ??绛剧????绉帮?锛?娉ㄦ???煎?规?э?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>榧????瑰?婚〉??腑??浠绘????绛撅?alert璇ユ??绛剧????绉?lt;/title>
<style>
div{ background:#0000FF;width:100px;height:100px;}
span{ background:#00FF00;width:100px;height:100px;}
p{ background:#FF0000;width:100px;height:100px;}
</style>
<script type="text/javascript">
document.onclick = function(evt){
?var e = window.event || evt;
?var tag = e["target"] || e["srcElement"];
?alert(tag.tagName);
};
</script>
</head>
<body>
<div id="div"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>
21锛?璇风???涓?涓?JavaScript?芥??parseQueryString锛?瀹????ㄩ??????URL???拌В??涓轰?涓?瀵硅薄锛?濡?锛?
var url = ??http://witmax.cn/index.php?key0=0&key1=1&key2=2??
function parseQueryString(url){
?? var params = {};
?? var arr = url.split("?");
?? if (arr.length <= 1)
????? return params;
?? arr = arr[1].split("&");
?? for(var i=0, l=arr.length; i<l; i++){
????? var a = arr[i].split("=");
????? params[a[0]] = a[1];
?? }
?? return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
alert(ps["key1"]);
22锛?ajax??浠?涔?? ajax??浜や?妯″??? ??姝ュ??寮?姝ョ???哄??? 濡?浣?瑙ｅ?宠法????棰??
Ajax??澶?绉?????缁???璧锋?ョ??涓?绉?娴?瑙??ㄥ?????″?ㄤ氦浜?????锛??烘?????虫????璁镐?涓?浜???缃?娴?瑙??ㄥ??涓?涓?杩?绋?椤甸?????″??寮?姝ョ??http璋????骞朵??ㄦ?跺?扮???版???ユ?存?颁?涓?褰???web椤甸?㈣??涓?蹇??锋?版?翠釜椤甸????璇ユ?????藉??硅?瀹㈡?风????浣?楠?????????????锛?
XHTML锛?瀵瑰?W3C??XHTML瑙???锛???????XHTML1.0??
CSS锛?瀵瑰?W3C??CSS瑙???锛???????CSS2.0
DOM锛?杩?????DOM涓昏?????HTML DOM锛?XML DOM?????ㄤ??㈢??XML涓?
JavaScript锛?瀵瑰?浜?ECMA??ECMAScript瑙???
XML锛?瀵瑰?W3C??XML DOM??XSLT??XPath绛?绛?瑙???
XMLHttpRequest锛?瀵瑰?WhatWG??Web Applications1.0瑙???锛?http://whatwg.org/specs/web-apps/current-work/锛?
AJAX浜や?妯″??
?
??姝ワ?????浼?????骞剁??寰????″?ㄥ??????澶??跺????缁х画
寮?姝ワ???????璁搁〉?㈢户缁??惰?绋?骞跺??????界????澶?
璺ㄥ????棰?绠???????瑙ｅ氨????涓?S??婧?绛??ョ?????讹?a.com????涓???JS??娉???浣?b.com??c.a.com涓???瀵硅薄锛??蜂??烘??濡?涓?锛?
?
PS锛?锛?1锛?濡?????绔??ｆ??????璁???????璺ㄥ????棰???绔??????戒负????
(2) ?ㄨ法????棰?涓?锛???浠?浠???杩?URL??棣??ㄦ?ヨ??????涓?浼?灏?璇??ゆ???稿????IP?板??瀵瑰?????????涓や釜???????瑰?涓?涓?IP
??绔?瀵逛?璺ㄥ????瑙ｅ?冲??娉?锛?
(1) document.domain+iframe
(2) ?ㄦ????寤?cript??绛?
23锛?浠?涔???????锛?涓??㈣?涓?ul锛?濡?浣??瑰?绘??涓??????跺??alert??ndex?
<ul id=??test??>
<li>杩???绗?涓???lt;/li>
<li>杩???绗?浜???lt;/li>
<li>杩???绗?涓???lt;/li>
</ul>
???ㄥ?芥?拌?瀹?涔?瀹????芥?扮??澶??ㄥ?哄??璋??ㄧ???跺??灏变骇??浜???????
(function A() {
?? var index = 0;
?? var ul = document.getElementById("test");
?? var obj = {};
?? for (var i = 0, l = ul.childNodes.length; i < l; i++) {
????? if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
???????? var li = ul.childNodes[i];
???????? li.onclick = function() {
??????????? index++;
??????????? alert(index);
???????? }
????? }
?? }
})();
24锛?璇风??哄?姝ュ??杞?s?规?锛?涓?灏?浜?涓ょ?
榛?璁ゆ????avascript????姝ュ??杞界??锛?涔?灏辨??javascript????杞芥?堕?诲???锛????㈢????绱?瑕?绛?寰?javascript??杞藉??姣??????借?琛?????杞斤?瀵逛?涓?浜???涔?涓???寰?澶х??javascript锛?濡????惧?ㄩ〉澶翠?瀵艰?村??杞藉??㈢??璇?锛???浼?涓ラ??褰卞???ㄦ?蜂?楠?????
寮?姝ュ??杞芥?瑰?锛?
(1) defer锛???????IE
(2) async锛?
(3) ??寤?cript锛????ュ??OM涓?锛???杞藉??姣???callBack锛?瑙?浠ｇ??锛?
function loadScript(url, callback){
?? var script = document.createElement("script")
?? script.type = "text/javascript";
?? if (script.readyState){ //IE
????? script.onreadystatechange = function(){
???????? if (script.readyState == "loaded" ||
??????????? script.readyState == "complete"){
?????? ?????script.onreadystatechange = null;
??????????? callback();
???????? }
????? };
?? } else { //Others: Firefox, Safari, Chrome, and Opera
????? script.onload = function(){
????????? callback();
????? };
?? }
?? script.src = url;
?? document.body.appendChild(script);
}
25锛?璇疯?捐?′?濂??规?锛??ㄤ?纭?淇?椤甸??腑JS??杞藉???ㄣ??
var n = document.createElement("script");
n.type = "text/javascript";
//浠ヤ????ラ?ㄥ??浠ｇ??
//ie????script??readystatechange灞???IE support the readystatechange event for script and css nodes)
if(ua.ie){
?? n.onreadystatechange = function(){
?????? var rs = this.readyState;
?????? if('loaded' === rs || 'complete'===rs){
?????????? n.onreadystatechange = null;
?????????? f(id,url); //??璋??芥??/pre>
?????? }
};
//???ラ?ㄥ??浠ｇ??
//safari 3.x supports the load event for script nodes(DOM2)
?? n.addEventListener('load',function(){
?????? f(id,url);
?? });
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
?? n.onload = function(){
?????? f(id,url);
?? };
}
26锛?js涓?濡?浣?瀹?涔?class,濡?浣??╁?prototype?
Ele.className = ??***??; //***??ss涓?瀹?涔?锛?褰㈠?濡?涓?锛?.*** {??
A.prototype.B = C;
A????涓??????芥?扮????瀛?
B??杩?涓??????芥?扮??灞???
C???宠?瀹?涔???灞??х????
27锛?濡?浣?娣诲??html??绱???浜?浠?????绉??规?.
锛?1锛? 涓?TML??绱???浜?浠跺??ц???
锛?2锛? ??S涓?浣跨??le.on*** = function() {??
锛?3锛? 浣跨??OM2??娣诲??浜?浠剁???规? addEventListener??attachEvent
28锛?documen.write?? innerHTML???哄??
document.write???介??缁??翠釜椤甸??
innerHTML??浠ラ??缁?椤甸?㈢??涓??ㄥ??
29锛?澶?娴?瑙??ㄦ?娴???杩?浠?涔?锛?
锛?1锛? navigator.userAgent
锛?2锛? 涓???娴?瑙??ㄧ???规?э?濡?addEventListener
30锛?js???虹?瀵硅薄???ｄ?, window??document??甯哥?ㄧ???规???灞??у???烘??
String,Number,Boolean
Window:
?规?锛?setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
灞??э?name,parent,screenLeft,screenTop,self,top,status
Document
?规?锛?createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
灞??э?cookie,doctype,domain,documentElement,readyState,URL,
31锛???绔?寮?????浼?????棰?
锛?1锛? ??灏?http璇锋?娆℃?帮?css spirit,data uri
锛?2锛? JS锛?CSS婧?????缂?
锛?3锛? ??绔?妯℃??JS+?版??锛???灏??变?HTML??绛惧?艰?寸??甯??芥氮璐癸???绔??ㄥ????淇?瀛?AJAX璇锋?缁???锛?姣?娆℃??浣????板????锛?涓??ㄨ?锋?锛???灏?璇锋?娆℃??
锛?4锛? ??nnerHTML浠ｆ??OM??浣?锛???灏?DOM??浣?娆℃?帮?浼???javascript?ц??
锛?5锛? ??etTimeout?ラ?垮??椤甸?㈠け?诲??搴?
锛?6锛? ??ash-table?ヤ????ユ??
锛?7锛? 褰???瑕?璁剧疆???峰?寰?澶??惰?剧疆className??涓????存?ユ??浣?style
锛?8锛? 灏??ㄥ?ㄥ?????
锛?9锛? 缂?瀛?DOM???规?ユ?剧??缁???
锛?10锛? ?垮??浣跨??SS Expression
锛?11锛? ?剧??棰?杞?
锛?12锛? ?垮???ㄩ〉?㈢??涓讳?甯?灞?涓?浣跨??able锛?table瑕?绛??朵腑????瀹瑰???ㄤ?杞戒?????浼??剧ず?烘?ワ??剧ず姣?div+css甯?灞???
32锛?濡?浣??у?剁?椤靛?ㄧ?缁?浼?杈?杩?绋?涓????版????
????ZIP??缂?
淇?????濂界??缂?绋?涔???锛??垮????澶???CSS锛?JavaScript浠ｇ??锛?澶?浣???HTML??绛惧??灞???
33锛?Flash??Ajax??????浼?缂虹?癸??ㄤ娇?ㄤ腑濡?浣?????锛?
Ajax??浼???
锛?1锛? ????绱㈠??
锛?2锛? 寮??炬??
锛?3锛? 璐圭??
锛?4锛? ???ㄦ??
锛?5锛? ??浜?寮???
Flash??浼???
锛?1锛? 澶?濯?浣?澶???
锛?2锛? ?煎?规??
锛?3锛? ?㈤???惧舰 姣?SVG锛?Canvas浼??垮ぇ寰?澶?
锛?4锛? 瀹㈡?风??璧?婧?璋?搴??姣?濡?楹???椋?锛?????澶?
杞?杞戒?:https://www.cnblogs.com/fashion1993/p/3994461.html
![JavaScript的那些坑之事件代理事件代理事件阶段[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)