JavaScript学习笔记（二），js内置对象，Dom操作和Bom操作

最新推荐文章于 2024-02-12 08:00:00 发布

千里马不常有

最新推荐文章于 2024-02-12 08:00:00 发布

阅读量631

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端技术 JavaWeb入门编程文章标签： js内置对象 dom操作 bom操作全选和全不选

本文链接：https://blog.csdn.net/MacWx/article/details/94721199

JavaWeb入门编程同时被 2 个专栏收录

38 篇文章

订阅专栏

前端技术

18 篇文章

订阅专栏

本文深入讲解JavaScript内置对象如数组、字符串、日期及JSON的使用技巧，同时介绍DOM操作，包括元素属性的修改和事件处理，以及BOM的基础概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

6、 js内置的对象

6.1 数组

	<script type="text/javascript">
		//声明出数组，并附上初始值
		//var arr=[1,2,3];
		var arr=new Array();
		//js的长度可以变化，把4放入到数组里面。
		arr.push(4);
		arr[1]=1;
		/*for(var i=0;i<arr.length;i++){
			console.log(arr[i]);
		}*/
		//这种for循环，循环到的i值是数组的下标，而不是元素值
		for(var i in arr){
			console.log(arr[i]);
		}
	</script>

或者我们先创建出数组对象，再往数组里面放元素：
var arr=new Array();
arr.push(2);
arr[1]=1;

6.2 字符串

常见的方法：
indexOf():获取字符串的下标
subString():截断字符串。
Trim():去除左右空格
Split():把字符串拆分成数组。
在这里插入图片描述
6.3 日期

<script type="text/javascript">
		var d=new Date();//系统当前时间
		alert(d);
		var y=d.getFullYear();//获取四位的年
		var m=d.getMonth();//获取月份,月份从0开始，要得到当前月份需要+1
		var day=d.getDay();//获取到星期几
		alert(day);
	</script>

6.4 Json

Json就是Js中的对象。Ajax会用到json。
var person={属性名:属性值,属性名：属性值,函数名:function(){函数体}};

<script type="text/javascript">
		//定义json对象
		var stu={
				name:"zhangsan",
				age:20,//属性
				study:function(){
					console.log("------good good study----------");
				},//对象的方法
				say:function(){
					console.log("----------你好，我叫"+this.name+"-------");
				}
		};
		stu.say();//调用say方法
		var a=stu.age;//调用age属性
		console.log(a);
	</script>

7 Dom操作

通过js代码，
操作元素（html的标签）的属性，增加或者修改属性值，或者修改元素的内容。
Dom：document object model（文档对象模型）。
浏览器在解析html文档的时候，会把html源码分析成一个模型图，这个图形就被称为文档结构模型。
Dom操作
//获取到dom模型上面的dom元素。
var obj=document.getElementById(“元素的id值”);

Dom操作案例：
通过按钮实现复选框的选中和不选中

<script type="text/javascript">
		function test(){
			var name = document.getElementsByName("f");
			for(var i=0;i<name.length;i++){
				name[i].checked=document.getElementById("ch").checked;
			}
		}
	</script>
  </head>

  <body>
   	<div style="margin:0 auto;width: 400px;height: 200px;" id="test" >
		<input type="checkbox"  id="ch" onclick="test()"/>全选<br/>
		<input type="checkbox" name="f">西瓜<br/>
		<input type="checkbox" name="f">苹果<br/>
		<input type="checkbox" name="f">香蕉<br/>
		<input type="checkbox" name="f">橘子<br/>
   	</div>
  </body>

鼠标移入移出文字背景色变化效果特效

<script type="text/javascript">
		function test(obj){
			obj.style="color:red";
		}
		function test2(obj) {
			obj.style="color:black";
		}
	
	</script>
  </head>
  
  <body>
   	<div style="margin:0 auto;width: 400px;height: 200px;" id="test" >
		<br/>
		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t1">张山</h1>
		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t2">李四</h1>
		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t3">王五</h1>
		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t4">赵柳</h1>
		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t5">马起</h1>
		
   	</div>
   	
  </body>

12 Bom操作

学习js其实就是在学习三个方面的内容。

js的基本语法。函数
Dom操作。控制元素，对元素进行修改。
Bom操作。对整个浏览器对象的操作。包括刷新，后退，地址栏的操作，窗口的弹出。

Bom:浏览器browser对象模型。
Bom操作的根对象是当前窗口的对象。Window。
Window.alert(“hello world”);
Window.οnlοad=function(){}
Window表示当前窗口对象。代码运行在哪个窗口中，window就表示谁。所以window对象调用方法时是可以省略的。Window.alert()=alert();