web笔记

m0_74256660

已于 2023-07-28 18:03:32 修改

阅读量51

点赞数

文章标签：笔记前端

于 2023-07-28 16:16:55 首次发布

本文链接：https://blog.csdn.net/m0_74256660/article/details/131981000

版权

第5天

【1】盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./01-盒子阴影.css">
</head>
<body>
    <div></div>
    <p>我是一段文字</p>
</body>
</html>

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 盒子阴影  inset：内阴影  x轴的偏移量   y轴的偏移量   模糊半径 */
    box-shadow: inset 10px 10px 10px;
}
p {
    /* 文字阴影 */
    text-shadow: 10px 10px 20px;
}

【2】多列显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02-多列显示.css">
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam labore
         ut qui cum amet, nobis odio, eveniet
         dolorem distinctio quis adipisci nisi voluptas
         placeat quibusdam consequuntur atque quidem a. Veniam!
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam labore
         ut qui cum amet, nobis odio, eveniet
         dolorem distinctio quis adipisci nisi voluptas
         placeat quibusdam consequuntur atque quidem a. Veniam!
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam labore
         ut qui cum amet, nobis odio, eveniet
         dolorem distinctio quis adipisci nisi voluptas
         placeat quibusdam consequuntur atque quidem a. Veniam!</p>
</body>
</html>

p {
    /* 以几列进行显示 */
    column-count: 3;
    /* 列于列之间的间距 */
    column-gap: 30px;
}

【3】媒体查询：检测设备或浏览器的功能，以便按照不同的要求为不同的设备添加不同的样式

<!-- 媒体查询：检测设备或浏览器的功能，以便按照不同的要求为不同的设备添加不同的样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03-媒体查询.css">
</head>
<body>
    <div></div>
</body>
</html>

div {
    width: 400px;
    height: 50px;
    background-color: aqua;
}
@media  screen and (min-width: 900px) {
    div {
        background-color: aquamarine;
    }
}

【4】JavaScript引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 外部 -->
    <script src="./外部.js"></script>
    <!-- 内部 -->
    <script>
        document.write('你好')
        // 利于程序员检查
        console.log('aaa')
    </script>
</body>
</html>

document.write('你好')

【5】常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./05-常用.js"></script>
</body>
</html>

document.write('我是js')
        // 控制台输出语句
console.log('牛')

        // 警示框：alert
alert('警告')
        // 输入语句    输入框
prompt('请输入……')

【6】变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./06-变量.js"></script>
</body>
</html>

prompt('请输入用户名')
// 变量：存储数据的容器
// 声明变量  存储数据的容器     let 变量名      
// var：不存在块级作用域    可以先使用，后声明    多次声明同一变量
let uname
// 变量赋值   uname是变量   wangshi是数据
uname = 'wangshi'
// 打印变量是一定不能有引号
console.log(uname)
//  变量的初始化          变量表达式
let age = 18
console.log(age)
// 改变变量值
uname = 'uc'
console.log(uname)

// 同时声明多个变量
let a = 1,b = 2
console.log(a,b)

【7】变量命名规范

命名规范：

1、有效符合（大小写字母、数字、下划线、$）

2、关键字和保留字不能用于命名，例：function、const

3、不要以数字开头

4、尽量使用有意义的单词

5、命名用小驼峰命名法,例：XiAnOuPeng / xi_an_ou_peng

【8】常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./08-常量.js"></script>
</body>
</html>

// 常量：存储的数据不能再变化   const  常量名
const gender = 'nv'
console.log(gender)

【9】基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./09-基本数据类型.js"></script>
</body>
</html>

// 对于javascript弱数据类型语言，，只有进行赋值了，知道是什么数据类型
// 字符串类型
let a
a = 'xiaohuihui'
//typeof 检测数据类型的方法
console.log(typeof(a))

let b = "欢迎光临"
console.log(typeof(b))

// 不能同时使用“”或‘’   将“”与''嵌套使用，两者位置可互换
let c = "你是一本'书'"

// 字符串的拼接   +
let uname = 'sd'
let age = 20

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

【10】模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./10-模板字符串.js"></script>
</body>
</html>

let uname = prompt('请输入用户名：')
let password = prompt('请输入密码：')
//document.write可识别标签 
document.write(`用户名是：${uname},密码是：${password}`)

【11】其他类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./11-其他类型.js"></script>
</body>
</html>

// 数字类型
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)
console.log(null + 1)

【12】数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./12-数据类型转换.js"></script>
</body>
</html>

// 隐式转换
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.231231
let d = '200px'
console.log(parseInt(c))
console.log(parseInt(d))

【13】算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./13-运算符.js"></script>
</body>
</html>

let a = 3
let b = 5
// + - * / %
console.log(a + b)
console.log(b - a)
console.log(a * b)
console.log(b / a)
console.log(b % a)

a += 3   
// a = a + 3

// 自增  自减
let c = b--
let d = --b
// 赋值运算符的优先级高于后减减，因此，先赋值，后减减
// 前减减的优先级大于赋值运算符，因此，先减减，后赋值
console.log(c)

【14】比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./14-比较运算符.js"></script>
</body>
</html>

let a = 4
let b = 6
console.log(a > b)
console.log(a >= b)
console.log(a < b)
console.log(a <= b)
console.log(a = b)    
// =   赋值运算符
console.log(3 == '3')
// ==  ：等于    只判断值    有隐式转换，把字符串转换为数字类型
console.log(3 == '3')
// === :全等   判断值、数字类型是否都一致

【15】逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./15-逻辑运算符.js"></script>
</body>
</html>

// && 两真为真，一假则假
console.log(3 > 2 && 3 > 4)
// ||(或)  一真为真，两假才假
console.log(3 > 2 || 3 > 4)
// !(非)  取反
console.log(!(3 > 2))

【16】单分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./16-单分支语句.js"></script>
</body>
</html>

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

// if(判断条件){
    // 执行代码块
// }

if (age > 18) {
    alert('恭喜')
}

【17】双分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./17-双分支语句.js"></script>
</body>
</html>

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

// if(条件语句1){
//     执行代码块1
// }
// else{
//     执行代码2
// }

if (age > 18) {
    alert('你成年了')
}else {
    alert('小孩儿')
}

【18】多分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./18-多分支语句.js"></script>
</body>
</html>

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

// if(条件1){
//     代码块1
// }else if(条件2){
//     代码块2
// }else if(条件3){
//     代码块3
// }else{
//     代码块4
// }

if (score < 60) {
    alert('笨鸟')
}else if (score <=80) {
    alert('可以')
}else if (score <= 120) {
    alert('厉害')
}else {
    alert('牛')
}

【19】三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./19-三元运算符.js"></script>
</body>
</html>

// 判断条件  ？  成立时执行的代码  ：不成立时执行的代码
// 三元运算符   双分支的简写

3 < 5 ? alert('666') : alert('对')

【20】switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./20-switch语句.html"></script>
</body>
</html>

let week = +prompt('请输入今天星期几了')
switch(week){
    case "1":
        alert('今天星期一')
        break
    case "2":
        alert('今天星期二')
        break
    case "3":
        alert('今天星期三')
        break
        // 无符合条件时，执行的代码
    default:  
        alert('哦吼')
        break
}

【21】for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./21-for循环.js"></script>
</body>
</html>

for(let i = 0;i<100;i++) {
    console.log('我爱你')
}

【22】while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./22-while循环.js"></script>
</body>
</html>

let i = 1
while(i<10){
    console.log(i)
    i++
}
while(true){
    let n = prompt('爱吗')
    if (n === "爱"){
        break
    }
}

【23】do……while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./23-do……while.js"></script>
</body>
</html>

// 以下代码while则不执行，而do……while执行一次
let i = 11
do{
    console.log(i);
    i++
}while(i <= 10)

【24】break、continue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./24-break、continue.js"></script>
</body>
</html>

for(let i = 0;i <100;i++){
    if(i==50) {
        continue
        // 退出本次循环
    }
    if(i==70) {
        break
        // 直接退出循环
    }
    console.log(i)
}

【25】循环嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./25-循环嵌套.js"></script>
</body>
</html>

for (let i = 1; i < 8; i++) {
    console.log(`今天是第${i}天`);
    for (let j = 1; j <= 10; j++){
        console.log(`这是我送的第${j}朵花`)
    }
}

【26】数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./26-数组.js"></script>
</body>
</html>

// 数组：存储多个数据的容器
// 声明方式：   []     数组存在数组下标，从0开始
let arr = ['喜羊羊','美羊羊','懒羊羊']
console.log(arr)
// let arr = []
// console.log(typeof(arr))

// 查找     数组名[数组下标]
console.log(arr[1])
// let arr2 = new Array

// 常用的数组操作
// push() ：向数组尾部添加一个或多个元素
arr.push(100 , 22,33 , 'ou')
console.log(arr)
// unshift() :向数组头部添加一个或多个元素
arr.unshift(101 , 102 , 110)
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)
// splice()   删除元素   两个参数的时候，第一个参数代表要删除的元素的位置，第二个参数代表要删除几个
arr.splice(2 , 3)
console.log(arr)

// splice()添加元素：第二个参数为0
arr.splice(2 , 0 , '懒羊羊')
console.log(arr)

// concat() ：连接两个或多个数组的，并返回结果，原数组不变
let arr1 = ['10086' , '10081']
let arr2 = ['1314' , '1516'] 

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)

// sort()  ：对数组的元素进行排序   按照utf码进行排序
let f = newArr.sort()
console.log(f)

onsole.log(newArr.length)
// length 数组有多少个数

// 遍历数组:
for (let i = 0 ;i < newArr.length ;i++){
    console.log(arr[i])
}

【27】循环加强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./27-循环加强.js"></script>
</body>
</html>

// 循环加强：for in       for of
let arr = [1, 2, 3, 4, 5, 6, 7, '喜羊羊', true]
for (let i in arr) {
    // 看到下标
    // console.log(i)
    console.log(arr[i])
}
// 直接显示内容
for (let k of arr) {
    console.log(k)
}

第6天

【1】函数

// 函数：完成特定功能的代码块      精简代码、提高复用率(重复使用的次数)
// 函数的声明方式：function   函数名(){代码块}
function sayHi(){
    console.log('你好')
}
// 函数声明完成后，必须进行调用才能执行
// 调用     函数名()   
sayHi()

【2】函数传参

// 函数传参 ：用户写入
// 函数小括号里用于接受实参的叫做形参
function sayHi(msg){
    console.log(`用户说：${msg}`)
}
// 函数调用时，传进去的参数，叫做实参
sayHi('今天天气好')

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

【3】函数返回值

let  arr = [66 ,67 ,88 ,34]
function getSum(arr) {
     let sum = 0
        for (i = 1; i < arr.length ;i++){
                sum += arr[i]
        }
            // console.log(sum)
            // 返回值：return
            return sum
}
// 函数没有返回值，默认返回undefined    
//    return    有结束函数的作用，之后的代码不会再执行
let a = getSum(arr)
// console.log(a)
document.write(a)

【4】值传递和引用传递

// 将自身的值传进函数
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)

【5】默认值参数

// 默认值参数：在形参的最后
function area(r ,PI = 3.14){
    return  PI * r * r
}
let a = area(2)
console.log(a)

【6】arguements

// function getSum (a ,b){
//     return a + b
// }
// getSum(2, 3, 55, 4, 2)

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

【7】匿名函数

// 具名函数：有名字的函数    匿名函数：没有名字的函数 
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')
})()

【8】作用域

let a = 1
for (let i = 0; i <9 ;i++) {
    console.log(i)
}
for (let i = 7; i <10 ;i++) {
    console.log(i)
}
// 作用域：一段代码中所用到的名字不是一直有效且可用的，而限制这个名字可用范围的就是这个名字的作用域
// 作用：减少名字冲突         不同作用域之间相互不影响
// 全局作用域：script里边，函数外边声明的变量        
// 局部作用域：函数内部声明的变量

function say() {
    let num = 33
    console.log(a)
}
say()
// 全局变量：script里边，函数外边声明的变量 
// 局部变量：函数内声明的变量（外部不能访问）

【9】递归

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

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

【10】闭包

// 闭包：访问一个函数作用域里变量的函数
function outer (){
    let money = 100
    function inner () {
        console.log(money)
    }
    return inner
}
let a = outer()
a()
console.log(money)

【11】对象

// 对象：无序的数据集合（无下标）
let obj={
    uname:"喜羊羊",
    age: 21,
    gender:'nv',
    sing :function(){
        console.log('唱歌')
    }
}
// 声明方法：  let   对象名={}    let  对象名= new  object()
// 对象：属性（信息或者特征）和方法（行为或者地址  例如：打电话、玩游戏……

// 查：对象名.属性名
console.log(obj.age)
// 查找2：  对象名['属性名']
console.log(obj['gender'])

// 增    对象.新属性 = 属性值
obj.like = '美羊羊'
console.log(obj)

// 改
obj.uname = 'wang'
console.log(obj)

// 删
delete  obj.like
console.log(obj)

// 对象方法怎么调用：  对象名.方法名()
obj.sing()

【12】对象遍历

let obj={
    uname:"喜羊羊",
    age: 21,
    gender:'nv',
    sing :function(){
        console.log('唱歌')
    }
}

for(let k in obj){
    console.log(obj[k])
}

【13】Math模块

console.dir(Math)
// console.log(Math)
console.log(Math.E)
console.log(Math.PI)
// ceil()向上取整
console.log(Math.ceil(3.14))
// floor()向下取整
console.log(Math.floor(3.14))
// abs取绝对值
console.log(Math.abs(-3.14))
// pow  次方
console.log(Math.pow(2 ,3))
// [0 , 1)之间的随机数
console.log(Math.random())
let arr = ['zs', 'ls', 'ww', 'ouhou']
let random = Math.floor(Math.random() * 4)
document.write(arr[random])

【14】时间模块

// new关键字 ，就是在实例化
let date = new Date()
console.dir(date)

function getTime() {
    let y = date.getFullYear()
    let m = date.getMonth()
    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)

【15】字符串对象

let str = new string()
str = 'nihao'
console.log(typeof(str))

// length   属性
console.log(str.length)

// split()将字符串分隔为数组返回
let a = str.split('a')
console.log(a)

// endsWith    startWith
str.startWith('nihao')
console.log(str.startWith('dcnd'))

// indexOf   字符串是否包含某字符
str.indexOf('ouhou')
console.log(str.indexOf('ouhou'))

// math  匹配字符串，支持正则
let c = str.math(/a/g)
console.log(c)

// replace  查找、替换，支持正则匹配
let f = str.replace('nihao', 'niao')
console.log(f)

【16】构造函数

// 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('zongjie' ,14)
console.log(obj1)
obj1.sing = function () {
    console.log('sing')
}
obj1.sing()


let obj2 = new Obj('liling' ,33)
console.log(obj2)
obj2.sing()

【17】原型对象

function obj (uname, age){
    this.uname = uname,
    this.age = age
}
obj.prototype.sing = function () {
    console.log('成功')
}
obj.prototype={
    // 构造器  原型对象中的constructor被覆盖丢失
    // 重新指回去：onstructor: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里：万物皆对象

【18】获取元素

// 1、css选择器获取   document.querySelector只获取满足条件的第一个元素对象
document.querySelector('css选择器')
let btn = document.querySelector('button')
console.dir(btn)
let 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('')

【19】修改dom元素内容

// 1、获取元素
let div = document.querySelector('div')
// 2、修改元素内容   innerText不能识别标签
div.innerText = '<h1>我已修改</h1>'

// 2、innerHtml()   可以识别标签    推荐
div.innerHTML = '我又被修改了'

m0_74256660

关注

0
点赞
踩
0

收藏

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

【3】媒体查询：检测设备或浏览器的功能，以便按照不同的要求为不同的设备添加不同的样式。5、命名用小驼峰命名法,例：XiAnOuPeng / xi_an_ou_peng。2、关键字和保留字不能用于命名，例：function、const。1、有效符合（大小写字母、数字、下划线、$）【4】JavaScript引入方式。4、尽量使用有意义的单词。【20】switch语句。【22】while循环。【12】数据类型转换。
复制链接

扫一扫