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();


目录
相关文章
|
14天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
12 1
|
15天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
16 2
|
21天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
39 1
|
25天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
23天前
|
JavaScript 前端开发
js bom的概念
js bom的概念
26 1
|
1月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
30 1
|
JavaScript 前端开发 算法
javascript 内置对象Math总结及其案例
前言 今天总结一下javascript 内置对象Math中的函数用法,顺带写一下常见的案例。
144 0
javascript 内置对象Math总结及其案例
|
JavaScript 前端开发
JavaScript——内置对象(Math,Date)
JavaScript——内置对象(Math,Date)
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2