这是我参与「第四届青训营 」笔记创作活动的的第3天
这部分笔记是过去学js时用到的，感觉27的课还有些懵，没有总结完，所以之后可能重新记一下js老师上课讲的，下面是我学js时记得部分笔记。
theme: smartblue
插入方式
内嵌
<script>
alert('沙漠骆驼草陀螺')
</script>
外部引入
<script src="src_01_myjs01.js"></script>
行内
<input type="button" value="hello" class="type" onclick="alert('我的老家')">
输入输出
// 这是一个输入框
prompt('提示框');
// 弹出警示框 展示给用户
alert('耶！')
// console 控制台输出， 给程序员测试使用
console.log('控制台输出')
变量
声明变量
var age; // 声明age变量
age = 10; // 赋值
console.log(age); // 输出
var myname = 'hello world' // 变量初始化
console.log(age); // 输出
数据类型
Number
Number.Max_Value 最大值
Number.Min_Value 最小值
Infinity 无穷大
-Infinity 无穷小
NaN 不是数字
isNaN() 判断是否是非数字
字符串
//检测获取字符串长度 length
var str = "一段话"
console.log(str.length);
// 字符串拼接
console.log('沙漠'+'马桶')
Boolean
true 参与运算当1
false 参与运算当0
获取数据类型
typeof 变量名
数据类型转换
数字→字符串
字符串→数字
var age = prompt("输入年龄");
age_num = parseInt(age);
转换成布尔类型
布尔运算有短路运算特性
流程
if分支
if(){
}else if{
}else{
}
switch分支
switch(表达式)
{
case value:
执行语句;
break;
}
循环
for(var i = 1;i<1000;i++)
{
语句
}
while循环
while()
{
}
do{
}while()
数组
var 数组名 = new Aarray();
var 数组名 = ['hello' ,'you shabi'];
数组名[索引]
新增数组元素
var arr = ['e', 'mmm']
console.log(arr)
arr.length = 5;
console.log(arr)
// 追加
arr[5] = '芜湖'
函数
function 函数名(参数)
{
}
函数名()
arguments
function// 用于获取传递来的所有实参
function func() {
console.log(arguments);
}
func(1, 2, 3);
作用域
作用域链
var num = 10;
function fun()
{
var num = 20;
function func()
{
// 可以访问num,就近原则。
var funcNum = 300;
}
// 不可以访问funcNum
}
预解析
// js引擎运行js 先预解析再进行代码执行
// 1、预解析
// js引擎会把js中所有的var 和function提升到当前作用于的最前面
// 变量提升时提升声明而不提升定义。
console.log(num); // 输出undefined
var num = 10;
对象
// 创建对象用{}
var obj = {
uname: '葫芦娃',
age: 5,
sex: '男',
sayHi: function() {
console.log('HI');
}
};
// 利用new Object创建对象
var obj2 = new Object(); // 创建一个空的对象
obj2.uname = '大傻逼'
obj2.sayHi = function() {
}
构造函数创建对象
function HuLuWa(kuzi, ye) {
this.kucha = kuzi;
this.yeye = ye;
this.fun = function(num) {
console.log("hello 傻逼")
return ？
}
}
// 1、 构造函数首字母大写
var st = new HuLuWa("花裤衩", "爷爷");
console.log(st);
st.fun(1);
变量的遍历
for(var k in 对象)
{
console.log(k) ;//输出属性名
console.log(对象[k]) ;//输出变量
}
随机数
Math.random() * (max - min + 1) +min;
日期
日期的构造函数
// Date() 日期对象 是一个构造函数 必须使用new
var date = new Date(); // 无参会返回系统的当前时间
console.log(date);
// 参数常用的写法
// 数字型 2019,10,01
// 字符串型 '2019-10-01'
var date1 = new Date(2019, 10, 1); // 数字型会比当前月份大一。
console.log(date1);
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
格式化日期
var date = new Date();
// 2019 年 5月1日星期三
var year = date.getFullYear();
var month = date.getMonth() + 11;
var dates = date.getDate();
console.log('今天是:' + year + '年' + month + '月' + dates + '日');
var dayarr = ['七', '一', '二', '三', '四', '五', '六']
console.log('星期' + dayarr[date.getDay()])
// 格式化时分秒
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
总毫秒数
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
var date1 = +new Date();
console.log(date1)
console.log(Date.now());
数组对象
检测是否为数组
arr instanceof Array;
Array.isArray(arr);
增删元素
增加
返回值是添加后的数组的长度
// 增添删除数组元素,在结尾加入
arr.push('je');
// 在开头添加
arr.unshift('bu')
删除
返回值是被删除的元素
// 删除最后一个元素
arr.pop();
// 删除第一个
arr.shift();
反转数组
数组对象.reverse()
排序
数组对象.sort() ; // 默认是按照第一位进行排序 ， 会排出1 11 2 22 这样的数字
var arr = [13, 4, 7, 11, 5];
arr.sort(function(a, b) {
return a - b; //升序排序
return b - a;// 降序排序
})
console.log(arr);
数组索引
数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString());
console.log(arr.join("_"));
根据索引返回字符
拼接与截取
替换
DOM
获取元素
根据id获取
<div id="hulu">葫芦娃操爷爷</div>
<script>
// 返回的是一个元素对象
// 先找到文档document 然后找到标签。
var element = document.getElementById("hulu");
console.log(element);
// 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(element);
</script>
根据标签名获取
以伪数组的形式存储 ，获取元素对象的集合
var lis = document.getElementsByTagName('li');
// 获取元素
lis[0]
获取子类的元素
element.getElementsByTagName();
类名选择元素
var li1 = document.getElementsByClassName('类名');
console.log(li1);
querySelector
只返回第一个元素
// 返回制定选择器的第一个元素 querySelector
var firstBox = document.querySelector('.class');
console.log(firstBox);
var nav = document.querySelector('#id');
console.log(nav);
var nav2 = document.querySelector('li');
console.log(nav2);
querySelectorAll
返回所有元素
var nav3 = document.querySelectorAll('li');
console.log(nav3);
body和html元素获取
var body = document.body;
console.log(body);
console.dir(body);
var html = document.documentElement;
console.log(html);
事件
事件流程
<button id="huluwa">葫芦娃</button>
<script>
// 事件三要素： 事件源 事件类型 事件处理程序
// 1 事件源：被触发的对象
var btn = document.getElementById('huluwa');
// 2 事件类型 如何处罚 什么事件
// 3 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('操爷爷');
}
</script>
改变元素内容
改变文本内容
// 点击按钮后div中文字改变
var btn = document.getElementById('btn');
var div = document.getElementById('time');
// 注册事件
function getDate() {
date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + '-' + month + '-' + day;
}
btn.onclick = function() {
// 事件处理
div.innerText = getDate();
}
innerHTML和 innerText标签
两个标签可以获取，是属性。
// innerText 和 innerHTML区别
// 1 innerText 不识别html标签
var div = document.querySelector('div');
div.innerText = '<strong> 今天是：</strong> 2019';
// 2 innerHtml 识别标签
div.innerHTML = '<strong> 今天是：</strong> 2019';
常用元素的属性操作
// 修改元素属性src
var btn_1 = document.getElementById("btn1");
var btn_2 = document.getElementById('btn2');
var img = document.getElementById('img');
// 注册事件
btn_2.onclick = function() {
img.src = 'sw_replace.png';
img.title = 'btn2';
}
btn_1.onclick = function() {
img.src = 'sw.jpg';
img.title = 'btn1';
}
改变表单的文字内容需要使用value属性而不是innerHTML 或者innerText
表单元素的属性操作
表单元素修改
// 表单中的元素需要使用value指来改变
input.value = '被点了！';
禁用表单
// 禁用表单，不能再点击，用到disabled
btn.disabled = true;
遍历li标签并使用精灵图
var list_img = document.querySelectorAll('li');
for (var i = 0; i < list_img.length; i++) {
// y坐标=索引数*44
var index = i * 44; // y坐标
list_img[i].style.backgroundPosition = '0 -' + index + 'px';
}
显示隐藏表单内文本
text.onfocus = function() { //获取焦点
console.log('hu');
}
text.onblur = function() { // 失去焦点
console.log('bu');
}
通过className更改元素样式
在script函数中将当前类的名字改变为className
css中
.类名{
一些元素样式
}
className = '类名'
既保留原来的类名
className = '想要的类1 类2'
鼠标事件
鼠标经过
onmouseover
鼠标离开
onmouseout
自定义属性
在标签中写属性名=属性值
<script>
var div = document.querySelector('div');
console.log(div.getTime);
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// 新增
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 有多个-时候获取时采用驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
节点
节点至少有nodeType-节点类型、nodeName-节点名称和nodeValue三个基本属性。
元素节点 nodeType = 1
属性节点 nodeType = 2
文本节点 nodeType = 3
获取节点
// 兄弟节点
console.log(div.previousElementSibling); // 得到上一个元素节点
console.log(div.nextElementSibling); // 得到下一个
// 1、父结点
var erweima = document.querySelector(".erweima");
console.log(erweima.parentNode); // 获取最近的父节点,找不到父节点返回为空。
// 2、子节点 包括元素节点 文本节点等
var ul = document.querySelector('ul');
console.log(ul.childNodes);
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType == 1) {
// 是元素节点
console.log(ul.childNodes[i]);
}
}
// children 获取子元素节点 也是实际开发常用的
console.log(ul.children);
// firstChild 获得第一个子节点 不管是文本节点还是元素节点
var ol = document.querySelector('ol');
console.log(ol.firstChild);
console.log(ol.lastChild);
// 返回第一个子元素节点
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 实际开发写法
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
添加节点
// 创建节点
var li = document.createElement('li');
// 添加节点
// node.appendChile()将一个节点添加到node的结尾
var ul = document.querySelector('ul');
ul.appendChild(li);
// 添加节点
// node.insertBefore(child,指定元素)
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 向页面添加一个新的元素 需要创建元素再添加元素
删除节点
ul.removeChild(ul.children[0]);
阻止链接跳转
href = javascriptvoid(0)
或者Javascript:;
复制节点
node.cloneNode();
批量添加节点优化
// innerHTML创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i < 100; i++) {
// inner.innerHTML += '<a href="#" > 百度 </a> ';
// }
var arr = [];
for (var i = 0; i < 100; i++) {
arr.push('<a href="#"> 百度 </a>');
}
inner.innerHTML = arr.join('');
var create = document.querySelector('.create');
for (var i = 0; i < 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
事件
两种注册事件
// 1、传统注册方式
// 同一个元素只能注册一个函数
// 会将上一个处理函数覆盖掉
var btns = document.querySelectorAll('button');
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao!');
}
// 2、方法监听注册方式
// eventTarget.addEventListener(type,listener[,useCapture])
// type 事件类型字符串 如 click mouseover
// listener 事件处理函数 事件发生时会调用该监听函数
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
删除事件
// 传统方式解绑
divs[0].onclick = function() {
alert('只会弹出来一次');
divs[0].onclick = null;
}
divs[1].addEventListener('click', fn)
function fn() {
alert(22);
// 移除监听事件
divs[1].removeEventListener('click', fn)
}
事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
// event 就是一个事件对象
// 事件对象有了事件才会存在，是系统自动创建的 不需要传递参数
//事件对象是我们一系列相关数据的集合
console.log(e);
// 解决兼容性问题
e = e || window.event
console.log(e);
}
阻止默认行为
子类对象所获取到的点击对象会一层一层向上传递，直到document，使得父类全部获取到点击事件。
e.stopPropagation();
事件委托
事件委托的原理 不给子节点设置事件监听器，将事件监听器设置给父节点，利用冒泡原理设置子节点。
eg如果ul中包括多个li，利用事件对象的targit获取当前点击的li，事件冒泡到ul，ul有注册事件，会触发监听器。
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert('哇达西，不知道在打什么');
// e.target 可以获得点击的对象
e.target.style.backgroundColor = 'pink';
})
常用的鼠标事件
禁止鼠标右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
禁止选用左键选中文字
// 禁止选中文字
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
鼠标点击位置
document.addEventListener('click', function(e) {
// 返回鼠标相对于浏览器窗口可视区的X坐标
// 返回鼠标相对于浏览器可视区的Y坐标
console.log('X:' + e.clientX);
console.log('Y:' + e.clientY);
// 返回页面文档的x和y坐标
console.log("ABX:" + e.pageX);
console.log("ABY:" + e.pageY);
})
鼠标移动定位
document.addEventListener('mousemove', function(e) {}
常见键盘事件
document.addEventListener('keyup', function() {
console.log('up');
});
document.addEventListener('keydown', function() {
console.log('down');
});
// 不识别功能键 ，比如ctrl和shift和箭头等。
document.addEventListener('keypress', function() {
console.log('press');
});
// 三个事件的执行顺序 keydown -- keypress -- keyup
获取按键的ASCII码
e.keyCode
搜索框获得焦点
search.focus(); // 搜索框获得焦点
input失去焦点和获得焦点
jd_input.addEventListener('blur', function() {});
jd_input.addEventListener('focus', function() {});
