Javascript 基础知识学习(四)

Stella981
• 阅读 506

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

<script>
    //直接创建对象
    var people={
   
   
   
        name: "ning",
        age: 10,
    };
    //通过函数创建对象
    function people(name.age){
   
   
   
        this.name=name;
        this.age=age;
    }
    var man=new people("ning",10);
</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()

获取星期

//首先一定要创建对象
var today=new date();  //获取当前时间
var h=today.getHours(); //获取小时
var m=today.getMinutes();//获取分钟
var 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

网页尺寸

举例:

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

六、全局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)

将页面滚动到特定点

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

6.2 计时器

方法

描述

setInterval()

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

clearInterval()

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

setTimeout()

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

clearTimeout()

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

    <p id="pid"></p>
 <script>
     var mytime = setInterval(function () {
   
   
   
         showTime();
     },1000);  //每隔1秒调用一次showTime函数
     function showTime(){
   
   
   
         var pnode=document.getElementById("pid");
         var time=new Date();
         var t=time.toLocaleTimeString();
         pnode.innerHTML=t;
     }
     function stopTime(){
   
   
   
     clearInterval(myTime);//停止时间刷新
     }
 </script>

Javascript 基础知识学习(四)

6.3 History对象

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

方法

描述

history.back()

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

histoty.forward()

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

history.go()

进入历史的某个页面

<a href="006.html">进入006</a>
<button οnclick="goone()">按钮</button>
    <script>
        function goone(){
   
   
   
            history.go(1);
        }
     </script>


<button οnclick="go()">按钮6</button>

<script>
    function go() {
   
   
   
        history.back();
    }

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.第一种

var people={
   
   
   
    name:"ning",
    age:10,
    say:function(){
   
   
   
        alert(this.name);
    }
};
alert(people.age);
people.say();


function person() {
   
   
   
    this.name="ning";
    this.age=10;
    this.say=function () {
   
   
   
        alert("现在22:29");
    }
}
var p=new person();
p.say();

//2. 第二种
/*
function people(){

}
people.prototype={
    name:"ning",
    age: 10,
    say:function () {
        alert("我是第二种");
    }
}
people.prototype.speak=function () {
    alert("说话");
}
var p=new people();
p.say();
p.speak();
*/

//3. 第三种 用function来模拟类继承
/*
function people() {

}
people.prototype.say=function () {
    alert("我是父类方法");
}

function Student() {

}
Student.prototype=new people(); //Student继承people
var s=new Student(); //创建对象
s.say(); //能够调用父类的方法

var superSay=Student.prototype.say;
Student.prototype.say=function () {
    superSay.call(this);
    alert("重写父类的say方法");
}
s.say();//这里想要调用父类的Say方法,需要先用surperSay保存父类的say方法,然后在子类重写的方法中调用superSay.call(this)即可

*/


// 4.面向的思维:封装
/*
//格式:
(function () {
    //这里填入上面的代码进行封装,比如对people封装;
    window.XXX=XXX;//将这个XXX传给最高的window对象,这样就可以通过window访问封装的内容了
}())
//封装举例:
(function () {
    function people() {

    }
    people.prototype.say=function () {
        alert("我是父类方法");
    }
    window.people=people;
})

*/


//4. 第四种   这里没有封装,如果要封装,方法和上面一样;
/*
function people() {
    var _this={};
    _this.name="ning";
    _this.age=10;
    return _this;
}
function Student() {
    var _this=people();
    return _this;
}

var s=Student();

alert(s.age+s.name); //能够访问父类属性
*/

Javascript 基础知识学习(四)
Javascript 基础知识学习(四)


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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
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
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
2年前
java常用类(2)
三、时间处理相关类Date类:计算机世界把1970年1月1号定为基准时间,每个度量单位是毫秒(1秒的千分之一),用long类型的变量表示时间。Date分配Date对象并初始化对象,以表示自从标准基准时间(称为“历元”(epoch),即1970年1月1日08:00:00GMT)以来的指定毫秒数。示例:packagecn.tanjian
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
JavaScript原型深入浅出
不学会怎么处理对象,你在JavaScript道路就就走不了多远。它们几乎是JavaScript编程语言每个方面的基础。事实上,学习如何创建对象可能是你刚开始学习的第一件事。对象是键/值对。创建对象的最常用方法是使用花括号{},并使用点表示法向对象添加属性和方法。letanimal{}animal.name
Stella981 Stella981
2年前
JavaScript的 基本数据类型
第一:Javascript对象是第二:Javascript中第三:Javascript的对象是数据;第四:JavaScript中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个JavaScript字符串参考https://www
Stella981 Stella981
2年前
JavaScript Prototype
定义和用法prototype属性使您有能力向对象添加属性和方法。实例在本例中,将展示如何使用prototype属性来向对象添加属性:<scripttype"text/javascript"functionemployee(name,job,born){this.n
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
unity将 -u4E00 这种 编码 转汉字 方法
 unity中直接使用 JsonMapper.ToJson(对象),取到的字符串,里面汉字可能是\\u4E00类似这种其实也不用转,服务器会通过类似fastjson发序列化的方式,将json转对象,获取对象的值就是中文但是有时服务器要求将传参中字符串中类似\\u4E00这种转汉字,就需要下面 publ
Stella981 Stella981
2年前
Javascript 面向对象编程
Javascript面向对象编程(一):封装Javascript是一种基于对象(objectbased)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把"属性