WebAPI
学习目标
掌握JS操作页面的基本语法
webAPI一天: web网页 API:应用程序接口-----学习了对象-----计算机给我们提供了无穷无尽的功能—功能的载体就是对象(属性,方法)-------对象的集合称之为应用程序接口------文档,API,说明文件-----只要涉及到做东西的都是学语言提供的对象.
Jquery:3天+1
1天Ajax请求数据
----------------以后就不会再以原生的js方式去写页面了--------------
node+vue+小程序
JS: ECMAScript(js的语法) DOM(文档对象模型) BOM(浏览器对象模型)
Jqueyr是对DOM的简化和补充.
知识讲解
找标签
var div = document.getElementById('main'); //根据id找标签
-------见过就行了---------------------------- //1.通过id找标签---找一个元素 document.getElementById() //2.通过类名找标签----返回的是数组 document.getElementsByClassName() //3.通过标签名找标签 ----返回的是数组 document.getElementsByTagName('div') //4.通过选择器组合找标签---可以写后代,并集等复合选择器 document.querySelector('.one a'); 找一个 document.querySelectorAll() 找多个
加事件
//点击按钮,弹出框,这样就是一个完整的事件操作. //单击 按钮 弹框 var box = document.getElementById('box'); box.onclick = function() { console.log('代码会在box被点击后执行'); }; onmouseover 鼠标移入 onmouseout 鼠标移出 https://www.cnblogs.com/theblogs/p/9972319.html
this对象的基本使用---当前对象
属性操作
//找到标签，并直接点属性名，就可以获取值和设置值 var myImg = document.getElementById('pic'); myImg.src ='新的图片地址'; //如果写等号,就是赋值,如果不写等号,就是获取值 myImg.src='' //赋值 myImg.src //取值
改样式
使用style方式设置的样式显示在标签行内-----行内样式 var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red'; box.style.height = '100px'; 修改标签的className属性相当于直接修改标签的类名 var box = document.getElementById('box'); box.className = 'show';
注意: 通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
改内容
var box = document.getElementById('box'); box.innerHTML = '我是文本<p>我会生成为标签</p>'; //标签会翻译 box.innerText = '我是文本<p>我不会生成为标签</p>'; //标签直接输出
入口函数
onload事件: window.onload = function () { // 当页面加载完成执行 // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行 } //js写的位置: head结束标签之前或者body的结束标签之前
定时器
单次定时: setTimeout()和clearTimeout() 只执行一次
// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
console.log(‘Hello World’);
}, 1000);
// 取消定时器的执行
clearTimeout(timerId);
多次定时:setInterval()和clearInterval()
// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定时器的执行
clearInterval(timerId);
页面滚动事件和滚动距离
//页面滚动事件s
window.οnscrοll=function(){
}
document.documentElement.scrollTop 获取页面滚动距离
//兼容性写法
document.body.scrollTop 获取页面滚动距离
注意:得给body设置高,显示有滚动条
事件对象
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动
e.pageX 鼠标点击相对于页面的距离
e.pageY 鼠标点击相对于页面的距离
e.clientX 鼠标点击，相对于可视区(浏览器窗口左端)的距离
e.clientY 鼠标点击，相对于可视区(浏览器窗口顶端)的距离
键盘按下松开事件
document.onkeyup
document.onkeydown
e.keyCode 获得键盘数字编码
浏览器对象
浏览器对象也属于window对象的子对象,window可以省略
location对象
herf 跳转地址
assign() 让页面跳转到指定的网页(可以后退)
history对象的方法:
go() 1 前进 -1后退
本地存储
数据存储的方式： cookie localstorage sessionStorage 后端session ======本质上就是特殊功能的对象
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
if(！window.localStorage){
alert(“浏览器支持localstorage”);
return false;
}else{
//主逻辑业务
}
localStorage.setItem(属性名，属性值)
localStorage.getItem(属性名)
localStorage.removeItem(属性名)
