CSS&ECMAScript回顾

ゝ一纸荒年。 2022-03-16 10:38 235阅读 0赞

css:  
层叠样式表  
作用:  
渲染页面  
提供工作效率,将html和样式分离  
和html的整合  
方式1:内联样式表  
通过标签的style属性 <xxx style="..."/>  
方式2:内部样式表  
通过head的子标签Style子标签  
<style type="text/css">  
选择器\{  
属性:值;  
属性1:值1;  
\}  
</style>  
方式3:外部样式表  
有一个独立css文件.后缀名:.css  
在html中通过link标签导入  
  
选择器:  
id选择器  
html元素有id属性且有值 <xx id="d1">  
css中通过 \# 导入 \#d1\{...\}  
类选择器  
html元素有class属性且有值 <xx class="c1">  
css中通过 . 导入 .c1\{...\}  
元素选择器  
css中通过标签名即可 xx\{...\}  
属性选择器  
html元素有一个属性且有值 <xx att="val1">  
css中通过元素名\[属性="值"\]使用 xx\[att="val1"\]\{...\}  
后代选择器  
选择器 后代选择器  
锚伪类(了解)  
//  
字体 文本 背景 列表 分类(clear display:none block inline)  
框模型:  
一个元素外边有内边距 边框 外边距  
顺序:上右下左  
//  
js  
javascript 脚本语言 解释性 基于对象 事件驱动函数  
js的组成:  
ECMAScript(语法)  
BOM(浏览器对象模型)  
DOM(文档对象模型)  
html和js的整合  
方式1:内部编写js  
<script type="text/javascript">js代码</script>  
方式2:  
外部有一个独立的js文件 后缀名:.js  
在html中通过script的src属性导入  
<script src="js的路径"></script>  
注意:  
一旦使用了src属性,那么script标签体中的js代码将不再执行了.  
  
变量:  
var 变量名=初始化值;  
数据类型:  
原始类型(5种)  
Undefined  
Null  
String 用引号引起来的内容  
Number  
Boolean  
  
通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.  
typeof 变量|值  
引用类型  
运算符:  
关系运算符:  
两边值都是字符串,比较ascii码  
两边都是数字,和java一样  
一边是数字,一遍是字符串形式的数字, 可以比较  
一边是数字,一遍是普通字符串 可以比较 值永远是false  
等性运算符  
"66"==66 true  
"666"===666 false  
js的语句  
if while for 和java一样  
//  
获取元素:  
var obj=document.getElementById("id值");  
获取元素的value属性  
var val=document.getElementById("id值").value;  
设置元素的value属性  
document.getElementById("id值").value="sdfsdf";  
获取元素的标签体  
var ht=document.getElementById("id值").innerHTML;  
设置元素的标签体  
document.getElementById("id值").innerHTML="ssss";  
  
定义函数:  
方式1:function 函数名(参数列表)\{函数体\}  
方式2:  
var 函数名=function(参数列表)\{函数体\}  
注意:  
函数声明的时候不用声明返回值类型  
参数列表上不要写参数类型  
通过return结束方法和将值返回  
  
事件:  
onclick 单击  
onsubmit 表单提交  
onload 页面加载成功或者元素加载成功  
  
事件和函数绑定  
方式1:通过元素的事件属性  
<xxx onxxx="函数名(参数列表)">  
方式2:派发事件  
document.getElementById("id值").onxxx=function()\{...\};  
document.getElementById("id值").onxxx=函数名;