CSS及javascript

一、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.hqwc.cn/news/577193.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频素材免费哪个好?7个视频素材下载网站推荐

小伙帮们准备做视频的时候才发现&#xff0c;哎呀&#xff0c;高清视频素材哪里找啊&#xff1f;不用急&#xff0c;这次我们依旧从中国的宝藏网站开始&#xff0c;然后穿越全球&#xff0c;发现更多精彩的无水印视频素材网站 1&#xff0c;蛙学府&#xff08;中国&#xff09…

URL编码:原理、应用与安全性

title: URL编码&#xff1a;原理、应用与安全性 date: 2024/3/29 18:32:42 updated: 2024/3/29 18:32:42 tags: URL编码百分号编码特殊字符处理网络安全应用场景标准演变未来发展 在网络世界中&#xff0c;URL&#xff08;统一资源定位符&#xff09;是我们访问网页、发送请求…

【ENSP】交换机和路由器之间实现静态路由

1.概念 三层交换机只能在Vlanif逻辑口配置iP地址 路由器的每一个端口都是另外一个网段 2.实现方法 交换机允许对应vlan通行&#xff0c;配置vlanif的ip地址&#xff0c;做静态路由 路由器&#xff0c;进接口配置对应的ip&#xff0c;路由器和交换机相连的口&#xff0c;进入他的…

Unity AI Navigation自动寻路

目录 前言一、Unity中AI Navigation是什么&#xff1f;二、使用步骤1.安装AI Navigation2.创建模型和材质3.编写向目标移动的脚本4.NavMeshLink桥接组件5.NavMeshObstacle组件6.NavMeshModifler组件 三、效果总结 前言 Unity是一款强大的游戏开发引擎&#xff0c;而人工智能&a…

基于 FFmpeg 和 SDL 的音视频同步播放器

基于 FFmpeg 和 SDL 的音视频同步播放器 基于 FFmpeg 和 SDL 的音视频同步播放器前置知识音视频同步简介复习DTS、PTS和时间基 程序框架主线程解复用线程音频解码播放线程视频解码播放线程 音视频同步逻辑源程序结果工程文件下载参考链接 基于 FFmpeg 和 SDL 的音视频同步播放器…

Python 多线程同步锁实战

大家好&#xff0c;今天我们要聊聊Python中的多线程世界&#xff0c;你知道吗&#xff1f;在并行处理任务时&#xff0c;多线程就像厨房里的大厨们同时烹饪多个菜品&#xff0c;但得保证每道菜都能完美出锅。这就需要我们引入一个神秘的角色——同步锁&#xff08;Lock&#xf…

win10配置CLion2022+ubuntu20.04远程部署

背景 在博文ubunut搭建aarch64 cuda交叉编译环境记录中&#xff0c;使用的ubuntu20.04虚拟机安装eclipse来交叉编译aarch64的程序&#xff0c;然后发送到jetson板子上执行。开发一段时间后发现eclipse IDE使用起来不太便捷&#xff0c;因此&#xff0c;考虑使用CLion IDE&…

设计模式-设配器模式

目录 &#x1f38a;1.适配器模式介绍 &#x1f383;2.适配器类型 &#x1f38f;3.接口适配器 &#x1f390;4.类的适配器 &#x1f38e;5.优缺点 1.适配器模式介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。这种类型的设…

Kibana操作Elasticsearch教程

文章目录 简介ES文档操作创建索引查看索引创建映射字段查看映射关系字段属性详解typeindexstore 字段映射设置流程 新增数据新增会随机生成id新增自定义id智能判断 修改数据删除数据查询基本查询查询所有&#xff08;match_all&#xff09;匹配查询多字段查询词条匹配多词条精确…

Android 开发 OCR Tesseract4Android图片文字识别 巨详细全部代码教程

下面是整个详解步骤过程 效果图一、OCR的含义二、前提准备二、使用步骤详情1、将 JitPack 存储库添加到存储库末尾的项目根文件2、将依赖项添加到应用模块文件3、数据文件下载路径4、详情代码案例Demo如下&#xff1a;Main.xmlMain.java 效果图 流程&#xff1a;获取assets中的…

数据分析之POWER Piovt的KPI设置

内容总结&#xff1a; 1.两个表格关联不上&#xff1a;需要添加辅助列&#xff0c;建立关联 2.添加辅助列后还关联不上&#xff1a;将虚线变为实线 3.根据需求要增加一些度量值 4.设置KPI后&#xff0c;绝对值选1后设定百分比 5.在透视表里面加入KPI状态 导入所关联的数据后建立…

从关键词到上下文:GPT 如何重新定义 SEO 策略

如何利用GPT技术革新SEO内容创建&#xff1f; 新的 SEO 格局 探索 SEO 的快速变化&#xff0c;重点关注从以关键字为中心的策略到更深入地了解用户意图和上下文的转变。 GPT 简介及其对内容创建、用户参与和搜索引擎优化 (SEO) 的革命性影响。 了解 GPT&#xff1a;技术范式转…