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