华清远见-重庆中心-前端技术总结

     <style>
         .box1 {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            overflow: hidden;
            margin-top: 100px;
        }
        .box2 {
            width: 200px;
            height: 600px;
            background-color: rgb(255, 210, 127);
            margin-top: 200px;
        }
    </style>
 
 
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>

6、浮动

float 浮动

- 作用：让元素在父元素中，向左或者向右移动

- 属性值

none 元素不浮动 (默认)
left 左浮动
right 右浮动

- 特点

1.设置了浮动的元素会脱离文档流，它后面没有设置浮动的元素会移上去占掉它的位置，表现为重叠
2.设置浮动的元素都在同一层级，仍然按HTML中的顺序排列，后面的不会超过前面的，现在水平排列
3.如果浮动的元素前面的元素，没有设置浮动，这个元素不会越过前面不浮动的元素，而是在原本位置左右移动
4.浮动元素不会盖住文字，文字会自动环绕浮动元

- 脱离了文档流的元素的特点

默认的宽高是内容本身的宽高
元素会水平排列
设置width和height有效

总之，变成行内块元素了！！！

clear 清除浮动

-left -right -both

 /* 
        这段代码可以解决高度坍塌问题和外边距折叠问题
 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            clear: both;
            display: table;
        }

7、定位 position

- 作用：设置当前元素在页面中的位置

- 属性值

absolute 绝对定位

1.设置相对定位的元素，会提升一个层级，可能覆盖其他的元素

2.设置相对定位的元素，并没有脱离文档流，它下边的元素不会移上去占它的位置

这个元素的显示模式没有发生变化，没有变成行内块

3.开启相对定位的元素是相对谁定位呢？

相对于当前元素原本在文档流中的位置来定位的

relative 相对定位

1.设置了绝对定位的元素会脱离文档流，它的显示模式变成行内块元素

2.设置绝对定位会提升元素的层级，会覆盖文档流中的其他元素

3.绝对定位是参照什么定位呢？

相对于离它最近的开启了定位的祖先元素来定位

如果没有开启了定位的祖先元素，则相对于html定位

fixed 固定定位

1.固定定位是相对于浏览器视窗定位

2.设置了固定定位的元素会固定在设置的位置上，页面滚动时，它也不移动

元素的层级 z-index

属性值是一个整数，值越大，层级越高，能够覆盖其他元素

注意：1.设置了定位的元素层级比设置z-index最高级的还有高

2.无论父元素设置层级多高，都不会覆盖子元素

三、JavaScript

JavaScript简称为JS，是由网景(netScape)推出的脚本语言

是一门轻量级，弱类型，面向对象的解释型脚本语言

弱类型没有数据类型限制，声明变量时不需要指定数据类型

解释型不需要预先编译，边解释边运行，浏览器就是一个解释器

脚本（Script）一系列的指令

JS的作用

HTML用于定义页面中的内容

CSS用于设置内容的样式

JS用来控制HTML元素的行为

在页面中动态嵌入HTML元素

可操作浏览器

可以和用户数据交互

JS的组成

1.ECMAScript 语法

简称ES，是JS的语法规范

比如数据类型，流程控制语句等

2.DOM (Document Object Model) 文档对象模型

这里的文档指HTML页面

可以通过DOM控制页面中的元素

3.BOM (Browser Object Model) 浏览器对象模型

可以通过它控制浏览器的行为

1.输入输出语句

    <script>
        // 弹出警告框
        alert("Hello JS")
        // 在控制台打印输出
        console.log("Hello JS")
        // 在HTML页面中显示输出
        document.write("Hello JS")
        // 弹出输入框
        prompt("请输入你的名字：")
    </script>

2.数据类型

判断变量的数据类型 typeof 变量名

    <script>
        let a = 1
        let b = false //boolean
        let c = '4e-2'

        console.log(a + 'hello')//字符串拼接
        console.log(a + 3)
        console.log(typeof a)//number
        console.log(Number(b))//0
        console.log(String(b))//false
        console.log(typeof null)//Object NULL空指针-》对象
        console.log(typeof undefined)//undefined
        console.log(Number('6h1'))//NaN
        console.log(a / 0)//1/0= Infinity 
        console.log(+c)//+'4e-2'   4e-2科学计数法的数字   4 * 10的负二次方 4*0.01 = 0.04
        console.log(a + '')//字符串拼接 隐式转换为字符串
    </script>

基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
引用数据类型：对象（Object）、数组（Array）、函数（Function）。

String 字符串

- JS中用"" 或者'' 表示字符串

- 如果要嵌套使用引号，外双内单或者外单内双

- 转义字符 \

\" 转义双引号

\\ 转义单斜杠

\n 换行符

-模板字符串 `${变量名}`

- 支持嵌入变量

-支持换行

-String 转换为其他类型

- 转换为布尔 Boolean()

空字符串'' -> false 其他的为true

- 转换为数值 Number()

"111" -> 111 不是数值类型的 -》 NaN

在数字类型的字符串前面添加正号(+)，可以隐式地将这个字符串转换为数字

+"数字" -》数字

Number 数值

- 整数、小数

- 特殊值 NaN (Not a Number) 非法数

Infinity 无限大的数字无穷

-Number转换为其他类型

- 转换为布尔 Boolean(变量)

0 -》false 非0数值 -》 true

- 转换为字符串 String()

3.运算符

++x	自增运算符	将 x 加 1，然后返回 x 的值
x++	自增运算符	返回 x 的值，然后再将 x 加 1

==	等于	x == y 表示如果 x 等于 y，则为真
===	全等	x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真

运算符优先级顺序：

1.()

2.单目运算符！ ++ --

3.算术运算符 * / % + -

4.关系运算符 > < >= <= == !== === !==

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

4.循环

while 和 do - while

先判断再运行：

while (条件表达式) {
// 要执行的代码
}

先运行后判断：

do {
// 需要执行的代码
} while (条件表达式);

1.do while 循环的末尾需要使用分号;进行结尾

2. do while 能保证循环体至少执行一次

for-in遍历

for(index in list){

list[index] // 要执行的代码

}

1.在for循环中用let声明的变量，只能在for循环内部访问，在for循环外面访问会报错，未定义

2.在for循环中用var声明的变量，在for循环内部和外部都能访问

break 和 continue

break 语句用来跳出整个循环，执行循环后面的代码；

continue 语句用来跳过当次循环，继续执行下次循环。

冒泡排序

    <script>        
        function sort(arr) {
            for (let i = 0; i < arr.length; i++) {//外层循环决定排序的次数
                for (let j = 0; j < arr.length - 1 - i; j++) {
                    //-i:每一轮结束后都拍好了i个数，不需要再参与比较
                    //如果后一个数小于前一个就交换两者的位置
                    if (arr[j] > arr[j + 1]) {
                        let t = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = t;
                    }
                }
                console.log("第" + i + "轮:" + arr);
            }
        }
        let arr = [9, 1, 3, 2, 8, 0, 5, 7, 6, 4];
        sort(arr)
        console.log(arr);
    </script>

5.js内置函数

1.Array 数组

是一种复合数据类型，在数组中可以存储多个不同类型的数据

创建数组的方式：

1.通过new关键字

var 数组名 = new Array(数组大小)

2.通过[]创建

var 数组名 = []//创建空数组

3.声明的同时赋值

var 数组名 = new Array(元素1, 元素2,...);

var 数组名 = [元素1, 元素2,...]

注意：1.赋值时超出索引，会自动扩容

2. 数组名.length 这个属性是可以更改值的，如果我们给它赋值，数组的长度会发生改变

var list = new Array(5)

list[0] = 12;

list[2] = "hello";

list[3] = true;

list[4] = undefined;

console.log(list);//[12, 空, 'hello', true, undefined]

list[6] = 111;

console.log(list[6]);//如果赋值时超出索引，会自动扩容

var list3 = ["hello", 222, 333]

list3.length = 2//改变了数组的长度

console.log(list3); //"hello",222

console.log("list3的长度：", list3.length); //2

数组的常用方法

push 向数组的末尾添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组

pop 删除并返回数组的最后一个成员

返回值是被删除的这个成员

操作会改变原数组

unshift 向数组的开头添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组

shift 删除并返回数组的第一个成员

返回值是被删除的这个成员

操作会改变原数组

splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面

第一个参数：删除成员的起始位置

第二个参数：删除成员的个数

第三个参数：用于替换被删除成员的新数据，该参数可以省略

返回值：被删除的成员数组

会改变原数组

更多详细：

Array - JavaScript | MDN (mozilla.org)

2.Math

    <script>
        console.log(Math.PI);//3.141592653589793
        console.log(Math.E);//2.718281828459045
        //求绝对值
        console.log(Math.abs(-5));//5
        //求x的y次幂
        console.log(Math.pow(2, 3));//2的三次方，8
        //求两个数之间的最大值
        console.log(Math.max(3, 5));
        //向上取整
        console.log(Math.ceil(3.1));//4
        //向下取整
        console.log(Math.floor(3.1));//3
        //四舍五入
        console.log(Math.round(3.6));//4
        //求平方根
        console.log(Math.sqrt(4));//4的平方根
        //求立方根
        console.log(Math.cbrt(64));//4
        //生成[0,1)范围内的随机数
        console.log(Math.random());
        //生成[0,100)范围内的随机数
        console.log(Math.random() * 100);
        //生成[3,10)范围内的随机数
        console.log(Math.random() * 7 + 3);
        //生成[a,b)范围内的随机数
        // Math.random() *Math.abs(b-a) + Math.min(a,b)
    </script>

1.对象

1.使用{}直接创建

let 对象名 = {

属性名：属性值;

方法名() {

//代码块

}

}

属性和方法的调用

对象名.属性名

对象名.方法名()

在方法中可以通过this关键字访问当前对象的属性，this指向的是调用当前方法的对象

2.使用new Object创建

添加属性

对象名.属性名 = 属性值

属性的其他写法

1.带有特殊字符或空格的属性名，要用["属性名"]设置和读取

2.属性可以是任何类型的数据，比如数组，对象

对象序列化 将对象转换为一个字符串，这个字符串就称为JSON字符串

注意：JSON字符串的属性名必须有双引号引起来

JSON.stringify(obj)将obj对象转换为json字符串

JSON.parse(json) 将json字符串转换为对象

2.函数

函数声明方法：

function 函数名(参数列表){

//代码块

}

调用函数：函数名(实参列表)

返回值：

函数返回的结果成为返回值，函数默认返回undefined
可以通过return自己定义函数的返回值
可以返回任何类型的数据：字符串，数字，函数，对象
return还会终止函数内后续代码块的执行

2.函数的表达式

let 变量名 = function(形参列表){}

调用函数：变量名(实参列表)

3.箭头函数

(形参列表) => {

//代码块

}

只有一个形参的时候可以省略小括号

4.自调用函数

let res = ((x, y) => x + y)(2, 3)//调用函数了

res = (

function (x, y) {

return x + y;

}

)(3, 5)

console.log(res);//函数返回的结果：5

三 - 一 DOM和BOM

DOM

DOM Document Object Model 文档对象模型

- Document 文档，这里指整个网页html

- Object DOM将整个网页都抽象转换为了对象

div有div对象，input有input对象，属性、文本都有对应的对象

对他们进行操作的时候，就是通过他们的对象来完成的

- Model 模型是指文档中个对象之间的关系比如父子关系，兄弟关系

DOM树

:nth-of-type(1)
找到父元素下,所有同类型标签中的第一个
同类型标签 p标签\div标签\em标签\ul标签他们之间分别是不同类型
所有的p标签是一个类型,所有的div标签是同一个类型....
排序: 在同类型标签中排序, 它占第一位
先将父元素中的标签分类, 再将每个类型的标签都排序,然后分别获取同类型标签中的第一个

:nth-child(1)
找到父元素下, 所有子元素中的第一位(不分类)
排序: 将所有子元素都进行排序

.box:nth-of-type(1)
.box 和 :nth-of-type(1) 的交集
同时满足下列条件,才会选中元素
1.标签带有.box类名
2.这个标签必须是其父元素下,同类型标签中第一个元素

body div 中间有空格后代选择器
会选中 body下所有div 包括儿子,孙子...
一般用于缩小选择范围

body :nth-child(1)
会选中body下第一个子元素

div.box.test 中间没有空格交集选择器
必须同时满足几个选择器的条件

        .box.test {
            width: 200px;
            height: 200px;
            background-color: rgb(218, 215, 250);
        }

        /* 没有空格 =》交集 同时满足下面3个条件
            1.标签有.box这个类
            2.标签有.test这个类
            3.对应标签在它的同类标签中是第一个
        */

/*

常用document对象调用各种方法来获取页面中的节点对象

querySelector("选择器名称")

document.querySelector("选择器")

根据选择器去整个页面获取第一个符合条件的元素节点对象

注意：返回第一个元素

*/

/*

获取和修改元素中的文本

获取: 元素对象.innerHTML

修改: 元素对象.innerHTML = '新的文本内容'

innerHTML允许直接插入HTML标签, 可用于添加新的标签

(有xss注入风险,被篡改插入非法的html代码)

textContent也可以获取和修改文本,但是对于有标签的,会把标原样输出

*/

/*

querySelectorAll('选择器名')

根据选择器去获取整个页面中符合条件的所有元素

返回一个符合条件的元素数组

可以通过索引访问每一个数组元素，对里面的节点对象进行修改

数组名[索引]

*/

定时器

在JS中定时器就是一种函数，这种函数可以设置在指定时间后触发一段代码

1.setTimeout(要执行的函数,延迟的时长(单位：ms));

返回值：计时器对应的编号id

停止定时器

clearTimeout(timerId)

2.循环计时器

setInterval(要执行的函数,每次循环间隔的时间)

停止计时器

clearInterval(计时器编号)

    <script>
        //以下下练习都要求返回jquery对象

        //得到id为test的标签下，所有后代元素
        console.log($('#test *'));
       
        //得到id为test的标签下，含有p2的后代元素
        console.log($('#test .p2'));
        
        //得到id为test的标签下，所有p标签直接子元素(单指第一层)
        console.log($('#test>p'));
        
        //得到id为p1标签的下一个相邻兄弟(不管类型)
        console.log($('#p1+*'));
        
        //得到id为p1标签的所有类型为div的同级兄弟
        console.log($('#p1~div'));
        
    </script>

BOM

BOM 浏览器对象模型

- BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作

- 常见的BOM对象

window 代表浏览器窗口，是全局对象

navigator 代表浏览器对象，可用于识别浏览器

Location 浏览器的地址栏信息

History 浏览器的历史纪录（控制浏览器的前进和后退）

screen 屏幕的信息

- BOM对象对象都是作为window对象的属性保存的，可以直接在js中访问

window的相关属性和方法，调用时可以省略window这个词

三 - 二 jQuery

参考文档 https://www.jquery123.com/

jquery的引入

在使用jQuery前，必须先引入jQuery的js文件

压缩版 min.js 通常在开发中使用

未压缩版 .js

引入的js文件必须在自定义的脚本文件之前

引入jQuery库，就是向这个网页添加了一个函数jQuery/$

$是jQuery的核心函数，jQuery的所有功能都是通过这个函数进行的

通过$获取jQuery对象 $('选择器名称')

jQuery对象实际上是个数组（类似数组，可以用索引访问里面的数组元素）

这个数组元素就是DOM对象

访问方式

1.索引

2.get方法

dom对象转换为jQuery对象

将dom对象作为参数出入$函数中

$(domObj)

    <script>
        //js中获取dom对象
        let boxObj = document.getElementsByClassName('box')[0]
        //通过$获取jQuery对象
        let $boxs = $('.box')
        console.log($boxs);//jQuery对象 》 数组（类似数组，可以用索引访问里面的数组元素）

        //获取jQuery对象中的DOM对象
        console.log($boxs[0]);
        console.log($boxs[1]);

        //通过get方法获取dom对象
        console.log($boxs.get(0));
        //dom对象转换为jQuery对象
        let $box = $(boxObj)
        console.log($box)

        //eq(index)函数     
        console.log($boxs.eq(0));
    </script>

jquery设置样式

<script>
        let $boxs = $('div')
        //css函数读取样式       读取jQuery对象中的第一个dom元素的属性值
        console.log($boxs.css('width'));
        console.log($boxs.css('height'));
        //可以传入一个样式名数组
        console.log($boxs.css(['width', 'height']));

        //css函数设置样式       为jquery对象中的所有dom元素都设置上样式
        $boxs.css('background-color', 'orange')
        $boxs.css('background-color', function (index, value) {
            //index 当前数组成员的索引
            console.log('index', index);
            //value 当前数组成员对应的background-color的属性值
            console.log('value', value);
            //返回值 新的属性值
            return index % 2 === 0 ? 'green' : 'red';
        })
    </script>

jquery操作类

<body>
    <div class="box active"></div>
    <div class="box active box2"></div>

    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        /*
            当我们修改jQuery对象时，它会自动修改jQuery对象中所有元素
            这个现象称为jQuery的隐式迭代
        */
        let $boxs = $('.box')

        //添加类
        $boxs.addClass('box2')
        //删除类
        $boxs.removeClass('active')
        //开关类   有就删除，没有就添加
        $boxs.toggleClass('box3')
        //判断是否存在某个类
        $boxs.hasClass('box3')
        console.log($boxs.hasClass('box3'));
    </script>
</body>

jquery设置属性

<body>
    <div class="box active" my-box="hhh"></div>
    <div class="box active box2"></div>
    <input type="text" value="111" disabled>

    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        let $boxs = $('.box')
        //读取属性  读取jquery中的第一个元素的属性值
        console.log($boxs.attr('class'));
        //读取自定义属性 
        console.log($boxs.attr('my-box'));

        let $input = $('input')
        //设置属性
        $input.attr('value', '222')
        //js设置属性
        // $input[0].disabled = true //禁用
        // $input[0].disabled = false //可用
        // $input[0].setAttribute('disabled',false)

        //jQuery设置
        $input.attr('disabled', false)

        //删除属性
        $boxs.removeAttr('my-box')
    </script>
</body>

jquery事件绑定

jQuery对象绑定事件，直接调用事件名称对应的函数

参数就是事件处理函数

注意： jquery对象是一个dom元素集合，为jquery对象绑定事件时，会自动给里面的所有dom对象绑定上事件。不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件

    <script>

        //手动触发事件  调用事件函数
        $box.click()

        /*
            使用on函数绑定事件
                on('事件名称','事件处理函数')
        */
       //1.声明事件处理函数
        function click1(event){
            //event事件对象，它是在触发事件时，浏览器生成的事件对象
            console.log(event);
            console.log('click1');
        }
        //2.给jquery对象绑定事件
        $box.on('click',click1)

        /*
            使用off函数解绑事件
            
        */
        $box.off('click',click1)
        //不写第二个参数，会解绑事件对应的所有函数
        $box.off('click')

        /*
            使用one函数可以让绑定的事件只触发一次
        */
        $box.one('click',function(){
            console.log('one click');
        })

    </script>

jquery常用表单事件

//获取焦点 (输入框有光标）

$('input').focus(()=>{

// console.log('获取到焦点了');

})

//失去焦点

$('input').blur(()=>{

// console.log('失去焦点了');

})

jquery增删节点

//创建元素jquery对象

let $box = $(`<div class='box box1'></div>`)

console.log($box);

//获取body的jquery对象

let $body = $(document.body)

//向父元素内追加一个子元素谁要添加谁

// $body.append($box)//末尾添加

// $body.prepend($box)//头部添加

let $box1 = $(`<div class='box box1'></div>`)

//将子元素追加到父元素末尾

// $box.appendTo($body)//添加到末尾

// $box1.prependTo($body)//添加到开头

//body>.box:nth-child(2) 获取body下的第二个div 并且这个div有box类

let $box2 = $('body>.box:nth-child(2)')

//在一个元素的后面添加另一个元素

// $box2.after($box1)

//在一个元素前面添加

// $box2.before($box1)

//删除当前元素谁调用了remove()，谁就被删除了

$box2.remove()

jquery过滤选择器

//----子元素过滤器---//

seletor:nth-child(n)

1.找到当前元素的父元素下，第n个孩子

2.判断这个孩子是否匹配seletor选择器

如果匹配就选择它，应用样式，

如果不匹配就不选择它，这个伪类选择器失效（什么也没选中）

当前元素：所有匹配seletor选择器的元素

按照子元素在文档中出现的位置排序，从1开始

seletor：标签名、类名、id名、*

:nth-child(n) 等同于 *:nth-child(n)

//----索引过滤器---//

/*selector:eq(index)

在匹配的集合中选择索引值为index的元素，索引从0开始

匹配的集合：$('seletor')获取到的dom元素集合

这个jquery扩展出来的选择器，性能没有原生的css选择器好

推荐：eq()方法

同类的

:even 偶数索引 :odd 奇数索引

:gt(index) 大于index的索引 :lt(index) 小于index的索引

*/