CSS与JavaScript的简单认识

这篇具有很好参考价值的文章主要介绍了CSS与JavaScript的简单认识。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 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:是一门跨平台、面向对象的脚本语言,来控制网页行为的,它能使网页可交互CSS与JavaScript的简单认识,css,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个文章来源地址https://www.toymoban.com/news/detail-775267.html

到了这里,关于CSS与JavaScript的简单认识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(56)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(44)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(62)
  • 简单的倒计时(html + css + javaScript)

    这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时,会通过JavaScript获取输入的日期,并开始一个定时器,每秒更新倒计时并随机改变颜色。当倒计时结束时,定时器会被清除,倒计时元素将显示\\\"倒计时已结束\\\",

    2024年02月03日
    浏览(48)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)
  • 前端(html+css+javascript)作业--展现家乡的网页

    期末期间,老师布置了前端作业,现在放到这里,给各位同志参考。 桂平市是广西壮族自治区的一个美丽的城市,拥有丰富的历史文化和自然景观,属于贵港市管辖,那为什么是看起来是市级而不是县级,其实他就是个 市级县,比县大一些人口多一些就叫做市了。 此网页不

    2024年01月17日
    浏览(50)
  • HTML、CSS和JavaScript实现简单天气预报

    使用 HTML、CSS和JavaScript实现简单天气预报 的步骤: 首先需要获取天气API的数据,可以通过向第三方天气数据服务商发送HTTP请求来获取数据。例如,可以使用Yahoo Weather API或OpenWeatherMap API等。这里以OpenWeatherMap API为例,获取当前城市的天气情况。 接着,将获取到的天气数据动

    2024年02月04日
    浏览(55)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • 【前端】javascript+html+css 家具销售网站(代码+报告)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化【获取源码+商业合作】 👉荣__誉👈:阿里云博客专家博主、51CTO技术博主 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 整个网页在头部部分,定义了字符编码、

    2024年02月14日
    浏览(50)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包