Javascript 基础知识学习(四)

这里接着前面一篇继续!
Javascript中的所有所有事物都是对象:字符串、数值、数组、函数·····
每个对象都有自己的属性和方法,
JS能够自定义对象: 在第七点是相关面向对象的知识点。

1<script> 2 //直接创建对象 3 var people={ 4 5 6 7 name: "ning", 8 age: 10, 9 }; 10 //通过函数创建对象 11 function people(name.age){ 12 13 14 15 this.name=name; 16 this.age=age; 17 } 18 var man=new people("ning",10); 19</script>

四、JS内置对象

4.1 String字符串对象

方法名

描述

charAt(index)

返回指定位置的字符,从0开始

charCodeAt(index)

返回指定位置的字符串ASCII编码

String.fromCharCode(value)

返回指ASCII码对应的字符串

indexof(searchStr),indexof(searchStr,fromIndex)

返回某个指定的字符串值在字符串中首次出现的位置

split(delimeter),split(delimeter,Howmany)

用于把一个字符串分割成字符串数组

substring(start),substring(start,stop)

提取两个下标之间的字符

toLowerCase()

把字符串转换成小写

toUpperCase()

把字符串转换成大写

trim()

返回去除字符串两端的空格后的字符串

4.2 Array数组对象

方法名

描述

concat(array1,array2···)

将两个或者多个字符串合并成一个

indexOf(value)

返回value在字符串中第一次出现的索引号

join(),join(separator)

将数组全部元素组成一个字符串,缺省用逗号隔开

lastIndexOf(value)

返回value在字符串中最后一次出现的索引号

pop()

从数组中删除最后一个元素

push(value1,value2···)

在数组尾部追加一个或多个元素

reverse()

反转数组元素的顺序

shift()

把数组第一个元素删除并返回第一个元素值

slice(startIndex),slice(startIndex,endIndex)

从数组中返回一个起点到终点的子数组,返回不含endIndex

splice(index,count,value1,value2···)

从数组中删除从index开始的count个元素,并用新元素来代替

sort()

对数组元素进行排序

toString()

将数组元素转换成字符串,用逗号隔开

unshift(value1,value2···)

向数组的开头添加一个或更多元素,并返回新的长度

4.3 Date日期对象

var date=new Date(); //获取当前时间

方法名

描述

getFullYear()

获取年份

getTime()

获取毫秒

setFullYear()

设置具体日期

getDay()

获取星期

1//首先一定要创建对象 2var today=new date(); //获取当前时间 3var h=today.getHours(); //获取小时 4var m=today.getMinutes();//获取分钟 5var s=today.getseconds();//获取秒

4.4 Math工具函数

方法

描述

Math.PI

圆周率

Math.random()

返回一个[0,1)的数

Math.floot(x)

向下取整

Math.sin(x),cos(x),tan(x)

三角函数

Math.asin(x),acos(x),atan(x)

反三角函数

Math.atan2(y,x)

返回对应的角度(-PI,PI)

Math.sqrt(x)

算术平方根

Math.round()

四舍五入

Math.abs()

取绝对值


五、JS-DOM对象

5.1 DOM对象的属性

属性

描述

classNama

元素的class属性

id

元素的id属性

innerHTML

元素中的HTML标记和内容

style

表示元素样式属性的对象

tagName

元素的HTML标签,大写字母表示

checked

单选或复选按钮是否被选中

disabled

是否禁用Form控件

href

链接a的目标URL

src

图像(img)的URL

value

Rorm控件中的文本

5.2 DOM对象的方法

方法名

描述

getElementsByName()

获取name

getElementsByTagName()

获取元素

getAttribute()

获取元素属性

setAttribute()

设置元素属性

childNodes()

访问子节点

parentNode()

访问父节点

createElement()

创建元素节点

createTextNode()

创建文本节点

insertBefore()

插入节点

removeChild()

删除节点

offsetHeight()

网页尺寸

scrollHeight

网页尺寸

举例:

1 var anode=document.getElementById("id1"); 2 var text=anode.getAttribute("id"); //获取当前元素的属性 3 alert(text); 4 anode.setAttribute("id","id2");//设置id属性为id2 5

六、全局DOM对象

6.1 window对象

window对象是BOM的核心,window对象指的是当前的浏览器窗口。全局变量、函数、变量都会自动成为window对象的成员。HTML DOM 的document也是window对象的属性之一。

方法名

描述

alert,confirm,prompt

弹出框

moveBy(dx,dy),moveTo(x,y)

将窗口移动到指定的位置,dx/dy是偏移量

resizeBy(dw,dh),risizeTo(x,y)

改变浏览器窗口

scrollBy(dx,dy),scroolTo(x,y)

将页面滚动到特定点

1alert(window.innerHeight,window.innerWidth); //浏览器窗口的内部高度和宽度 2window.open("noindex.html","打开页面的名字","height=100px,width=100px,top=100,left=100");//打开新的窗口 3window.close();//关闭当前页面

6.2 计时器

方法

描述

setInterval()

间隔指定的毫秒数不停的调用指定的函数

clearInterval()

停止setInterval()方法执行的函数代码

setTimeout()

暂停指定毫秒数执行指定的代码函数

clearTimeout()

停止setTimeout()方法执行的函数代码

1 <p id="pid"></p> 2 <script> 3 var mytime = setInterval(function () { 4 5 6 7 showTime(); 8 },1000); //每隔1秒调用一次showTime函数 9 function showTime(){ 10 11 12 13 var pnode=document.getElementById("pid"); 14 var time=new Date(); 15 var t=time.toLocaleTimeString(); 16 pnode.innerHTML=t; 17 } 18 function stopTime(){ 19 20 21 22 clearInterval(myTime);//停止时间刷新 23 } 24 </script>

在这里插入图片描述

6.3 History对象

window.history对象包含浏览器的历史(url)的集合。

方法

描述

history.back()

功能与浏览器点击后退按钮效果一样

histoty.forward()

功能与浏览器点击向前效果一样

history.go()

进入历史的某个页面

1<a href="006.html">进入006</a> 2<button οnclick="goone()">按钮</button> 3 <script> 4 function goone(){ 5 6 7 8 history.go(1); 9 } 10 </script> 11 12 13<button οnclick="go()">按钮6</button> 14 15<script> 16 function go() { 17 18 19 20 history.back(); 21 }

6.4 Location对象

window.location对象用于获取当前页面的地址(URL),并把浏览器定向到新的页面。

对象的属性

描述

location.hostname

返回web主机的域名

location.pathname

返回当前页面的路径和文件名

location.port

返回web主机端口

location.protocol

返回所使用的web协议(http://或https://)

location.href

返回当前页面的URL

location.assign()

方法加载新的文档

host

主机名和端口号

6.5 Screen对象

window.screen对象包含有关用户屏幕的信息。

属性

描述

screen.availWidth

可用的屏幕的宽度

screen.availHeight

可用屏幕的高度

screen.Height

屏幕高度

screen.Width

屏幕宽度


七、面向对象

1//面向对象的操作 2 3 4// 1.第一种 5 6var people={ 7 8 9 10 name:"ning", 11 age:10, 12 say:function(){ 13 14 15 16 alert(this.name); 17 } 18}; 19alert(people.age); 20people.say(); 21 22 23function person() { 24 25 26 27 this.name="ning"; 28 this.age=10; 29 this.say=function () { 30 31 32 33 alert("现在22:29"); 34 } 35} 36var p=new person(); 37p.say(); 38 39//2. 第二种 40/* 41function people(){ 42 43} 44people.prototype={ 45 name:"ning", 46 age: 10, 47 say:function () { 48 alert("我是第二种"); 49 } 50} 51people.prototype.speak=function () { 52 alert("说话"); 53} 54var p=new people(); 55p.say(); 56p.speak(); 57*/ 58 59//3. 第三种 用function来模拟类继承 60/* 61function people() { 62 63} 64people.prototype.say=function () { 65 alert("我是父类方法"); 66} 67 68function Student() { 69 70} 71Student.prototype=new people(); //Student继承people 72var s=new Student(); //创建对象 73s.say(); //能够调用父类的方法 74 75var superSay=Student.prototype.say; 76Student.prototype.say=function () { 77 superSay.call(this); 78 alert("重写父类的say方法"); 79} 80s.say();//这里想要调用父类的Say方法,需要先用surperSay保存父类的say方法,然后在子类重写的方法中调用superSay.call(this)即可 81 82*/ 83 84 85// 4.面向的思维:封装 86/* 87//格式: 88(function () { 89 //这里填入上面的代码进行封装,比如对people封装; 90 window.XXX=XXX;//将这个XXX传给最高的window对象,这样就可以通过window访问封装的内容了 91}()) 92//封装举例: 93(function () { 94 function people() { 95 96 } 97 people.prototype.say=function () { 98 alert("我是父类方法"); 99 } 100 window.people=people; 101}) 102 103*/ 104 105 106//4. 第四种 这里没有封装,如果要封装,方法和上面一样; 107/* 108function people() { 109 var _this={}; 110 _this.name="ning"; 111 _this.age=10; 112 return _this; 113} 114function Student() { 115 var _this=people(); 116 return _this; 117} 118 119var s=Student(); 120 121alert(s.age+s.name); //能够访问父类属性 122*/ 123 124

在这里插入图片描述
在这里插入图片描述


JS的学习到这里就差不多了,我觉得JS中比较难理解的部分就是面向对象,这里方法有很多种,要完全的掌握还是要自己多试试,可以把自己不理解或者似懂非懂的,通过实践就能够得出结论了!说到底就是要多动手!

本文同步分享在 博客“战 胜”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

一篇文章带你了解JavaScript日期

日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用

JavaScript原型深入浅出

不学会怎么处理对象,你在JavaScript道路就就走不了多远。它们几乎是JavaScript编程语言每个方面的基础。事实上,学习如何创建对象可能是你刚开始学习的第一件事。对象是键/值对。创建对象的最常用方法是使用花括号{},并使用点表示法向对象添加属性和方法。letanimal{}animal.name