css属性
1.布局常用样式属性：
width ：设置元素（标签）宽度，如：width:100px;
height：设置元素（标签）高度，如：height:200px
background：设置元素背景色或者背景图片 如：background:gold;设置元素的背景色
background:ul(images/logo.png) ：设置元素的背景图片
border ：设置元素四周的边框，如：border:1px solid black;设置元素四周边框是1像素宽的黑色实线
border-top：设置定边边框 如：border-top:10px solid red;
border-leftL：设置左边边框 如：border-left:10px solid blue;
border-right：设置右边边框 如：border-right:10px solid green;
border-bottom：设置底边边框 如：border-bottom:10px solid pink;
2.文本常用样式属性
color 设置文字颜色，如 color：red
font-size 设置文字的大小 如：font-size:12px
font-family 设置文字的字体 如：font-family 微软雅黑，为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗 如font- weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字行高 如：line-height:24px 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如text-decoration:none;将文字下划线去掉
text-align 设置文字水平对齐方式，text-aling:center 设置文字水平居中
text-indent 设置文字首行缩进 如text-indent:24px 设置文字首行缩进24px
布局常用样式属性示例代码
<style>
.box1{
width: 200px;
height: 200px;
background:yellow;
border: 1px solid black;
}
.box2{
/* 这里是注释内容 */
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背景色 */
background: red;
/* 设置四边边框 */
/* border: 10px solid black; */
border-top: 10px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
/* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */
/* padding: 10px; */
padding-left: 10px;
padding-top: 10px;
/* 设置外边距，设置元素边框到外界元素边框的距离 */
margin: 10px;
/* margin-top: 10px;
margin-left: 10px; */
float: left;
}
.box3{
width: 48px;
height: 48px;
background:pink;
border: 1px solid black;
float: left;
}
</style>
<div class="box1">
<div class="box2">
padding 设置元素包含的内容和元素边框的距离
</div>
<div class="box3">
</div>
</div>
文本常用样式属性示例：
<style>
p{
/* 设置字体大小 浏览器默认是 16px */
font-size:20px;
/* 设置字体 */
font-family: "Microsoft YaHei";
/* 设置字体加粗 */
font-weight: bold;
/* 设置字体颜色 */
color: red;
/* 增加掉下划线 */
text-decoration: underline;
/* 设置行高 */
line-height: 100px;
/* 设置背景色 */
background: green;
/* 设置文字居中 */
/* text-align: center; */
text-indent: 40px;
}
a{
/* 去掉下划线 */
text-decoration: none;
}
</style>
<a href="#">连接标签</a>
<p>
你好，世界!
</p>
1. 设置不同的样式属性会呈现不同网页的显示效果
2. 样式属性的表现形式是: 属性名:属性值;
javascript
JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js,
它能够让网页和用户有交互功能, 增加良好的用户体验效果。
前端开发三大块
1、HTML：负责网页结构
2、CSS：负责网页样式
3、JavaScript：负责网页行为， 比如:网页与用户的交互效果
JS的三种引入方式
行内式
<input type="button" name="" onclick="alert('ok！');">
内嵌式
<script type="text/javascript">
alert('ok！');
</script>
外链式
<script type="text/javascript" src="js/index.js"></script>
JavaScript的使用方式有三种，分别是:
行内式
内嵌式
外链式
变量和数据类型
-
定义变量
-
定义变量的语法格式:
var 变量名 = 值;
var iNum = 123;
var sTr = ‘asd’;
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr=‘qwe’,sCount=‘68’;
2. JavaScript注释
JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>
- 数据类型
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
4.变量命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
a.对象o Object 比如：oDiv
b.数组a Array 比如：aItems
c.字符串s String 比如：sUserName
d.整数i Integer 比如：iItemCount
e.布尔值b Boolean 比如：bIsComplete
f. 浮点数f Float 比如：fPrice
g.函数fn Function 比如：fnHandler
函数定义和调用
函数定义（function）
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
</script>
函数调用
函数名加小括号。函数名(参数[参数可选])
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数调用
fnAlert();
</script>
有参有返回值的函数
定义函数时，函数如果有参数，参数放到小括号里面，
函数如果有返回值，返回值通过 return 关键字来返回
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>
函数中’return’关键字的作用:
1、返回函数中的值
2、执行完return函数执行结束)
变量作用域
局部变量 (只能在函数内部使用。
<script type="text/javascript">
function myalert()
{
// 定义局部变量
var b = 23;
alert(b);
}
myalert(); // 弹出23
alert(b); // 函数外使用出错
</script>
全局变量 （在函数外定义的变量，可以在不同函数内使用）
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 修改全局变量
a++;
}
myalert();
alert(a); // 弹出13
</script>
条件语句
1. if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
2. if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
3. if...else if....else 语句 - 使用该语句来判断多条件，执行条件成立的语句
<script>
// 关系运算符 == 和 ===
// js 中的if后的条件必须 要使用括号包裹
// == 判断时,会将数字字符串的值先隐式转换成整数再进行比较,如下例
if (5 == '5'){
alert('相等');
}
// if 第二种形式
// === 既比较值,也比较类型,两者相同才相同
if(5 === '5'){
alert('相等');
}else{
alert('不等');
}
// 逻辑与运算符 &&
// alert(true && true); //true
// alert(true && false); //false
// alert(false && true); //false
// alert(false && false); //false
// 逻辑或 ||
// alert(true || true); // true
// alert(true || false); // true
// alert(false || true); // true
// alert(false || false); //false
// 逻辑非 !
// alert(!true); // false
// alert(!false); // true
var iScore = 90;
if(iScore <= 100 && iScore > 90){
alert('优秀 666')
}else if(iScore <= 90 && iScore > 80){
alert('良好');
}else if(iScore <= 80 && iScore > 70){
alert('中等');
}else{
alert('差评,加油');
}
</script>
循环语句
1. for
2. while
3. do-while
for 循环：
<script>
// 测试 for 循环
/*
for 循环格式:
for(表达式1 ; 表达式2 ; 表达式3){
循环体...;
}
表达式1 用来定义循环变量并赋初始
表达式2 用来循环的判断条件
表达式3 用来循环循环变量,趋近结束的代码
循环体就是循环的功能代码
*/
function fnSum1(){
// 定义一个累加变量
var sum = 0;
for(var i = 1; i <= 100 ; i++){
sum = sum + i;
}
alert(sum);
}
fnSum1();
while循环
// 第二个循环 while
/*
格式:
while(条件){
循环体...;
}
*/
function fnSum2(){
var sum = 0;
var i = 1;
while(i <= 99){
sum += i;
i++;
}
alert(sum);
}
fnSum2();
do-while 循环
// do-while循环
/*
do{
循环体..;
}while(条件); // while 后的分号不能省略
*/
function fnSum3(){
var sum = 0;
var i = 1;
do{
sum += i;
i++;
}while(i <= 100);
alert(sum)
}
fnSum3();
// while 和 do-while的区别
/*
while 比较严谨,先判断条件,满足再执行循环体
do-while 不管条件是否成立,先执行一次循环体,do-while 至少循环一次
*/
while(false){
alert('While ...')
}
do{
alert('do - while ...')
}while(false);
数组
数组就是一组数据的集合，javascript 中，
数组里面的数据可以是不同类型的数据，好比 python 里面的列表。
数组的定义
// 实例化对象方式创建
var aList = new Array(1,2,3);
// 字面量方式创建，推荐使用
var aList2 = [1,2,3,‘asd’];
多维数组
多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。
var aList = [[1,2,3],[‘a’,‘b’,‘c’]];
数组的操作
1.获取数组的长度
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、 根据下标取值
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、 从数组最后添加和删除数据
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
4、根据下标添加和删除元素
arr.splice(start,num,element1,…,elementN)
start：必需，开始删除的索引。
num：可选，删除数组元素的个数。
elementN：可选，在start索引位置要插入的新元素。
此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。
var colors = [“red”, “green”, “blue”];
colors.splice(0,1); //删除第一项
alert(colors); //green,blue
colors.splice(1, 0, “yellow”, “orange”); //从第一个索引位置插入两项数据
alert(colors); //green,yellow,organge,blue
colors.splice(1, 1, “red”, “purple”); //删除一项，插入两项数据
alert(colors); //green,red,purple,orange,blue
1. 数组的定义使用一对中括号
2. 获取数组的长度使用length属性
3. 从数组最后添加元素使用push方法
4. 从数组最后删除元素使用pop方法
5. 根据下标添加和删除元素使用splice方法
<script>
// 使用对象方式创建数组
var aArray1 = new Array(1,2,3,'a','b','c');
console.log(aArray1);
console.log(aArray1.length);
// 使用字面量形式创建数组
var aArray2 = [11,22,33,'a','b','c'];
console.log(aArray2);
console.log(aArray2.length);
// 二维数组
var aArray3 = [[1,2,3],['a','b']];
console.log(aArray3);
console.log(aArray3.length);
// 访问数组中的元素值
// 使用下标,下标范围 从0到length-1
console.log(aArray2[0]);
console.log(aArray2[5]);
console.log(aArray2[6]); // 得不到数据, 结果是 undefined
console.log(aArray2[-3]); // 得不到数据, 结果是 undefined
/*
1字节 == 8bit
0000 0000 -> 0
0000 0001 -> 1
...
1111 1111 -> 255
0000 0000 -> 0
...
0111 1111 -> 127
1000 0000 -> -128
1000 0001 -> -127
1111 1111 -> -1
*/
// 通过下标修改值
aArray2[0] = 1111;
console.log(aArray2);
// 向数组中添加元素
aArray2.push('D'); // 添加到末尾,相当于 python 中列表的 append()
console.log(aArray2);
// 删除元素
aArray2.pop() // 删除最后一个元素值
console.log(aArray2);
// 定义一个数组
var aArray4 = [0,1,2,3,4,5,6,7,8,9];
console.log(aArray4);
// 删除操作
// aArray4.splice(3,3); // 从下标3开始删除3个元素
// console.log(aArray4);
// 插入数据
// aArray4.splice(3,0,33);
// console.log(aArray4);
// 插入多个数据
// aArray4.splice(3,0,44,55,66);
// console.log(aArray4);
// 替换
// 替换时,参数二又起到作用
// aArray4.splice(3,1,3333);
// console.log(aArray4);
// 替换多个元素
// aArray4.splice(3,1,3333,4444,5555);
// console.log(aArray4);
// aArray4.splice(3,5,3333,4444,5555);
// console.log(aArray4);
// 遍历
for(var i = 0; i<aArray4.length; i++){
console.log(aArray4[i]);
}
// 下面的方法只做了解
// for(var n in aArray4){
// console.log(n);
// }
// for(var n of aArray4){
// console.log(n);
// }
// aArray4.forEach(function (n){
// console.log(n);
// })
</script>
字符串拼接
字符串拼接使用: “+” 运算符
var iNum1 = 10;
var fNum2 = 11.1;
var sStr = ‘abc’;
result = iNum1 + fNum2;
alert(result); // 弹出21.1
result = fNum2 + sStr;
alert(result); // 弹出11.1abc
数字和字符串拼接会自动进行类型转换(隐士类型转换)，把数字类型转成字符串类型进行拼接
<script>
var iNumber = 1;
var sMsg = 'Hello';
var ret = 1 + iNumber;
console.log(ret, typeof(ret));
ret = 1 + sMsg;
console.log(ret, typeof(ret));
// 类型转换函数
var sNumber1 = '1';
var sNumber2 = '2';
ret = sNumber1 + sNumber2;
console.log(ret, typeof(ret));
// parseInt() 会将字符串的参数转换成数字
ret = parseInt(sNumber1) + parseInt(sNumber2);
console.log(ret, typeof(ret));
</script>
获取标签元素
获取标签元素：可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，
获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
alert(oDiv);
</script>
<div id="div1">这是一个div元素</div>
上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，
javascript去页面上获取元素div1的时候，元素div1还没有加载。
解决方法：
- 将javascript放到页面最下边：
<div id="div1">这是一个div元素</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
alert(oDiv);
</script>
- 设置页面加载完成执行的函数，在执行函数里面获取标签元素。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。
获取标签元素需要等待页面加载完成，使用document.getElementById(‘标签id’);
<script>
// 通过window 对象的一个 onload 事件来进行获取标签
// 这个事件会在 页面加载完成后,再回来执行onload指定的函数
window.onload = function (){
// 通过 docment 里面的 getElementById(参数就是标签的id值) 来获取一个标签
var oDiv = document.getElementById('d1');
alert(oDiv);
// innerText 属性用来获取标签内的文本值
alert(oDiv.innerText);
}
</script>
操作标签 元素属性
-
属性的操作
-
属性的读取
-
属性的设置
属性名在js中的写法
1. html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
2. “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
<style>
.sty01{
font-size:20px;
color:red;
}
.sty02{
font-size:30px;
color:pink;
text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 操作class属性,需要写成“className”
oA.className = 'sty02';
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>
- innerHTML
innerHTML可以读取或者设置标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
<div id="div1">这是一个div元素</div>
标签属性的获取和设置:
1. var 标签对象 = document.getElementById('id名称'); -> 获取标签对象
2. var 变量名 = 标签对象.属性名 -> 读取属性
3. 标签对象.属性名 = 新属性值 -> 设置属性
<script>
// 设置事件
window.onload = function(){
// 获取标签
var oIn = document.getElementById('in1');
// alert(oIn);
var oA = document.getElementById('oa');
// alert(oA);
// 获取属性值
console.log(oIn.type);
console.log(oIn.name);
console.log(oIn.value);
console.log(oA.href);
// 设置属性值
oIn.className = 'min';
oA.style.color = 'red';
oA.style.fontSize = '50px';
// innerHTML 属性
var oDiv = document.getElementById('md');
alert(oDiv);
// 获取标签里的文本内容
alert(oDiv.innerHTML);
alert(oDiv.innerText);
// 设置区别
// oDiv.innerText = 'BBBB'; // 设置文本
// oDiv.innerHTML = 'CCCC';
// oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
oDiv.innerText = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
