CSS及javascript

news2024/10/8 12:14:19

一、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)

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

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

相关文章

mac 系统如何生成秘钥

1.打开终端&#xff0c;输入 cd ~/.ssh 进入.ssh目录&#xff0c;输入 ls 检查是否已经存在SSH密钥。如果看到类似 id_rsa.pub 的文件&#xff0c;说明已经有一对公钥和私钥&#xff0c;不用新建&#xff0c;直接查看就可以&#xff0c;如果没有需要生成新的密钥。 2.在终端输…

Unity 视频组件 VideoPlayer

组件添加&#xff1a; 在自己定义的组件下&#xff08;例如&#xff1a;Panel&#xff09; 点击 Inspector 面板中的 AddComponent &#xff0c;输入“VideoPlayer”。 资源 这里 视频资源有两种形式&#xff0c;第一种是 VideoClip &#xff0c;需要将视频文件拖拽到该属性字段…

【C语言】【Leetcode】88. 合并两个有序数组

文章目录 一、题目二、思路再思考 一、题目 链接: link 二、思路 这题属于简单题&#xff0c;比较粗暴的做法就是直接比较两个数组&#xff0c;先把第二个数组加到第一个的后面&#xff0c;如何冒泡排序&#xff0c;这种方法简单粗暴但有效&#xff0c;可是不适用于这题&…

政安晨:【Keras机器学习实践要点】(二)—— 给首次接触Keras 3 的朋友

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras实战演绎机器学习 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 介绍 Keras 3是一个深度学习框架&#xff0…

牛客网BC-33 统计成绩(数组排序思想)

题目如下 --------------------------------------------------------------------------------------------------------------------------------- 思路&#xff1a;以数组形式输入&#xff0c;并将数组顺序&#xff08;或者逆序&#xff09;排序&#xff0c;最后输出最大值最…

Mysql数据库:日志管理、备份与恢复

目录 前言 一、MySQL日志管理 1、存放日志和数据文件的目录 2、日志的分类 2.1 错误日志 2.2 通用查询日志 2.3 二进制日志 2.4 慢查询日志 2.5 中继日志 3、日志综合配置 4、查询日志是否开启 二、数据备份概述 1、数据备份的重要性 2、备份类型 2.1 从物理与…

2.6 IDE(集成开发环境)是什么

IDE&#xff08;集成开发环境&#xff09;是什么 IDE 是 Integrated Development Environment 的缩写&#xff0c;中文称为集成开发环境&#xff0c;用来表示辅助程序员开发的应用软件&#xff0c;是它们的一个总称。 通过前面章节的学习我们知道&#xff0c;运行 C 语言&…

蓝桥杯单片机快速开发笔记——利用定时器计数器设置定时器

一、基本原理 参考本栏http://t.csdnimg.cn/iPHN0 二、具体步骤 三、主要事项 如果使用中断功能记得打开总中断EA 四、示例代码 void Timer0_Isr(void) interrupt 1 { }void Timer0_Init(void) //10毫秒12.000MHz {AUXR & 0x7F; //定时器时钟12T模式TMOD & 0xF0;…

微服务day06 -- Elasticsearch的数据搜索功能。分别使用DSL和RestClient实现搜索

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…

iMazing2024功能强大的iPhone和iPad管理工具

iMazing是一款功能强大的iPhone和iPad管理工具&#xff0c;确实可以作为iTunes的替代品进行数据备份。以下是一些关于iMazing的主要特点和功能&#xff1a; 设备备份&#xff1a;iMazing可以备份iOS设备上的所有数据&#xff0c;包括照片、视频、音乐、应用程序等。与iTunes相比…

docker部署gitlab 报错的问题!!!

1、什么是gitlab&#xff1f; Gitlab是一个用于仓库管理系统的开源项目&#xff0c;使用git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务。Gitlab有乌克兰程序员DmitriyZaporozhets和ValerySizov开发&#xff0c;它由Ruby写成。后来&#xff0c;一些部分用Go语…

leetcode 225.用队列实现栈 JAVA

题目 思路 1.一种是用双端队列&#xff08;Deque&#xff09;&#xff0c;直接就可以调用很多现成的方法&#xff0c;非常方便。 2.另一种是用普通的队列&#xff08;Queue&#xff09;,要实现栈的先入后出&#xff0c;可以将最后一个元素的前面所有元素出队&#xff0c;然后…

tcp和udp分别是什么?udp和tcp的区别

TCP和UDP是计算机网络中常见的两种传输层协议&#xff0c;它们在实际应用中具有不同的特点和用途。本文将对TCP和UDP进行介绍&#xff0c;并分析它们之间的区别。 TCP和UDP分别是什么&#xff1f; TCP&#xff08;Transmission Control Protocol&#xff09; TCP是一种面向连…

基于TensorFlow的花卉识别(算能杯)%%%

Anaconda Prompt 激活 TensorFlow CPU版本 conda activate tensorflow_cpu //配合PyCharm环境 直接使用TensorFlow1.数据分析 此次设计的主题为花卉识别&#xff0c;数据为TensorFlow的官方数据集flower_photos&#xff0c;包括5种花卉&#xff08;雏菊、蒲公英、玫瑰、向日葵…

论文汇总:A Closer Look at Few-shot Classification Again

文章汇总 文章是在总体上再一次地观察如何小样本领域存在的问题&#xff0c;并且发现了较为有趣的规律 1.测试误差随训练类别的数量而下降&#xff0c;而不是随每个类别的训练样本数量而下降。 2.训练算法(me&#xff1a;预训练模型)和自适应算法(me&#xff1a;预训练之后的…

适用于 Mac 电脑的 10 个最佳数据恢复工具

对于任何依对于依赖计算机获取重要文件&#xff08;无论是个人照片还是重要商业文档&#xff09;的人来说&#xff0c;数据丢失可能是一场噩梦。值得庆幸的是&#xff0c;有多种专门为 Mac 用户提供的数据恢复工具&#xff0c;可以帮助检索丢失或意外删除的文件。在本文中&…

SpringBoot 文件上传(三)

之前讲解了如何接收文件以及如何保存到服务端的本地磁盘中&#xff1a; SpringBoot 文件上传&#xff08;一)-CSDN博客 SpringBoot 文件上传&#xff08;二&#xff09;-CSDN博客 这节讲解如何利用阿里云提供的OSS&#xff08;Object Storage Service)对象存储服务保存文件。…

SORT/deepSORT_3.8

目标&#xff1a; SORT算法的原理DeepSORT算法的原理 SORT&#xff08;Simple Online and Realtime Tracking&#xff09;和DeepSORT是两种广泛应用在计算机视觉领域的多目标跟踪算法。 SORT: SORT算法由Martin Danelljan等人于2016年提出&#xff0c;是一种基于关联的在线实…

Visual Studio项目编译和运行依赖第三方库的项目

1.创建项目&#xff0c;这里创建的项目是依赖于.sln的项目&#xff0c;非CMake项目 2.添加第三方库依赖的头文件和库文件路劲 3.添加第三方依赖库文件 4.项目配置有2个&#xff0c;一个是Debug&#xff0c;一个是Release&#xff0c;如果你只配置了Debug&#xff0c;编译和运行…

TCP重传机制详解——04FACK

文章目录 TCP重传机制详解——04FACK什么是FACKFACK的发展为什么要引入FACK实战抓包讲解开启FACK场景&#xff0c;且达到dup ACK门限值开启FACK场景&#xff0c;未达到dup ACK门限值 为什么要淘汰FACK总结REF TCP重传机制详解——04FACK 什么是FACK FACK的全称是forward ackn…