• html、css、js和jQuery学习总结

    文章目录

    一. HTML学习总结

    常用标签：
    1．块级元素:占据一整行，其他内容换行显示。可以设置width , height ,比如:

    ,
    ,

    .
    2．行内元素:宽高由内容决定，剩下的区域可以显示其他元素。不支持设置width ,height.比如: , .
    3．块级行内元素:具有块级元素的特征，但是不换行。可以设置width， height ,比如: .

    我们可以通过添加样式改变标签：

    • dispLay: none; --隐藏标签。
    • display : bLock ; --设置为块级元素
    • display: inline; --设置为行内元素
    • display: inline-block;–设置为块级行内元素

    二、CSS学习总结

    css主要用于美化我们的前端界面，让我们的网页更好看。其中选择器是用来指定页面上我们需要样式化的html标签，还有盒子模型，定位，浮动等重点
    css选择器

    • 简单选择器（根据名称、id、类来选取元素）
    • 组合器选择器（根据它们之间的特定关系来选取元素）
    • 伪类选择器（根据特定状态选取元素）
    • 伪元素选择器（选取元素的一部分并设置其样式）
    • 属性选择器（根据属性或属性值来选取元素）

    盒子模型
    在这里插入图片描述
    margin: 外边距
    border: 边框
    padding：内边距
    content：最中间，内容

    css定位：
    是页面中经常用到的布局方式
    position:定位 top left right bottom 分别设置位置
    1.相对定位：relative,参考自己本身原来的位置
    2.绝对定位: absolute,参考的是包裹自己有相对定位的父元素
    3.固定定位: fixed

    css浮动
    使得指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上
    float:left ;(左浮动)
    float:right;(右浮动)
    clear:both；清除浮动

    三、js学习总结

    JavaScript 代码必须位于 标签之间，js主要用来实现页面交互的一些操作逻辑，让我们页面的功能更加丰富。其中我感觉文档对象模型dom （Document Object Model）重要些
    dom:
    查找html标签：

    //id查找
document.getElementById("intro");
//标签名查找
document.getElementsByTagName("p");
//类名查找
document.getElementsByClassName("intro")

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    改变html标签样式：

    document.getElementById(id).style.property=新样式

    • 1

    事件：
    有点击事件onclik、onmouseover 、onmouseout 事件等。onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

    事件冒泡： 当子节点的某个事件被触发，那么其所有包裹元素的同类事件会被触发

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            border: 1px solid black;
            padding: 20px;
        }
    style>
head>
<body>
    <div>
        3
        <div>
            2
            <div>
                1
            div>
        div>
    div>
    <script>

        let divs = document.getElementsByTagName("div");
        divs[0].onclick = function(){
            console.log("3被触发点击");
        }
        divs[1].onclick = function(){
            console.log("2被触发点击");
        }
        divs[2].onclick = function(){
            // 取消冒泡
            //event.cancelBubble = true;
            console.log("1被触发点击");
        }
        
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    像我们点击1的时候，会触发点击事件，但根据事件冒泡，同时也触发了其父元素2,3的点击事件。我们有时候根据需求就需要取消事件冒泡event.cancelBubble = true;
    divs[2].onclick = function(){ event.cancelBubble = true; console.log("1被触发点击"); }
    我们在点击1时就不会触发其包裹元素的同类事件

    在这里插入图片描述

    四、jQuery学习总结

    JavaScript是一种脚本语言，而jquery是一个JavaScript函数库，JavaScript函数的集合；jquery基于JavaScript语言，封装JavaScript的原生方法，提供了简便的函数接口，简化了JS的操作。像选择器，很多操作都变得简洁些

    我们在用jquery时，需要先引入才能使用，没有的可以去官网下载，我们日常使用时可以根据它的 API 查询我们不记得相关操作

    <script src="../js/node_modules/jquery/dist/jquery.js">script>

    • 1

    js对象和jQuery对象之间的转化：

    //Js对象转化为Jquery对象
let jquery对象=$(js对象)

//Jquery对象转化为Js对象
jquery对象[0]/jquery对象.get(0)

    • 1
    • 2
    • 3
    • 4
    • 5

  • 相关阅读:
    2022牛客多校第二场解题报告
    HTML 颜色名：网页设计的调色板
    四个二分万能模板汇总（精简版）
    实现高效消息传递：使用RabbitMQ构建可复用的企业级消息系统
    vue3前端excel导出；组件表格，自定义表格导出；Vue3 + xlsx + xlsx-style
    【设计模式】JAVA Design Patterns——Arrange/Act/Assert（安排/执行/断言模式）
    北方直播卖货搞钱“第一城“,竟然是临沂,200万人发家快手电商
    程序员健康防猝指南6：[科学]运动
    网易游戏学院系列——书籍《游戏设计》【笔记】
    包管理工具cnpm的安装和使用
  • 原文地址：https://blog.csdn.net/qq_55691662/article/details/126490403