JavaScript 基础

最新推荐文章于 2024-03-10 16:01:55 发布

Hinomoto Oniko

最新推荐文章于 2024-03-10 16:01:55 发布

阅读量139

点赞数

分类专栏： HTML_CSS_JavaScript 文章标签： js javascript dom css

本文链接：https://blog.csdn.net/Amzmks/article/details/118660859

版权

HTML_CSS_JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript P1~142
   1. JavaScript基础语法
         1.1 定义变量：let a = 1;
         1.2 函数：function func(param1, param2){
                return param1 + param2;
           }
         1.3 输入：prompt("input param1");
         1.4 弹窗输出：alert(result); 控制台输出：console.log(result);
         1.5 转换为字符串：xx.toString(); 转换为int：parseInt(xx); 转换为float：parseFloat(xx);
         1.5 在<head>中添加<script src="js/myjs.js"></script>引用js文件

JavaScript P143~P212
1. 类和对象
const MALE = 1;
const FEMALE = 2;

let person1 = new Person('P1', FEMALE, 20, 'J1', null);
let person2 = new Person('P2', MALE, 20, 'J2', null);
person1.love(person2);
person1.sayLoveYou();
person2.sayLoveYou();

2. 数组和字符串的一些常用方法
let arr = [1, 2, 3];
let arr1 = new Array();
arr1.push(1, 2, 3); //在后面添加
console.log(arr1);
arr1.unshift(0); //在前面添加
console.log(arr1);
arr1.pop(); //删除最后一个
arr1.shift(); //删除第一个
arr1.reverse(); //翻转
arr1.sort(function (a, b) {
return a - b; //升序排列
//return b - a; //降序排列
});
arr1.indexOf(2); //第一次出现的索引号找不到返回-1
arr1.lastIndexOf(2); //最后一次出现的索引号

let arr2 = [1, 2, 3];
let str = arr2.toString(); //'[1, 2, 3]'
arr2.concat(arr1);//连接
arr2 = arr1.slice(1, 2);//截取1~2的元素

let str1 = 'str1eeeet';
str1.indexOf('t');
str1.indexOf('t',3);//从第3个位置开始查找
console.log(str1.charCodeAt(0));//115 返回0号元素的ASCII

3. Web API
3.1 概念
JavaScript分为ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型），ECMAScript主要是JavaScript基础语法，后两者合称Web APIs。
Web API是浏览器提供的API，用于网页交互功能。
例如alert('xx');
DOM用于修改页面中的内容、结构和样式。
文档（document）：一个页面就是一个文档。
元素（element）：页面中的标签。
节点（node）：网页中的所有内容都是节点（标签、属性、文本等）。
DOM把以上3种都看成对象。
3.2 获取标签的ID
let mydiv = document.getElementById('mydiv');
    console.log(mydiv); //返回整个标签，类型是Object
    console.dir(mydiv); //看标签的属性和方法
    let mydivTag = document.getElementsByTagName('div');//调用上面所有div的集合，伪数组
    let olEleTag = document.getElementsByTagName('ol');
    let liSubTag = olEleTag[0].getElementsByTagName('li');//获取子元素   实际开发中用id比较好
    console.log(liSubTag);
    let classTags = document.getElementsByClassName('lis');//按类返回
    console.log(classTags);
    let firstLis = document.querySelector('.lis');//返回第一个lis .代表类
    let firstTime = document.querySelector('#time');//返回第一个time #代表ID
    let firstLi = document.querySelector('li');//返回第一个time 不加代表标签
    let firstLisAll = document.querySelectorAll('.lis')//返回所有lis类

    //获取body和html有特殊方法
    let bodyEle = document.body;
let htmlEle = document.documentElement;
3.3 JS事件案例
<button id="btn1">button</button>
<script>
    //1. 事件源
    let btn1 = document.getElementById('btn1');
    //2. 事件类型：怎么触发
    //3. 事件处理程序：函数赋值
    btn1.onclick = function () { //鼠标单击
        alert('clicked btn1');
    }
</script>
<div id="div1">div1</div>
<img src="img/img01.png" id="imgChange">
<button id="changeImg">changeImg</button>
<script>
    let div1 = document.getElementById('div1');
    div1.onmouseover = function () { //鼠标移动到
        //innerText与innerHTML都可以修改内容，区别是innerText不识别HTML标签，如<strong>加粗
        //innerText读数据（console.log(p.innerText)）时去除<span>等标签
        div1.innerHTML = 'mouse over div1';
    }
    div1.onmouseleave = function () { //鼠标离开
        div1.innerHTML = 'div1';
    }
    let buttonImg = document.getElementById('changeImg');
    let imgChange = document.getElementById('imgChange')
    buttonImg.onclick = function (){
        //href, type等等也可以这样用
        //this.style.backgroundColor, this.style.width格式修改CSS
        imgChange.src = 'img/img02.png';
    }
</script>
<button id="formBtn">按钮</button>
<input type="text" value="not clicked" id="inputBtnCli">
<script>
    let formBtn = document.getElementById('formBtn');
    let inputBtnCli = document.getElementById('inputBtnCli');
    formBtn.onclick = function (){
        inputBtnCli.value = 'clicked';
        this.disabled = true;
    }
</script>
<input type="text" value="not focused" id="inputFoc">
<script>
    let inputFoc = document.getElementById('inputFoc');
    inputFoc.onfocus = function (){ //获得焦点
        if(this.value == 'not focused'){
            inputFoc.value = '';
        }
    }
    inputFoc.onblur = function (){ //失去焦点
        if(this.value == ''){
            inputFoc.value = 'not focused';
        }
    }
</script>

JavaScript P213~P220
1. JS事件
1.1 操作元素样式 message.className = 'message wrong'; //2个CSS样式用空格隔开，后面的覆盖前面的
document.body.style.backgroundImage = 'url(xx)';
1.2 排他思想
let btns = document.getElementsByClassName('paita');
    //btns为伪数组
    for(let i=0; i<btns.length; i++){
        btns[i].onclick = function (){
            for(let j=0; j<btns.length; j++) {
                btns[j].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        }
    }

JavaScript P221~P232
1. 元素属性
1.1 获得元素属性值
div1.id; 或 div1.getAttribute('id'); （推荐）后者可以获得自定义的属性
<div myIndex="1"> 即可自定义属性
1.2 设置元素属性值
div1.id = 'id1'; 或 div1.setAttribute('id', id1);（推荐）
div1.style.display= 'block'; 显示 'none' 隐藏
1.3 移除自定义属性
div1.removeAttribute('data-index'); 自定义属性用data-开头
div1.dataset 获取所有自定义属性
div1.dataset.index或div1.dataset['index'] 等价于 div1.getAttribute('data-index');
自定义属性中有多个-时（如data-list-name)，使用dataset时用一个词获取（例子是listName）。
2. 节点操作
2.1 每个节点至少有nodeType节点类型、nodeName节点名称、nodeValue节点值这3个基本属性。
nodeType 元素节点为1，属性节点为2，文本节点为3。
2.2 节点层级关系
获取父节点 div1.parentNode 获取的是最近的父节点。
获取子节点 div1.childNodes 获取的是一个集合
要获得元素节点集合，筛选div1.childNodes == 1或div1.children（推荐）
div1.firstElementChild 第一个子元素节点 div1.lastElementChild 最后一个子元素节点，实际开发中用div1.children[0]和div1.children[div1.children.length - 1]
获取下一个兄弟元素节点 div1.nextElementSibling 获取上一个元素兄弟节点 div1.previousElementSibling

JavaScript P233~P254
1. 节点操作
1.1 创建节点
let li = document.createElement('li');
let ul = document.querySelector('ul');
ul.appendChild(li); 在ul中添加1个li，插在最后
ul.insertBefore(li, xxli); 在xxli前面插入li xxli可以是ul.children[x]选择第几个
innerHTML可以这样用： li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";    href = 'javascript:;'不跳转
1.2 删除节点
ul.removeChild(li);
1.3 复制节点
li.cloneNode();
同样也需要ul.appendChild/ul.insertBefore放进去才能显示。
()内为空或false时只复制这个标签，(true)代表复制所有子节点。
遍历对象中每一个属性 for(let i in obj){} i代表属性名 obj[i]代表属性值
2. DOM所有事件
onclick 鼠标左键单击
onmouseover 鼠标经过
onmouseout 鼠标离开
onfocus 获取鼠标焦点
onblur 失去鼠标焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
3. DOM事件高级
3.1 注册事件
传统的注册事件 btn.onclick = function(){}只能设置1个处理函数。
使用方法监听注册方式（推荐）
btn.addEventListener(type, listener[, useCapture]){}
type: 事件类型字符串，如click, mouseover
listener：事件处理函数
userCapture：可选，是一个boolean值，默认是false。
可以给同一个元素同一个事件添加多个监听器。
3.2 删除事件
传统 btn.onclick = null;
btn.removeEventListener(type, listener[, useCapture]){}
这里不能使用匿名函数，例：
btn.addEventListener('click', fn);
function fn(){
   alert(22);
   btn.removeEventListener('click', fn);
}
3.3 DOM事件流
概念：事件发生时的传播顺序/过程。
上述监听器的第三个参数userCapture如果为true则为捕获阶段，当多个嵌套容器都有监听器时按照从大到小的顺序执行（document -> html -> body -> parent -> child）
如果为false或空，则为冒泡阶段，按照从小到大的顺序执行。
3.4 事件对象
div.onclick = function(event) {
   console.log(event);
}
div.addEventListener('click', function(e) {
   console.log(e.target);
})
event是一个事件对象，作为监听器函数的形参，存放与事件相关的一些信息，如鼠标按下则包括鼠标点击的坐标等。
e.target 触发事件的对象（即实际点击的对象，而this是绑定事件的对象，上例为div）
e.type 触发事件的类型，如click
e.preventDefault 阻止默认事件，如不让链接跳转
e.stopPropagation 阻止冒泡

JavaScript BOM对象属性和方法
1.1 常用方法
window.可以省略
window.alert() 弹出提示框
window.confirm() 弹出确认框 —— 返回值boolean类型，点确定返回true，取消返回false
window.prompt() 弹出文本输入框 —— 第2个参数是默认值，可省略，返回值是输入的值
window.parseInt() 转整数
window.parseFloat() 转浮点数
let timer = setInterval(方法，时间间隔) 开启定时器，每隔时间间隔执行1次方法
ClearInterval(timer) 停止计时器
let timer = setTimeout(方法，时间间隔) 只执行一次的计时器，时间间隔后执行1次
1.2 常用属性
history 历史
history.length 得到历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
location 位置
location.href 获取和修改浏览器的请求地址（跳转）
location.reload() 刷新
screen 屏幕
screen.width/height 获取屏幕分辨率
navigator 导航
navigator.userAgent 获得浏览器的版本信息
2. JavaScript BOM事件
2.1 鼠标事件
2.2 键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
event.keyCode 获取按键编码
String.fromCharCode(event.keyCode) 把按键编码转成字符
addEventListener('keydown', event)
addEventListener(‘keyup', event)
2.3 状态改变事件
onload 页面加载完成事件
onresize 窗口尺寸改变事件
onchange 值改变事件
addEventListener中同样去掉on

JavaScript P255~P284
1. JS事件
1.1 阻止默认行为
e.preventDefault();
1.2 阻止冒泡
e.stopPropagation();
1.3 addEventListener的第一个参数属性
contextmenu 可以禁用右键菜单
selectstart 禁止鼠标选中
1.4 鼠标事件
MouseEvent
e.clientX/Y 鼠标相对浏览器窗口可视区的X/Y坐标
e.pageX/Y 鼠标相对文档页面的X/Y坐标（考虑滚动条）
e.screenX/Y 鼠标相对屏幕的X/Y坐标
1.5 键盘事件
onkeyup 键盘松开
onkeydown 键盘按下
onkeypress 键盘按下，不识别功能键
e.keyCode 按键的ASCII
2. BOM
1. window.innerWidth 浏览器内部宽度配合onresize事件
2. location
location.search得到url中问号后面的一串字符源
location.assign('')跳转，可以用后退按钮
location.replace('')跳转，不可以用后退按钮
location.reload()刷新

Hinomoto Oniko

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 基础

JavaScript P1~142 1. JavaScript基础语法 1.1 定义变量：let a = 1; 1.2 函数：function func(param1, param2){ return param1 + param2; } 1.3 输入：prompt("input param1"); 1.4 弹窗输出：alert(result); 控制台输出：conso...
复制链接

扫一扫