• 欢迎光临~

Day03

开发技术 开发技术 2022-10-12 次浏览

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是在时刻变化的,删除节点的时候一定要注意

程序员灯塔
转载请注明原文链接:Day03
喜欢 (0)