JavaScript对象

你狐狸

已于 2024-09-11 08:54:06 修改

阅读量1.9k

点赞数 41

分类专栏：语法说明文章标签： javascript 前端开发语言

于 2024-09-08 15:43:16 首次发布

本文链接：https://blog.csdn.net/w_wok/article/details/142025341

版权

语法说明专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaSrcipt对象

JS对象

JS对象

Array

JavaScript 中 Array 对象用于定义数组
定义方法
var 变量名 = new Array(元素列表);//方法一
var 变量名 = [元素列表];//方法二

var arr = new Array(1,2,3);
var arr2 = [1,2,3];

访问
arr[index] = 值
在JavaScript中数组的长度是可变的，旅游存储任意类型的数值

arr[10] = "hello"
alert(arr[10])

属性
length: 设置或返回数组中元素的数量。

var arr2 = [1,2,3];
for  (let 1 = 0;i < arr2.length; i++){
	console.log(arr2[i])
}

方法
- forEach():遍历数组中每个有值的元素，并调用一次传入的函数。
  这里的参数i是一次循环过程中从数组中提取出来的元素，通过函数输出

    arr2.forEach(function(i){
        console.log(i)
    })
    //ES6 箭头函数
    arr2.forEach((i) => {
        console.log(i)
    })

push():将新元素添加到数组的末尾，并返回新的长度。

arr2.push(7)
console.log(arr2)

splice():从数组中删除函数。

    arr2.splice(1,2)//第一个参数为开始位置，第二个为删除个数
    console.log(arr2)

String

String字符串的定义
var 变量名 = new String(“···”)
var 变量名 = “···”
属性
length：获取字符串的长度
方法
charAt():返回指定位置的字符。
indexOf():检索字符串。
trim():去除字符串两边的空格。
substring:提取字符串中两个指定索引号之间的字符(含头不含尾)。

var str = "hello world"
var str2 = " hello world "
console.log(str.length)//11
console.log(str.charAt(3))//l
console.log(str.indexOf("lo"))//3
var str3 = str2.trim()
console.log(str3) //"hello world
console.log(str.substring(0,5))//hello

自定义对象

定义格式(记得末尾打逗号！！！)

  var 对象名 = {
  	属性名:属性值,
 		属性名2:属性值2,
 		属性名3:属性值3,
 		函数名称:function(参数列表){
 		
 		},}

调用格式
对象名.属性值
函数名. 函数名()

var user = {
	name:"Tom",
	age:16,
	gender:"male",
	eat:function(){alert("吃吃吃")},
}
alert(user.name)
user.eat()

在这里插入图片描述

JSON

JavaSrcipt Object Notation，JavaScript对象标记法。
是通过JavaScript对象标记法书写的文本，写法类似于字典

多用作为数据载体，用于网络传输

  {"属性名":"属性值","属性名2":"属性值2","属性名3":"属性值3"，"属性名4":["","",""]}

//属性值必须用双引号扣起来,这是一个字符串，不要换行！
var user2 = '{"name":"Tom","age":16,"gender":"male","addr":["北京","上海"]}'

JSON对象不能直接通过对象名.属性值访问，需要转换

JSON字符串转换为JS对象：var js = JSON.parse(user)
JS对象转换为JSON字符串：var json = JSON.stringify(js)

var js = JSON.parse(user2)
alert(js.name)
var json = JSON.stringify(user)
alert(json)

在这里插入图片描述

BOM对象

Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，将整个浏览的各个组成部分封装成对象。
组成
- Window：浏览窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象

Window 参阅

属性
- history：对History对象的只读引用。
- Location：用于窗口或框架的Location对象。
- navigator：对Navigator对象的只读引用。
方法
- alert()
- confirm():显示带有确认和取消的对话框(确认返回true，取消返回false)
- setInterval():按照一定时间周期调用函数或计算表达式。
- setTimeout():按照一定时间后调用函数或计算表达式
- prompt():带有文本框的对话框。

//对话框
var result = confirm("哈啊啊")
alert(result)

在这里插入图片描述

点击确认
在这里插入图片描述
点击取消

prompt使用方法

//周期执行
var i = 0
var ii = 0
setInterval(function(){
    i++
    console.log("1执行了"+i+"次")
},2000)//setInterval(函数,间隔时间1000为一秒) 重复执行
setTimeout(function(){
    ii++
    console.log("2执行了"+i+"次")
}, 3000)// 只执行一次

在这里插入图片描述

location

地址栏对象
获取：使用winodw.location 获取，window可以省略
属性：
- href：设置或返回完整的URL
- alert(location.href)
- Location.href = "www.baidu.com"

DOM

Document Object Model，文档对象类型
将标记语言的各个部分封装为对应的对象
- Document 整个文本对象
- Element 元素对象 body、head、div等等
- Attribute 属性对象各元素的样式，链接
- Text 文本对象正文
- Comment 注释对象 //注释
JavaScript通过DOM对象，就能够对HTML进行操作
- 改变HMTL元素内容
- 改变元素样式
- 对事件做出反应
- 添加和删除HTML元素
HMTL中的Element对象可以通过Document对象获取
获取方法
- 1.根据id属性值获取,返回单个Element对象
  var h1 = document. getElementById(‘h1’);
- 2.根据标签名称获取, 返回Element对象数组
  var divs = document.getElementsByTagName(‘div’);
- 3.根据name属性值获取,返回Element对象数组
  var hobbys = document. getElementsByName(‘hobby’);
- 4.根据class属性值获取,返回Element对象数组
  var clss = document. getElementsByClassName(‘cls’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    onclick 鼠标单击事件
    onblur 元素失去焦点
    onfocus 元素获得焦点
    onload 某个页面或图像被加载完成
    onsubmit 当表单被提交时触发该事件
    onkeydown 某个按键被按下
    onmouseover 鼠标被移动到某个元素上
    onmouseout 鼠标从某元素离开
    -->
    <img src="off.png" id="light"/><br>
    <!-- 通过事件属性来绑定 -->
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()"><br><br>
    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br><br>
    <!-- 通过元素属性来绑定 -->
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
    <br><br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
    <script>
        function on(){
            var a = document.getElementById("light");
            a.src = "on.png"
        }
        function off(){
            var a = document.getElementById("light");
            a.src = "off.png"
        }
        //onfocus聚焦事件 onblur离焦事件
        function lower(){
            var text = document.getElementById("name");
            text.value = text.value.toLowerCase()
        }
        function upper(){
            var text = document.getElementById("name");
            text.value = text.value.toLowerCase()
        }
        
        function checkAll(){
            var hobby = document.getElementsByName("hobby")
            for (let i = 0; i < hobby.length; i++) {
                const element = hobby[i];
                element.checked = true
            }}
            
        function reverse(){
            var hobby = document.getElementsByName("hobby")
            for (let i = 0; i < hobby.length; i++) {
                const element = hobby[i];
                element.checked = false
            }
        }
    </script>
</body>
</html>