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.rhkb.cn/news/290507.html

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

相关文章

深度学习每周学习总结P3(天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据链接 提取码&#xff1a;o3ix 目录 0. 总结1. 数据导入部分数据导入部分代码详解&#xff1a;a. 数据读取部分a.1 提问&#xff1a;关…

智慧工厂视频汇聚与安全风险智能识别预警方案设计与功能

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…

网络爬虫框架Scrapy的入门使用

Scrapy的入门使用 Scrapy概述引擎&#xff08;Engine&#xff09;调度器&#xff08;Scheduler&#xff09;下载器&#xff08;Downloader&#xff09;SpiderItem Pipeline 基本使用安装scrapy创建项目定义Item数据模型对象创建爬虫(Spider)管道pipeline来保存数据启动爬虫 其他…

霸榜京东数据库图书热卖榜!《图数据库:理论与实践》热销中

《图数据库&#xff1a;理论与实践》自2月上市以来&#xff0c;受到了数据库行业的广泛关注与热烈支持&#xff0c;问世两周便销量破千本&#xff01;近期还荣登京东 “数据库图书榜”热卖榜第二名&#xff0c;广获好评&#xff01; 在此&#xff0c;真挚的感谢各位读者的认可…

实现定时任务

定时任务的实现方式有很多&#xff0c;比如XXL-Job等。但是其实核心功能和概念都是类似的&#xff0c;很多情况下只是调用的API不同而已。 这里就先用SpringBoot为我们提供的定时任务的API来实现一个简单的定时任务&#xff0c;让大家先对定时任务里面的一些核心概念有个大致的…

基于微信小程序的民宿短租系统设计与实现(论文+源码)_kaic

摘 要 随着社会的发展&#xff0c;出差、旅游成为常态&#xff0c;也就造成民宿短租市场的兴起。人们新到陌生的环境里找民宿一般都是通过中介。中介虽然可以快速找到合适的民宿但会收取大量的中介费用&#xff0c;这对刚到新环境里的人们来说是一笔大的资金支出。也有一些人通…

elasticsearch 8.12+kibana 8.12

准备工作&#xff1a;1.下载相关的安装包放到/usr/local/ES下面 elasticsearch下载地址:Download Elasticsearch | Elastic elasticsearch-head-master下载地址:https://github.com/mobz/elasticsearch-head/archive/master.zip node下载地址:Index of /dist/ kibana地址:Downl…

网络服务练习题

综合练习&#xff1a;请给 openlab 搭建 web 网站 网站需求&#xff1a; 1. 基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 2. 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于&#xff0c; www.openlab.c…

正弦实时数据库(SinRTDB)的使用(5)-历史数据查询

前文已经将正弦实时数据库的使用进行了介绍&#xff0c;需要了解的可以先看下面的博客&#xff1a; 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…

微服务概述

微服务 概述1.单体架构2.分布式架构3.微服务的架构特征&#xff1a; 服务拆分和远程调用提供者与消费者 概述 1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 单体架构的优缺点如下&#xff1a; 优点&#xff1a; 架构…

Vue-vue3

一、Vue3简介二、Vue3有那些优化性能的提升源码升级拥抱TypeScript新的特性 三、创建Vue3.0工程四、Vue3工程结构&#xff08;使用cli创建的vue3&#xff09;五、常用的Composition API&#xff08;组合式API&#xff09;setupsetup的两个注意点 ref函数reactive函数Vue3.0中的…

微服务(基础篇-004-Feign)

目录 http客户端Feign Feign替代RestTemplate&#xff08;1&#xff09; Feign的介绍&#xff08;1.1&#xff09; 使用Feign的步骤&#xff08;1.2&#xff09; 自定义配置&#xff08;2&#xff09; 配置Feign日志的两种方式&#xff08;2.1&#xff09; Feign使用优化…

架构整洁之道-读书总结

1 概述 1.1 关于本书 《架构整洁之道》&#xff08;Clean Architecture: A Craftsman’s Guide to Software Structure and Design&#xff09;是由著名的软件工程师Robert C. Martin&#xff08;又称为Uncle Bob&#xff09;所著。这本书提供了软件开发和架构设计的指导原则…

基于unbantu的nginx的配置

目录 前言: 1.安装nginx并进行测试 1.1使用nginx -v 命令查看版本 1.2开启服务 查看端口 1.3测试 2.nginx的静态资源访问配置 2.1创建静态资源存放的目录 2.2写入目录中测试文件对应的内容 2.3修改配置文件 2.4 测试 3.虚拟主机配置 3.1创建目录 3.2写入测试…

JoyPac:产品立项的5个思考及成功产品分析 | TopOn变现干货

5月26日&#xff0c;TopOn、罗斯基、广大大共同主办的《游戏赛道新机会》主题沙龙长沙站举办。活动邀请到多家头部平台和知名厂商的负责人&#xff0c;大家分别从自身的业务角度出发&#xff0c;分享了最新的行业变化和市场趋势。 在活动上&#xff0c;JoyPac产品VP王泽带来了…

HTML input 实现回车切换到下一个输入框功能

前言 遇到需求&#xff0c;在客户填写单子时&#xff0c;有多个输入框&#xff0c;为了省事&#xff0c;不需要频繁移动光标填写。 实现效果 实现方式一 HTML <input type"text" name"serialNumber1" onkeydown"cursor(this);"/><in…

DDos系列攻击原理与防御原理

七层防御体系 静态过滤 命中黑名单 对确定是攻击的流量直接加入黑名单&#xff08;源地址命中黑名单直接丢弃&#xff0c;缺乏机动性和扩展性&#xff09; 畸形报文过滤 畸形报文攻击 TCP包含多个标记位&#xff0c;排列组合有规律 • 现象&#xff1a;TCP标记位全为1 …

2015年认证杯SPSSPRO杯数学建模A题(第二阶段)绳结全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 A题 绳结 原题再现&#xff1a; 给绳索打结是人们在日常生活中常用的技能。对登山、航海、垂钓、野外生存等专门用途&#xff0c;结绳更是必不可少的技能之一。针对不同用途&#xff0c;有多种绳结的编制方法。最简单的绳结&#xff0c;有时称…

go发布包到github

1. 首先&#xff0c;我们在github上创建一个公有仓库并clone到本地 git clone https://github.com/kmust-why/gdmp-token.git cd gdmp-token/ 2. 在gdmp-token工程中初始化go.mod&#xff0c;其中后面的链接要跟github上创建的仓库和你的用户名对应 go mod init github.com…

谷歌seo怎么优化运营?

那些太大众的内容就不说了&#xff0c;在这里说一个后期谷歌seo可以去优化的一个方向&#xff0c;那就是电子邮件营销&#xff0c;这是一个间接营销seo的方案&#xff0c;电子邮件营销本身不会直接改变你在搜索结果中的排名&#xff0c;但它是一种强有力的工具&#xff0c;可以…