数组常用方法
方法---------------------描述
增加方法
splice() 从数组中添加或删除元素
push() 向数组末尾添加一个或更多元素,并返回新数组的长度
unshift() 向数组开头添加一个或更多元素,并返回新数组的长度
fill() 使用一个固定值来填充数组
删除方法
slice()选取数组的一部分,并返回i一个新数组
splice()从数组中添加或删除元素
pop()删除数组的最后一个元素并返回删除的元素
shift()删除并返回数组的第一个元素
查询方法
indexOf() 搜索数组中的元素,并返回它所在的位置
lastIndexof()返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
includes()判断—个数组是否包含一个指定的值。
isArry()判断对象是否为数组。
every()判断对象是否为数组。
some()检测数组元素中是否有元素符合指定条件。
修改方法:
toString() 把数组转换为字符串,并返回结果。
concat() 合并两个或多个数组,并返回结果。
sort() 对数组的元素进行排序。
join() 把数组的所有元素放入一个字符串。
reverse() 反转数组的元素顺序。
函数方法
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
filter()检测数组元素,并返回符合条件所有元素的数组
字符串常用方法
主要记忆-----------------常用
charAt() 返回在指定位置的字符
concat() 连接两个或多个字符串, 返回新的字符串
indexOf() 返回某个指定的字符串值在 字符串中首次出现的位置
includes() 查找字符串中是否包含指定的字符串
lastIndexOf() 从后向前搜索字符串 并从起始位置(0) 开始计算返回字符串最后出现的位置
slice() 提取字符串的片段, 并在新的字符串中返回被提取的部分
split() 把字符串分割为字符串数组
startsWith() 查看字符串是否以指定的字符串开头
substr() 从起始索引提取字符串中指定数目的字符
substring() 提取字符串中两个指定索引之间的字符
search()方法用于检索字符串中指定的子字符串, 或检索与正则表达式相匹配的子字符串
replace()方法用于在字符串中用一些字符替换另 一些字符,或替换一个与正则表达式匹配的子串。
次要记忆----------------不常用
toUpperCase() var str1 = str.toUpperCase(); 把字符串转为大写
toLowerCase() var str1 = str.toLowerCase(); 把字符串转为小写
trim() var str1 = str.trim(); 去掉字符串两边的空白
fromCharCode() var str = String.fromCharCode(97); 将Unicode编码转为字符
charCodeAt() var str1 = str.charCodeAt("a"); 返回指定的位置的字符的Unicode编码
Math对象及其方法
算术对象(Math) Math(算术)对象的作用是:执行常见的算数运算任务。 Math 对象提供多种算术值类型和函数。无需在使用这个对象之前对它进行实例化。
Math.PI console.log(Math.PI); 返回圆周率
Math.abs(x) console.log(Math.abs(-2)); 返回绝对值
Math.ceil() console.log(Math.ceil(6.01)); 对数进行向上取整
Math.floor() console.log(Math.floor(3.3)); 对数进行向下取整
Math.max(a,b,c,d...,n) console.log(Math.max(99,45,3,68)); 返回给定的数中的较大的数。
Math.min(a,b,c,d...,n) console.log(Math.min(99,45,3,68)); 返回给定的数中的较小的数。
Math.pow(x,y) console.log(Math.pow(2,3)); 返回 x 的 y 次幂
Math.random() console.log(Math.random()); (0, 1) 返回 0 到 1 之间的随机数。(0, 1);
Math.round() console.log(Math.round(3.45)); 将小数四舍五入成整数
Math.sqrt(x) console.log(Math.sqrt(9)); 平方根
Date对象及其方法
对象名-----------语法
new Date(); 当前日期和时间
new Date(milliseconds); 通过时间戳创建(从1970年1月1日至今的毫秒数)
new Date(dataString); 通过字符串表示的日期创建(如“2016-09-09”)
getTime(); 返回1970年1月1日至今的毫秒数(时间戳)
getFullYear(); 从Date对象以四位数字返回年份。
getMonth(); 从Date对象返回月份(0 ~ 11)
getDate(); 从Date对象返回一个月中的某一天(1 ~ 31)
getDay() 从Date对象返回一周中的某一天(0 ~ 6)
getHours() 返回Date对象的小时(0 ~ 23)
getMinutes() 返回Date对象的分
获取DOM的方式
获取方法 -------------------------------方法描述
document.getElementById(); 返回对拥有指定 id 的第一个对象的引用。
document.querySelector(); 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll(); HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表
document.getElementsByTagName(); 返回带有指定标签名的对象集合。
document.getElementsByClassName(); 返回文档中所有指定类名的元素集合,作为 NodeList 对象。
document.getElementsByName(); 返回带有指定名称的对象集合。(常用于表单)
修改CSS样式
document.getElementById('myid').style.display = 'none';
修改CLASS属性
document.getElementById('myid').className = 'active';
如果有多个CLASS属性,即用空格隔开
document.getElementById('myid').className = 'active div-1';
移除该元素上的所有CLASS
document.getElementById('myid').className = '';
- 注意:使用classList会优于使用className
document.getElementById('myid').classList.item(0); item为类名的索引
document.getElementById('myid').classList.length; 只读属性
document.getElementById('myid').classList.add('newClass'); 添加class
document.getElementById('myid').classList.remove('newClass'); 移除class
document.getElementById('myid').classList.toggle('newClass'); 切换,有则移除,没有则添加
document.getElementById('myid').classList.contains('newClass'); 判断是否存在该class
补充:add和remove方法不允许链式操作,因为返回的都是undefined,其次,也不允许同时添加或删除多个class
修改文本
document.getElementById('myid').innerHTML = '123';
创建元素并向其中追加文本
var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
同理:removeChild()移除节点,并返回节点
cloneNode() 复制节点
insertBefore() 插入节点(父节点内容的最前面)
注意:insertBefore()有两个参数,第一个是插入的节点,第二个是插入的位置
例子:
var list = document.getElementById('myList');
list.insertBefore(newItem,list.childNodes[1]);
插入新节点newItem到list的第二个子节点
返回所有子节点对象childNodes
var mylist = document.getElementById('myid');
for(var i=0,i<mylist.childNodes.length;i++){
console.log(mylist.childNodes[i]);
}
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点对象
nextSibling 返回下一个兄弟节点对象
previousSibling 返回前一个兄弟节点对象
nodeName 返回节点的HTML标记名称
设置或获取HTML内容
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
innerText: 设置或获取位于对象起始和结束标签内的文本
outerHTML: 设置或获取对象及其内容的HTML形式
outerText: 设置(包括标签)或获取(不包括标签)对象的文本
value:input,select,textarea,checkbox,radio 内容的获取和设置
设置或获取HTML属性
obj.hasAttribute() 如果元素中存在指定的属性返回 true,否则返回false。
obj.hasAttributes() 如果元素有任何属性返回true,否则返回false。
obj.setAttribute(); 设置属性 (属性名, 属性值1 属性值2)
obj.getAttribute(); 获取属性
obj.removeAttribute(); 删除属性
设置或获取HTML样式
var styleAll=div.style;
**var styleB=div.style.border; ** 替换边框
var styleFS=div.style["font-size"]; 替换字体大小
var styleFW=div.style.fontWeight; 替换加粗
element.className 返回元素属性
HTMLElementObject.className 获取属性值:
HTMLElementObject.className=classname 设置属性值:
element.classList 返回元素的类名
add 在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在可能值:true && false
item(index) 返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove 移除元素中一个或多个类名.注意: 移除不存在的类名,不会报错。
toggle 在元素中切换类名。
标签节点的操作方法
1.document.createElement()(最常用) 通过指定名称创建一个元素
2.document.createTextNode() 可创建文本节点。
3.element.appendChild() 可向节点的子节点列表的末尾添加新的子节点。
4.父节点.insertBefore(插入的新节点,原节点) 方法可在已有的子节点前插入一个新的子节点。
5.element.replaceChild(新节点,老节点) 方法可将某个子节点替换为另一个。
6.element.removeChild(element) 方法可从父节点下的子节点列表中删除某个节点。
7.element.remove() 将本身移除掉
鼠标事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseenter 当鼠标指针移动到元素上时触发。通常与mouseleave事件一同使用
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
键盘事件
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onkeydown onkeypress onkeyup 事件相关的事件发生次序:
onkeydown 、 onkeypress
1、前者不区分输入内容的大小写 后者区分输入内容的大小写 返回keycode是不同的
2、前者识别任何按键 后者不识别功能键
3、主要使用前者
表单事件
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea)
onfocus 元素获取焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onselect 用户选取文本时触发 ( input 和 textarea)
onsubmit 表单提交时触发
回车提交
$("id").onkeypress = function (event) {
event = (event) ? event : ((window.event) ? window.event : "")
keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
if (keyCode == 13) {
$("SubmitLogin").onclick();
}
}
执行计时器
timeStart = new Date().getTime();
timesEnd = new Date().getTime();
document.getElementById("time").innerHTML = timesEnd - timeStart;
获取当前时间
function GetCurrentDate() {
var d = new Date();
var y = d.getYear()+1900;
month = add_zero(d.getMonth() + 1),
days = add_zero(d.getDate()),
hours = add_zero(d.getHours());
minutes = add_zero(d.getMinutes()),
seconds = add_zero(d.getSeconds());
var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;
return str;
};
function add_zero(temp) {
if (temp < 10) return "0" + temp;
else return temp;
}
js中的小技巧,十分的实用!
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window-(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(""+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == "text"){undefined
form.elements.value = "";
}
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String("This is lightsword");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!---->
49.引用一个文件式的JS:
50.指定在不支持脚本的浏览器显示的HTML:
51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:dfsadf
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:如 则innerHTML的值就是:how are you
58.innerTEXT的值和上面的一样,只不过不会把这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:οnfοcus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("www.dannyg.com","jaskdlf");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("www.sina.com.cn");
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.οnbefοreunlοad=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),…)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var
数据类型为false的几种情况
1."" 字符串为空返回 false 否则为true
2.0数字中0返回 false 其他返回true
3.undefined 未定义 返回 false
4.null 空值 返回 false
5.false 本身返回false
6.NaN 非数字 返回false
三目运算符
条件表达式?条件成立时:条件不成立时;