7.27笔记

最新推荐文章于 2024-08-13 17:31:17 发布

乖乖周周

最新推荐文章于 2024-08-13 17:31:17 发布

阅读量43

点赞数

文章标签：笔记 javascript 前端

本文链接：https://blog.csdn.net/huangqin_/article/details/131985306

版权

本文介绍了JavaScript中的数组操作，如push、pop、unshift、shift、splice等；函数声明与调用，以及传参、返回值的概念；深入探讨了作用域、递归、闭包等核心概念；讲解了对象的创建、属性和方法，以及对象遍历。此外，还涉及了Math模块、时间处理、字符串对象的方法，以及DOM元素的获取和内容修改。最后，通过示例展示了Tab栏切换的实现和事件监听处理。

摘要由CSDN通过智能技术生成

1.数组

// 常用的数组操作
// 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)
console.log(arr1)

// 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])
}

</script>

2.函数

// getSum(2, 3)
// 函数的声明方式 function 函数名(){代码块}
function sayHi() {
console.log('你好，function')
}
// 函数声明完成后，必须进行调用才能执行
// 调用函数名()
sayHi()

</script>

3.函数传参

// 函数小括号里用于接受实参的叫做形参
function sayHi(msg) {
console.log(`用户说:${msg}`)

}

// 函数调用时，传进去的参数，叫做实参
sayHi('今天天气真好，狂风暴雨')

// 求和函数
function getSum(a, b) {
console.log(a + b)
}

getSum(2, 3)
</script>

4.函数返回值

5.值传递和引用传递

// 将自身的值传进函数
let a = 11
let b = 22
function change(x, y) {
x = 21
y = 33
}
change(a, b)
console.log(a, b)

// 数组：引用数据类型，将自己的地址传递给函数
let arr = [1, 2, 3, 4, 5]
function change2(arr) {
arr.push(100)
}
change2(arr)
console.log(arr)

</script>

6.默认值参数

return PI * r * r

}

let a = area(2)
console.log(a)
</script>

7.arguements伪数组

// arguements
function getSum() {
// arguments伪数组
// console.log(arguments)
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum

}
let a = getSum(1000, 1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log(a)

</script>

8.匿名数组

//具名函数匿名函数：没有名字的函数

// 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)
// }())

(function () {
console.log('121212')
})()

</script>

9.作用域

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

// 函数的形参也可以理解为局部变量
function say() {
let num = 33
console.log(a)
}
say()

console.log(num)
</script>

10.递归

// 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)
</script>

11.闭包

function outer() {
let money = 100
function inner() {
console.log(money)
}
return inner
}
let a = outer()
a()
console.log(money)
</script>

12.对象

// 查：对象名.属性名
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()

</script>

13.对象便利

for (let k in obj) {
// console.log(typeof (k))
console.log(obj[k])
}
</script>

14.Math模块

</script>

15.时间模块

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)
</script>

16.字符串对象

// 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)

</script>

17.构造函数

// 构造函数的基本格式一个模板
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()

</script>

18.原型对象

}
// 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)

</script>

19.获取元素

// 2、class名
let box = document.getElementsByClassName('box')
console.log(box)

// 3、标签名
let input = document.getElementsByTagName('input')
console.log(input)
// 4、id
// document.getElementById('')

</script>

20.修改dom元素的内容

<div>我是一个盒子</div>
<script>
// 1、获取元素
let div = document.querySelector('div')
// 2、修改元素内容
// 1、innerText() 无法识别标签
div.innerText = `<h1>我被修改过</h1>`

// 2、innerHtml() 可以识别标签（热烈推荐）
div.innerHTML = '<h1>我又又又被改了</h1>'
</script>

21.tab

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}

.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}

.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}

.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}

.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}

.products .main {
float: left;
display: none;
}

.products .main.active {
display: block;
}

.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>

for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
document.querySelector('.tab li.active').classList.remove('active')
this.classList.add('active')
// console.log('111')
document.querySelector('.products .main.active').classList.remove('active')
goods[i].classList.add('active')
})
}

</script>

</body>

</html>

22.tab栏切换

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

.box {
width: 1200px;
margin: 0 auto;
}

.top ul {
display: flex;
}

.top ul li {
list-style: none;
width: 70px;
height: 50px;
border: 1px solid pink;
}

.dixia {
position: relative;
}

.goods {
display: none;
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 500px;
border: 1px solid black;
}

.dixia .goods:nth-child(1) {
background-color: pink;
}

.dixia .goods:nth-child(2) {
background-color: green;
}

.dixia .goods:nth-child(3) {
background-color: blue;
}

.dixia .goods:nth-child(4) {
background-color: black;
}

.active {
display: block;
}
</style>
</head>

</ul>
</div>
<div class="dixia">
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
</div>
</div>

</script>
</body>

</html>

乖乖周周

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
7.27笔记

国际大牌<span>◆</span></li><li class="tab-item">国妆名牌<span>◆</span></li><li class="tab-item">清洁用品<span>◆</span>
复制链接

扫一扫