JavaScript基础入门（3）

最新推荐文章于 2024-10-11 17:39:47 发布

S0NeT

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量388

点赞数 8

分类专栏： JavaScript基础网路安全基础入门前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52957703/article/details/140588190

版权

网路安全基础入门同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

JavaScript基础

3 篇文章 0 订阅

订阅专栏

16.对象

对象是拥有属性和方法的数据（属性一般是名词，方法是动词）

 let obj = {
      uname: '123',
      age: 18,
      gender: '女',
      // 另一种写法
      "class": 145
    }
    // 基本使用依次为改，查，增，删
    obj.age = 19
    console.log(obj.age)
    // 另一种写法
    console.log(obj['class'])
    obj.number = 2024
    delete obj.number

对象中方法调用


  <script>
    let obj = {
      a: function () {
        console.log('123')
      }
    }
//调用
    obj.a()

遍历对象，因为对象是无序的，无规律，所以使用for in

 let obj = {
      uname: '123',
      age: 18,
      gender: '男',
      // 另一种写法
      "class": 145
    }
    // 遍历
    for (let k in obj) {
      console.log(obj[k])

    }

这里如果是数组对象则可以使用常见方法for循环xxx[i].yyy来循环

let stu = [
      { name: '1', age: 18 },
      { name: '2', age: 20 },
      { name: '3', age: 19 },
      { name: '4', age: 16 }
    ]
    for (let i = 0; i < stu.length; i++) {
      console.log(stu[i].name)
    }

17.内置对象

指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法）例如：console.log() 注：变量声明常用const(不变），特殊用let（需要改变），var已经淘汰不用。

Math

提供了一系列做数学运算的方法

例如：random，ceil，max等

18.Web API

作用：使用js去操作html和浏览器

1.DOM（文档对象模型）

1.介绍

DOM是浏览器提供的一套专门用来操作网页内容的功能。开发网页内容特效和实现用户交互。

DOM树

将html文档以树状结构直观的表现出来，可以体现标签和标签的关系

DOM对象

浏览器根据html标签生成的对象

比如html里的一个div标签，在js里使用时就是一个对象

其中document是最大的对象，也就是整个页面或者html文档

2.获取DOM对象（借用css选择器）（最新最常用方法）

选中匹配的第一个元素，返回一个HTMLElement对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 200px;
    height: 200px;
  }
</style>

<body>
  <div class="box"></div>
   <p id="nav">导航栏</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    // 获取匹配的第一个元素
    const box = document.querySelector('.box')
    // 这里加个[]就可以在谷歌中显示数组内对象的详细信息
    console.log(box)
    console.log([box])
    // 或者使用id，那就需要加#
    const nav= document.querySelector('#nav')
    // 此外还有这种,多个同级标签
    const li = document.querySelector('ul li:first-child')
  </script>
</body>

</html>

注：获取一个对象后可以直接进行修改操作

 <div class="box"></div>

  <script>
    // 获取匹配的第一个元素
    const box = document.querySelector('.box')
    // 获取后可以直接进行修改
    box.style.width = '300px'
  </script>

选择匹配的多个元素，返回NodeList对象集合

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>

    // 选择所有li
    const lis = document.querySelectorAll('ul li')
  </script>
</body>

注： lis是一个伪数组，没有pop（）和push（）方法

3.操作对象元素

1. .innerText

只是纯文本，不解析标签

<div class="box"> 123</div>
<script>
  // 获取元素
  const box = document.querySelector('.box')
  // 修改文字内容    对象.innerText 属性
  console.log(box.innerText)
  //innerText获取文字内容,那修改就显而易见了
  box.innerText = 456
  console.log(box.innerText)
</script>

2. .innerHTML

会解析标签

<div class="box"> 123</div>
<script>
  // // 获取元素
  const box = document.querySelector('.box')
  // 修改文字内容    对象.innerText 属性
  console.log(box.innerText)
  //innerText获取文字内容,那修改就显而易见了
  box.innerText = 456
  console.log(box.innerText)

  // innerHTML 解析标签
  console.log(box.innerHTML)
  box.innerHTML = '<strong>123</strong>'
</script>

4.操作对象属性

常用属性

<body>
  <img src="./123.jpg" alt="">
  <script>
    // 获取图片元素
    const img = document.querySelector('img')
    // 修改属性
    img.src = './456.jpg'
    img.title = '图片一'
  </script>
</body>

样式属性

三种方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {

      width: 200px;
      height: 200px;
      background-color: pink;
      color: red;
    }

    .box1 {
      width: 300px;
      height: 300px;
      background-color: black;
    }

    .box2 {
      color: green;
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <script>
    //1.通过style属性修改样式
    const box = document.querySelector('.box')
    box.style.width = '300px';
    // //注意这里多个单词要使用小驼峰不然会报错
    // box.style.backgroundColor = 'blue'
    // //2.通过类名修改样式（会覆盖类名）
    // box.className = 'box1'
    // //使用多个class，后一个虽然会覆盖相同属性，但是不同的会被保留
    // box.className = 'box box1'
    //3.通过classList修改样式，不影响类名（追加或删除）
    box.classList.add('box2')
    // 此法中add为添加，remove为删除，toggle为切换（有就删掉，没有就加上）
  </script>
</body>

</html>

5.操作表单元素属性


<body>
  <input type="text" value="123">
  <script>
    //1.获取元素
    const uname = document.querySelector('input')
    //2.获取值,获取表单里的值用的是   表单.value
    console.log(uname.value)
    //3.现在就可以修改属性了
    //uname.value = "456"
    //uname.type = 'password'
  </script>
</body>

6.自定义属性

即自己定义并使用，且必须要以data-开头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div data-id="1" data-id1="11">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    //dataset代表属性集合，会输出data-id和data-id1
    console.log(one.dataset)
    console.log(one.dataset.id)
  </script>
</body>

</html>