Home >Web Front-end >JS Tutorial >Collection of basic knowledge of javascript (1) Recommended collection_Basic knowledge
次へ: js 正規表現、クロージャー、適用、呼び出し先、イベント関連関数、クッキーなど。
1.javascript 配列 API
//配列を定義
var pageIds = new Array();
pageIds.push('A');
Array length
pageIds.length;
//shift: 元の配列の最初の項目を削除し、削除された要素の値を返します。配列が空の場合、未定義を返します
var a = [1,2,3,4,5]
var b = a.shift(); //a: [2,3,4,5]; b: 1
//unshift: 元の配列の先頭にパラメータを追加し、配列の長さを返します
var a = [1,2,3,4,5]; a.unshift(-2,- 1); //a: [-2,-1,1,2,3,4,5] b: 7
//注: IE6.0 でのテスト戻り値FF2.0 では常に未定義です。テストの戻り値は 7 なので、このメソッドの戻り値は信頼できません。戻り値を使用する必要がある場合は、このメソッドの代わりに splice を使用できます。
//pop: 元の配列の最後の項目を削除し、削除された要素の値を返します。配列が空の場合は、未定義の
var a = [1,2,3,4,5] を返します。
var b = a.pop(); //a: [1,2,3,4] b: 5
//push: 元の配列の末尾にパラメータを追加し、配列の長さを返します。配列
var a = [1,2,3,4,5];
var b = a.push(6,7); //a: [1,2,3,4,5,6] ,7] b: 7
//concat: 元の配列にパラメータを追加して形成された新しい配列を返します
var a = [1,2,3,4,5]; b = a.concat(6 ,7); //a: [1,2,3,4,5] b: [1,2,3,4,5,6,7]
//splice( start,deleteCount,val1,val2 ,): deleteCount 項目を開始位置から削除し、この位置から val1、val2 を挿入します。
var a = [1,2,3,4,5]; = a.splice(2 ,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]
var b = a.splice( 0,1); / /shift
a.splice(0,0,-2,-1) と同じ; //unshift
var b = a.splice() と同じa.length-1,1) ; //pop
a.splice(a.length,0,6,7) と同じ //push
//リバースと同じ: 配列の順序を逆にします
var a = [1,2,3,4,5]
var b = a.reverse(); //a: [5,4,3,2, 1] b: [5,4,3,2 ,1]
//sort(orderfunction): 指定されたパラメーターに従って配列を並べ替えます
var a = [1,2,3,4,5] ;
var b = a.sort() ; //a: [1,2,3,4,5] b: [1,2,3,4,5]
//スライス(開始, end): 元の配列で指定された開始添字を返します。 終了添字間の項目で構成される新しい配列。
var a = [1,2,3,4,5];
var b = a.slice( 2,5); //a: [ 1,2,3,4,5] b: [3,4,5]
//join(separator): を使用して、配列の要素を文字列に結合します。 separator を区切り文字として使用します。省略した場合はデフォルトが使用されます。区切り文字としてカンマを使用します。
var a = [1,2,3,4,5]; //a: [1,2,3,4 ,5] b: "1|2|3|4|5"
2.dom で最もよく使用される API
ドキュメント メソッド:
getElementById(id) ノードは指定されたノードへの参照を返します
getElementsByTagName(name) NodeList はドキュメント内のすべての一致する要素のコレクションを返します
createElement(name) ノード ノード
createTextNode(text) ノードはプレーンを作成しますtext ノード
ownerDocument Document は、このノードが属するドキュメントを指します
documentElement ノード 戻り値 html ノード
document.body ノード 戻り値 body ノード
要素メソッド:
getAttribute(attributeName) 文字列指定された属性の値
setAttribute(attributeName,value) String 属性に値を割り当てます
removeAttribute(attributeName) String 指定された属性とその値を削除します
getElementsByTagName(name) NodeList 一致するすべてのコレクションを返しますノード内の要素
node メソッド:
appendChild(child) ノードは指定されたノードを与えます クリックして新しい子ノードを追加します
removeChild(child) Node 指定されたノードの子ノードを削除します
replaceChild( newChild,oldChild) ノード 指定したノードの子ノードを置き換えます
insertBefore(newChild, refChild) ノードは同じレベルのノードの前に新しいノードを挿入します
hasChildNodes() ノードに子がある場合、ブール値は true を返しますノード
ノード属性:
nodeName 文字列はノードを文字列形式で格納します。 name
nodeType 文字列はノードのタイプを整数データ形式で格納します。
nodeValue 文字列はノードの値を使用可能な形式で格納します
parentNode ノードはノードの親ノードへの参照を指します
childNodes NodeList 子ノードを指す参照のコレクション
firstChild Node 子ノードの組み合わせの最初の子ノードを指す参照
lastChild ノード 子ノードの組み合わせの最後の子ノードを指す参照
PreviousSibling Node は前の兄弟ノードを指します。このノードが兄弟ノードの場合、値は null になります。
nextSibling Node は、そのノードを指します。次の兄弟ノード; このノードが兄弟ノードの場合、値は null
3. オンライン検索 非表示のマップ オブジェクト:
function HashMap()
{
/**マップサイズ ** /
var サイズ = 0;
/**物体 **/
var エントリ = new Object();
/**ライブ **/
this.put = 関数(キー , 値)
{
if(!this.containsKey(key))
{
サイズ ;
}
エントリ [キー] = 値; 🎜>/**選ぶ **/
this.get = function (key)
{
return this.containsKey(key) ? エントリ[key] :
}
/**消去 **/
this.remove = function ( key )
{
if( this.containsKey(key) && ( delete エントリ[key] ) )
{
サイズ --;
}
}
/**キーを含めるかどうか **/
this.containsKey = function ( key )
{
return (エントリのキー); >}
/**値を含めるかどうか **/
this.containsValue = function ( value )
{
for(エントリの var prop)
{
if(entry[prop ] == 値)
{
true を返す
}
}
/**すべての値 **/
this.values = function ()
{
var 値 = new Array();
for (エントリの var prop)
{
values.push(entry[prop]);
}
戻り値;
}
/**すべてのキー **/
this.keys = function ()
{
var key = new Array();
for(エントリ内の変数 prop)
{
keys.push(prop);
}
キーを返す
}
/**マップサイズ **/
this.size = function ()
{
サイズを返す;
}
/ * Clear*/
this.clear = function ()
{
size = 0;
エントリ = 新しいオブジェクト()
}
var map = new HashMap();
/*
map.put("A","1");
map.put("B","2");
map.put("A","5");
map.put("C","3");
map.put("A","4");
*/
/*
alert(map.containsKey("XX"));
alert(map.size());
alert(map.get("A"));
alert(map.get("XX"));
map.remove("A");
alert(map.size());
alert(map.get("A"));
*/
/**You can also use the object as Key **/
/*
var arrayKey = new Array("1","2","3","4");
var arrayValue = new Array("A","B","C","D");
map.put(arrayKey,arrayValue);
var value = map.get(arrayKey);
for(var i = 0 ; i < value.length ; i )
{
//alert(value[i]);
}
*/
/**When an object is used as a Key, the toString() method of the object is automatically called. In fact, the String object is ultimately used as the Key**/
/**If it is a custom object, you have to override the toString() method. Otherwise, . will be the following result **/
function MyObject(name)
{
this.name = name;
}
/**
function MyObject(name)
{
this.name = name;
this.toString = function ()
{
return this.name;
}
}
**/
var object1 = new MyObject("小张");
var object2 = new MyObject("小名");
map.put(object1,"小张");
map.put(object2,"小名");
alert(map.get(object1));
alert(map.get(object2));
map.remove("xxxxx");
alert(map.size());
/**Running result Nickname Nickname size = 1 **/
/**If you change it to an object that overrides the toString() method, the effect will be completely different **/
4.常用的数字函数:
·数字型(Number)
1.声明
var i = 1;
var i = new Number(1);
2.字符串与数字间的转换
var i = 1;
var str = i.toString(); //结果: "1"
var str = new String(i); //结果: "1"
i = parseInt(str); //结果: 1
i = parseFloat(str); //结果: 1.0
//注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32
3.判断是否为有效的数字
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true
//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
i = parseInt(str);
if( isNaN(i) ){ }
4.数字型比较
//此知识与[字符串比较]相同
5.小数转整数
var f = 1.5;
var i = Math.round(f); //结果:2 (四舍五入)
var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)
var i = Math.floor(f); //结果:1 (返回小于f的最大整数)
6.格式化显示数字
var i = 3.14159;
//格式化为两位小数的浮点数
var str = i.toFixed(2); //结果: "3.14"
//格式化为五位数字的浮点数(从左到右五位数字,不够补零)
var str = i.toPrecision(5); //结果: "3.1415"
7.X进制数字的转换
//不是很懂 -.-
var i = parseInt("0x1f",16);
var i = parseInt(i,10);
var i = parseInt("11010011",2);
8.随机数
//返回0-1之间的任意小数
var rnd = Math.random();
//返回0-n之间的任意整数(不包括n)
var rnd = Math.floor(Math.random() * n)
5.网上搜藏的js堆栈:
function stack(){
if(this.top==undefined){
//初始化堆栈的顶部指针和数据存放域
this.top=0;
this.unit=new Array();
}
this.push=function(pushvalue){
//定义压入堆栈的方法
this.unit[this.top]=pushvalue;
this.top =1;
}
this.readAllElements=function(){
//定义读取所有数据的方法
if(this.top==0){
alert("当前栈空,无法读取数据");
return("");
}
var count=0;
var outStr="";
for(count=0;count
}
return(outStr);
}
this.pop=function(){
//定义弹出堆栈的方法
if(this.top==0){
alert("当前栈空,无法弹出数据");
return("");
}
var popTo=this.unit[this.top-1];
this.top--;
return(popTo);
/* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也
就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前
我也没想到好的办法解决。*/
}
}
6. The most commonly used JavaScript date functions:
·Date type (Date)
1. Declare
var myDate = new Date() ; //Current time of the system
var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
var myDate = new Date(yyyy, mm, dd);
var myDate = new Date("monthName dd, yyyy hh:mm:ss");
var myDate = new Date("monthName dd, yyyy");
var myDate = new Date(epochMilliseconds);
2. Get a part of the time
var myDate = new Date();
myDate.getYear(); //Get the current year (2 digits)
myDate.getFullYear(); //Get the complete year (4 digits, 1970-????)
myDate.getMonth(); //Get the current month (0-11, 0 represents January)
myDate.getDate(); //Get the current day ( 1-31)
myDate.getDay(); //Get the current week X (0-6, 0 represents Sunday)
myDate.getTime(); //Get the current time (milliseconds since 1970.1.1 number) timestamp! !
myDate.getHours(); //Get the current number of hours (0-23)
myDate.getMinutes(); //Get the current number of minutes (0-59)
myDate.getSeconds(); / /Get the current number of seconds (0-59)
myDate.getMilliseconds(); //Get the current number of milliseconds (0-999)
myDate.toLocaleDateString(); //Get the current date
myDate.toLocaleTimeString (); //Get the current time
myDate.toLocaleString( ); //Get the date and time
3. Calculate the previous or future time
var myDate = new Date();
myDate. setDate(myDate.getDate() 10); //The current time plus 10 days
//Similar methods are basically the same, starting with set, for details, refer to point 2
4. Calculate the offset of two dates Amount
var i = daysBetween(beginDate,endDate); //Return the number of days
var i = beginDate.getTimezoneOffset(endDate); //Return the number of minutes
5. Check the valid date
//checkDate () Only allows dates in the two formats of "mm-dd-yyyy" or "mm/dd/yyyy"
if( checkDate("2006-01-01") ){ }
//regular expression (Written by myself to check yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd)
var r = /^(d{2}|d{4}) [/-]d{1,2}[/-]d{1,2}$/;
if( r.test( myString ) ){ }
7. The most commonly used string functions API:
·String (String)
1. Statement
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine." ;
2. String concatenation
var myString = "Every " "good boy " "does fine.";
var myString = "Every "; myString = "good boy does fine.";
3. Intercept the string
//Intercept the characters starting from the 6th position
var myString = "Every good boy does fine.";
var section = myString.substring(6); //Result: "good boy does fine."
//Intercept characters starting from digit 0 to digit 10
var myString = "Every good boy does fine.";
var section = myString.substring(0 ,10); //Result: "Every good"
//Intercept the characters from the 11th to the 6th from the bottom
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); //Result: "boy does"
//Truncate characters with a length of 4 starting from the 6th position
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); //Result: "good"
4. Convert case
var myString = "Hello";
var lcString = myString.toLowerCase( ); //Result: "hello"
var ucString = myString.toUpperCase(); //Result: "HELLO"
5. String comparison
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //Result: true
if( aString == bString ){ } //Result: true
if( aString === bString ){ } //Result: false (the two objects are different, although their values are the same)
6. Retrieve the string
var myString = "hello everybody.";
// If it cannot be retrieved, it will return -1. If it is retrieved, it will return the starting position in the string
if( myString.indexOf("every") > -1 ){ }//Result: true
7. Find and replace the string
var myString = "I is your father.";
var result = myString.replace("is","am"); //Result : "I am your father."
8. Special characters:
b: back character t: horizontal tab character
n: newline character v: vertical tab character
f: page break r : Carriage return character
" : Double quote ' : Single quote
\ : Backslash
9. Convert characters to Unicode encoding
var myString = "hello";
var code = myString.charCodeAt(3); //Return the Unicode encoding (integer type) of "l"
var char = String.fromCharCode(66); //Return the character with Unicode 66
10. Convert the string Into URL encoding
var myString = "hello all";
var code = encodeURI(myString); //Result: "hello all"
var str = decodeURI(code); //Result: "hello all"
//The corresponding ones are: encodeURIComponent() decodeURIComponent()
8. Mathematical functions:
·Math object
1. Math.abs(num): Returns the absolute value of num
2. Math.acos(num): Returns the arcsine value of num
3. Math.asin(num): Returns the arcsine value of num
4. Math.atan(num): Returns the arcsine value of num Arctangent
5. Math.atan2(y,x): Returns the arctangent of the quotient of y divided by x
6. Math.ceil(num): Returns the smallest integer greater than num
7 . Math.cos(num): Returns the cosine value of num
8. Math.exp(x): Returns the number raised to the power of x with the natural number as the base
9. Math.floor(num): Returns less than The largest integer of num
10.Math.log(num): Returns the natural logarithm of num
11.Math.max(num1,num2): Returns the larger of num1 and num2
12. Math.min(num1,num2): Returns the smaller of num1 and num2
13.Math.pow(x,y): Returns the value of x raised to the power of y
14.Math.random() : Returns a random number between 0 and 1
15.Math.round(num) : Returns the rounded value of num
16.Math.sin(num) : Returns the sine value of num
17 .Math.sqrt(num): Returns the square root of num
18.Math.tan(num): Returns the tangent value of num
19.Math.E: Natural number (2.718281828459045)
20.Math.LN2 : Natural logarithm of 2 (0.6931471805599453)
21.Math.LN10 : Natural logarithm of 10 (2.302585092994046)
22.Math.LOG2E : Natural number with base log 2 (1.4426950408889634)
23 .Math .LOG10E : Log 10 base natural number (0.4342944819032518)
24.Math.PI : π(3.141592653589793)
25.Math.SQRT1_2 : Square root of 1/2 (0.7071067811865476)
26.Math.SQRT2 : Square root of 2 (1.4142135623730951)
9. Browser feature function:
1. Browser name
//IE : "Microsoft Internet Explorer"
//NS : "Netscape"
var browserName = navigator.appName;
2. Browser version
bar browserVersion = navigator.appVersion;
3. Client operating system
var isWin = ( navigator.userAgent.indexOf("Win" ) != -1 );
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
var isUnix = ( navigator.userAgent.indexOf("X11") != - 1 );
4. Determine whether an object, method, or attribute is supported
//When an object, method, or attribute is undefined, undefined or null will be returned. These special values are false
if( document.images ){ }
if( document.getElementById ){ }
5. Check the browser’s current language
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
6. Check whether the browser supports Cookies
if( navigator.cookieEnabled ){ }
10. JavaScript object-oriented method implementation inheritance: call method
Not empty : | checkIfEmpty('a','non-empty check') < /td> |
Email: | checkIsMail('b','Email verification') |
Number: | checkIsNum('c','Number check') |
Legal characters : | checkIsValid(' d','validity check') |
Small date: Large date: | compareTwoDate('e','f','The relationship between the small date and the large date is wrong!') |
Small number: Large number: | compareTwoNum('k','l','The size and number are not related Correct!') |
Character length check (<5): | checkLength('g',5,'length check') |
Drop-down menu non-empty check: | checkChooseSelect ('h','The drop-down menu is not empty','-1') |
| |
< /td> | getSelectText(sss) and getSelectValue(sss) |
setSelectContent($( 'h'),sss) | |
| getCheckedIds(document.getElementsByName('j')) |