web前端笔记

最新推荐文章于 2024-10-08 17:48:41 发布

　　～

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量37

点赞数

文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/yhahab/article/details/131968257

版权

1.盒子阴影

/* 10px:x轴的偏移量 20：y轴的偏移量 inset:内阴影 30：模糊半径 */

box-shadow: inset 10px 20px 30px;

/* 文字阴影 */

text-shadow: 10px 10px 2px;

2.多列显示

p {

/* 以几列进行显示 */

column-count: 3;

/* 列于列之间的间距的 */

column-gap: 30px;

}

3.媒体查询（窗口缩小时颜色变化）

<style>

/* @media only screen and (min-width: 320px) and (max-width: 480px) */

div {

width: 400px;

height: 50px;

background-color: aqua;

}

@media screen and (min-width: 900px) {

div {

background-color: pink;

color: rgb(195, 19, 48);

}

}

</style>

4.js引入方式

<body>

<script src="./06-外部.js"></script> 外部样式

<script>

document.write('你好，javascript')

console.log('aaa') 打印，在控制台查看

</script>

5.常用语句

document.write('我是js插入的语句') 界面查看

// 控制台输出语句控制台查看

console.log('你真6')

// alert 警示框

alert('警告，你小子立即退出')

// 输入语句输入框

prompt('请输入您的年龄')

6.变量

<script>

// prompt('请输入您的用户名：')

// 变量：存储数据的容器盒子

// 声明变量 let 变量名

let uname

// 变量赋值

uname = 'gouxin'

// 变量的初始化

let age = 18

console.log(age)

// 改变变量

uname = 'xianyanbao'

console.log(uname) 变量不能加引号

// 同时声明多个变量

let a = 1, b = 2

console.log(a, b)

7.用户名输入

<script>

let uname = prompt('请输入用户名：')

document.write(uname)

</script>

8.var和le

t // var a = 12

// let b = 22

// var 不存在块级作用域可以先使用，后声明多次声明同一变量

// console.log(uname)

// var uname = 'gouxin'

// var uname = 'zs' let不能先声明后使用

9.常量

<script>

// 常量：存储的数据不能再变化 const 常量名

const GENDER = 'nv' const来声明

// GENDER = '男' 错误方法，常量不能改名

console.log(GENDER) 打印的是变量名

</script>

10.基本数据类型-字符串

// 对于javascript弱数据类型语言，只有进行赋值了，才知道是什么数据类型

// 字符串string类型 ' ' " "

let a

a = 'nihao' 单引号是字符串

// typeof 检测数据类型的方法

console.log(typeof (a)) a打印出来a是string类型

let b = "欢迎你加入js " 双引号也是字符串

console.log(typeof (b))

let c = "你是一本参不透的'书'" 单引号嵌套双引号

// 字符串的拼接 +

let uname = 'zs'

let age = 21

document.write('姓名是： ' + uname + '年龄是：' + age)

11.模板字符串

<script>

let uname = prompt('请输入用户名：')

let password = prompt('请输入密码：')

document.write(`用户名是:${uname},密码是：${password}`) 可以在里面添加其他标签

12.其他类型

<script>

let num = 1

// 布尔类型 true false

console.log(2 > 3)

// undefined 未定义

console.log(uname)

var uname = 'zs'

// null 空的

// NAN 缩写 not a number

console.log(undefined + 1) //nan

console.log(null + 1)

</script>

13.数据类型转换

// 隐式转换

// let a = 2 数字类型

// let b = '3' 字符串类型

// console.log(a + b)

// 显式转换模板： Number(str) 或者 +

// let num1 = Number(prompt('请输入数字1：'))

// let num2 = Number(prompt('请输入数字2：'))

// let num1 = +prompt('请输入数字1：')

// let num2 = +prompt('请输入数字2：')

// console.log(num1 + num2)

// parseInt

转换为整数，去掉像素

parseFloat

尽可能将字符串转换为数字类型

let c = 3.1415826 打印结果为3

let d = '200.22px'

console.log(parseInt(d)) 不保留小数打印结果为200

console.log(parseFloat(d)) 打印结果为200.22

14.运算符

<script>

let a = 3

let b = 5

// + - * / %

console.log(a + b)

console.log(b - a)

console.log(b * a)

console.log(b / a)

// % 取余

console.log(b % a)

a += 3 //a = a + 3

console.log(a)

a -= 3 //a = a - 3

a *= 3 //a=a*3

a /= 3 //a=/3

// 赋值运算符的优先级高于后减减，因此，先赋值，后运算

// let c = b-- 结果b=5

// 自增自减

// 前减减的优先级大于赋值运算符，因此，先减减，再赋值

let c = --b 结果b=4

console.log(c)

let d = c++

console.log(d) 结果=4

console.log(c) 结果 =5

let f = ++c 结果=6

console.log(f）

</script>

15.比较运算符

// let a = 4

// let b = 5

// console.log(a > b) 打印结果 fa'l'se

// console.log(a >= b) 打印结果true

// console.log(a < b)

// console.log(a <= b)

// console.log(a = b) = 赋值运算符

console.log(3 == '3') // == :等于只判断值有隐式转换，把字符串转换为数字类型

console.log(3 === '3') //===:全等判断值、数字类型是否都一致

16.逻辑运算符

<script>

// && :两真才真，一假则假

console.log(3 > 2 && 2 > 4) 打印结果false

// 或 || : 一真则真，两假才假打印结果true

console.log(3 > 2 || 2 > 4)

// 非！取反

console.log(!(3 > 2)) 反过来变成2>3 打印结果false

17.单分支语句

<script>

let age = +prompt('请输入你的年龄：')

模板：// if(判断条件){

// 执行代码块

// }

if (age > 18) {

alert('欢迎光临，你成年了~')

}

</script>

18.双分支语句

<script>

let age = +prompt('请输入您的年龄')

// if (条件语句1) {

// 执行代码块1

// } else {

// 执行代码块2

// }

if (age > 18) {

alert('你成年了思密达~')

}

else {

alert('小屁孩，边儿去~')

}

</script>

19.多分支语句

<script>

let score = +prompt('请输入你的成绩：')

模板 // if (条件1) {

// 代码块1

// }

// else if (条件2) {

// 代码块2

// }

// else if (条件三) {

// 代码块3

// } else {

// }

if (score <= 60) {

alert('脑子呢？？')

} else if (score <= 80) {

alert('还不错，继续努力就及格了')

}

else if (score <= 120) {

alert('再接再厉，牛的')

} else {

alert('你已经是大神了，慕白你')

}

20.判断平闰年

<script>

let year = +prompt('请输入年份：')

方法1： // if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {

// alert(`${year}是闰年`)

// } else {

// alert(`${year}是平年`)

// }

方法2： year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ? alert(`${year}是闰年`) : alert(`${year}是平年`)

</script>

21.三元运算符

// 判断条件 ? 成立时执行的代码 : 不成立时执行的代码

// 三元运算符双分支的简写

案例： // if (3 > 5) {

// alert('这个世界疯了')

// } else {

// alert('你是不是个der')

// }

三元运算符来写： 3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')

true运行前面，false运行后面

22.switch语句

<body>

<script>

let week = prompt('请输入今天星期几了')

switch (week) {

case "1":

alert('今天星期一，猴子穿大衣~')

break

case "2":

alert('今天星期二，猴子有点二')

break

case "3":

alert("今天星期三，猴子去爬山")

break

case "4":

alert("今天星期四，猴子要找事")

break

case "5":

alert("今天星期五，猴子打老虎")

break

case "6":

case "7":

alert("今天周末，休假")

break

default://无符合条件时，执行的代码

alert("你是猴子派来的救兵吧~~~")

break

}

</script>

</body>

23.for循环

for (let i = 0; i < 100; i++) {

console.log('我爱你')

} 打印100次

24.1到100之间偶数和

<script>

let sum = 0

for (let i = 1; i <= 100; i++) {

if (i % 2 === 0) {

sum += i//sum=sum+i

}

}

alert(sum)

</script>

25.while循环

<script>

let i = 1

while (i <= 10) {

console.log(i)

i++ 一定要有i++，否则会电脑死机

}

// while (true) {

// let n = prompt('你爱我吗？')

// if (n === "爱") {

// break

// } 当输入爱的时候才退出

// }

26.do.....while循环

<script>

let j = 11

do {

console.log(j)

j++

} while (j <= 10)

</script> 和while区别先执行后判断

27.continue 和break

<script>

for (let i = 0; i < 100; i++) {

if (i === 50) {

continue //退出本次循环去掉50这次循环

}

if (i === 70) {

break//退出循环从70开始退出循环

}

console.log(i)

}

</script>

28.循环嵌套

<body>

<script>

for (let i = 1; i < 8; i++) {

console.log(`今天是第${i}天`);

for (let j = 1; j <= 10; j++) {

console.log(`这是我送的第${j}朵花`)

}

}

for (let i = 1; i <= 5; i++) {

for (let j = 1; j <= i; j++) {

document.write(`<span>*</span>`)

}

document.write(`<br/>`)

}

</script>

29.数组

<script>

//存储多个数据的容器-数组

// 声明方式： [] 数组存在数组下标，从0开始

let arr = ['gouxin', 'liuxingyun', 'xainyanbao', 'wangwu'] 数组下标 0123

console.log(arr) 打印结果array（4）

// 查找数组名[数组下标]

console.log(arr[1]) 打印结果liuxingyun

</script>

// 常用的数组操作

// push() 向数组末尾添加一个或多个元素的

// arr.push(100, 22, 33, 'gouxinsimida')

// console.log(arr)

// unshift()

arr.unshift(101, 102, 110, 120)

console.log(arr)

// pop()删除并返回数组的最后一个元素

let b = arr.pop()

console.log(arr)

console.log(b)

// shift()删除并返回数组的第一个元素

let c = arr.shift()

console.log(arr)

console.log(c)

// [102, 110, 120, 'gouxin', '显眼包', 'ls', 'wmz', 1, 2]

// splice() 删除元素两个参数的时候，第一个参数代表要删除的元素的位置，第二个参数代表要删除几个

arr.splice(2, 3)

console.log(arr)

//[102, 110, 'ls', 'wmz', 1, 2]

// splice()添加元素：第二个参数为0

arr.splice(2, 0, 'gouxin', 'lixi', 1, 2, 3)

console.log(arr)

// concat() 连接两个或者多个数组的，并返回结果

let arr1 = ['10086', '10010']

let arr2 = ['1314', '4488']

let arr3 = arr1.concat(arr2)

console.log(arr3)

将两个数组连接起来

// join() 把数组中所有的元素放在一个字符串里边，元素通过指定的分隔符进行拼接

let str = arr1.join('#')

// console.log(typeof (str))

console.log(str)

// reverse() 颠倒数组中元素的顺序原来的数组也颠倒

let newArr = [22, 3, 12, 44, 33, 123]

let n = newArr.reverse()

console.log(n)

console.log(newArr) //[123, 33, 44, 12, 3, 22]

// sort()对数组的元素进行排序按照utf码进行排序

let f = newArr.sort()

console.log(f)

console.log(newArr.length)

for (let i = 0; i < newArr.length; i++) {

console.log(arr[i])

}

30.循环加强

<script>

// for in for of

let arr = [1, 2, 3, 4, 5, 6, 7, 'gouxin', true]

// for (let i in arr) { i是数组下标

// // console.log(i) 打印结果1到9

// console.log(arr[i])

// }

for (let k of arr) {

console.log(k) 打印结果为数组里面的东西

}

</script>

in和of区别在于打印结果不同

01.函数

<script>

// 函数：完成特定功能的代码块精简代码、提高复用率

函数： // alert()

// console.log()

// parseInt()

// 函数的声明方式：function 函数名(){代码块}

function sayHi() {

console.log('你好，function')

}

// 函数声明完成后，必须进行调用才能执行否则无法打印

// 调用：函数名()

sayHi()

02.函数传参

// 函数小括号里用于接受实参的叫做形参

function sayHi(msg) {

console.log(`用户说:${msg}`) 打印结果：今天天气真好，狂风暴雨

}

// 函数调用时，传进去的参数，叫做实参

sayHi('今天天气真好，狂风暴雨')

// 求和函数

function getSum(a, b) { a，b接参

console.log(a + b)

}

getSum(2, 3)

03.函数返回值

// 返回值：return

return sum

// 函数没有返回值，默认返回undefined return 结束函数的作用，之后的代码不会再执行

let a = getSum(arr)

04.值传递

// 将自身的值传进函数

let a = 11

let b = 22

function change(x, y) {

x = 21

y = 33

}

change(a, b)

console.log(a, b)

//打印结果11 22

// 数组：引用数据类型，将自己的地址传递给函数

let arr = [1, 2, 3, 4, 5]

function change2(arr) {

arr.push(100)

}

change2(arr)

console.log(arr) 打印结果1，2，3，4，5，100

05.默认值参数

// 默认值参数:在形参的最后

function area(r, PI = 3.14) {

return PI * r * r 求圆面积

}

let a = area(2)

console.log(a)

06.匿名函数

//具名函数：有名字的函数匿名函数：没有名字的函数例如function（）

// say()

// function say() {

// console.log('good')

// }

// 1、函数表达式

// let fn = function () { console.log("你好") }

// fn()

// 普通的具名函数，可以在声明前去使用，而函数表达式，只能先声明，后使用

// 2、立即执行函数

// let num=1

// let num=2

// (function () {

// let num = 1

// console.log(num)

// }())

07.作用域

//作用域：一段代码中所用到的名字不是一直有效且可用的，而限制这个名字可用范围的就是这个名字的作用域

// 减少名字冲突不同作用域之间相互不影响

// 全局作用域局部作用域：函数内部声明的变量

// script里边，函数外边声明的变量

//全局变量：script里边，函数外边声明的变量局部变量：函数内声明的变量(外部不能访问)

// 函数的形参也可以理解为局部变量

08.递归

// 递归：把一个问题，尽可能的拆分成小问题，知道不能拆分

// 9!

// 9*8!

// 9*8*7!

// 9*8*7*6*5*4*3*2*1!

function jiecheng(n) {

if (n === 1) {

return 1

}

return n * jiecheng(n - 1)

}

let a = jiecheng(9)

console.log(a)

09.闭包

function outer() {

let money = 100

function inner() {

console.log(money)

}

return inner

}

let a = outer()

a() 调用

console.log(money) 打印结果100

外部无法访问

10.对象

// let arr = [190, 184, 19]

// 对象：无序的数据集合(无下标)

let obj = {

uname: 'gouxin',

age: 21,

gender: 'nv',

sing: function () {

console.log('我要唱歌了，请保护你的耳朵')

}

}

// 声明方法： let 对象名={} let 对象名=new Object()

// 对象：属性和方法属性：信息或者特征方法：行为或者动作打电话、玩游戏……

// 查：对象名.属性名

console.log(obj.age)

console.log(obj.uname)

// 查找2.0 对象名['属性名']

console.log(obj['gender'])

// 增对象.新属性=属性值

obj.like = '王者荣耀'

// 改

obj.uname = 'zs'

// 删

delete obj.gender

console.log(obj)

// 对象方法怎末去调用对象名.方法名()

obj.sing()

11.对象遍历

<script>

let obj = {

uname: 'gouxin',

age: 21,

gender: 'nv',

sing: function () {

console.log('我要唱歌了，请保护你的耳朵')

}

}

for (let k in obj) {

// console.log(typeof (k))

console.log(obj[k])

}

</script>

12.Math模块

console.dir(Math)

// console.log(Math)

console.log(Math.E) console.log(Math.PI)

// ceil()向上取整

console.log(Math.ceil(3.1415))

// floor()向下取整

console.log(Math.floor(3.1415))

// abs取绝对值

console.log(Math.abs(-3.1415))

// pow

console.log(Math.pow(2, 3))

console.log(Math.random()) //[0,1)之间的随机数

let arr = ['zs', 'ls', 'ww', 'gouxin', 'heidashuai']

let random = Math.floor(Math.random() * 5)

document.write(arr[random])

13.时间模块

// new关键字，就是在实例化

// console.log(date)

let date = new Date()

console.dir(date)

function getTime() {

let y = date.getFullYear()

let m = date.getMonth() + 1

let d = date.getDate()

let hh = date.getHours()

let mm = date.getMinutes()

let ss = date.getSeconds()

let week = date.getDay()

// 补零：

m = m < 10 ? '0' + m : m

d = d < 10 ? '0' + d : d

hh = hh < 10 ? '0' + hh : hh

mm = mm < 10 ? '0' + mm : mm

ss = ss < 10 ? '0' + ss : ss

return `${y}年-${m}月-${d}日 ${hh}:${mm}:${ss} 星期${week}

}

let a = getTime()

console.log(a)

14.字符串对象

let str = new String()

str = 'nihao,huanyingjiaru web'

console.log(typeof (str))

// length 属性

console.log(str.length)

// split()将字符串分隔为数组并返回

let a = str.split('a')

console.log(a)

// endsWith startsWith

str.startsWith('nihao')

console.log(str.startsWith('dcnd'))

// indexOf 字符串中是否包含某字符

str.indexOf('gouxin')

console.log(str.indexOf('gouxin'))

// match 匹配字符串，支持正则

let c = str.match(/a/g)

console.log(c)

// replace 查找、替换，支持正则匹配

let f = str.replace('huanying', 'jujueni')

console.log(f)

15.构造函数

// 构造函数的基本格式一个模板

function Obj(uname, age) {

this.uname = uname,

this.age = age,

this.sing = function () {

console.log('我要唱歌了')

}

}

// 实例化对象

let str = ''

// let str = new String()

// let arr = new Array()

let obj1 = new Obj('zhangjie', 21)

console.log(obj1)

obj1.sing = function () {

console.log('sing')

}

obj1.sing()

let obj2 = new Obj('linjunjie', 33)

console.log(obj2)

obj2.sing()

16.原型对象

function Obj(uname, age) {

this.uname = uname,

this.age = age

}

// Obj.prototype.sing = function () {

// console.log('我要唱歌了')

// }

Obj.prototype = {

// 原型对象中的constructor被覆盖丢失。重新指回去：constructor：Obj，

constructor: Obj,

sing: function () {

console.log('我要唱歌了')

},

dance: function () {

console.log('我要跳舞')

}

}

console.dir(Obj)

let obj1 = new Obj('zs', 18)

obj1.sing()

console.log(obj1.__proto__ === Obj.prototype)

let obj2 = new Obj('ls', 22)

obj2.sing()

// 对象：都具有prototype的属性，即都有原型对象，而原型对象本身又是对象

// javascript里：万物皆对象

// let arr1=[]

// let arr = new Array()

// console.log(arr)

17.获取元素

// 1、通过css选择器获取 document.querySelector只获取满足条件的第一个元素对象（倾情推荐）

// document.querySelector('css选择器')

const btn = document.querySelector('button')

// console.log(typeof (btn))

console.dir(btn)

const li = document.querySelector('ul li')

console.log(li)

// document.querySelectorAll将所有的满足条件的元素对象获取并保存至伪数组

const lis = document.querySelectorAll('ul li')

console.log(lis)

// 2、class名

let box = document.getElementsByClassName('box')

console.log(box)

// 3、标签名

let input = document.getElementsByTagName('input')

console.log(input)

// 4、id

// document.getElementById('')