周帆
今天学习了css和js的内容,然后自己预习下后面的js内容给,为后面的课程做好准备
下面依旧是贴上笔记,有不对的地方欢迎大家积极指正
div:
块标签
<div></div>
span:行内的块标签
<span></span>
/////////////////
css:渲染
层叠样式表
作用:
渲染页面
提高工作效率
格式:
选择器{属性:值;属性:值}
后缀名:
.css独立的css(样式)文件
和html元素的整合★
方式一:内联样式表
通过标签的style属性设置样式
方式二:内部样式表
在当前页面中使用的样式
<style>
div{
background-color: #f00;
}
</style>
方式三:外部样式表:需要导入.css文件
用link标签即可
<link rel="stylesheet" href="css/1.css" type="text/css"/>
选择器:★
id选择器:
要求:
html标签必须有id属性且必须有值
css中通过#引入,后面加上id的值
#id{.......}
类选择器:
要求:
html标签必须有class属性且必须有值
css中引入通过“.”引入 。后面加上class值 .cla{......}
元素选择器:
直接用标签名就可以 xxx{...}
派生的选择器
属性选择器:★
要求:
html标签必须有一个属性不论属性是什么且有值
css中通过下面的方式使用
元素名[属性="属性值"]{........}
例如:
xxx[nihao="wohenhao"]{....}
后代选择器:
选择器 后代选择器{.....} 在满足第一个选择器的条件下 找第二个选择器 给后代满足条件的标签添加样式
了解的选择器:
锚伪类选择器:
link:未访问的连接
visited:已访问的连接
hover:鼠标移动到连接上
active:选定的连接
定义该选择器属性顺序一定不能乱
选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类标签
标签选择器:一种标签
属性选择器:标签选择器的特殊用法
使用的时候注意:
若多个样式作用与一个元素的时候
不同的样式会叠加
相同的样式,就近原则
若多个选择器作用于一个元素的时候
越特殊优先级越高
id>class>标签
////////////////////////////////////////
属性(了解)
字体:
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
文本:
color:文本颜色
等等 具体可以去看老师的笔记
////////////////////////////////////////////
javascript 俗称js
组成部分:
ECMAScript:js基础语法(规定 关键字 语句 函数等等)
BOM:游览器对象模型
DOM:文档对象模型
作用:
修改html页面的内容
修改html的样式
完成表单的验证
注意:
js页面上可以直接写,也可以单独去写.
js的文件的后缀名 .js
js和html整合
方式一:在页面上直接写
将js代码放在<script></script>标签中
一般放在head标签中
方式二:独立的js文件
通过script文件引入
<script type="text/javascript" src="js文件的路径" ></script>
js中的变量声明:
var 变量名 = 初始化值;
var 变量名;
变量名 = 初始化值;
注意:
var可以省略,建议不要省略
每一句用分号结尾,最后一个可以不用分号,建议不要省略.
js的数据类型
原始类型:(5种)
Null
String
Number
Boolean
undefined 没有初始化
注意:通过typeof运算符可以判断一个值或者变量是否属于原始类型
如果是还可以判断出是哪种原始类型
typeof 值/数据类型
变量值为null 使用typeof运算符会返回object
引用类型:
/////////////////////////////////////////////////////////////////////
js:事件驱动函数
函数定义格式
方式1:
function 函数名(参数){
方法体
}
注意:函数不用声明返回值类型
参数不用加数据类型
函数调用的时候
函数名(参数);
js中的事件:
常见的事件:
单击:onclick
表单提交:onsubmit;加在form表单上的 方法的返回值为boolean值
双击:ondblick
页面加载事件:onload
js事件和函数的绑定
方式一:
通过标签的事件属性 <xxxx></xxxx>
js获取元素:
方式一:
var object = document.getElementById("id值");
获取标签的value值
object.value;
获取标签的文本内容:
object.innerHTML
///////////////////////////////////////////////////////////////////////
bom中有个window对象的定时器对象
定时器:
setInterVal(code,毫秒数);每隔指定的毫秒数执行一次函数 在传入方法名字时 如果是方法名()这种形式 请一定记得加括号 否则就直接写方法名 个人建议用第一种
setTimeout(code,毫秒数);延迟指定的毫秒数之后,只执行一次
clearInterVal(id):清除定时
clearTimeout(id):清除定时
///////////////////////////////////////////////////////////////////////
补充:
运算符:
和java几乎差不多
比较运算符 >, >= ,< ,<=
若两边都是数字,和java一样
如果一遍为数字 另一边为字符串形式的数字 如 3>"2" 会将字符串转成数字
两边都是字符串: 比较ascii
如果一遍为数字,另一边为不是数字的字符串 会返回false
灯性运算符 == ===
==:只判断值是否相同 例:3=="3" true
===:不仅判断是否相同,而且还要判断类型是否一样 例:3=="3" false
语句:
if for while 语句和java一样
switch 和java一样(区别 switch后面跟字符串 还可以跟常量)
///////////////////////////////////////////////////////////////////////
总结:
1.css和html整合
3种
第一种:标签上面加style属性
第二种:在head标签中加入<style></style>标签 在标签中写css代码
第三种:在外部建一个css文件,在要引入的html页面中的head标签中添加
<link rel="stylesheet" href="css文件的路径" type="text/css" />即可
2.css中的选择器
id class 标签
属性 后代
3.js
js和html整合
两种方法
第一种:在head标签中加入<script></script>标签,然后在标签中写入js代码即可
第二种:在外部建立一个js的文件 文件中写入js代码 然后在要引入的html页面中
的head标签中添加<script type="text/javascript src="js文件路径名称"></script>
4.变量定义
第一种:var 变量名 = 变量值;
第二种:var 变量名;
变量名 = 变量值;
5.方法定义
两种格式:
第一种:function 方法名(参数){.....}
第二种:var 方法名 = function(参数){.....}
6.事件
onclick onload onsubmit
7.事件和函数的绑定方式
2种
第一种:
在标签上添加事件 如:<input type="button">
第二种:
在script标签中直接给得到的元素添加事件
document.getElementById("xx").事件名 = 方法名(参数)
8定时器 2种
setInterVal(方法名,毫秒值): 在指定毫秒后执行一次该方法 循环执行
setTimeout(方法名,毫秒值):在指定毫秒后执行一次该方法,就不在执行了
9 for while if
和java一样
总结完毕!!!!!!!!!!!!!!!!!!!!!
|
|