一、CSS
1.定位(position)
position 配合方向值一起使用才有用
relative 相对定位
相对元素本身在文档流中的原位置而言
absolute 绝对定位 完全脱离文档流
子父集定位
父元素有设置相对定位,子元素相对与父级定位
相对窗体定位
父元没有设置相对定位,相对于窗体定位
fixed 固定定位 完全脱离文档流<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ border: 2px solid rosybrown; width: 500px; height: 1000px; /* position: relative; */ } div{ width: 100px; height: 100px; } .div1{ background: green; } .div2{ background: red; /* 相对定位 */ position: relative; } .div3{ /* 绝对定位 */ position: absolute; background: blue; right: 0px; bottom: 0px; } .div4{ background: yellow; /* 固定定位 */ position: fixed; } </style> </head> <body> <div id="box"> <div class="div1"> div1 </div> <div class="div2"> div2 </div> <div class="div3"> div3 </div> <div class="div4"> div4 </div> </div> </body> </html>
2.浮动(float)
浮动:
让元素按照一定的方向进行移动,当遇到其他浮动元素|浏览器的边界的时候停止移动
float 浮动
left 让元素向左移动
right 清除浮动:
clear
left 我的左边不能有浮动元素
right 我的右边不能有浮动元素
both 我的两边不能有浮动元素
1)使用clear属性
2)给父级高度
3)在父级中定义,overflow:hidden
应用场景: 被我们使用在让块元素一行显示 块元素一行显示:
1)浮动
2)display:
inline 行内元素
block 块元素
inline-block 行内块
行内与块的特点都存在
宽度由内容撑起
可以设置宽高
浮动效果(清除浮动的问题)和设置inline-block效果几乎一致<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> #box{ border: 2px solid #008000; /* 添加高度 */ /* 清除浮动 父级中 */ overflow: hidden; } .div{ width: 100px; height: 100px; color: #fff; /* 浮动 */ float: left; } .div1{ background: black; } .div2{ background: skyblue; /* 清除浮动 */ clear: both; } .div3{ background: green; } /* 清除浮动 */ .clear{ clear: both; } /*清除浮动 块元素一行显示*/ p{ background: #87CEEB; /* 行内元素 */ display: inline; width: 100px; height: 100px; /* 行内块 浮动效果*/ display: inline-block; } </style> </head> <body> <div id="box"> <div class="div div1">郑爽</div> <div class="div div2">杨洋</div> <div class="div div3">小小</div> <!-- <div class="clear"></div> --> </div> <p>红红火火恍恍惚惚</p>测试 </body> </html>
3.导航案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除浏览器默认样式 */ *{ margin: 0; padding: 0; } ul{ /* 清除列表标记 */ list-style: none; font-size: 0px; /* 元素内部的行内元素|行内块元素|文本水平对其方式*/ text-align: center; background: pink; } ul li{ display: inline-block; font-size: 30px; width: 200px; } a{ text-decoration: none; } ul li:hover{ background: #87CEEB; } ol{ list-style: none; /* 清除浮动 */ overflow: hidden; width: 800px; /* 块元素自己在父级水平居中*/ margin: 0 auto; background: #87CEEB; } ol li{ /* 浮动 */ float: left; padding: 0 100px; } ol li:hover{ background: #FFC0CB; } </style> </head> <body> <!-- 第一种方法 --> <ul> <li><a href="">我的说说</a></li> <li><a href="">我的相册</a></li> <li><a href="">我的访问量</a></li> </ul> <!-- 第二种方法 --> <ol> <li><a href="">华为</a></li> <li><a href="">三星</a></li> <li><a href="">苹果</a></li> </ol> </body> </html>
二、JavaScript
1.javaScript基本用法
1**）javaScript是一个动态语言
**作用：**验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
2）JavaScript组成：
1.ECMAScript js的核心语法
2.BOM 浏览器对象模型
3.DOM 文档对象模型
BOM>DOM3）使用方式：
行内: 元素上使用js代码
内部: html内部定义script标签对,标签对中定义js代码
外部: 外部定义js文件,文件中定义js代码,在使用的html中使用script标签对用来引入
注意:一个script标签不能及用来引入外部js文件,又用来定义js代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js入门</title> <!-- 外部定义js文件 --> <script src="js/demo01.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- js代码在html月面中的位置: 可以在html中的任意位置定位 推荐: head中,便于后期维护 body结束之前:保证在执行js代码的时候,页面所有的内容都加载完成之后执行,如果要在head中配合window.onload一起使用 --> <input type="button" value="按钮" onclick="console.log('哈哈哈哈')"/> <div id="div"> 欢迎来到js学习F!!!! </div> <div id="box"> 哈哈哈哈哈 </div> <!--内部定义script标签 --> <script type="text/javascript"> console.log("js和java什么关系？？？"); console.log(document.getElementById("div")); </script> </body> </html>
2.变量
js中使用var关键字定义变量
var 变量名=赋值
声明同时赋值，先声明后赋值
动态语言的特点，类型由赋值决定
注意：
同时打印多个值
同时声明多个值
变量可以省略var
变量的分类：
**全局变量：**否则就是全局变量
局部变量：函数中定义的变量为局部变量
变量的作用域提升：
前提是必须是使用var关键字声明的变量，才有作用域提升的问题
只提升变量的声明，提升到当前作用域的最上面
变量不赋值，存在默认值undefined<script type="text/javascript"> console.log(name); var a=5; var b=10; var c=15,d=10; console.log(a,b); console.log(c,d); a="lisi"; console.log(a); e=200; console.log(e); var name="hsq"; var age; console.log(age); </script>
3.数据类型
1）基础数据类型:
Number 类型 控制台中显示蓝色
表示整数,小数,NaN(not a number)
如何获取NaN类型的数据:
1.赋值NaN
2.运算无法计算正确的结果
String 类型
字符串要定义在一对引号当中,’’|""都可以
Boolean类型
rue|false
Null 类型 1.赋值
2.获取不到元素
Undefined 未定义
1.赋值
2.只声明不赋值存在默认值
function 函数2）复合数据类型:
一切皆对象
Object 对象类型 {}
对象中的内容都是以键值对的形式存在的
key:value
多个键值对之间使用个逗号进行分隔
最后一个键值对后面不需要添加逗号
key属性名,满足标识符的命名规范
key和value其实都是字符串
key如果满足标识符的命名规范,前后引号可以省略3) typeof 运算符用来测试数据的数据类型
使用方式:
typeof 数据
typeof(数据)<script type="text/javascript"> var a=1; var b=1.5; var c=NaN; console.log(a,b,c); console.log(5/'b'); var name="hsq"; var d='kkkk'; console.log(name,d); var age=null; console.log(age); console.log(document.getElementById('box')); var un=undefined; console.log(un); //函数 function fn(){ return 1; } console.log(fn()); //对象 var p={ name:"hhh", age:18, sex:1 } console.log(p); //typeof console.log(typeof 123);//Number console.log( typeof 'aaaa');//String console.log(typeof false);//Boolean console.log(typeof null); //object console.log(typeof undefined);//undefined console.log(typeof(function f(){}));//function console.log(typeof({}));//object </script>
4.类型转换
显示类型转换
通过其他方式|函数,手动让数据改变其类型
js中对象类型不参与类型转换(包含函数)
任意类型都可以转换一下三种类型
String(数据)
Number(数据)
Boolean(数据)
隐式类型转换
目的不是为改变数据的类型,但是执行过程中会隐式改变类型
规律：
String 转换什么等于本身
Boolean: 转换什么奇数是true，偶数false
Number 转换boolean值是1,0，转换字符串都是找不到NaN<script type="text/javascript"> console.log(Number(true));//1 console.log(Number(false));//0 console.log(1+true);//2 console.log(String(true));//true console.log(String(1));//1 console.log(Boolean(1));//true console.log(Boolean(3));//true console.log(Number('a'));//NaN console.log(Number('name'));//NaN console.log(Boolean('a'));//true console.log("hhh"+true); </script>
5.运算符
1）算术运算符
运算符 描述 例子****y=5 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 x=y%2 x=1 ++ 自增（前导加、后导加） x=++y x=6 – 自减（前导减、后导减） x=–y x=4 2)赋值和扩展运算符
运算符 例子****x=10, y=5 等价于 结果 = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 3）比较运算符
运算符 描述 例子****x=5 == 等于 x==8 为 false === 全等（值和类型） x=5 为 true；x=“5” 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <= 小于或等于 x<=8 为 true 4）逻辑运算符
运算符 描述 例子****x=5, y=2 && and (x < 10 && y > 1) 为 true || or (x5 || y5) 为 false ! not !(x==y) 为 true 5）三目运算
运算符 描述 例子 ?: 如果…否则… 3>5?3:5 6)块
{} 就是块
java中{}自成作用域
js中块不是作用域,作用域在js中之间函数function<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /* 运算符: + 字符串的连接符使用 = == === 之间的区别: = 赋值 == 比较数据是否相同 === 比较数据和类型是否都相等 先比较类型,后比值 ! 非 取反 !! 不变 !!!取反 ... 逻辑运算符: && || java中逻辑运算符两边的操作数必须为boolean类型的 js中中逻辑运算符两边的操作数可以都是boolean,也可以有其他类型的数据参与,如果有, 结果肯定为其中一个操作数 && 一个为false就是false 第一个操作数转为boolean,为false,结果就为第一个操作数的值 为true,,结果就为第二个操作数的值 || 一个为true就是true 第一个操作数转为boolean,为true,结果就为第一个操作数的值 为false,结果就为第二个操作数的值 */ console.log(1+'2'); console.log(1 == '1'); console.log(1 === '1'); console.log(!true); console.log(!!true); console.log(!!!true); //&& console.log(Boolean(undefined)); console.log(true && 12); console.log(0 && 12); console.log(true || 12); console.log(0 || null); console.log(undefined || null); //块 { var a='hahaha'; } console.log(a); </script> </body> </html>
6.控制语句
跟java语句一样
流程控制语句一共有三种：
a. 流程执行: 从上到下，从左到右
b. 选择执行: 分支选择
c. 循环执行: 重复执行
7.数组
数组：可以存储任意个任意类型的数据，长度可变
创建数组： new Array();
new Array(数据1，数据2，数据3)；
[数据1，数据2，…] 字面量
**数组有序：**从0开始，索引顺序
根据索引操作数组，索引不是0~n整数，作为数组的自定义属性
数组遍历：
普通for
for …in
foreach<script type="text/javascript"> //定义数组 var arr1=new Array(); console.log(arr1); var arr2=new Array(1,false,'hhh',null,undefined); console.log(arr2); var arr3=[1.2,2,'hhh',false]; console.log(arr3); arr1[0]=1; arr1[1]=2; arr1['hhh']="哈哈哈"; console.log(arr1); console.log(arr1.length); console.log(arr1['hhh']); //遍历 console.log('-------------普通for-------'); for (var i = 0; i <arr2.length; i++) { console.log(arr2[i]); } console.log('-------------for in-------'); for(var i in arr2){ console.log(arr2[i]); } console.log('-------------foreach-------'); arr2.forEach(function(value,index){ console.log("数据组"+value); console.log("索引"+index); }) </script>
8.数组常用的方法
数组中的常用的方法：
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并注意：
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果<script type="text/javascript"> var arr01=[1,2,3,45,5]; arr01.reverse(); console.log(arr01); //添加元素到最后 arr01.push(6); console.log(arr01); //添加元素到最前 arr01.unshift(0); console.log(arr01); // 删除最后一项 arr01.pop(); console.log(arr01); // 删除第一项 arr01.shift(); console.log(arr01); //数组翻转 arr01.reverse(); console.log(arr01); //数组转成字符串 arr01.join(); console.log(arr01); // 数组元素索引 console.log(arr01.indexOf(1)); var arr=['pink','hhh','ssss','qqqq']; console.log("原数组:"+arr); //根据索引2来截取数组 console.log(arr.slice(2)); //根据索引1-3，不包含3 console.log(arr.slice(1,3)); //根据索引1截取数组 console.log(arr.splice(1)); //根据索引0~1截取 console.log(arr.splice(0,1)); //截取有hhh代替 console.log(arr.splice(1,2,'hhh')); console.log(arr); </script>
9.函数function
js中的函数(java中的方法)
封装功能,处理业务的代码块
定义:
函数声明**
function 函数名 (参数列表) {
函数体;
[return 返回值;]
}
调用:
- 函数名(实参);
- 转换函数表达式,在最后添加()自执行
在函数声明的前面添加~|!|+|- 在函数声明天后添加()包裹 **函数表达式的方式** var 变量名 = function 函数名 (参数列表) { 函数体; [return 返回值;] }; 函数名一般省略,不可以通过函数进行调用,只能通过变量名,函数名可以在函数内部进行递归使用 调用: **1.通过变量名调用 变量名(参数);** **2.函数表达式最后添加(),直接直接这个函数,自执行**注意:参数省略var关键字
函数的作用域提升:
只有函数声明的方式才有函数作用域的提升,函数表达式没有,提升到当前作用域的最上面<script> fn2('李四',15); //作用域提升 //函数声明 function fn1(){ console.log("我是函数声明fn1"); return '返回值'; } fn1(); console.log(fn1()); function fn2(name,age){ console.log("我是函数声明fn2"); if(age==15){ console.log(name+"哈哈哈只有15岁"); return; } console.log(name,age); } fn2('zhangsan',18); //参数可以不一一对应 fn2(); fn2(123); fn2(1,2,3,4,5); //函数表达式 var f1=function fn3(i){ if(i==5){ return; } console.log("我是函数表达式"+i); i++; fn3(i); } f1(1); //fn3(); //函数表达式自执行 var f2=function(){ console.log("heihei"); }(); //函数声明转为函数表达式 ~function fun1(){ console.log("我是fun1"); }(); !function fun2(){ console.log("我是fun2"); }(); +function fun3(){ console.log("我是fun3"); }(); -function fun4(){ console.log("我是fun4"); }(); (function fun5(){ console.log("我是fun5"); })(); </script>函数注意事项
<script> //b. 若函数形参同名（一般不会这么干），在使用时以最后一个值为准。 function fn(a,a,a){ console.log(a); } fn(1,2,3,4,5); console.log(); //函数的参数可以定义默认值 function fn2(x='zhangsan',y='lisi'){ console.log(x,y); } fn2(1,2); // 值传递 var num = 12; function change(n) { n = 30; } change(12); console.log('值传递-----' + num); //12 // 引用传递 var obj = { name: "tom" }; function paramter(o) { o.name = '2'; } paramter(obj); console.log('引用传递-----' + obj.name); //2 var obj2 = [1, 2, 3]; function paramter2(o) { //o = [2, 3, 4]; //指向新数组 o[0] = 3; } paramter2(obj2); console.log('引用传递-----' + obj2); // [1, 2, 3] </script>
1670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
