JS#2 对象-CSDN博客

本文链接：https://blog.csdn.net/guaiwu_/article/details/129267308

一. Array对象

定义

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

var 变量名 = [元素列表];

访问

arr[索引] = 值;

注意

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

常用的属性和方法

属性: length 数组元素的个数

方法: push( ) 添加元素

splice( ) 删除元素

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array</title>
</head>
<body>




<script src="../js/demo2.js">

</script>
</body>
</html>

/*  //第一种方式
  var arr1 = new Array(1,2,3);
  alert(arr1);

 //第二种方式
  var arr2 = [2,3,4];
  alert(arr2);*/

  //属性:length: 数组中元素的个数
 /*for(let i = 0;i<arr2.length; i++){
    alert(arr2[i]);
 }*/
 //push:添加方法
 var arr3 = [9,8,7];
 arr3.push(6);
 //alert(arr3);

 //splice:删除元素
 arr3.splice(3,1);//第一个参数:索引 第二个参数:删除的个数
 alert(arr3);

二. String对象

定义

var 变量名 = new String(s);

var 变量名 = s;

常用的属性和方法

属性: length 字符串的长度

方法: charAt( ) 返回指定位置的字符

indexOf( ) 检索字符串

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String 对象</title>
</head>
<body>



<script>
    //var s1 = new String("js1");//方式一

    //var s2 = "js2";//方式二

    //alert(s1.length);
    //alert(s2);//弹出js2

    //var a1 = s1.charAt(1);
    //alert(a1);//弹出s

    var str1 = "   aaa  ";
    alert(1+str1.trim()+1);
</script>
</body>
</html>

效果展示

三. 自定义对象

格式

var 对象名称 = {

属性名称1: 属性值1,

属性名称2: 属性值2,

......

属性名称: function(形参列表){ }

...

};

四. BOM

介绍

Browser Object Model (BOM) 浏览器对象模型

JavaScript将浏览器的各个组成部分封装为对象

组成:

Window:浏览器窗口对象

Navigator:浏览器对象

Screen: 屏幕对象

History:历史记录对象

Location:地址栏对象

Window的属性和方法

Window:浏览器窗口对象

获取:直接使用 window，其中window.可以省略

window.alert("abc");

属性:获取其他BOM对象

history 对 History 对象的只读引用

Navigator 对 Navigator 对象的只读引用

Screen 对 Screen 对象的只读引用

location 用于窗口或框架的 Location 对象

方法

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

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

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

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>


<script>
  //var flag = confirm("window");
  //alert(flag);//确定为true, 取消为false

  //setTimeout(function,毫秒值); 在一定的时间间隔后执行一个function,只执行一次
  //setInterval(function,毫秒值); 在一定的时间间隔后执行一个function,循环执行
  //setTimeout(function(){alert("666")},2000);
    setInterval(function(){alert("666")},2000);


</script>
</body>
</html>

History和Location

History:历史记录

Location: 地址栏对象

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

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

history方法

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

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

lactation属性

href 设置或返回完整的URL

五. DOM

HTML DOM: 针对HTML文档的标准模型

Image: <img>

Button: <input type="button">

Element: 元素对象

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

getElementById: 根据id属性值获取，返回一个Element对象

getElementsByTagName: 根据标签名称获取，返回Element对象数组

getElementsByName: 根据name属性值获取，返回Element对象数组

getElementsByClassName: 根据class属性值获取，返回Element对象数组

代码

//getElementById: 根据id属性值获取，返回一个Element对象
  var va1 = document.getElementById("male");
  alert(va1);
//getElementsByTagName:  根据标签名称获取，返回Element对象数组
  var divs = document.getElementsByTagName("div");
    alert(divs.length);
  for(var i = 0; i < divs.length; i++){
        alert(divs[i]);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element test</title>
</head>
<body>
  <div class="cla">div1</div><br>
  <div class="cla">div2</div><br>

  性别:
  <input type="radio" name="gender" value="1" id="male">
  <label for="male">男</label>
  <input type="radio" name="gender" value="2" id="female">
  <label for="female">女</label><br>

  爱好:
  <input type="checkbox" name="hobby" value="1">跑步
  <input type="checkbox" name="hobby" value="2">打乒乓球
  <input type="checkbox" name="hobby" value="3">打篮球
  <br>


<script src="../JS/demo1.js">
  //getElementById: 根据id属性值获取，返回一个Element对象
  //var va1 = document.getElementById("male");
  //alert(va1);

  //var divs = document.getElementsByClassName("cla");
  //alert(divs.length);
  //for (let i = 0; i < divs.length; i++){
  //    alert(divs[i]);
  //}

</script>
</body>
</html>