Day03

标签：box now name Day03 var document 节点

3.3方法

定义方法

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

var xcl={
    name:'昌隆',
    birth:2000,
    //方法
    age:function (){
        //今年-出生的年
    var now=new Date().getFullYear();
    return now-this.birth;
}
}
//属性
xcl.name
//方法，一定要带（）
xcl.age()

this代表什么？

birth

也可以拆开这样写、
function getAge(){
    var now=new Date().getFullYear();
    return now-this.birth;
}
var xcl={
    name:'昌隆',
    birth:2000,
    age:getAge;
}

//xcl.age()//ok
//getAge() //NaN   window
//再加上apply就能实现getAge()输出
getAge.apply(xcl,[])//apply()里面的代表要指向的对象，和参数

this是无法指向的，是默认指向调用它的那个对象

apply

在this中可以控制this指向

4.内部对象

标准对象

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

4.1.date

基本使用

var now=new Date();
now.getFullYear();//年
now.getMonth();//月   0~11
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳   全世界统一
console.log(new Date(1665488547896));//时间戳转为时间

转换

now =new Date(1665488547896)
Tue Oct 11 2022 19:42:27 GMT+0800 (中国标准时间)
now.toLocaleDateString
ƒ toLocaleDateString() { [native code] }//注意，调用是一个方式，不是一个属性
now.toLocaleDateString()
'2022/10/11'
now.toLocaleString
()
'2022/10/11 19:42:27'
now.toGMTString()
'Tue, 11 Oct 2022 11:42:27 GMT'

4.2.JSON

在JS中一切皆为对象，任何js支持的类型都可以用JSON来表示;number,string

格式：

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

JSON字符串和JS对象的转化

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

JSON和JS对象的区别

var obj={a:'hello',b:'hellob'}
var json='{"a":'hello',"b":'hellob'}'

4.3.Ajax

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

5.面向对象编程

5.1.什么是面向对象

javascript、java、C#......面向对象；javascript有些区别

类：模板原型对象
对象：具体的实例

原型

var user={
    name:"xcl",
    age:20,
    run:function(){
        console.log(this.name+"run....");
    }
}
var xiaoming={
    name:"xiaoming"
}
//小明的原型是user
xiaoming.__proto__=user;
xiaoming.run();

 //给Student新增一个方法
 <!--方法一：直接在原方法中新增一个方法
 function Student(name){
     this.name=name;
          hello:function f(){
     }
 }
 -->

 <!--方法二
 function Student(name){
     this.name=name;
 }
//给Student新增一个方法
 Student.prototype.hello=function(){
     alert('hello');
 }
-->

class继承 ES6之后才有的

 <!--方法三：ES6之后定义一个学生的类-->
        //前面的直接删除，直接定义一个类，与java相似
        class Student{
            constructor(name){
                this.name=name;
            }
            hello(){
                alert('hello');
            }
        }
        var xiaoming=new Student('xiaoming');

class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
class XiaoStudent extends Student {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    myGrade(){
        alert('I am 20 yeas old!');
    }
}
var xiaoming=new Student('xiaoming');
var xiaohong=new XiaoStudent('xiaohong',20)

原型链

__photo__

6.操作BOM对象（重点）

浏览器介绍

js和浏览器的关系

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

BOM：浏览器对象模型

IE 6-11
Chrome
Sagari
FireFox
Opera

三方
- qq浏览器
- 360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
226
window.innerWidth
767
window.outerHeight
831
window.outerWidth
782

Navigator

Navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion

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

大多数时候不会使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕的尺寸
screen.width
1536px
screen.height
864px

location（重要）

location代表当前页面的URL信息

host: "localhost:63342"
href:"http://localhost:63342/JavaScript/lesson04/2.class%E7%BB%A7%E6%89%BF.html?_ijt=fv12lctvicb9da4h7:
protocol: "http:"  //协议
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('网址')//可以使每次访问某个网站时跳转到你所指定的网站

document

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

document.title
'F 搜'
document.title='xcl'
'xcl'

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>JSE</dd>
    <dd>JEE</dd>
</dl>
<script>
    var dl=document.getElementById('app');
</script>

获取cookie

document.cookie
''

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到它的服务器-->

服务器端可以设置cookie：httpOnly

history

代表浏览器的历史记录

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

7.操作DOM对象（重点）

DOM：文档对象模型

核心

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

更新：更新Dom节点
遍历dom节点，得到dom节点
删除：删除一个dom节点
添加：添加一个新的节点

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

获得Dom节点

    var h1= document.getElementsByTagName('h1');//获取标签节点
    var p1=document.getElementById('p1');//获取ID节点
    var p2=document.getElementsByClassName('p2');//获取class节点
    var ul=document.getElementById('ul');
    var li1=document.getElementById('li1');
    var box=document.getElementById('box');
    var childern=box.children;//获取所有父节点下的子节点
    //box.firstChild;//获取第一个节点
    //box.lastChild;//获取最后一个节点

这是原生代码，之后尽量用jQuery();

更新节点

<div id="id1">

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

</script>

操作文本

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

操作JS

<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';
    id1.style.color='red';//属性使用字符串包裹
    id1.style.fontSize='100px'//_转驼峰命名问题
    id1.style.padding='3em'
</script>

删除节点

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

<div id="box">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
    var p1=document.getElementById('p1');
    var box=p1.parentElement;//获取父节点
    box.removeChild(p1);
    //删除一个节点的过程
  box.removeChild(box.children[0]);
  box.removeChild(box.children[1]);
  box.removeChild(box.children[2]);
</script>

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

标签：box,now,name,Day03,var,document,节点
From： https://www.cnblogs.com/xclxcl/p/16786620.html