1.数组
<script>
let arr = ['gouxin', 'zs', 'ls', 'wmz', 1, 2, 3]
arr[1] = '显眼包'
console.log(arr[1])
// let arr2 = new Array()
// 常用的数组操作
// 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.函数
<script>
// 函数:完成特定功能的代码块 精简代码、提高复用率
// alert()
// console.log()
// parseInt()
// getSum(2, 3)
// 函数的声明方式 function 函数名(){代码块}
function sayHi() {
console.log('你好,function')
}
// 函数声明完成后,必须进行调用才能执行
// 调用 函数名()
sayHi()
</script>
3.函数传参
<script>
// 函数小括号里用于接受实参的叫做形参
function sayHi(msg) {
console.log(`用户说:${msg}`)
}
// 函数调用时,传进去的参数,叫做实参
sayHi('今天天气真好,狂风暴雨')
// 求和函数
function getSum(a, b) {
console.log(a + b)
}
getSum(2, 3)
</script>
4.函数返回值
<script>
let arr = [11, 22, 12, 33, 4, 34]
function getSum(arr) {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
// console.log(sum)
// 返回值:return
return sum
// console.log('111')
}
// 函数没有返回值,默认返回undefined return 结束函数的作用,之后的代码不会再执行
let a = getSum(arr)
document.write(a)
</script>
5.值传递和引用传递
<script>
// 将自身的值传进函数
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.默认值参数
<script>
// 默认值参数:在形参的最后
function area(r, PI = 3.14) {
return PI * r * r
}
let a = area(2)
console.log(a)
</script>
7.arguements伪数组
<script>
// function getSum(a, b) {
// return a + b
// }
// getSum(2, 3, 55, 4, 3, 2, 2)
// 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.匿名数组
<script>
//具名函数 匿名函数:没有名字的函数
// 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>
let a = 1
for (let i = 0; i < 9; i++) {
console.log(i)
}
for (let i = 7; i < 10; i++) {
console.log(i)
}
// console.log(i)
//作用域:一段代码中所用到的名字不是一直有效且可用的,而限制这个名字可用范围的就是这个名字的作用域
// 减少名字冲突 不同作用域之间相互不影响
// 全局作用域 局部作用域 :函数内部声明的变量
// script里边,函数外边声明的变量
//全局变量 :script里边,函数外边声明的变量 局部变量:函数内声明的变量(外部不能访问)
// 函数的形参也可以理解为局部变量
function say() {
let num = 33
console.log(a)
}
say()
console.log(num)
</script>
10.递归
<script>
// 递归:把一个问题,尽可能的拆分成小问题,知道不能拆分
// 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.闭包
<script>
function outer() {
let money = 100
function inner() {
console.log(money)
}
return inner
}
let a = outer()
a()
console.log(money)
</script>
12.对象
<script>
//
// 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()
</script>
13.对象便利
<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>
14.Math模块
<script>
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])
</script>
15.时间模块
<script>
// 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)
</script>
16.字符串对象
<script>
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)
</script>
17.构造函数
<script>
// let str=new String()
// let obj = {
// uname: 'linjunjie',
// age: 31,
// sing: function () {
// console.log('我要唱歌了')
// }
// }
// let obj2 = {
// uname: 'zhnagjei',
// age: 33,
// sing: function () {
// console.log('我要唱歌了')
// }
// }
// 构造函数的基本格式 一个模板
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.原型对象
<script>
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)
</script>
19.获取元素
<script>
// 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('')
</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>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="../imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
let btns = document.querySelectorAll('.tab-item')
let goods = document.querySelectorAll('.main')
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>
<body>
<div class="box">
<div class="top">
<ul>
<li><a href="#">粉色</a></li>
<li><a href="#">绿色</a></li>
<li><a href="#">蓝色</a></li>
<li><a href="#">黑色</a></li>
</ul>
</div>
<div class="dixia">
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
</div>
</div>
<script>
</script>
</body>
</html>