JS前端笔记
1.如何在JS中创建数组,以及数组常见方法
//创建数组:
const numbers = new Array(1,2,3,4,5);
//js中一个数组可以存放的不同类型的语言
const fruits = ['apples','oranges',10,true];
fruits.push('mango');
fruits.unshift('strawberries');
fruits.pop();
Array.isArray(fruits);
fruits.indexOf('oranges');
2.如何创建一个person对象
const person = {
firstName:'john',
lastname:'doe',
age:30,
address:{
street:'50 main st',
city:'boston',
state:'ma'
}
}
const { firstName,lastName,address:{city}} = person;
//会直接将这一个属性加到person对象中去
person.email = 'yokna623660@163.com'
3.JS中定义对象数组,对象数组转Json、对象数组遍历、对象数组map、fielter
const todos = [
{
id:1,
text:'take out trash',
isCompleted:true
}
{
id:2,
text:'meet friends',
isCompleted:true
}
{
id:3,
text:'sleep',
isCompleted:true
}
]
//对象数组
//将对象数组转换为json
const todoJSON = JSON.stringify(todos);
//for循环
for(let i = 0;i < 10; i++){
console.log(`for loop number :${i}`);
}
//遍历数组
for(let i = 0;i < todos.length; i++){
console.log(todos[i].text);
}
for(let todo of todos){
console.log(todo.text);
}
//foreach
todos.forEach(function(todo){
console.log(todo.text);
});
//map 返回的是所有todos中的对象的text字段,是一个数组
const todoText = todos.map(function(todo){
return todo.text;
});
//filter 返回的是isComplete == true的对象数组
const todoText = todos.filter(function(todo){
return todo.isCompleted == true;
});
//filter + map 筛选完成了的任务
const todoText = todos.filter(function(todo){
return todo.isCompleted == true;
}).map(function(todo){
return todo.text;
});
4.js中的 == 与 === 区别
const x = 10;
if(x == 10){
console.log(x is 10);
}
const y = '10';
//“==”并不会关注数据类型 只关注值
if(y == 10){
//仍然可以进到这里来
console.log(y is 10);
}
if(y === 10){
//不能进到这里来,因为前者是字符串,后者是数值
console.log(y is 10);
}
5.js中选择分支结构的使用
const x = 10;
const color = x > 10 ? 'red' : 'blue';
switch(color){
case 'red':
console.log('red');
break;
case 'blue':
console.log('blue');
break;
default:
consloe.log('not red or blue');
break;
}
6.js定义一个函数,以及箭头函数的使用
//num1 = 1,num2 = 2是设置缺省值,在调用函数时,如果没有传入参数,就将1和2作为参数的值传进函数
function addNums(num1 = 1,num2 = 2){
return (num1+num2);
}
addNums();
addNums(5,4);
//使用箭头函数更好的表达出函数本身
const addNums = (num1 = 1,num2 = 2) =>
num1 + num2
console.log(addNums(5,5));
7.定义一个类,用函数的形式定义
function Person(firstName,lastName,dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
this.getFullName = function(){
return `${this.firstName} ${this.lastName}`;
}
}
Person.prototype.getFullName = function(){
return `${this.firstName} ${this.lastName}`;
}
const person1 = new Person('jhon','doe','2020');
const person2 = new Person('mary','smith','2021');
8.用OOP思想定义一个类
class Person{
constructor(firstName,lastName,dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
}
getFullName(){
return `${this.firstName} ${this.lastName}`;
}
}
const person1 = new Person('jhon','doe','2020');
const person2 = new Person('mary','smith','2021');
9.如何获取html中的元素
一般我们使用querySelector(),或者querySelectorAll()来获取到符合查询条件的html元素
const form = document.getElementById('id_name');
console.log(form);
//单一选择 如果有多个h1只会选择第一个
console.log(document.querySelector('h1'));
//选择类是item的元素
console.log(document.querySelector('.item'));
//多元素
//选择所有item类的元素
const item = document.querySelectAll('.item');
10.对获取的html元素进行遍历
const items = document.querySelectorAll('.item');
items.forEach((item) => console.log(item));
11.如何进行用户交互
1.获取到html中的元素
2.对元素调用各种函数,例如remove函数,可以把这个元素从html中移除,这样在页面中就不会显示
3.也可以通过innerHTML方法,将我们要需要加入的html元素添加到页面中去。
4.也可以根据我们获取到的html元素,取到style属性,对style属性进行修改,就可以改变元素的css的样式。
const ul = document.querySelectorAll('.item');
ul.remove();
ul.lastElementChild.remove();
ul.firstElementChild.textContent = 'hello';
ul.Children[1].innerText = 'brad';
ul.lastElementChildren.innerHTML = '<h1>hello<h1>';
const btn = document.querySelector('.btn');
btn.style.background = 'red';
12.事件监听
1.获取到html元素
2.对这个元素事件监听,调用add.EventListener(‘系统自定的监听类型’,函数)
const btn = document.querySelector('.btn');
//为一个事件绑定动作
btn.addEventListener('click',(e) =>{
//调用此方法可以阻止默认行为
e.preventDefault();
console.log('click');
//获取到事件作用的元素的id
console.log(e.target.id);
})
13.点击事件发生时,我们动态的修改页面的样式
const btn = document.querySelector('.btn');
//为一个事件绑定动作
btn.addEventListener('click',(e) =>{
document.querySelector('#my-form').style.background = '#ccc';
//把bg-dark的css添加到body中去
documenr.querySelector('body').classList.add('bg-dark');
})
14.简单的表单验证
const myForm = document.querySelector('#myform');
const nameInput = document.querySelector('#name');
myForm.addEventListener('submit',onSubmit);
function onSubmit(e){
e.preventDefault();
if(nameInput.value === '' || myForm.value ==='')
{
msg.classList.add('error');
msg.innerHTML = 'Please enter all fields';
//设置我们变化的过期时间
setTimeout(() => msg.remove,3000);
}else{
const li = documenr.createElement('li');
li.appendChild(document.createTextNode(`${nameInput.value}:${myForm.value}`));
userList.appendChild(li);
}
}