JavaScript基础02

内部对象

标准对象

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

Date

基本使用

 'use strict'

  var nowTime = new Date(); //Thu May 16 2024 13:26:03 GMT+0800 (中国标准时间)
  nowTime.getFullYear();
  nowTime.getMonth();
  nowTime.getDate();
  nowTime.getHours();
  nowTime.getMinutes();
  nowTime.getSeconds();

  nowTime.getDay(); // 星期几

  nowTime.getTime() // 获得时间戳 全世界统一 1970-01-01 00:00:00  到现在时间的毫秒数

  console.log(new Date(1715837163650)); // 时间戳转为时间

转化

console.log(nowTime)
Thu May 16 2024 13:40:51 GMT+0800 (中国标准时间)

nowTime.toLocaleString()
'2024/5/16 13:40:51'
nowTime.toGMTString()
'Thu, 16 May 2024 05:40:51 GMT'

JSON

JSON是什么?

早期, 所有数据传输习惯使用XML文件

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

层次结构简洁清晰

易于阅读并提升网络传输效率

在JavaScript中 一切皆为对象, 任何 js 支持的数据类型都可以使用JSON来表示 --> number, string...标准对象

格式

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用 key : value

JSON字符串 和 JavaScript对象的转化

var user = {
    name: 'frank',
    age: 3,
    sex: '男'
}

// 对象转化为JSON字符串  -->  {"name":"frank","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

// JSON字符串转化为对象  -->  参数为JSON字符串  其中单引号双引号要岔开
var obj = JSON.parse('{"name":"frank","age":3,"sex":"男"}');

JSON字符串 和 JavaScript对象的区别

var obj = {a : 'helloA', b : 'helloB'};
var JSON = '{"a" : "helloA", "b" : "helloB"}';

Ajax

  • 原生的js写法 xhr 异步请求
  • jQuey 封装好的方法 $("#name").ajax("")
  • axios 请求

面向对象编程

原型对象

JavaScript, Java, c# ...都是面向对象的语言. JavaScript有一些区别

  • 类: 模板 --> 原型对象
  • 对象: 具体的实例

在Javascript中, 需要转换思维

var student = {
    name: '小刘',
    age: 21,
    run: function () {
        console.log(this.name + "正在操场跑圈中...")
    }
}

var xiaoMing = {
    name: 'xiaoMing'
}

//原型对象
xiaoMing.__proto__ = student;

var bird = {
    fly: function () {
        console.log(this.name + "正在天上飞...")
    }
}

// 小明的原型是 bird
xiaoMing.__proto__ = bird;

//ES6 之前
function student(name) {
    this.name = name;
}

// 给student新增一个方法
student.prototype.hello = function () {
    alert('hello')
};

class 继承

class关键字是在ES6 引入的

1 定义一个类. 有属性 和 方法

// 直接定义一个学生的类
class Student {

    constructor(name) {
        this.name = name;
    }

    hello(){
        alert('hello')l
    }

}
var xiaoMing = new Student('xiaoMing');
var xiaoHua = new Student('xiaoHua');

2 继承

class Student {

    constructor(name) {
        this.name = name;
    }

    hello(){
       alert('hello');
    }

}

class BigStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('我正在上大学二年级')
    }
}

var xiaoMing = new Student('xiaoMing');
var xiaoHua = new BigStudent('xiaoHua',2);

本质: 查看对象原型 -->

image-20240516154150131

原型链

__ proto __ :

原型 与 原型链 -->

image-20240516154845924

操作BOM对象 --> 重点

浏览器介绍

JavaScript 和 浏览器 的关系?

JavaScript诞生就是为了能够让它在浏览器中运行

BOM --> browser object model 浏览器对象模型

浏览器内核 -->

  • IE 6 - 12
  • Chrome
  • Safari
  • FireFox

第三方 软件浏览器 -->

  • QQ 浏览器
  • 360

window --> 重要

window 代表 浏览器窗口

window.alert(2333)
undefined
window.innerHeight
267
window.innerWidth
1699
window.outerHeight
1019
window.outerWidth
1707

Navigator

Navigator, 封装了浏览器的信息

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

大多数时候,我们不会受用navigator对象, 因为会被 人为修改

screen

代表屏幕尺寸

screen.height
1067 px
screen.width
1707 px

location --> 重要

location 代表当前页面URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?index.html"
protocol: "https:"
reload: ƒ reload()  //重新加载  即  刷新网页

//设置新的地址  -->  搜索原来的网址后,跳转到新的网址
location.assign('https://blog.kuangstudy.com/');
location.assign('https://cn.bing.com/')

document

document 代表当前的页面 HTML DOM文档树

document.title
"百度一下, 你就知道"
document.title = "小刘学Java"
"小刘学Java"

image-20240516163948368

获取具体的文档树节点

<body>

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

</body>

获取cookie

在百度浏览器上 -->

document.cookie
'BIDUPSID=A152B9AF0068A366DB2994FD48C7CBFC; PSTM=1667303082; __bid_n=1844633a6f2e8bcf014207; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%223921311117%22%2C%22first_id%22%3A%221887a680cebfa8-06b42f32bd61f1-7b515473-1821369-1887a680cec20a5%22%2C%22props%22%3A%7B%7D%2C%22%24device_id%22%3A%221887a680cebfa8-06b42f32bd61f1-7b515473-1821369-1887a680cec20a5%22%7D; FPTOKEN=yxI4CwEjbGyVDXPdzhYJlm/cdZXRiRyMQEnSWz3/eVvCnWuZDielFvvmWKtdlUd33ZxL9wkz2DQs1yn92w0sRU4cg4pVRtMAYUOCL6q7WxioQvCbcNtb69ySqCvgN1ibsOfxRqyHC9rfNiYwg4tSjqzjdnWPrZMAMDn82K9eCHdZAO+XfNFIex3eyYXHHUlHhMA5Nhqlwi9SRxmv/e5j1SnM5sqWNdVMoUMDa8vr573CXrig1ZI+FawCWLcaIbRu7FAykxyH9TSL0VVTMi31GKFXRmcgVeUMpm4hqR1nGvwTwgZUiIhqh/H0q3rLkLApuVTyOsxdEf6MRWnpI0HxfiyHHRoODOtixvoYjl5Zev9ia/Zw9iNdakLKltGmZCUgL6lCPz0sFhUZWSUNBPzUeg==|+EP20lYVOJ4aRbNsQDXgGtXl23O6SKX+dE7LrncD/Qs=|10|39962cc56665be6cfcc5577c1a8bbaed; BAIDU_WISE_UID=wapp_1696928356840_937; COOKIE_SESSION=3237597_2_1_2_4_0_1_0_1_0_0_0_3237597_7936913_17_0_1698841078_1693622853_1698841061%7C7%237936913_2_1693622849%7C2; ZFY=NmVUOwyk:Au:B7e5UR6k72ccxMAt:ArxXjeI1ss:ApOHEaM:C; BAIDUID=295372796A294D71AF82E242CC5A616D:SL=0:NR=10:FG=1; BAIDUID_BFESS=295372796A294D71AF82E242CC5A616D:SL=0:NR=10:FG=1; sug=3; sugstore=0; ORIGIN=2; bdime=0; BD_UPN=12314753; H_PS_PSSID=60126_60269_60282_60289; BA_HECTOR=252g052k050g200420a080ahdfjicn1j4b3jm1u'

劫持cookie原理

www.taobao.com

<script src = 'aaa.js'></script>
<!--恶意人员: 获取你的cookie上传到他的服务器-->

服务器端可以设置 cookie: httpOnly

history

history 代表浏览器的历史记录

history.back()     //后退
 
history.forward()  //前进

操作DOM对象 --> 重要

整个HTML就是一颗树 ! 根节点 --> html

DOM: 文档对象模型

核心

浏览器网页就是一个Dom 树形结构

  • 更新: 更新Dom节点
  • 遍历: 遍历Dom节点, 得到Dom节点
  • 删除: 删除一个Dom节点
  • 添加: 添加一个Dom节点

要操作一个Dom节点, 就必须先获得这个Dom节点

获得dom节点

<body>

<div id="father">
    <h1>标题一  -->  小刘正在学Java</h1>
    <p id="p1">不知道吃什么</p>
    <p class="p2">吃烤肉</p>
</div>


<script>
    // 对应 css 选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var children = father.children;  // 获取父节点下的所有子节点
    console.log(father.firstChild);
    console.log(father.lastChild);
</script>

</body>

这是原生代码, 之后我们尽量都是用jQuery();

更新dom节点

<div id="id01">

</div>

<script>
  var id01 = document.getElementById('id01');
</script>

操作文本 -->

id01.innerText = '123' 修改文本的值

id01.innerHTML = '123' 可以解析HTML文本标签

操作 css -->

id01.style.color = 'yellowgreen' // 属性 使用 '' 包裹
id01.style.fontSize = '100px'	//css 中的格式在 JavaScript中 要把_ 转给驼峰命名
id01.style.padding = '2em'

document.getElementById('su')
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn" style="color: yellowgreen; padding: 10px;">
    
var ss = document.getElementById('su')
undefined
ss.style.color = 'yellowgreen'
'yellowgreen'
ss.style.padding = '10px'
'10px'

image-20240516212112254

删除dom节点

<script>
    // 对应 css 选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var children = father.children;  // 获取父节点下的所有子节点
    console.log(father.firstChild);
    console.log(father.lastChild);
</script>

father.removeChild(p1)

image-20240516212521662

删除节点的步骤 --> 先获取父节点, 再通过父节点删除自己 => 逻辑上不能自己删除自己

<div id="father">
    <h1>标题一  -->  小刘正在学Java</h1>
    <p id="p1">不知道吃什么</p>
    <p class="p2">吃烤肉</p>
</div>

<script>
    var self = document.getElementById('p1');
	var father = p1.parentElement;
	father.removeChild(self)
</script>

image-20240516213445502

// 删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

注意: 删除多个节点的时候, children是时刻变化的, 删除节点的时候要注意

插入节点 --> 重难点

我们获得了某个Dom节点, 假设这个dom节点是空的, 我们通过innerText , 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>

效果:

image-20240516215910305

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

<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);  //追加到后面

    //通过js 创建一个新的节点
    // 下面的三行代码等价于  -->  <p id="newP">小刘正在学习js</p>
    var newP = document.createElement('p');  //创建一个p标签
    newP.id = 'newP';  //为p标签添加一个 id = "newP"
    newP.innerText = '小刘正在学习js';

    list.appendChild(newP);

    // 创建一个标签节点  通过这个属性可以设置任意的值
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    list.appendChild(myScript);

</script>

<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);  //追加到后面

    //通过js 创建一个新的节点
    // 下面的三行代码等价于  -->  <p id="newP">小刘正在学习js</p>
    var newP = document.createElement('p');  //创建一个p标签
    newP.id = 'newP';  //为p标签添加一个 id = "newP"
    newP.innerText = '小刘正在学习js';


    list.appendChild(newP);

    // 创建一个标签节点  通过这个属性可以设置任意的值
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    list.appendChild(myScript);

    // 可以创建一个style标签
    /* 等价于  -->
        <style>
        body {
            background-color: yellowgreen;
        }
        </style>
     */
    var myStyle = document.createElement('style');  //创建了一个空style标签
    myStyle.setAttribute('type','text/css');        //设置style格式
    myStyle.innerHTML = 'body{background-color: yellowgreen}';  // 填写标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

insert

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 ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    // 代码逻辑  -->  要包含的节点.insertBefore(newNode,targetNode)  将新节点插入到目标节点之前
    list.insertBefore(js,ee);
</script>
posted @ 2025-02-26 17:00  LYQ学Java  阅读(6)  评论(0)    收藏  举报