JS#2 对象

6 篇文章 0 订阅

一. Array对象

  1. 定义

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

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

  1. 访问

arr[索引] = 值;

  1. 注意

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

  1. 常用的属性和方法

  • 属性: length 数组元素的个数

  • 方法: push( ) 添加元素

splice( ) 删除元素

  1. 代码:

<!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对象

  1. 定义

  • var 变量名 = new String(s);

  • var 变量名 = s;

  1. 常用的属性和方法

  • 属性: length 字符串的长度

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

indexOf( ) 检索字符串

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

  1. 代码

<!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>
  1. 效果展示

三. 自定义对象

  1. 格式

var 对象名称 = {

属性名称1: 属性值1,

属性名称2: 属性值2,

......

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

...

};

四. BOM

  1. 介绍

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

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

  1. 组成:

  • Window:浏览器窗口对象

  • Navigator:浏览器对象

  • Screen: 屏幕对象

  • History:历史记录对象

  • Location:地址栏对象

  1. Window的属性和方法

  1. Window:浏览器窗口对象

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

window.alert("abc");

  1. 属性:获取其他BOM对象

history 对 History 对象的只读引用

Navigator 对 Navigator 对象的只读引用

Screen 对 Screen 对象的只读引用

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

  1. 方法

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

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

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

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

  1. 代码

<!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>
  1. History和Location

  1. History:历史记录

Location: 地址栏对象

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

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

  1. history方法

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

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

  1. lactation属性

href 设置或返回完整的URL

五. DOM

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

  • Image: <img>

  • Button: <input type="button">

  1. Element: 元素对象

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

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

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

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

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

  1. 代码

//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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值