JavaScript学习笔记(二),js内置对象,Dom操作和Bom操作

简介: JavaScript学习笔记(二),js内置对象,Dom操作和Bom操作

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元素。

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>

8. Bom操作

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

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

Bom:浏览器browser对象模型。

Bom操作的根对象是当前窗口的对象。Window。

Window.alert(“hello world”);

Window.οnlοad=function(){}

Window表示当前窗口对象。代码运行在哪个窗口中,window就表示谁。所以window对象调用方法时是可以省略的。Window.alert()=alert();


目录
相关文章
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
11 5
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
6天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
6天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
7天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
下一篇
无影云桌面