CSS与JavaScript的简单认识

机跃2024-01-04 0:02

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

CSS与html结合的三种方式：

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

html 复制代码 
<!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属性键值对

html 复制代码 
<!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文件

html 复制代码 
<!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>

下面这是文件中的内容

html 复制代码 
p{
    color: green;
}

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

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

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

html 复制代码 
<!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属性值{键值对}

html 复制代码 
<!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属性值{键值对}

html 复制代码 
<!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标签元素的底部，可改善显示速度，因为脚本执行会拖延显示。

html 复制代码 
<!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标签不能自闭合，标签必须写全。

html 复制代码 
<!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中多了=== 全等于

html 复制代码 
<!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关键字进行定义

html 复制代码 
<!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

定义：

html 复制代码 
<!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中的集合。变长变类型。

html 复制代码 
<!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方法，删除元素

html 复制代码 
<!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>

字符串对象：

定义：

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中类的定义

html 复制代码 
<!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（）在指定的毫秒数后调用函数或计算表达式，这个只执行一次。

html 复制代码 
<!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

html 复制代码 
<!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：元素对象

html 复制代码 
<!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可以在事件被侦测到时执行的代码。

事件绑定的俩种方式：

一：

html 复制代码 
<!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>

二：

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：鼠标从某个元素移开

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

定义：俩种方式

html 复制代码 
var reg=/^\w{6,12}$/
  var reg2=new RegExp("\\w{6,12}$")

方法：test（）方法

html 复制代码 
<!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个

相关推荐
蜗牛快跑2136 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy7 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
涔溪1 小时前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲1 小时前
浏览器是加载ES6模块的？
javascript·算法
JerryXZR2 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式
热门推荐
01玄机平台应急响应—webshell查杀02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04新版微信小程序获取用户手机号05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【软件工程】UML用例图介绍和实例说明