javascript对象

目录

Array对象

属性:

length属性:数组中元素个数

方法:

push:添加

splice:删除

String对象

属性:

length:字符串长度

方法

trim():去除字符申前后两端的空白字符

自定义对象

BOM对象

Window

获取:

属性:

方法:

confirm:

setTimeout()

setInterval()


Array对象

JavaScript Array对象用于定义数组

定义:

方式一:

var 变量名=new Array(元素列表)

示例:

方式二:

var 变量名=[元素列表]

示例:

访问:

arr[索引]=值

这里的索引也是从0开始

JS数组类似于Java集合,长度,类型都可变

没有的数据用空字符表示

可以看到类型也是可以改变的


属性:

length属性:数组中元素个数


方法:

push:添加


splice:删除

表示从arr[0]开始删,删除一个元素


String对象

定义:

方式一:

var 变量名=new String(s) ;

方式二:

var 变量名=s;


属性:

length:字符串长度


方法

trim():去除字符申前后两端的空白字符

这样输出是有很多空格的

下面我们使用trim()方法


自定义对象

var 对象名称 ={

属性名称1:属性值1,

属性名称2:属性值2,

....

函数名称:function(形参列表){}

...

};


BOM对象

  • Browser Object Model 浏览器对象模型
  • Javascript 将浏览器的各个组成部分封装为对象

组成:

  • Window:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象

Window

Window:浏览器窗口对象

获取:

直接使用 window,其中window.可以省略

复制代码
window.alert("abc"); 

属性:

获取其他 BOM对象

history 对 History 对象的只读引用。请参数 History 对象

Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象.

Screen 对 Screen 对象的只读引用。请参数 Screen 对象

location 用于窗口或框架的 Location 对象。请参阅 Location 对象。

方法:

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval() 按照指定的周期(以毫秒计 )来调用函数或计算表达式。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

confirm:

点击确定按钮。返回true。点击取消按钮,返回false

是会有返回值的,我们可以看看用户点击的是什么

点击确定后

点击取消后

setTimeout()

3秒钟之后弹出haha

setInterval()

两秒钟弹一次haha


History

History:历史记录

获取:

使用 window.history获取,其中window.可以省略

window.history.方法();

history.方法();

方法

back() 加载 history 列表中的前一个 URL

fonward() 加载 history 列表中的下一个 URL

Location

Location:地址栏对象

获取:

使用 window.location获取,其中window.可以省略

window.location.方法();

location.方法();

属性

href 设置或返回完整的 URL。

DOM对象

JavaScript 通过 DOM,就能够对 HTML进行操作了

  • 改 HTML 元素的内容
  • 改变 HTML元素的样式(CSS)
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

获取Element

Element:元素对象

获取:使用Document对象的方法来获取

  1. getElementByld:根据id属性值获取,返回一个Element对象
  2. getElementsByTagName:根据标签名称获取,返回Element对象数组
  3. getElementsByName:根据name属性值获取,返回Element对象数组
  4. getElementsByClassName:根据class属性值获取,返回Element对象数组
html 复制代码
<body>

<img id="love" src="4c6468f4debfa0fbdf5b7826ceee663.jpg" width="500" height="500"><br>
<div class="cls">csdn</div>
<br>

<div class ="cls">努力敲代码的小火龙</div>
<br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">敲代码
<br>

getElementByld

getElementsByTagName

弹出两次

getElementsByName

弹出三次

getElementsByClassName

弹出两次

style:设置元素css样式

innerHTML:设置元素内容

剩下的大家可以查阅文档

JavaScript 参考手册 (w3school.com.cn)

感谢大家的观看,继续加油!!!

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试