前端技术——8——前端技术总结补疑

最新推荐文章于 2024-08-27 07:20:04 发布

kaoa000

最新推荐文章于 2024-08-27 07:20:04 发布

阅读量934

点赞数 1

分类专栏：网页前台技术文章标签：前端 javascript

本文链接：https://blog.csdn.net/kaoa000/article/details/123479952

版权

网页前台技术专栏收录该内容

24 篇文章 1 订阅

订阅专栏

HTML、CSS、JS以及JQuery总结：

现在的HTML主要是实现内容的呈现，CSS是对内容进行布局和装饰，JS以及jQuery是对内容的操作，即实现内容的动态改变。

前后端的交互，现在学到的主要是HTML的form表单：

<form action="url" method="GET | POST" enctype="multipart/form-data">
<input type="file" name="f"> //如果有file类型字段，form标签中要有enctype="multipart/form-data"
<input type="submit">
</form>

能够向后台传递个字段主要有：input标签 type=“text、radio、checkbox、file、hidden、password”等，select标签，textarea标签，这几个标签必须设置name属性，name的值就是设置传递数据的key，标签的value是传递的数据的值，后台接收的是字典，key就是前端标签的name值，value就是前端标签的value值。

CSS主要的是float：

清除浮动——：after的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: rosybrown;
        }
        .container .item{
            width: 180px;
            height: 150px;
            background-color: #336699;
            border: 1px solid red;
        }
        .clearfix:after{
            content: "ooo"; /*//增加的内容，在页面上显示，但不能选定*/
            display: block; /*以块级标签显示*/
            clear: both;  /*清除浮动，撑起外层div*/
            visibility: hidden; /*不想显示content增加的内容，但是占据位置，display：none则是不显示内容，也不占据位置*/
            height: 0; /*这样浏览器上外观显示就没有ooo这个内容，也不占位置了，但在文档流中还有的*/
        }
        /*//.container:after 是在container标签内部的沉底部位增加内容*/
        /*以后只要在对应的标签中增加class=“clearfix”就能撑起这个标签，好处是一直在标签的最底部增加，即使是动态增加子标签*/
    </style>
</head>
<body>
<div class="container clearfix">
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
<!--    <div style="clear: both"></div> /* 以前的做法，在.container内部增加一个div，清除浮动，撑起container*/-->
</div>
</body>
</html>

1、已知外层高度，内元素浮动时，外层按照已知已设置的高度被撑开

2、未知外层高度
-- 原来做法：在内元素沉底位置增加<div style="clear:both";> </div>
-- 推荐做法：写一个样式，如上的：
.clearfix:after{
content: "ooo";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
然后在需要的标签上增加class为clearfix就可以。

hover的应用：

.c1{
background-color:red;
}
.c1:hover{
background-color:pink;
}

以上样式，当鼠标放在.c1标签上时，背景色变为pink；鼠标移出标签，背景色变为red。

.c1:hover .c2{
background-color:blue;
}

以上样式，是当鼠标放在c1上时，c2的样式改变。

实现一个鼠标进入和离开时改变的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "ooo";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .container{
            background-color: red;
        }
        .container .item{
            width: 180px;
            height: 150px;
            background-color: #336699;
            border: 1px solid red;
            overflow: hidden;
            position: relative;//加上这一条，是为了给遮罩层定位用的

        }
        .left{
            float: left;
        }

        .container .item:hover{  /*当鼠标放在item标签上时，item自身改变*/
            border: 1px solid yellow;
        }
        .container .item .text {
            display: none;
        }
        .container .item:hover .text{
            display: block;
        }/*当鼠标选中item时，item下的text标签发生改变*/
    </style>
</head>
<body>
<div class="container clearfix">
    <div class="item left">
        <div class="bg">
            <img src="1.jpg" style="height: 150px;width: 180px">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top:0;bottom: 0;background-color: deeppink;opacity: 0.4;"></div>
            //上面的div为遮罩层，其定位，需要一个position:relative
            <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: yellow">内容介绍</div>
            //上面的div为遮罩层上的文字层，其定位，也需要一个position:relative
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img src="1.jpg" style="height: 150px;width: 180px">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top:0;bottom: 0;background-color: deeppink;opacity: 0.4;"></div>
            //上面的div定位，需要一个position:relative
            <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: yellow">内容介绍</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img src="1.jpg" style="height: 150px;width: 180px">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top:0;bottom: 0;background-color: deeppink;opacity: 0.4;"></div>
            //上面的div定位，需要一个position:relative
            <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: yellow">内容介绍</div>
        </div>
    </div>
</div>
</body>
</html>

主要应用了：hover .class

另一个应用：类似下拉菜单栏的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #336699;
            color: white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            align-content: center;
            margin-left: 10px;
        }
        .pg-header .user{
            padding: 0 40px;
            height: 48px;
            position: relative;
        }
        .pg-header .user:hover{
            background-color: palegoldenrod;
        }

        .pg-header .user .au img{
            width: 40px;
            height: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg-header .user .more{
            position: absolute;
            width: 150px;
            top: 48px;
            right: 16px;
            border: 1px solid red;
            background-color: #b4b4b4;
            display: none;
            z-index: 90;
        }
        .pg-header .user .more a{
            display: block;
        }
        .pg-header .user:hover .more{
            display: block;
        }
        .pg-body .body-menu{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 0;
            width: 200px;
            border: 1px solid forestgreen;
        }
        .pg-body .body-content{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 210px;
            right: 0;
            border: 1px solid forestgreen;
            overflow: auto;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">后台管理页面布局演示</div>
    <div class="user right">
        <a class="au">
            <img src="1.jpg">
        </a>
        <div class="more">
            <a>我的信息</a>
            <a>注销</a>
            <a>更多信息</a>
        </div>
    </div>
</div>
<div class="pg-body">
    <div class="body-menu"></div>
    <div class="body-content"></div>
</div>
</body>
</html>

JavaScript总结补充：

作用域和作用域链：

Java/C#中，代码块作为作用域，Python中以函数作为作用域。

而JavaScript中，以函数作为作用域；函数在被调用之前，作用域链已经存在。

声明提前：

function func(){
console.log(ox);
var ox = ' '
var ox = ' '
}
func()

jQuery：找元素（直接，间接）；操作（属性、增加、删除、修改。。。）

事件绑定方式：

DOM下绑定事件：

1）、<p id="p1" οnclick="func1(this);">hello p</p>
2）、var ele=document.getElementById("p1");
ele.οnclick=function(){alert (this.innerHTML);}

jQuery下绑定事件：

1）、$("p").click（function(){$(this).css("color","red");}）

$(document).ready(function(){ } //当js代码放在HTNL文档开头时，使用这个格式等待HTML加载完成在执行代码，就不会出现元素找不到的情况。

简写方式：$(function(){ })

事件相对于DOM，将前面的on去掉

2）、$("p").bind("click",function(){}) //不推荐使用了

3）、$("P").on("click","li",function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>
<input type="button" value="+" onclick="add();">
<p>pppppppppppppppp</p>
<script src="jquery-3.6.0.js"></script>
<script>
    function add() {
        $("ul").append("<li>555555</li>");
    }
    // $("ul li").click(function () {
    //     alert(456);
    // })
    // //上面的绑定事件的方式，为直接使用事件click（），对动态添加的标签无法绑定
    $("ul").on("click","li",function () {
        alert(666);
    })
    //上面的绑定事件方式，为使用on方式，动态添加的元素也能生效。
    function myHandler(event) {
        alert(event.data.foo);
    }
    $("p").on("click",{foo:"bar"},myHandler);
    //上面标签绑定事件，传递一个字典作为参数，在事件函数中，定义event参数，通过event来获取这个参数

</script>
</body>
</html>

on方式的绑定，叫做事件委托，将绑定到li上的事件，委托给ul。on有四个参数。

面板拖动示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute">
    <div id="title" style="background-color: black;height: 40px;color: white">
        标题
    </div>
    <div style="height: 300px;">
        内容
    </div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
    $("#title").mouseover(function () {
        $(this).css("cursor","move").mousedown(function (event) {
            var start_x = event.screenX;
            var start_y = event.screenY;
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).on("mousemove",function (event2) {
                var new_x = event2.screenX;
                var new_y = event2.screenY;

                var new_parent_x = parent_left + new_x - start_x;
                var new_parent_y = parent_top + new_y -start_y;

                $(this).parent().css("left",new_parent_x+"px");
                $(this).parent().css("top",new_parent_y+"px");
            }).mouseup(function () {
                $(this).off("mousemove");

            });
        });
    });

</script>
</body>
</html>

鼠标按住标题栏拖动

动画显示隐藏示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id="toggle" type="button" value="切换">
<script src="jquery-3.6.0.js"></script>
<script>
    $("#show").click(function () {
        $("p").show(2000); 
    })//显示，有一个慢动作的拉幕效果
    $("#hide").click(function () {
        $("p").hide(2000);
    })//隐藏，有一个慢动作的收幕效果
    $("#toggle").click(function () {
        $("p").toggle(5000);
    })//实现上述显示和隐藏功能，当前是显示的，则隐藏，当前是隐藏的则显示
</script>
</body>
</html>

淡入淡出动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1" style="display: none;width: 200px;height: 200px;background-color: forestgreen;"></div>
<input id="In" type="button" value="fadeIn">
<input id="Out" type="button" value="fadeOut">
<input id="Toggle" type="button" value="fadeToggle">
<input id="To" type="button" value="fadeTo">
<script src="jquery-3.6.0.js"></script>
<script>
    $("#In").click(function () {
        $("div").fadeIn(2000);
    })
    $("#Out").click(function () {
        $("div").fadeOut(2000);
    })
    $("#Toggle").click(function () {
        $("div").fadeToggle(2000);
    })
    $("#To").click(function () {
        $("div").fadeTo(2000,0.3);
    })//最后出来的背景透明度为0.3
</script>
</body>
</html>

滑动动画：slideDown（）、slideUp（）、slideToggle（）

回调函数：

$("#show").click(function () {
$("p").show(2000，function（）{ 。。。 });
})

当show方法2秒完成后，即show方法完成了动作，然后调用函数，这里的function就是回调函数，即定义的动作或事件完成后，再调用的函数。

jQuery扩展：使用extend()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello pppp</p>
<script src="jquery-3.6.0.js"></script>
<script>
    $.extend({
        getmax:function (a,b) {
            return a>b ? a:b;
        }
    });//直接在jQuery上扩展，调用时是$加上点调用
    alert($.getmax(5,6));

    $.fn.extend({
        print:function () {
            alert($(this).html());
        }
    });//这种扩展，调用时必须是一个标签
    $("p").print();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var f = function (a) {
        alert(a);
    };
    f(123);
    //上下等同
    (function (a) {
        alert(a);
    })(123);
//将扩展方法放在自执行函数中，属于私有域，避免重名变量冲突
    (function () {
        $.fn.extend({
            print:function(){
                console.log($(this).html());
            };
        });
    })();

</script>
</body>
</html>