爱站程序员基地目录
标签
css:渲染
和html元素的整合★
选择器★
属性(了解)
字体
文本
列表
背景
尺寸
浮动
分类
框模型(理解)
扩展: 颜色取值
javascript
JS的输出
js和html整合
js中变量声明
js的数据类型
js:事件驱动函数
函数定义——1
js中的事件
js事件和函数的绑定——1
js获取元素
简单表单校验案例
函数定义——2
js事件和函数的绑定——2
bom（Browser浏览器对象）中window对象的定时器方法
定时器
String对象
图片轮播案例
补充
运算符
语句
总结
标签
div: 块标签
<div></div>
span:行内的块标签
<span><span>
css:渲染
层叠样式表
作用:
渲染页面
提高工作效率
格式:
选择器{属性:值;属性1:值1;}
后缀名:
.css 独立的css(样式)文件
-
和html元素的整合★
- 方式1:内联样式表 通过标签的style属性设置样式
[code]<span style=\"color:#00FF00 ;font-size: 100px;\">
- 方式2:内部样式表 在当前页面中使用的样式
通过head标签的style子标签导入
[code]<style>#divId2{background-color: #0f0;}</style>
- 方式3:外部样式表 有独立的css文件
通过head标签的link子标签导入
例如:[code] 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{…}[code] <style>#d1{color: red;}</style>
- class选择器
要求:
html元素必须有class属性且有值 <xxx class=\”cls1\”/>
css中通过\”.\”引入,后面加上class的值 .cls1{…}[code] <style>.d1{color: green;}</style>
- 元素选择器（标签名）
直接用元素(标签)名即可 xxx{…}
[code]<style>div{color: red;}</style>
派生的选择器
- 属性选择器★
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao=\”wohenhao\”/>
css中通过下面的方式使用
元素名[属性=\”属性值\”]{….}
例如:
xxx[nihao=\”wohenhao\”]{….}[code] <style>input[type=\"text\"]{background-color: yellow;}input[type=\"password\"]{background-color: green;}</style>
- 后代选择器
选择器 后代选择器{…} 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器[code] <style>#d1 div{color: red;}span{background-color: #f00;}div span{font-size: 1cm;}</style>
- 锚伪类选择器——注意顺序
[code] <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:设置字体风格[code] <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 ：清除两侧的浮动
[code]<!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 默认。此元素会被显示为内联元素，元素前后没有换行符。（用于将列表放到一行）[code]<!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:宽度 风格 颜色;[code]border:5px solid red;solid:实线
dashed:虚线
double:双实线[code]<!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 类型的[code]<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 函数名(参数){
函数体;
}
[code] <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>[code] <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;
[code] <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>
-
简单表单校验案例
[code]<!-- 案例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定义之后
[code]<!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事件.
[code]<!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);
[code]<!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>
-
图片轮播案例
[code] <!--轮播图--><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的时候 重置iif(i>=3){i=0;}}</script>
补充
-
运算符
- 比较运算符: > 、>= 、< 、<= ——无等号 =
若两边都是数字 和java一样
若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>\”2\”
若一边为数字,另一边为字符串,返回一个false 3>\”hello\”——无法比较
两边都是字符串的时候,比较ascii
2. 等性运算符 == 、===
== :只判断值是否相同
===:不仅判断 值 是否相同,还要判断类型是否相同[code] <script>var s=66;var i=\"66\";alert(s==i);//truealert(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
附：相关代码和文档
