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


目录
相关文章
|
19天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
5天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
6天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
16天前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
16天前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中,DOM(文档对象模型)和 BOM(浏览器对象模型)扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力,使项目能够实现丰富的功能和用户体验。
|
16天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
29天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
41 4
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
19 5
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
27 4
|
28天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
32 0
下一篇
无影云桌面