CSS与JavaScript的简单认识

news2024/9/23 17:23:24

 CSS：是一门语言，用于控制网页表现，让页面更好看的。  CSS（Cascading Style Sheet）：层叠样式表

  CSS与html结合的三种方式：

    1、内部样式：用style标签，在标签内部定义CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        color: red;
      }
    </style>
</head>
<body>
<div>
  Hello CSS~
</div>
</body>
</html>

   2、内联样式：在标签内部使用style属性，属性值是css属性键值对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="color: red">Hello CSS~</div>
</body>
</html>

这种方式html代码就和css代码耦合在一起了，但不利于以后的复用，不推荐这么写

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link href="resource/demo.css" rel="stylesheet">
</head>
<body>
<p>hello css~</p>
</body>
</html>

下面这是文件中的内容

p{
    color: green;
}

这是引用的外部的demo.css的文件。

 选择器：选择器是选取需设置样式的元素（标签）

    1、元素选择器：元素名称{键值对}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        color: red;
      }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

<span></span>

</body>
</html>

    2、id选择器：#id属性值{键值对}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        color: red;
      }

      #name{
        color: blue;
      }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

<div id="name">div4</div>


<span></span>

</body>
</html>

   3、类选择器：.class属性值{键值对}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        color: red;
      }

      #name{
        color: blue;
      }
      .cls{
        color: pink;
      }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

<div id="name">div4</div>

<div class="cls">div5</div>

<span></span>

</body>
</html>

JavaScript：是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

就像这种，在不跳转页面的情况下，可以更换更换图片的。

脚本语言：就是浏览器可以直接解释执行，不用经过编译。

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语言类似。

JavaScript引入方式：

  1、内部脚本：将JS代码定义在html页面中。在html中，JavaScript代码必须位于script标签中。

        提示：在html文档中，可以在任何地方，放置任意数量的script标签。但是一般会把脚本置于body标签元素的底部，可改善显示速度，因为脚本执行会拖延显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
  window.alert("hello.js")//写入警告框
  document.write("hello js2")//写入html页面
  console.log("hello js3")//写入浏览器控制台
</script>
</html>

 

2、外部脚本：将JS代码定义在外部JS文件中，然后引入到html页面中。

        注意：外部脚本中不能包含script标签；script标签不能自闭合，标签必须写全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="resources/demo.js"></script>
</body>
</html>




demo.js文件中的代码为

alert("hello js")

书法语法：

  1、区分大小写：与Java一样，变量名、函数以及其他一切东西都是区分大小写的。

  2、每行结尾的分号都是可有可无的

  3、注释：单行注释：  //注释内容。                 多行注释：  /*注释内容*/

  4、大括号代表代码块

输出语句：

window.alert()写入警告框    document.write()写入html页面      console.log()写入浏览器控制台

变量：

  JavaScript中使用var关键字（variable的缩写）来声明变量。

  JavaScript是一门弱类型的语言，变量可以存放不同类型的值。

     变量名需要遵循以下规则：

       1、组成字符可以是任何字母、数字、下划线或美元符号。

       2、数字不能开头

       3、建议使用驼峰命名

  ECMAScript6新增了let关键字和const关键字。

     let关键字来定义变量，用法与var类似，但是声明的变量，只能在let关键字所在的代码块内有效，且不允许重复声明变量名相同的变量。

    const变量用来声明一个只读变量。一旦声明就无法更改。

var定义的变量的特点：

   1、作用域为全局变量，即使var变量写在某个代码块中，在代码块外部也能访问。

   2、变量可以重复定义，可以定义俩个变量名相同的变量，后定义的覆盖前面的

数据类型：

   JavaScript中分为原始数据和引用数据

     5种原始数据：

           number：数字（整数，小数，NaN（Not a Number））

           string：字符，字符串，单双号都可以。     boolean：布尔。true或false。    null：对象为空

           undefined：当声明的变量未初始化时，该变量的默认值为undefined。

     使用typeof运算符可以获取数据类型 alert（typeof age）

运算符

   运算符几乎和Java的一致，不同的就是JavaScript中多了=== 全等于

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var age1=20
    var age2="20"
    alert(age1==age2);//返回true
    alert(age1===age2);//返回false
  
</script>
</html>

 ==:先判断类型是否一样，如果不一样，则进行类型转换，然后再去比较其值

 ===：判断类型是否一致，不一致直接返回false。一致时才会去比较值

数据转换：

  其他类型转换为number：

     1、string：按照字符串的字母值，转换为数字，如果字面值不是数字，例如var str=‘abc’，则转换为NaN。一般使用parseInt方法转换。

     2、boolean：true转换为1，false转换为0.

    其他类型转换为boolean：

      1、number：0和NaN转为false，其他数字转为true。

      2、string：空字符串转为false，其他字符串转为true。

      3、null：fasle

      4、undefined：false

函数：JavaScript函数通过function关键字进行定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //定义函数方式1:
  // function add(a,b){
  //   return a+b;
  // }

  //定义函数方式2:
  var add=function (a,b){
    return a+b;
  }
  var result=add(1,2)
  alert(result);
</script>
</body>
</html>

注意：形式参数不需要写出类型，返回值也不需要定义类型，可以在函数内部直接使用return返回即可。因为JavaScript是弱类型的语言。函数中即使定义函数时写了2个形参，调用函数时可以传入2个以上的参数。

JavaScript

  定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr=new Array(1,2,3)
  alert(arr)
  var arr2=[1,2,3]
  alert(arr2)
</script>
</body>
</html>

特点：JavaScript数组相当于Java中的集合。变长变类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr2=[1,2,3]
  alert(arr2)
  arr2[6]=6
  alert(typeof arr2[5])//为undefined类型
</script>
</body>
</html>

且同一个数组中不必须全是number类型，可以有不同类型。

    数组方法：  push方法，添加元素。   splice方法，删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr5=[1,2,3]
  arr5.push(10)
  arr5.splice(0,1)
  alert(arr5)

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

 

字符串对象：

   定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var str1=new String("abc")
  var str2="abc"
</script>
</body>
</html>

length属性：字符串的长度。 

charAt（）返回指定位置的字符。     indexOf（）检索字符串。 trim（）去除字符串前后俩段的空白字符。

自定义对象：相当于Java中类的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var person={
        name:"zhangsan",
        age:21,
        eat:function (){
            alert("干饭～")
        }
    }
    alert(person.name)
    alert(person.age)
    person.eat()
</script>
</body>
</html>

BOM：Browser Object Model浏览器对象模型

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

  组成：Window：浏览器窗口对象。    Navigator：浏览器对象。    Screen：屏幕对象

            History：历史记录对象。      LOcation：地址栏对象。

    window：弹框方法：alert（）弹出警告框和comfirm（）弹出有确认和取消按钮的对话框。点确认返回true，取消返回fasle

                   定时器方法：serlnterval（）按照周期（毫秒）来调用函数或计算表达式，循环执行。

                                         setTimeout（）在指定的毫秒数后调用函数或计算表达式，这个只执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var flag=confirm("确认删除?")
   setTimeout(function (){
     alert("hehe")
   },1000)

  setInterval(function (){
    alert("hehe")
  },1000)
</script>
</body>
</html>

     history：历史记录

          方法：back（） 加载history列表中的前一个URL。  forward（）加载history列表中的下一个URL。

     location：地址栏对象

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  alert("跳转百度")
  location.href="https://www.baidu.com"


  //3秒跳转首页
  document.write("3秒跳转首页")
  setTimeout(function (){
    location.href="https://www.baidu.com"
  },3000)

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

DOM：Document Object Model 文档对象模型

  将标记语言的各个组成部分封装成对象：

      Document：整个文档对象。     Element：元素对象        Attribute：属性对象

      Text：文本对象        Comment：注释对象

 获取Element：元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="">
<div class="cls">黑马</div>
<div class="cls">程序员</div>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏

<script>
  var img=document.getElementById("light")//根据id获取
  alert(img)

  var divs=document.getElementsByTagName("div")//根据标签名获取，返回数组
  alert(divs.length)
  for(let i=0;i<divs.length;i++){
    divs[i].style.color="red"//设置元素css样式
    divs[i].innerHTML="hehe"//设置元素内容
    alert(divs[i])
  }

  var hobbies= document.getElementsByName("hobby");//根据name属性获取，返回数组
  for (let i=0;i<hobbies.length;i++){
    alert(hobbies[i])
  }

  var classes= document.getElementsByClassName("cls")//根据name属性值获取，返回数组
  for (let i=0;i<classes.length;i++){
    alert(classes[i])
  }


</script>

</body>
</html>

Element对象中的俩个常用属性： style：设置元素css样式。 innerHTML：设置元素内容。

  checkbox对象中一个重用属性ckecked：设置或返回元素是否被选中。让对象的checked属性为true即位被选中，为fasle就是未被选中。

事件监听：

  事件：html事件时发生在html元素上的事情。

  事件监听：JavaScript可以在事件被侦测到时执行的代码。

事件绑定的俩种方式：

  一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>

<script>
  function on() {
    alert("我被点了")
  }
</script>
</body>
</html>

二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="在点我" id="btn">

<script>
  document.getElementById("btn").onclick=function (){
    alert("我再次被点")
  }

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

常见事件：

   onclick： 鼠标点击事件。       onblur：元素失去焦点。    onfocus：元素获取焦点

   onload：某个页面或图像被完成加载。     onsubmit：当表单被提交时触发该事件。

   onkeydown：某个键盘被按下        onmouseover。鼠标被移到某个元素上

   onmouseout：鼠标从某个元素移开

正则表达式：定义了字符串组成的规则

   定义：俩种方式

var reg=/^\w{6,12}$/
  var reg2=new RegExp("\\w{6,12}$")

  方法：test（）方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var reg=/^\w{6,12}$/
  var str="abccccc"
  var flag=reg.test(str)
  alert(flag)

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

  判断字符串str是否符合正则表达式reg。

语法规则：

    ^：表示开始。      $：表示结束。 

   []:表示某个范围内的单个字符。

   .:代表任意单个字符，除了换行符和行结束符。

  \w：代表单词字符：字母，数字，下划线

  \d:代表数字字符

量词语法：

  +：至少一个

  *：零个或多个

  ？：零个或一个

  {x}：x个

 {m,}：至少m个

 {m,n}：至少m个，之多n个

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

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

相关文章

java仓库管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

java仓库管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web仓库管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…
阅读更多...
Python控制程控电源（USB）

Python控制程控电源（USB）

文章目录 前言一、环境搭建1.软件安装2.硬件安装二、设置程控电源连接方式三、Python代码四、验证结果五、pyd文件前言 随着智能电动汽车行业的持续发展，汽车电子或嵌入式设备在软硬件的测试中，都会使用程控电源供电，特别是自动化测试、压力测试场景必定使用到程控电源控制…
阅读更多...
【Mybatis】深入学习MyBatis：CRUD操作与动态SQL实战指南

【Mybatis】深入学习MyBatis：CRUD操作与动态SQL实战指南

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; Mybatis ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 一基本用法 1 CRUD操作 1. 增加&#xff08;Create&#xff09; 2. 查询&#xff08;Read&#xff09; 3. 更新&#x…
阅读更多...
test ui-03-cypress 入门介绍

test ui-03-cypress 入门介绍

cypress 是什么&#xff1f; 简而言之&#xff0c;Cypress 是一款专为现代Web构建的下一代前端测试工具。我们解决了开发人员和质量保证工程师在测试现代应用程序时面临的关键问题。 我们使以下操作成为可能&#xff1a; 设置测试编写测试运行测试调试测试 Cypress经常与Se…
阅读更多...
AUTOSAR软件手册文档缩写描述,AUTOSAR_TR_PredefinedNames

AUTOSAR软件手册文档缩写描述,AUTOSAR_TR_PredefinedNames

由于AUTOSAR文档中的缩写太多&#xff0c;入门者看起开不方便。例如TR、SWS、SRS、EXP模块。 下载链接&#xff1a;https://www.autosar.org/fileadmin/standards/R21-11/FO/AUTOSAR_TR_PredefinedNames.pdf
阅读更多...
阿里云服务器端口PPTP 1723放行教程

阿里云服务器端口PPTP 1723放行教程

阿里云服务器安装PPTP VPN需要先开通1723端口&#xff0c;阿里云服务器端口是在安全组中操作的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说明阿里云服务器安全组开放PPTP VPN专用1723端口教程&#xff1a; 阿里云服务器放行1723端口教程 PPTP是点对点隧道协议&#…
阅读更多...
用js让用户输入一个数累加和

用js让用户输入一个数累加和

需求&#xff1a;用户输入一个数&#xff0c; 计算 1 到这个数的和。 比如 用户输入的是 5&#xff0c; 则计算 1~5 之间的累加和 并且输出到控制台 <body><script>let numprompt(请输入一个数)let sum0for(let i1;i<num;i){sumi}console.log(sum)</script…
阅读更多...
Windows内存取证

Windows内存取证

1.分析内存镜像&#xff0c;找到内存中的恶意进程&#xff0c;并将进程的名称作为flag值提交, 格式flag{xx} pstree 以树的形式展现进程 2.分析内存镜像&#xff0c;找到黑客访问恶意链接的时间格式flag{2023-01-19 00:00:00} 目录 1.分析内存镜像&#xff0c;找到内存中…
阅读更多...
SAM-Track online / offline配置

SAM-Track online / offline配置

segment anything model&#xff08;SAM&#xff09;是Meta于2023年4月5日发布的分割基础模型。SAM 允许分割任何对象而无需微调。 可以在这里尝试SAM模型的效果。 分割效果这么好&#xff0c;都忍不住想用SAM来做场景的语义分割&#xff0c;realtime与否先放在一边&#xff0c…
阅读更多...
BRF文件数据结构

BRF文件数据结构

一.BRF-文件头数据结构 type_mesh "mesh" 网格 type_material "material" 材质struct brf_header{int type_length; //4个字节, type字符串对应长度char* type_name; //根据type_length获取int type_content_num; //4个字节,对应类型所含个数,例如含有模…
阅读更多...
快速入门ESP32——点亮你的第一个LCD屏幕

快速入门ESP32——点亮你的第一个LCD屏幕

相关文章 快速入门ESP32——开发环境配置Arduino IDE 快速入门ESP32——开发环境配置PlatformIO IDE 快速入门ESP32—— platformIO添加开源库和自己的开发库 快速入门ESP32—— 解决platformIO添加开源库下载失败的问题 快速入门ESP32——点亮你的第一个LCD屏幕 前言一、移植T…
阅读更多...
【Bootstrap学习 day7】

【Bootstrap学习 day7】

Bootstrap按钮 按钮样式 使用.btn相关类实现 <button type"button" class"btn">基本按钮</button> <button type"button" class"btn btn-primary">主要按钮</button> <button type"button" cl…
阅读更多...
【linux】ufw 的基本使用

【linux】ufw 的基本使用

碎碎念 所有的云平台的网络流量的进出基本上有三层&#xff0c;首先是虚拟网的流量控制&#xff0c;一般是通过子网访问控制列表来控制vpc也好子网也好的流量出入&#xff0c;其次是安全组控制一层&#xff0c;通过安全组规则控制一类/一组主机&#xff08;指EC2/ECS/VM/CE这些…
阅读更多...
单机游戏数据自动保存方案

单机游戏数据自动保存方案

引言 单机游戏数据的自动保存方案 大家好&#xff0c;2023年还有最后的3天&#xff01; 有小伙伴私信我&#xff0c;说: 总感觉一股脑的全盘定时保存不科学&#xff0c;也写过保存变化的玩家数据&#xff0c;但是改完数据就得手动标记一下字段变化&#xff0c;感觉不够智能&…
阅读更多...
Linux程序、进程以及计划任务

Linux程序、进程以及计划任务

目录 一、程序和进程 1、什么是程序&#xff1f; 2、什么是进程&#xff1f; 3、线程是什么&#xff1f; 4、如何查看是多线程还是单线程 5、进程结束的两种情况&#xff1a; 6、进程的状态 二、查看进程信息的相关命令 1、ps&#xff1a;查看静态的进程统计信息 2、…
阅读更多...
基于ssm+vue服装商城购物系统

基于ssm+vue服装商城购物系统

摘要 在基于SSM框架和Vue.js的服装商城购物系统中&#xff0c;整合了多种先进的技术&#xff0c;为电子商务领域的发展提供了有力支持。该系统不仅仅是技术层面的整合&#xff0c;更是对于业务流程和用户体验的深入考虑。以下是对该系统扩展的一些关键方面的讨论&#xff0c;以…
阅读更多...
【笔记】书生·浦语大模型实战营——第一课

【笔记】书生·浦语大模型实战营——第一课

群公告 1月3日*更新 第一次课程视频链接&#xff1a;https://www.bilibili.com/video/BV1Rc411b7ns/&#xff0c;第一次课程只需要记笔记&#xff0c;没有作业。第一次课程(1月3日)和第二次课程(1月5日)到本周末(1月7日)截止&#xff0c;笔记记录在 知乎/CSDN/Github 或者任何你…
阅读更多...
深入了解小红书笔记详情API：为内容创新提供动力

深入了解小红书笔记详情API：为内容创新提供动力

一、小红书笔记详情API简介 小红书笔记详情API是一种允许开发者访问小红书平台上的笔记详细数据的接口。通过这个API&#xff0c;我们可以获取笔记的标题、内容、标签、点赞数、评论数等详细信息。这些数据对于内容创作者和品牌来说至关重要&#xff0c;可以帮助他们了解用户喜…
阅读更多...
Spring-IOC综述

Spring-IOC综述

文章迁移自语雀。 怎么查看spring的文档 ioc综述 说到spring的ioc,其实就是控制反转,为啥需要控制反转呢,其实是为了功能的增强,如果不用spring, 我们直接使用工厂方法,静态工厂方法, 都是是可以获取到对象的,但是如果需求变了,我们在类的生成时,添加了很多信息,使用工厂就不…
阅读更多...
Flutter 中使用 ICON

Flutter 中使用 ICON

Flutter Icon URL &#xff1a; https://fonts.google.com/icons&#xff1a; 在Flutter中使用 Icon 步骤如下&#xff1a; 导入图标库 在Dart 文件中导入 material.dart 包&#xff0c;该包包含了 Flutter 的图标库。 import package:flutter/material.dart;使用图标组件 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023