Array对象
Array即我们所说的数组,js中的数组对象不像java中那么严谨,Array是长度自动变化的数组。我们可以这样创建一个数组:
var arr = [1,2,3];//直接创建
//使用构造器创建
var arr1 = new arr();
var arr2 = new arr(4);//只写一个数字则表示初始化数组长度
var arr3 = new arr(1,2,3);
Array的三个属性:constructor、property、length。
Array常用的方法:
- pop():删除数组的末尾元素,返回删除元素。
- push():向数组末尾添加元素,返回数组length。
- unshift():删除数组的头部元素,返回删除元素。
- shift():向数组头部添加元素,返回数组length。
- slice():slice是片的意思,所以slice方法是截取数组的一部分并返回。比如arr.slice(1,3)就是截取arr数组的角标为1~2的元素,不包含3。无参数默认为(0,length)。
- join(str):将数组转换为字符串,并以str为分隔符将数组每个元素分开,返回该字符串,不会改变原数组。
- reverse():翻转数组。
- toString() || toLocalString():转为字符串。
- sort():数组排序,默认使用Ascall码排序,也可以使用自定义函数进行排序,如从小到大排序:
function sortby(a,b){
return a-b;
}
var arr = new arr(3,2,7);
arr.sort(sortby);
Boolean对象
Boolean值只要ture或false。
var b1 = new Boolean(value);//返回具有value的Boolean值的对象
var b2 = Boolean(value);//返回value的Boolean值
Date对象
Date对象是用来处理日期和时间的对象,初始化时会将当前时间作为初始化值。
常用方法如下:
- Date():返回当前日期时间,如Sat Sep 29 2018 16:22:30 GMT+0800
然后就是获取和设置年月日分秒等的方法:
var date = new Date();//自动将当前时间作为初始化值
var year = date.getFullYear();//年份
var month = date.getMonth()+1;//月份(0~11),所以真实月份+1
var day = date.getDate();//月的天数(1~31)
var week = date.getDay();//周的天数(0~6),0是周天
var hour = date.getHours();//时
var minutes = date.getMinutes();//分
var seconds = date.getSeconds();//秒
var milliseconds = date.getMilliseconds();//毫秒
var time = date.getTime();//返回 1970 年 1 月 1 日至今的毫秒数。
var s1 = date.toString();//返回日期字符串
var s2 = date.toTimeString();//返回时间部分字符串
var s3 = date.toDateString();//返回日期部分字符串
//字符串本地化
var s4 = date.toLocaleString();
var s5 = date.toLocaleTimeString();
var s6 = date.toLocaleDateString();
Math对象
Math对象不像Array和Date一样的类,没有构造函数,所以不用创建直接调用其方法即可。
常用属性:Math.PI、Math.E。
常用方法:
- abs(x):绝对值
- sin(x)、cos(x)、tan(x)
- asin(x)、acons(x)、atan(x)
- atan2(y,x):返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
- ceil(x):上舍入。(不是四舍五入,只要小数位不是0就上1)
- floor(x):下舍入。(直接去掉小数位取整)
- round(x):四舍五入
- exp(x):返回e的指数
- log(x):返回自然对数(e为底)
- max(x,y)、min(x,y)
- random():返回0~1随机数
- sqrt(x):返回数的平方根
- pow(x,y):返回x的y次方
Mumber对象
Number()和new 一起使用时,作为构造函数调用,返回Number对象,不和new使用时当做Number方法调用,并将参数转化为数字并返回,如果无法转化为数字,则返回NaN。
方法:
- toString() || toLocaleString()
- toFixed(index):将数字转为为指定位数的字符串(四舍五入)
- toPrecision(index):将数字精确到指定位数(整数+小数)。如果无参数执行toString()方法。
- toExponential():将数字转化为指数计数法。
String对象
当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
String.length可返回字符串长度。
常用方法:
- anchor(str):返回锚点为str,内容为字符串的a标签字符串。比如:var txt = "你好";
var a = txt.anchor("hello");那么a就是<a name="hello">你好</a>。的字符串。 - 有很多样式类的方法,比如big()、small(),其实就是用返回对应标签包裹的字符串,这里不再赘述。
- charAt(index):返回指定位置的字符。
- concat():同Array对象的concat一样,起到合并作用。
- String.fromCharCode(code1,code2...):将传入的Unicode值转换为字节,最后拼成字符串。
- indexOf(searchStr,fromIndex):搜索字符串中是否包含字符串searchStr,找到返回第一次匹配的角标,否则返回-1。
- lastIndexOf(searchValue,fromIndex):从后往前匹配。
- match(str || RegExp):该方法也是匹配字符串,如果匹配到返回str自身,否则返回null。另外,该方法还支持匹配正则表达式。
- replace(str/RegExp,newstr):替换字符串。
- slice(start,end):如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。
- substr(start,length):也是获取区域字符串,但第二个参数是获取字符串的长度不是角标。
- substring(start,stop):和slice超级像,但start和stop为负或NaN时直接换为0处理。
- split(str):与Array的join(str)方法对应。
- toLowerCase()||toLocaleLowerCase()、toUpperCase()||toLocaleUpperCase()。
RegExp对象
js中的正则表达式对象,是处理字符串模式匹配的强大工具。
我们有两种方法来使用:
var patt = new RegExp(pattern,attributes);//方式一:使用构造函数,其中pattern是字符串或是正则表达式;attributes是修饰符,如果使用了正则表达式就可以不用attributes参数,因为正则表达式可以携带修饰符。
var patt1 = /pattern/attributes//方式二:直接写法,这个patt1就是正则表达式。
修饰符
g:全局匹配(默认是匹配到字符串就停止,而全局匹配是直到所有元素都匹配完)
i:不区分大小写
m:支持多行匹配
var str = "hello JAVAscript javascriPT";
var patt1 = /JaVascript/i;//这样匹配到的是不区分大小写,返回数组,但只包含第一次匹配到的字符串:[JAVAscript ]
var patt2 = /JAVAscript/ig;//多了g修饰符,所以结果是[JAVAscript ,javascriPT]
方括号
匹配某个集合内的字符:
元字符
包含特殊含义的字符:
我们记住常用的几个就好了:
.
:注意,没有反斜杠。
\w
:word的意思,匹配单词字符。注意,和.
的区别在于汉字、标点符号等都不是单词字符,但是是字符。单词字符等同于:[a-zA-Z_0-9]
。数字+字母+_
\d:digital的缩写,匹配数字字符。
\s:space的缩写,匹配空白字符。
\b:boundary的缩写,匹配单词边界。比如:
var str = "boundary";
var patt1 = /\bbou/;//匹配单词中以bou开头的字符,有则返回bou
var patt2 = /ry\b/;//匹配以ry结尾的单词的字符,有则返回ry
\B:匹配单词的非边界字符。(不是很好理解)
var str="Visit W3School ";
var patt1=/.\B/ig;//V,i,s,i,W,3,S,c,h,o,o,
var patt2=/\B./ig;//i,s,i,t,3,S,c,h,o,o,l
虽然不好理解,但我们可以找到一些规律(其实就是和\b反过来),比如patt1是排除以
.
结尾的字符,等同于匹配除了单词结尾的字符以外的其他字符。这里面比较难的点在于空格,单独或连续的空格都算作一个单词,连续的很好判断开头和结尾,但是单个空格有所区别,主要有两点:空格在字符串中间,即空格前后还有内容,那么这个空格既是单词开头也是单词结尾,也就是说中间出现单空格那么这个空格永远算作边界字符;另一个点在于单空格在字符串的两端(" hello"或"hello ")这种情况,那么在字符串前端的空格只作为边界头,在字符串后端的只作为边界尾。可以自行实验一下。
\n:换行符。
其他的一些注意大小写的区别即可。
量词
关于字符串数量匹配的一些用法。
这些规则中注意(str1|str2|str3)的特别之处。
属性
适配方法
注意search()方法,返回值是匹配到的下标,且不支持全局匹配。
Function全局函数
常用方法:
注意parseFloat()和parseInt()方法是强制转换,所以类似”34sasdas“的这种字符串也可以转化为34。
Event对象
下面是Browser相关对象
Window对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
常用属性:
closed:窗口是否关闭。
defaultStatus:读写状态栏默认文本
status:读写状态栏文本,与默认文本不一样。
outerHeight/outerWidth:读取窗口外部宽高,即包含了菜单栏,滚动条这些。
innerHeight/innerWidth:读取窗口内部宽高(内容区域)。
这些值属性都返回一个数字,因为单位默认是像素。
然后window对象自带一些对象的引用作为其属性:document history location navigator self localStorage sessionStorage。
还有关于坐标的属性信息:
pageXOffset/pageYOffset:页面相对于窗口的坐标
screenX,screenY:窗口相对于屏幕的坐标。
常用方法:
三个提示框:
alert()
confirm():确认返回true,取消返回false。
confirm():可提供用户输入信息的提示框,返回用户输入字符串。
时间控件:
setTimeout和setInterval:设置
clearTimeout和clearInterval:清除
前者是设置固定时间后执行某函数或代码,后者是每隔多长时间执行一次。都有三个参数(function/code,time,param1,param2)传递的参数可供执行的function函数使用。
focus():将键盘焦点给予一个窗口。
blur():将键盘焦点从顶部窗口移开。
print():打印当前窗口内容。
stop():停止页面加载。
open(URL,name,space,replace):
打开一个新窗口:以上参数都为可选参数,URL即窗口的url地址,name有以下参数可选:
space参数是一个逗号分隔的项目列表,可以初始化新窗口的一些属性,常用的项有:height/width设置宽高、left:左侧位置,top:顶部位置(仅限ie)、location是否显示地址字段,默认显示,其余大多都是默认yes属性,不需要的手动改为false.
replace参数表示规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。(即是否更新历史浏览记录)
var win = window.open("http://www.cnblogs.com/fzz9/","_blank","height=500,wodth=500,left=100,top=100",true);
//返回值是新窗口这个对象。
resizeTo() || resizeBy()
重新调整窗口的大小,默认单位为像素。resizeTo(w,h)是为窗口设置规定的宽高,而resizeBy(indexW,indexH)是在原窗口的宽高上增加或减少相应的像素(负数即为减)
moveTo() || moveBy()
scrollTo() || scrollBy()
Navigator对象
Navigator对象包含有关浏览器的相关信息。
属性:
userAgent:返回客户机发送给服务器时user-agent的头部值。包含了浏览器的基本信息:如使用window版firefox返回值是:Mozilla/5.0 (Windows NT 6.3; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0。
而这其中具体的值我们也可以通过其他属性来获得:appCodeName浏览器代码名(Mozilla),appName浏览器名(Netspace),appVersion浏览器版本号(5.0(Windows)),platform:平台信息(Win32)。cookieEnabled是否启用了cookie。
目前方法只有两个:javaEnabled和taintEnabled分别为是否在浏览器中启用了java和是否启用了数据污点。(true|false)
Screen对象
包含客户端显示屏的相关信息。
width/height:显示器的宽高,这两个的值其实就是屏幕的分辨率。
availHeight/availWidth:显示器的可用宽高,比如windows系统的任务栏就不计入其中。(其实有时候并不准确,也计入其中了)。
目前暂未提供相关方法。
History对象
包含了当前窗口访问过的URL的历史记录列表。
length属性可返回历史记录地址列表的数量。
三个方法:back()后退,forward()前进,go(number/url)打开列表中的地址,一般使用number参数,正数表示前进number页,负数表是后退number页。
Location对象
Location对象包含当前URL的相关信息。
我们写一个比较完成的URL:
var url = "https://www.nihao.com:8080/lookme/sing#love?name=tom&age=18";
//假设这个就是当前地址的URL
location.href;//读写当前URL
location.protocol;//url的协议即https:
location.host;//主机名+端口号:www.nihao.com:8080
location.hostname;//主机名www.nihao.com
location.pathname;//路径名:/lookme/sing
location.hash;//url锚点值:love
location.search;//查询值,其实就是参数信息,更具体来说就是rul地址?后面的部分。
方法:
assign(url) || replace(rul):打开指定连接URl替换当前页面,和使用location.href=url;一样的效果。assign方法和replace的不同在于,前者可以go(-1)而后者不行。(来自网络,未验证)
reload()方法重载当前页面。
localStorage和sessionStorage
这两个对象是H5新增的Web存储的对象,localStorage对象存储时间不限,而sessionStorage对象是会话对象,即关闭当前会话就会清空存储。
两者都是以键值对存储信息的,length属性可以返回当前存储对象的键值对数量。
方法:
以下是两者作用域的一些区别:
最后一部分就是DOM 对象
document对象
DOM结点:html文档可以解析为DOM结点:html文档就是一个文档结点,所有的元素都是元素结点,所有属性都是属性结点,文本被插入到html元素中是文本结点text-nodes,注释是注释结点。
而document对象就是html文档的根结点,通过document对象我们就能对html进行操作。注意,我们获取到了某个元素,这个元素也能使用自带的一些属性和方法,即html自带的而非js提供的属性和方法。
常用属性和方法:
document.querySelector() || document.querySelectorAll()
document.addEventListener() || document.removeEventListener()
document.write() || document.writeln()
document.getElementById() || getElementsByClass || getElementsByTagName || getElemntsByName
document.createElement() || createAttribute() || createTextNode
在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的,应该避免使用,以这里不再列举。
元素对象常用属性和方法:
有很多关于属性的方法,我们可以使用getAttribute、setAttribute、removeAttribute来操作。
- cloneNode()克隆某个元素.
- firstChild 、lastChild
- focus() hasFocus()
- hasAttribute() || hasAttributes()
- hasChildNodes():文本结点也算其子节点
- element.id elemnet.innerHTML element.style
- insertBefore(newNode,targetNode) appendChild()
- nodeType:返回节点类型,元素节点返回1,属性节点返回2,文本节点3,注释节点返回8。
事件对象
onmouseenter和onmouseover两者都是鼠标进入元素时触发,但不同点在于onmouseenter事件不冒泡而onmouseover事件冒泡,所以当鼠标进入子元素时前者不再触发而后者仍然会触发事件。同样的,和这两个事件相对的事件分别为onmouseleave和onmouseout.
onkeydown和onkeyup相对,onkeypress是键盘按下并放开触发。
onpageshow和onpagehide(不是很好用)相对,分别表示页面被访问和跳转到其他页面时触发,一般绑定到框架或body标签上。onscroll是页面滚动时触发,onresize表示尺寸变化时触发。
还有表单事件、剪切板事件、拖动事件、多媒体事件、动画事件等事件此处不再一一赘述,可参考:
http://www.runoob.com/jsref/dom-obj-event.html
console对象
log() || info():打印信息到控制台
clear()清空
table(array||object,[colTitle]):表格形式显示数据
time() || timeedn() 结合使用,可以用来计算某个操作的执行时间。
trace()方法用于显示当前执行的代码在堆栈中的调用路径
CSSStyleDeclaration对象
js知识点(随机)
-
XMLHttpRequest对象(Ajax核心对象)
-
函数定义方式:
- console.log('Value is ' + (val != '0') ? 'define' : 'undefine');中val已经定义可能为任意值,那么输出结果可能为?
-
- 跨域
https://www.cnblogs.com/2050/p/3191744.html - 闭包
- js中的数字占8字节
- null == undefined返回true;null === undefined返回false;false == null返回false.
- var a=b=3 相当于 var a = 3;b = 3;b是全局的
- var i = 4399<0 || typeof(4399+"");之后i值为。