方法就是把函数放在对象里面,对象只有两个东西:属性和方法
<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的原理
<script src="aa.js"> </script>
恶意人员:获取你的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>