前端三剑客简介

news2025/1/11 0:06:52

文章目录

    • css的导入方式
    • CSS选择器
  • Javascript
    • Javascript的引入方式
      • 输出语句
      • 变量
      • 数据类型
      • javascript对象
      • String对象
    • BOM对象
    • DOM对象

W3C标准:网页主要由三部分组成

  • 结构:html
  • 表现:css,层叠样式表
  • 行为:JavaScript

css的导入方式

  • div标签称为选择器,在div中各种属性来进行选择
  • css导入html有三种方式:
    1,内联样式:在div标签中使用style属性
    2,内部样式:定义《style》标签,在标签内部定义css样式
    3,外部样式:定义《link》标签,来引入外部的css文件

    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <!--表签样式-->
    <div style="color: red">hello css</div>

    <!--外部引入模式-->
    <span>hello css</span>
    
    <!--导入css文件-->
    <link rel="stylesheet" href="......">

CSS选择器

  • 选择器是选取需要设置的元素(标签)
  • 常用的有元素选择器,id选择器,类选择器

Javascript

  • JavaScript是一门用来控制网页行为的,用来实现网页交互的语言。前面学习的html和css展现的都是静态的页面效果
  • JavaScript是一门跨平台的,面向对象的脚本语言(不需要编译,直接解释运行)。

Javascript的引入方式

  • 内部脚本:将JS代码定义在HTML页面中
    使用《script》标签
  <!--使用js来做信息弹出效果,做警告框,位置没有要求-->
    <script>
        alert("hello js")
    </script>

  • 外部脚本:将JS代码定义在外部JS文件中,然后引到HTML页面中

输出语句

 <!--使用js来做信息弹出效果,做警告框,位置没有要求-->
    <script>
        /*输出语句*/
        window.alert("hello js")   /*写入警告框*/
        document.write("你好啊")  /*写入html输出*/
        console.log("ninghao")    /*写入浏览器控制台*/

    </script>

变量

  • js中使用var关键字(varable)来声明变量,JavaScript是一门弱类型的语言,变量可以存放不同类型的值
     var a = 20;
        a = '周周';
        alert(a)

在这里插入图片描述
var关键字定义的变量的是全局变量,可以全局使用。可以重复定义变量

数据类型

JavaScript中分为:原始类型和引用类型
5种原始类型:

  • number:数字
  • string:字符、字符串
  • boolean:布尔
  • null:空对象
  • undefined:当声明的变量未初始化时,该变量的默认值是undefined
    使用typeof运算符可以获取数据类型
var age = 20;
alert(typeof age)

在这里插入图片描述

javascript对象

  • 数组对象:Array
  • 字符串对象:String
  • 还有一些例如:Boolean、Math、Date、Number、等等

Array对象的定义

    /*定义数组对象*/
    var arr = new Array(1,2,3);
    var arr = [1,2,3,4]
    

索引也是从0开始的,但是JavaScript中的数组相当于Java中的集合,长度和类型是可变的
数组的方法:

  • push:添加元素
  • splice:删除元素

String对象

   /*String对象定义*/
    var str = new String("hello");
    var str = "hello";
    var str = "你好";

常用的方法:trim(去除前后的空格 )、charAt()(返回指定位置的字符)、indexOf()(检索字符串)

  • 自定义对象
    使用{}来对对象添加属性和函数(使用function{}来定义)

BOM对象

  • 指的是将浏览器的各个组成部分封装成对象,通常有:
  • Windows:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象

对于windows对象来说,有如下的方法
在这里插入图片描述

 let result = confirm("确认删除吗?");
    if (result){
        //删除逻辑
    }else {
        //非删除逻辑
    }


/*
    * setTimeout(function,毫秒值):在一定的时间间隔后执行一个function,只执行一次
    * setInterval(function,毫秒值):在一定时间间隔后执行一个function,循环执行
    * */

在这里插入图片描述
History对象

  • History:历史记录,常用的方法有back()、forward()。表示加载类表中前一个url,加载列表中下一个url

Location对象

  • 地址栏对象,使用windows.location获取,
  • 属性有href,设置或者返回完整的URL

DOM对象

文档对象模型,将标记语言的各个组成部分封装成为对象,通过DOM就可以对HTML进行操作了,可以改变HTML元素的内容,改变HTML元素的样式(css),对HTML DOM
事件做出反应

  • Document:整个文档对象
  • Element:元素对象,
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象
    在这里插入图片描述

事件监听
对于一些如:按钮被点击、鼠标移动到元素之上背景颜色改变、按下键盘按键等等,这些事件都可以被侦测到
对于事件绑定:

  • 通过html标签中的事件属性进行绑定

  • 通过DOM元素属性绑定

表单验证
对于一些要提交的表单数据,会对于数据进行一个验证。比如:在输入手机号时,会验证手机号的位数:对于密码有条件限制
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/680326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VulnHub项目:Nagini

1、靶机地址&#xff1a; HarryPotter: Nagini ~ VulnHub 本篇为哈利波特死亡圣器系列的第二部&#xff0c;该靶机中存在3个魂器&#xff0c;依次找到它们&#xff0c;摧毁它们&#xff01; 2、渗透过程 首先收集靶机ip和确定攻击机ip&#xff0c;同时探测靶机开放端口 存在…

一个简单案例理解为什么在多线程的应用中要使用互斥锁

需求:使用10个线程,同时对一个值count进行加一操作,每个线程对count加100000次,最终使得count1000000 第一版代码:不加锁 ​​​lock.c #include<stdio.h> #include<pthread.h>#define THREAD_COUNT 10void *thread_callback(void *arg){int *pcount(int*)arg;in…

Unity例子——第一人称视角的角色控制器

本文是为了前文Unity四元组的举例示范&#xff0c;为了让读者更好地理解。 效果是实现一个可以由鼠标进行方向操作&#xff0c;键盘进行移动操作的任务。 此为效果视频&#xff1a; 1687597097844 下面进行教学&#xff1a; 一、搭建简单场景 新建一个场景&#xff0c;放置一…

SonarQube(sonar-scanner)+GitLab(gitlab-runner)实现提交代码自动扫描项目代码

安装gitlab-runner 插件挂载目录 mkdir -p /data/gitlab-runner/configdocker run -d --name gitlab-runner \ -v /data/gitlab-runner/config:/etc/gitlab-runner \ -v /var/run/docker.sock:/var/run/docker.sock \ --restart always \ --privilegedtrue \ gitlab/gitlab-r…

【数据库必备知识】索引和事务

数据库系列文章 1. 零基础带你快速上手SQL语言2. 玩转表及其数据3. 上手表设计 4. 索引和事务 目录 &#x1f4d6;前言 1. 索引 1.1 索引的概念 1.2 索引的作用 1.3 索引的使用场景 1.4 索引的使用 1.5 索引背后的数据结构(B树) 2. 事务 2.1 事务的概念 2.2 数据库使…

Centos7安装Python3.10

Centos7用yum安装的Python3版本比较旧&#xff0c;想要安装最新版本的Python3需要自己动手编译安装。下面就来讲讲安装步骤&#xff0c;主要分为这么几个步骤&#xff0c;依赖→下载→编译→配置。另外所有操作都是在root用户下进行。 依赖 编译Python源码需要依赖许多库&…

spring.cache 随笔0 集成设计

0. 最近感觉 “困意驱动睡眠” 也有他的意义 spring cache学习&#xff08;一&#xff09;&#xff1a;spring cache注解简单了解 Java Caching JSR107介绍 同样&#xff0c;本章也会简单的集成redisson作为缓存服务 1. 从我们自己写的javaConfig开始吧 Configuration // 这…

Java——文件操作

文件操作 1、File类概述2、File类的常用APIFile类的判断文件类型、获取文件信息功能创建文件、删除文件功能遍历文件夹文件搜索 3、字符集常见字符集字符集的编码、解码操作 4、IO流分类5、字节流的使用文件字节输入流文件字节输出流文件拷贝 6、字符类的使用文件字符输入流文件…

“前端已死”

一、一些迹象 逛社区&#xff0c;偶然看到了这张图片&#xff1a; 嗯……我眉头一皱&#xff0c;久久不语&#xff0c;心想&#xff0c;有这么夸张吗&#xff0c;假的吧&#xff1f; 突然想到&#xff0c;最近我在社区发了个前端招聘的信息&#xff0c;结果简历漫天纷飞&…

【C++】auto_ptr为何被唾弃?以及其他智能指针的学习

搭配异常可以让异常的代码更简洁 文章目录 智能指针 内存泄漏的危害 1.auto_ptr(非常不建议使用) 2.unique_ptr 3.shared_ptr 4.weak_ptr总结 智能指针 C中为什么会需要智能指针呢&#xff1f;下面我们看一下样例&#xff1a; int div() {int a, b;cin >&g…

图表制作办公首选--实用图表工具Echars

实用图表工具Echars 前言 由于工作的需要&#xff0c;在写材料的时候需要使用到柱状图、饼状图、折线图等等展示数据&#xff0c;可以使用PPT等办公软件构建出图表&#xff0c;在这里可以使用更加方便、更加美观的工具Echars。 Echars图表使用 Echars官网&#xff1a;Ecahr…

二叉平衡树之红黑树

目录 1.概念 2.性质 3.节点的定义 4.插入 1.按照二叉搜索树规则插入结点 2.调整颜色 1.uncle存在且为红色 2.uncle不存在或者为黑 cur为 3.根节点改为黑色 5.验证 6.比较 7.应用 1.概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存…

【计算机网络】计算机网络期末自测题(一)

目录 一、 填空题&#xff1a;(20 分&#xff0c;每空 1 分) 二、 选择题(20 分&#xff0c;每小题 1 分) 三、不定项选择题 (10 分&#xff0c;每小题 1 分) 四、名词解释 (15 分&#xff0c;每小题 3 分) 五、简答题 (25 分) 得分 一、 填空题&#xff1a;(20 分&#xff…

【C++】STL——string类详解

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f681; 个人主页&#xff1a;不 良 &#x1f525; 系列专栏&#xff1a;&#x1f6f8;C &#x1f6f9;Linux &#x1f4d5; 学习格言&#xff1a;博观而约取&#xff0…

混合策略改进的哈里斯鹰优化算法-附代码

混合策略改进的哈里斯鹰优化算法 文章目录 混合策略改进的哈里斯鹰优化算法1.哈里斯鹰优化算法2.改进哈里斯鹰优化算法2.1 初始化种群的改进2.1.1 初始种群多样化2.1.2 初始种群精英化 2.2 逃逸能量递减机制的改进2.4 拉普拉斯交叉算子策略 3.实验结果4.参考文献5.Matlab代码6.…

6.17 、Java初级:锁

1 同步锁 1.1 前言 经过前面多线程编程的学习,我们遇到了线程安全的相关问题,比如多线程售票情景下的超卖/重卖现象. 上节笔记点这里-进程与线程笔记 我们如何判断程序有没有可能出现线程安全问题,主要有以下三个条件: 在多线程程序中 有共享数据 多条语句操作共享数据 多…

移动web-渐变

渐变 使用场景&#xff1a;使用background-image属性实现渐变背景效果 代码&#xff1a;background-image: linear-gradient(参数1,参数2,参数3...); (默认的方位从上到下) 参数1 方位名词: to right, to left 角度deg: 直接写度数 参数2 颜色1 参数3 颜色2... 注意&#xff…

看完这篇 教你玩转渗透测试靶机vulnhub—Corrosion:1

Vulnhub靶机Corrosion:1渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;Vulnhub靶机漏洞详解&#xff1a;①&#xff1a;信息收集&#xff1a; Vulnhub靶机渗透总结&#xff1a; Vulnhub靶机介绍&#xff1a; vulnhub是个提…

canvas详解01-绘制基本图形

既然我们已经设置了 canvas 环境&#xff0c;我们可以深入了解如何在 canvas 上绘制。到本文的最后&#xff0c;你将学会如何绘制矩形&#xff0c;三角形&#xff0c;直线&#xff0c;圆弧和曲线&#xff0c;变得熟悉这些基本的形状。绘制物体到 Canvas 前&#xff0c;需掌握路…

软件工程——第5章总体设计知识点整理

本专栏是博主个人笔记&#xff0c;主要目的是利用碎片化的时间来记忆软工知识点&#xff0c;特此声明&#xff01; 文章目录 1.总体设计的基本目的&#xff1f; 2.总体设计的任务&#xff1f; 3.总体设计过程由哪两个阶段组成&#xff1f; 4.总体设计的步骤&#xff1f; 5…