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:是一门跨平台、面向对象的脚本语言,来控制网页行为的,它能使网页可交互
就像这种,在不跳转页面的情况下,可以更换更换图片的。
脚本语言:就是浏览器可以直接解释执行,不用经过编译。
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个文章来源:https://www.toymoban.com/news/detail-775267.html
{m,n}:至少m个,之多n个文章来源地址https://www.toymoban.com/news/detail-775267.html
到了这里,关于CSS与JavaScript的简单认识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!