【无标题】

晨曦丿

已于 2024-03-14 09:28:07 修改

阅读量928

点赞数 26

文章标签：前端 javascript html

于 2024-03-14 09:26:49 首次发布

本文链接：https://blog.csdn.net/m0_67677309/article/details/136641248

版权

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

<script>
  var kuangshen={//对象
    name:'qingjiang',
    birth:2000,
    age:function (){//方法
      var now=new Date.getFullYear();
      return now-this.birth;
    }
  }
//属性              kaungshen.name
//方法一定要带()    kuangshen.age()

</script>

this代表什么？拆开上面代码

  <script>
    function getAge(){
      var now=new Date().getFullYear();
      return now-this.birth;

    }
    var kuangshen={//对象
      name:'qingjiang',
      birth:2000,
      age:getAge

//kuangshen.age()  ok
//getAge()      NaN    window

    } 

  </script>
this是无法指向的，是默认指向调用它的按个对象；

但是apply可以

在js中可以控制this的指向！

<script>
    function getAge(){
      var now=new Date().getFullYear();
      return now-this.birth;

    }
    var kuangshen={//对象
      name:'qingjiang',
      birth:2000,
      age:getAge

//kuangshen.age()  ok
//getAge()

    };
    getAge().apply(kuangshen,[]);//this,指向了kuangshen，参数为空

  </script>

内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1Date

基本使用

var now=new Date();//Tue Mar 12 2024 09:59:29 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth()//月
now.getDate()//日
now.getDay()//星期
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime();//时间戳 全世界统一
console.log(new Date( 1710209365572))//时间戳转为时间

转换

Tue Mar 12 2024 10:09:25 GMT+0800 (中国标准时间)
now =new Date( 1710209365572)
Tue Mar 12 2024 10:09:25 GMT+0800 (中国标准时间)
now.toLocaleString// 注意调用是一个方法不是属性
ƒ toLocaleString() { [native code] }

now.toLocaleString()
'2024/3/12 10:09:25'
now.toGMTString()
'Tue, 12 Mar 2024 02:09:25 GMT'

JSON

json是什么：是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在js中一切皆对象，任何js支持的类型都可以用JSON来表示：

格式：

对象都用{}

数组都用[]

所有键值对，都是用key：value

JSON字符串和JS对象的转换：

var user={
    name:"qignjaing",
    age:3,
    sex:'男'
  }
//对象转换为json字符串 {"name":"qignjaing","age":3,"sex":"男"}
  var jsonUser=JSON.stringify(user)
  //字符串转化为对象,参数为json字符串
  var obj=JSON.parse('{"name":"qignjaing","age":3,"sex":"男"}')

JSON和js的区别

var obj={a:'hello',b:'hellob'};对象

var json='{"a":"hello","b":"hellob"}'字符串

5.3Ajax

1.原生的js写法 xhr异步请求

2.jQuey封装好的方法 $（"#name").ajax("")

3.axios请求

6.面向对象编程

6.1什么事面向对象

jsm java c#面向对象；JavaScript有些区别

1.类:模版

2.对象：具体事例

var Student={
  name:"qignjaing",
  age:3,
 run:function (){
      console.log(this.name+"run.....");
 }
};
//原型对象
xiaoming.__proto__=Student;
var Bird={
   fly:function (){
       console.log(this.name+"fly.....");
   }
}
var xiaoming={
    name:"xiaoming"
};
//小明的原型是Student
xiaoming.__proto__=Bird;

class继承

class关键字在es6引入

1.定义一个类，属性，方法

//定义一个学生类

class Stduent{

    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello')
    }

}

var xiaoming=new Stduent("xiaoming")
var xiaohong=new Stduent("xiaohong")

xiaoming.hello()

2.继承

class Stduent{

    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello')
    }

}
class xiaoStudent extends Stduent{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    mygrade(){
        alert('我是一名小学生')
    }

}


var xiaoming=new Stduent("xiaoming")
var xiaohong=new xiaoStudent("xiaohong",1)

本质：查看对象原型

原型链：

__proto__;

7.操作BOM对象（重点）

js 诞为了能让脚本在浏览器中运行

BOM：浏览器对象模型

window代表浏览器窗口

window.innerHeight
220
window.innerWidth
861

window.outerHeight
862

window.outerWidth
660

navigator：封装了浏览器的信息（不建议使用，因为对象会被人修改）

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36'
navigator.platform
'Win32

location（重要）

代表当前页面的URL信息

hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=85070231_49_hao_pg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload() //刷新网页

设置新的地址：location.assign('https://pjjx.1688.com/index.html?)

document：（内容DOM讲）

代表当前的页面，html，DOM文档树

document.title
'百度一下，你就知道'
document.title='kuangshenshuo'
'kuangshenshuo'

//获取具体的文档树节点

<dl id="app">  <dt>java</dt>
  <dd>javase</dd>
  <dd>javaee</dd>
</dl>

<script>

  var dl=document.getElementById('app')
</script>

获取cookie
document.cookie
'BIDUPSID=DC9C363915B404DFF39D2B3307BB1B71; PSTM=1709274630; BD_UPN=12314753; BAIDUID=1EB8A8009FF858632BF22575E1FDD4A8:FG=1;

劫持cookie的原理

热卖PC搜索 (taobao.com)

恶意人员：获取你的cookie上传到他的服务器

服务端可以设置cookie：httponly来预防

history

代表浏览器的历史记录

history.forward()前进

history.back()后退

8.操作DOM（重点）

DOM：文档对象模型

浏览器网页就是一个DOM数形结构！

更新：更新DOM节点

遍历DOM节点：得到DOM节点

删除：删除一个DOM节点

添加：添加一个DOM节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得dom节点

var  h1=document.getElementsByTagName('h1')
var  p1=document.getElementById('p1')
var  p2=document.getElementsByClassName('p2')
var  father=document.getElementById('father')
var childrens=father.children;//获取父节点下的所有子节点
//father.firstChilde
   //father.lastchild

这是原生代码，之和我们尽量都是使用jQuer();

更新节点：

<div id="id1"></div>
    <script>
        var id1=document.getElementById('id1');
     
    </script>

操作文本：

id1.innerText='456' 修改文本的值

id1.innerHTML='<strong>123</strong>' 可以解析HTML的文本标签

操作css

id1.style.color='red' //属性使用字符串包裹
'red'
id1.style.fontSize='40px' //驼峰命名
'40px'
id1.style.padding='2em'
'2em'

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">
  <h1>标题一</h1>
  <p  id="p1">p1</p>
  <p class="p2"></p>

</div>

<script>
var self=document.getElementById('p1')

var father= p1.parentElement

father.removeChild(self)

</script>

//删除是一个动态的过程

father.removeChild(father.children[0])

father.removeChild(father.children[1])

father.removeChild(father.children[2])

注意删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意.

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了

但是这个DOM节点已经存在了，我们就不能这么干了，会产生覆盖

追加：

<p id="js">javascript</p>
<div id="list">
      <p id="se">javase</p>
      <p id="ee">javaee</p>
      <p id="me">javame</p>
</div>
  <script>

    var  js=document.getElementById('js');
    var  list=document.getElementById('list');
    list.appendChild(js)//追加
  </script>
效果如下：

创建一个新的标签,实现插入

<script>

  var  js=document.getElementById('js');
  var  list=document.getElementById('list');
  var newp=document.createElement('p')//创建一个p标签
  newp.id='newp'
  newp.innerText="hello kuangshen"
  list.appendChild(newp);
</script>