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)

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

相关推荐
Moment3 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛5 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛5 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang6 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果13 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星14 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang21 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears21 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士28 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童30 分钟前
五个JavaScript 应用技巧
javascript