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


目录
相关文章
|
6月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
313 24
|
7月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
202 23
|
8月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
187 32
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
12月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
185 3
springboot解决js前端跨域问题,javascript跨域问题解决

热门文章

最新文章