目录
bom(Browser浏览器对象)中window对象的定时器方法
标签
div: 块标签
<div></div>
span:行内的块标签
<span><span>
css:渲染
层叠样式表
作用:
渲染页面
提高工作效率
格式:
选择器{属性:值;属性1:值1;}
后缀名:
.css 独立的css(样式)文件
-
和html元素的整合★
- 方式1:内联样式表 通过标签的style属性设置样式
<span style="color:#00FF00 ;font-size: 100px;">
- 方式2:内部样式表 在当前页面中使用的样式
通过head标签的style子标签导入
<style> #divId2{ background-color: #0f0; } </style>
- 方式3:外部样式表 有独立的css文件
通过head标签的link子标签导入
例如:css: #divId2{ background-color: #0f0; } html: <link rel="stylesheet" href="css/1.css" type="text/css"/>
-
选择器★
- id选择器
要求:
html元素必须有id属性且有值 <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值 #id1{...}<style> #d1{ color: red; } </style>
- class选择器
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}<style> .d1{ color: green; } </style>
- 元素选择器(标签名)
直接用元素(标签)名即可 xxx{...}
<style> div{ color: red; } </style>
派生的选择器
- 属性选择器★
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}<style> input[type="text"]{ background-color: yellow; } input[type="password"]{ background-color: green; } </style>
- 后代选择器
选择器 后代选择器{...} 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器<style> #d1 div{ color: red; } span{ background-color: #f00; } div span{ font-size: 1cm; } </style>
- 锚伪类选择器——注意顺序
<style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ </style>
选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类元素
元素选择器:一种元素
属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)
若多个样式作用于一个元素的时候
不同的样式,会叠加
相同的样式,最近原则。如:字体颜色
若多个选择器作用于一个元素的时候
越特殊优先级越高 id优先级最高>属性选择器>class选择器>元素选择器
属性(了解)
字体
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格<style> #div3{ font-family: "黑体"; font-size: 1cm; font-style: italic; } </style>
文本
改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进
color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline——默认值
text-align:对齐文本
列表
list-style-type:设置列表项的类型 例如:a 、1 、实心圆
list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");
背景
background-color:设置背景颜色
background-image:设置图片作为背景 url
尺寸
width:
height:
浮动
float: 可选值 left right
使用clear属性清除浮动:
- Left :清除左侧浮动
- Right :清除右侧浮动
- Both :清除两侧的浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .divCls{ background-color: #ff0; border: 1px solid red; height: 25px; width: 25px; float: left; } .cle{ clear: both; } </style> </head> <body> <div class="divCls">1</div> <div class="divCls">2</div> <div class="divCls">3</div> <div class="divCls">4</div> <div class="cle"></div> <div class="divCls">5</div> <div class="divCls">6</div> <div class="divCls">7</div> <div class="divCls">8</div> </body> </html>
分类
- clear:设置元素的两边是否有其他的浮动元素
值为:both 两边都不允许有浮动元素
- display:设置是否及如何显示元素。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。(用于将列表放到一行)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ background-color: #ff0; border: 1px dashed red; height: 50px; width: 50px; } #div0{ display: none; } #span0{ display: block; } h1{ display: inline; } </style> </head> <body> <div >1</div> <div id="div0">2</div> <div >3</div> <div >4</div> <span>天佑中华</span> <span id="span0">天佑中华</span> <span>天佑中华</span> <hr /> <h1>热门商品</h1>你好啊 </body> </html>
框模型(理解)
- 一个元素外面有padding(内边距) border(边框) margin(外边距)
padding:元素和边框的距离——内容填充时的边距
margin:元素最外层的空白——元素之间的距离
- 上面这三个属性都有简写的属性
若设置大小的时候 四个值:顺序 上右下左(顺时针)(没有与对面相同——上下,左右 配对)
padding:10px 10px 10px 10px
若只写一个的话 代表四个边使用同一个值 padding:10px
若只写两个个的话 代表四个边使用同一个值 padding:10px 20px
若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30px
- border(边框)
还可以设置颜色 风格
简写属性:
border:宽度 风格 颜色;border:5px solid red;
solid:实线
dashed:虚线
double:双实线<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } div{ background-color: #ff0; width: 150px; height: 150px; float: left; border: 10px solid red; margin: 50px 25px; padding: 10px 20px 30px; } </style> </head> <body> <div>123</div> <div>123</div> </body> </html>
扩展: 颜色取值
- 英文取值:
color:red
- 十六进制数:
color:#ff0000
- Rgb方式:
color:rgb(255,0,0)
javascript
俗称 js
JavaScript一种直译式脚本语言,是一种动态类型、弱类型(不需定义数据类型)、基于原型的语言、事件驱动型,
内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言
- 组成部分:
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型
- 作用:
修改html页面的内容
修改html的样式
完成表单的验证
- 注意:
js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js
-
JS的输出
- alert()
向页面中弹出一个提示框!!
- innerHTML:
向页面的某个元素中写一段内容,将原有的东西覆盖
- document.write();
向页面中写内容
-
js和html整合
方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
-
js中变量声明
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
-
js的数据类型
原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof 运算符 可以判断一个值或者变量是否属于原始类型。若属于原始类型,他还可以判断出属于那种原始类型
方法:typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的<script> //类型覆盖 var age=18; age="hello"; age=true; alert(typeof age); //Undefined类型 var bisdfa; alert(typeof bisdfa); //object类型——null为对象的占位符 var username=null; alert(typeof username); //object类型——对象 var s=new String(); alert(typeof s); </script>
引用类型: var s=new String();
js:事件驱动函数
-
函数定义——1
方式1:
function 函数名(参数){
函数体;
}
<script>
function add(a,b){
alert(a+b);
}
//add(2,20);
</script>
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数)
-
js中的事件
-
js对象——event
- 常见的事件:
- 单击: onclick
- 表单提交: onsubmit ——加在form表单上的 οnsubmit="return 函数名()" 注意函数返回值为boolean类型
- 页面加载: onload
-
js事件和函数的绑定——1
方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx><script> function btnCli(){ alert(44944); } function init(){//body 中的事件 alert("页面加载成功"); } </script> <body onload="init()"> <input type="button" value="点击我试试" onclick="btnCli()"> </body>
-
js获取元素
方式1:
var obj=documnet.getElementById("id值");
- 获取元素的value值
obj.value;
- 获取元素的标签体中的内容
obj.innerHTML;
<script> function btnCli(){ //获取id为btn的元素 var obj=document.getElementById("btn"); //获取value属性 alert(obj.value) } </script> <body> <input value="确定" id="btn" type="button" onclick="btnCli()"/> </body>
-
简单表单校验案例
<!-- 案例2-步骤分析: -->
<!-- 1.先有一个表单 -->
<!-- 2.在form上添加一个事件 onsubmit="return checkForm()" -->
<!-- 3.编写checkForm这个方法 -->
<!-- 4.获取每个表单子标签的内容 -->
<!-- 5.判断是否满足要求, -->
<!-- 若满足,不用管他 -->
<!-- 若不满足,表单不能提交,返回false,且提示信息. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkForm(){
//获取用户名及其内容
var usernameObj=document.getElementById("username");
//2.获取值
var username=usernameObj.value;
//判断value是否为空 若为空不能提交表单,
if(username==null || username == ""){
//添加提示信息
alert("用户名不能为空");
//必须要有返回的 Boolean类型
return false;
}
//获取密码及其内容
//1.获取密码元素
var pwdObj=document.getElementById("password");
//2.获取密码的值
var pwdValue=pwdObj.value;
//3.判断
if(pwdValue==null || pwdValue==""){
alert("密码不能为空");
//必须要有返回的 Boolean类型
return false;
}
//必须要有返回的 Boolean类型
return true;
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
姓名:<input name="username" id="username"/><br>
密码:<input type="password" name="password" id="password"><br>
<input type="submit" value="保存"/>
<input type="reset" />
</form>
</body>
</html>
-
函数定义——2
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}
-
js事件和函数的绑定——2
方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>
方式2:
给元素派发事件
- document.getElementById("id值").οnclick=function(参数){....}
- document.getElementById("id值").οnclick=函数名——没有参数
注意:
内存中应该存在该元素才可以派发事件
- a.将方式2的js代码放在html页面的最下面——解释型语言,要在id定义之后
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var btn2cli=function(){ alert("244944"); } </script> </head> <body onload="init()"> <input type="button" value="点击试试2" id="btn2"> </body> <script> //事件派发——函数名派发 document.getElementById("btn2").onclick=btn2cli; </script> </html>
- b.在页面加载成功之后在运行方式2的js代码 onload事件.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function init(){//body 中的事件 //事件派发——函数名派发 document.getElementById("btn2").onclick=btn2cli; } var btn2cli=function(){ alert("244944"); } </script> </head> <body onload="init()"> <input type="button" value="点击试试2" id="btn2"> </body> </html>
bom(Browser浏览器对象)中window对象的定时器方法
-
定时器
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);
-
String对象
原始类型的String是一个伪对象可以直接调用String类对象的方法
substring(0,endIndex);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var s="我们的明天更加美好!";//字符串 var i=0; var divObj; function init(){ divObj=document.getElementById("divId"); //document.write(s);//写在页面上 setInterval(show,200);//周期定时器 } //往div中写内容 function show(){ i++; var s_=s.substring(0,i); //往div中设置内容 divObj.innerHTML=s_; //当字符串写完的时候 重新开始 if(i==s.length){ i=0; } } </script> </head> <body onload="init()"> <div id="divId"></div> </body> </html>
-
图片轮播案例
<!--轮播图-->
<div class="lunbo">
<img id="luboid" src="../img/1.jpg"/>
</div>
<script>
var i=1;
function init(){
//创建一个定时器
setInterval(changeImage,1000);
}
//更改图片
//<img id="luboid" src="../img/1.jpg"/>
function changeImage(){
//获取图片元素
var imgObj=document.getElementById("luboid");
i++;
//修改图片元素的src属性
imgObj.src="../img/"+i+".jpg";
//当i>3的时候 重置i
if(i>=3){
i=0;
}
}
</script>
补充
-
运算符
- 比较运算符: > 、>= 、< 、<= ——无等号 =
若两边都是数字 和java一样
若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>"2"
若一边为数字,另一边为字符串,返回一个false 3>"hello"——无法比较
两边都是字符串的时候,比较ascii
2. 等性运算符 == 、===
== :只判断值是否相同
===:不仅判断 值 是否相同,还要判断类型是否相同<script> var s=66; var i="66"; alert(s==i);//true alert(s===i);//false </script>
-
语句
if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
总结
1.css和html整合
方式3种
2.css中选择器:
id class 元素
属性 后代
3.js
js和html整合
方式两种
4.变量定义
5.函数定义
2中格式
6.事件
onclick onload onsubmit
7.事件和函数的绑定
2中方式
8.定时器 2种
9.for while if