当前位置： 首页 > news >正文

CSS及javascript

news 文章来源：https://blog.csdn.net/2301_80098154/article/details/136970189 2024/11/20 14:38:38

一、CSS简介

css是一门语言，用于控制网页的表现。

cascading style sheet:层叠样式表

二、css的导入方式

css代码与html代码的结合方式

（1）css导入html有三种方式：

1.内联样式：<div style="color:red">...</div>

2.内部样式：<style type="text/css"> div{}

3.外部样式：定义link标签，引入外部css文件

（2）css的选择器与属性

1.css选择器即选择需要设置样式的元素（标签）注意：将style写入<head>中。

元素选择器

id选择器

类选择器

谁选择的范围小，谁先生效。

2.属性

案例：

三、JavaScript简介

javascript是一门跨平台，面向对象的脚本语言（不用编译），可与网页交互。

javascript能改变html的内容。

JavaScript能改变图像的src属性值。

javascript能进行表单验证。

四、JavaScript引入方式

1.内部脚本：<script>标签可以放置于任何地方，数量也不受限制。但一般放置于<body>中。将JS代码定义在HTML中。alert（）==》弹出警告框

2.外部脚本：创文件，写alert（）

导入html中，<script src="..."></script>

五、JavaScript的基本语法

（1）书写语法：

区分大小写

分号写不写都无所谓，但一般情况下写

注释：//表示单行注释，/*...*/表示多行注释

大括号表示代码块

（2）输出语句：

使用window.alert("");写入警告框

使用document.write()写入HTML页面里输出

使用console.log()写入浏览器控制台

（3）变量

类似于全局变量，可重复定义。

用var关键字来声明变量，变量可以存储不同类型的值

let只在代码块中有效，不可重复声明。

（4）数据类型

原始：number，String，boolean，null，undefined

引用

使用typeof运算符可获取数据类型

（5）运算符

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：+=，-=，*=，/=，%=

关系运算符：>,<,>=,<=,!=,==(会类型转换），===（全等于，判断类型是否一样）

逻辑运算符：&&，||，！

三元运算符：条件表达式？true_value:false_value

(6)类型转换：

1.其他类型转为number

        String--》number

用parseInt（eg.alert(parseInt(str)))

string的字面值不是数字，则转换成NAN。

        boolean--》number

true转成1，false转成0.不能用parseInt

2.其他类型转为boolean

    number：0和NAN转成false

        其他数字转成true

    string：空字符串转成false

        其他则转成true

    null：false

    undefined：false

str！=null&&str.length>0        =str

(7)流程控制语句

if，switch，for（建议用let），while，do...while

（8）函数（方法）

funtion        名（参数1，参数2[可传任意个参数]）{

return ...;

}

直接调用名（）；

六、JavaScript对象

（1）Array（类似于java中的集合）

1. var 名=new Array（元素列表）；

2.var 名=[        ];

Array对象的属性：length：元素的个数

方法：push：添加

eg.名.push();

splice:删除元素

eg.名.splice(m,n);从m开始删，删n个元素

（2）String

1.var 名=new String（）；

2.var 名=“ ”；

属性：length，不再是Java中的方法了

方法：charAt（），Indexof（），trim（）--》去除字符串两端的空格

（3）自定义对象

var 名={

属性名：值，

属性名：值，

属性名：值...

属性名：function（）{

        }

}；

（4）BOM对象

Brouser object Model（浏览器对象模型）

JavaScript将浏览器的各个部分封装成对象。

1.window：窗口对象

方法：alert（）；

confirm（）；弹出确定，取消键，有返回值。

定时器：setTimeout（function(){}，毫秒值）只执行一次

setInterval() 循环执行

2.History：历史记录对象

history.方法（）

方法：back（）：前一个

forward（）:后一个

3.Location：地址栏对象

location.方法（）

属性：设置或返回完整的URL

（5）DOM（Document Object Model）文档对象模型

可对Html文档进行操作

Html DOM：针对html文档的标准模型

image：<img>

Button:<input type="button">

1.获取Element元素对象

使用document对象的方法来获取

        getElementById（）通过id属性来获取，返回一个Element对象

        getElementByName（）通过name属性来获取，返回一个对象数组

        getElementByclassName（）通过class属性来获取一个Element对象数组

        getElementBytagName（）通过标签名称，获取一个对象数组

Dom将img封装成对象，可以修改src属性值。

div：style：设置元素css的样式

        innerHtml：设置元素内容

元素.style.color="...";返回元素的样式

input中的checkbox多选：可以改变是否被选择

对象.checked=true|false；

eg.document.getElementById("check1").checked=true;

(6）事件监听

JavaScript能够在事件被监测时执行代码

事件即发生在元素上的事情

1.事件绑定方式

第一种方法不建议，JavaScript代码与HTML代码耦合

2.常见的事件（DOM event）

onblur：失去焦点

onfocus：获得焦点

onchange：域的内容被改变

onsubmit：返回true，表单被提交

                  返回false，表单不被提交

七、正则表达式

1.定义：直接量：注意不要加引号

var reg=/^\w{6,12}$/

创建regexp对象：

var reg=new regexp（"^\\w{6,12}$")

2.方法：测试给定的字符串是否符合规则

返回true或false，eg.reg.test(str)

相关文章：

CSS及javascript

一、CSS简介 css是一门语言&#xff0c;用于控制网页的表现。 cascading style sheet:层叠样式表 二、css的导入方式 css代码与html代码的结合方式 &#xff08;1&#xff09;css导入html有三种方式&#xff1a; 1.内联样式&#xff1a;<div style"color:red&quo…...

编程日记 2024/3/29 19:36:09

LeetCode 1997.访问完所有房间的第一天：动态规划(DP)——4行主要代码(不需要什么前缀和)

【LetMeFly】1997.访问完所有房间的第一天&#xff1a;动态规划(DP)——4行主要代码(不需要什么前缀和) 力扣题目链接&#xff1a;https://leetcode.cn/problems/first-day-where-you-have-been-in-all-the-rooms/ 你需要访问 n 个房间&#xff0c;房间从 0 到 n - 1 编号。同…...

编程日记 2024/3/29 19:34:06

BootsJS上新！一个库解决大部分难题！

不知不觉距离第一次发文章介绍自己写的库BootsJS已经过去一个月了&#xff0c;这个月里收到了许许多多JYM的反馈与建议&#xff0c;自己也再一次对BootsJS进行了改进与完善&#xff0c;又一次增加了很多功能&#xff0c;为此我想应该给JYM们汇报汇报这个月的工作进展。 BootJS仓…...

编程日记 2024/3/29 19:33:06

智慧公厕，让数据和技术更好服务社会生活

智慧公厕&#xff0c;作为智慧城市建设中不可忽视的一部分&#xff0c;正逐渐受到越来越多人的关注。随着科技的不断进步&#xff0c;智能化公厕已经成为一种趋势&#xff0c;通过数据的流转和技术的整合&#xff0c;为社会生活带来了更好的服务。本文以智慧公厕源头实力厂家广…...

编程日记 2024/3/29 19:30:03

Spark基于DPU Snappy压缩算法的异构加速方案

一、总体介绍 1.1 背景介绍 Apache Spark是专为大规模数据计算而设计的快速通用的计算引擎&#xff0c;是一种与 Hadoop 相似的开源集群计算环境&#xff0c;但是两者之间还存在一些不同之处&#xff0c;这些不同之处使 Spark 在某些工作负载方面表现得更加优越。换句话说&am…...

编程日记 2024/3/29 19:28:00

如何使用python链表

在Python中&#xff0c;可以使用类来实现链表的数据结构。链表是一种数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的引用。 下面是一个简单的链表类的示例&#xff1a; class Node:def __init__(self, data):self.data …...

编程日记 2024/3/29 19:25:59

ADB的主要操作命令及详解

ADB&#xff0c;全称Android Debug Bridge&#xff0c;即安卓调试桥&#xff0c;是一个通用的命令行工具&#xff0c;其允许你与模拟器实例或连接的安卓设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试应用&#xff0c;并提供对Unix shell&#xff08;可用来…...

编程日记 2024/3/29 19:22:56

傻瓜式启动关闭重启docker容器的脚本

运行脚本后&#xff0c;界面如下&#xff1a; 选择对应的编号后&#xff0c;会列举所有关闭的容器或者所有开启的容器列表&#xff0c;当我要启动一个容器 时输入1&#xff0c;就会出现下面的页面。 然后输入指定的编号后&#xff0c;就会启动对应的容器。 脚本代码如下&#…...

编程日记 2024/3/29 19:19:53

R语言使用dietaryindex包计算NHANES数据多种营养指数（2）

健康饮食指数 (HEI) 是评估一组食物是否符合美国人膳食指南 (DGA) 的指标。Dietindex包提供用户友好的简化方法&#xff0c;将饮食摄入数据标准化为基于指数的饮食模式&#xff0c;从而能够评估流行病学和临床研究中对这些模式的遵守情况&#xff0c;从而促进精准营养。 该软件…...

编程日记 2024/3/29 19:15:49

Elasticsearch 索引模板、生命周期策略、节点角色

简介 索引模板可以帮助简化创建和二次配置索引的过程&#xff0c;让我们更高效地管理索引的配置和映射。 索引生命周期策略是一项有意义的功能。它通常用于管理索引和分片的热&#xff08;hot&#xff09;、温&#xff08;warm&#xff09;和冷&#xff08;cold&#xff09;数…...

编程日记 2024/3/29 19:14:48

buy me a btc 使用数字货币进行打赏赞助

最近在调研使用加密货币打赏的平台&#xff0c;发现idatariver平台 https://idatariver.com 推出的buymeabtc功能刚好符合使用场景&#xff0c;下图为平台的演示项目, 演示项目入口 https://buymeabtc.com/idatariver 特点 不少人都听说过buymeacoffee&#xff0c;可以在上面发…...

编程日记 2024/3/29 19:13:47

Solidity Uniswap V2 Router swapTokensForExactTokens

最初的router合约实现了许多不同的交换方式。我们不会实现所有的方式&#xff0c;但我想向大家展示如何实现倒置交换&#xff1a;用未知量的输入Token交换精确量的输出代币。这是一个有趣的用例&#xff0c;可能并不常用&#xff0c;但仍有可能实现。 GitHub - XuHugo/solidit…...

编程日记 2024/3/29 19:12:46

网络安全渗透测试工具

网络安全渗透测试常用的开发工具包括但不限于以下几种&#xff1a; Nmap&#xff1a;一款网络扫描工具&#xff0c;用于探测目标主机的开放端口和正在运行的服务&#xff0c;是网络发现和攻击界面测绘的首选工具。Wireshark&#xff1a;一个流量分析工具&#xff0c;用于监测网…...

编程日记 2024/3/29 19:10:44

springcloud+nacos服务注册与发现

快速开始 | Spring Cloud Alibaba 参考官方快速开始教程写的&#xff0c;主要注意引用的包是否正确。 这里是用的2022.0.0.0-RC2版本的springCloud&#xff0c;所以需要安装jdk21&#xff0c;参考上一个文章自行安装。 nacos-config实现配置中心功能-CSDN博客 将nacos-conf…...

编程日记 2024/3/29 19:09:43

【C++程序员的自我修炼】基础语法篇（一）

心中若有桃花源 何处不是水云间 目录 命名空间 &#x1f49e;命名空间的定义 &#x1f49e; 命名空间的使用 输入输出流 缺省参数 函数的引用 引用的定义&#x1f49e; 引用的表示&#x1f49e; 引用的特性&#x1f49e; 常量引用&#x1f49e; 引用的使用场景 做参数 做返回值…...

编程日记 2024/3/29 19:06:41

小狐狸JSON-RPC：钱包连接，断开连接，监听地址改变

detect-metamask 创建连接&#xff0c;并监听钱包切换 一、连接钱包&#xff0c;切换地址&#xff08;监听地址切换&#xff09;&#xff0c;断开连接 使用npm安装 metamask/detect-provider在您的项目目录中&#xff1a; npm i metamask/detect-providerimport detectEthereu…...

编程日记 2024/3/29 19:03:38

union在c语言中什么用途

在C语言中&#xff0c;union是一种特殊的数据类型&#xff0c;可以在同一块内存中存储不同类型的数据。它的主要用途有以下几个&#xff1a; 1. 节省内存&#xff1a;由于union只占用其成员中最大的数据类型所占用的内存空间&#xff0c;可以在不同的情况下使用同一块内存来存…...

编程日记 2024/3/29 19:02:37

2024年华为OD机试真题- 寻找最优的路测线路-Java-OD统一考试（C卷）

题目描述： 评估一个网络的信号质量，其中一个做法是将网络划分为栅格，然后对每个栅格的信号质量计算。路测的时候，希望选择一条信号最好的路线（彼此相连的栅格集合）进行演示。现给出R行C列的整数数组Cov，每个单元格的数值S即为该栅格的信号质量（已归一化，无单位，值越大…...

编程日记 2024/3/29 19:01:36

WPF 多路绑定、值转换器ValueConvert、数据校验

值转换器 valueconvert 使用ValueConverter需要实现IValueConverter接口&#xff0c;其内部有两个方法&#xff0c;Convert和ConvertBack。我们在使用Binding绑定数据的时候&#xff0c;当遇到源属性和目标控件需要的类型不一致的&#xff0c;就可以使用ValueConverter&#xf…...

编程日记 2024/3/29 18:58:32

【Linux多线程】线程的同步与互斥

【Linux多线程】线程的同步与互斥 目录 【Linux多线程】线程的同步与互斥分离线程Linux线程互斥进程线程间的互斥相关背景概念问题产生的原因&#xff1a; 互斥量mutex互斥量的接口互斥量实现原理探究对锁进行封装(C11lockguard锁) 可重入VS线程安全概念常见的线程不安全的情况…...

编程日记 2024/3/29 18:57:31

Linux网卡bond的七种模式详解

像Samba、Nfs这种共享文件系统&#xff0c;网络的吞吐量非常大&#xff0c;就造成网卡的压力很大&#xff0c;网卡bond是通过把多个物理网卡绑定为一个逻辑网卡&#xff0c;实现本地网卡的冗余&#xff0c;带宽扩容和负载均衡&#xff0c;具体的功能取决于采用的哪种模式。 Lin…...

编程日记 2024/3/29 18:55:28

【学习笔记】java项目—苍穹外卖day01

文章目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境搭建3.2.4 前…...

编程日记 2024/3/29 18:53:26

C++之STL整理（2）之vector超详用法整理

C之STL整理&#xff08;2&#xff09;之vector用法&#xff08;创建、赋值、方法&#xff09;整理 注&#xff1a;整理一些突然学到的C知识&#xff0c;随时mark一下 例如&#xff1a;忘记的关键字用法&#xff0c;新关键字&#xff0c;新数据结构 C 的vector用法整理 C之STL整…...

编程日记 2024/3/29 18:50:23

机器学习作业二之KNN算法

KNN&#xff08;K- Nearest Neighbor&#xff09;法即K最邻近法&#xff0c;最初由 Cover和Hart于1968年提出&#xff0c;是一个理论上比较成熟的方法&#xff0c;也是最简单的机器学习算法之一。该方法的思路非常简单直观&#xff1a;如果一个样本在特征空间中的K个最相似&…...

编程日记 2024/3/29 18:49:22

笔记81：在服务器中运行 Carla 报错 “Disabling core dumps.”

背景&#xff1a;使用实验室提供的服务器配 Carla-ROS2 联合仿真的实验环境&#xff0c;在安装好 Carla 后运行 ./CarlaUE4.sh 但是出现 Disabling core dumps. 报错&#xff0c;而且不会出现 Carla 的窗口&#xff1b; 解决&#xff1a;运行以下命令 ./CarlaUE4.sh -carl…...

编程日记 2024/3/29 18:45:18

ensp中pc机访问不同网络的服务器

拓扑图如下&#xff0c;资源已上传 说明&#xff1a;pc通过2个路由访问server服务器 三条线路分别是192.168.1.0网段&#xff0c;192.168.2.0网段和192.168.3.0网段&#xff0c;在未配置的情况下&#xff0c;pc设备是访问不到server的 具体操作流程 第一&#xff1b;pc设备…...

编程日记 2024/3/29 18:44:16

CSGO赛事管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 系…...

编程日记 2024/3/29 18:43:15

win10微软拼音输入法 - bug - 在PATH变量为空的情况下，无法输入中文

文章目录 win10微软拼音输入法 - bug - 在PATH变量为空的情况下&#xff0c;无法输入中文概述笔记实验前提条件100%可以重现 - 无法使用win10拼音输入法输入中文替代的输入法软件备注备注END win10微软拼音输入法 - bug - 在PATH变量为空的情况下&#xff0c;无法输入中文 概述…...

编程日记 2024/3/29 18:42:14

Java安全篇-Fastjson漏洞

前言知识&#xff1a; 一、json 概念&#xff1a; json全称是JavaScript object notation。即JavaScript对象标记法&#xff0c;使用键值对进行信息的存储。 格式&#xff1a; {"name":"wenda","age":21,} 作用&#xff1a; JSON 可以作为…...

编程日记 2024/3/29 18:41:13

Flink系列之：Flink SQL Gateway

Flink系列之&#xff1a;Flink SQL Gateway 一、Flink SQL Gateway二、部署三、启动SQL Gateway四、运行 SQL 查询五、SQL 网关启动选项六、SQL网关配置七、支持的端点 一、Flink SQL Gateway SQL 网关是一项允许多个客户端从远程并发执行 SQL 的服务。它提供了一种简单的方法…...

编程日记 2024/3/29 18:40:00

公司宣传册设计样本免费下载/优化seo招聘

微软正在积极开发的Visual Studio11&#xff0c;不断寻找方法&#xff0c;以提高安全相关的功能。作为这项工作的一部分&#xff0c;我们正在更新一些增强/ GS编译器开关&#xff0c;这是默认&#xff0c;使基层的代码生成的安全功能&#xff0c;超越了现在熟悉的基于cookie的堆…...

编程日记 2024/11/20 10:57:53

店铺推广软文范文/seo教程seo入门讲解

一、眼功眼功俗称盯球功夫。它主要培养运动员在球场上拥有精准的洞察能力和击球意识的基础。眼功主要包括视觉反应、环视能力及视野。其中视觉反应尤为关键&#xff0c;它主要参照教练员提供的信息,同时观察对手各种不同动作&#xff0c;精准的判断出对手的下一个动作&#xff…...

编程日记 2024/11/20 8:54:37

包头住房与城乡建设局网站/百度seo排名优化公司推荐

C#概览 C#语言是微软于2000年发布&#xff0c;基于.NET Framewrok框架的、面向对象的高级语言。经过近十三年的发展&#xff0c;经历了5次大的升级&#xff0c;最新版本为C#5.0(对应于.NET Framework 4.5)&#xff0c;下面是C#语言发展过程的简单性总结&#xff1a;C#版本.NET …...

编程日记 2024/11/20 5:30:14

dwcs3如何做网站/宝塔没有域名直接做网站怎么弄

我在任何地方都找不到。我从返回标准JSON日期的API中获取了一些JSON。您可以通过在JavaScript控制台中运行以下代码来查看格式&#xff1a;> new Date().toJSON();"2010-10-27T11:58:22.973Z"好吧&#xff0c;实际上&#xff0c;我正在使用的API不会返回毫秒部分&…...

编程日记 2024/11/20 3:14:16

锐速做网站/郑州专业seo推荐

《JAVA 2核心技术 卷Ⅰ&#xff1a;基础知识》第七章&#xff1a;图形程序设计&#xff0c;读书笔记第二部分&#xff08;7.6-7.8&#xff09;。 主要内容包括&#xff1a;颜色、为文本设定特殊字体、图像。 一&#xff0e;颜色 Graphics2D类的setPaint方法可以为图形环境上的所…...

编程日记 2024/11/20 0:46:14

电子商务网站建设流程图/营销课程

今天开始学习Vue.js的使用&#xff0c;但是在学习过程中发现一个问题&#xff0c;那就是页面加载数据时&#xff0c;原始代码会闪现一下。查访各方资料&#xff0c;终的解决方法。第一步、加入一段css代码[v-cloak] {display: none;}第二步、在view上引用css模块{{message}}{{n…...

编程日记 2024/11/19 22:52:39