黑马程序员技术交流社区
标题:
【石家庄校区】Web阶段前6天笔记
[打印本页]
作者:
曹可津
时间:
2018-5-3 15:30
标题:
【石家庄校区】Web阶段前6天笔记
本帖最后由 小石姐姐 于 2018-5-4 11:14 编辑
Web阶段前6天笔记
第二天CSS&JS阶段
框架标签：
<frameset>与body冲突
属性：
Rows 横
Cols 竖
<frame>代表切分的每个部分
CSS：
*
CSS的概述：层叠样式表.
* 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
* 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
* 行内样式：在html元素上使用style属性设置
* 内部样式：在html中使用<style></style>进行设置
* 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
* 元素选择器:
* ID选择器：
* 类选择器：
* 后代选择器：
* 子元素选择器：
* CSS的样式：
* 文本
* 背景
* 字体
* 列表
* CSS的盒子模型：
* 内边距：padding
* 边框：border
* 外边距：margin
* CSS的悬浮和定位：
* 悬浮：float属性设置悬浮.
* 清除悬浮：clear属性清除.
* 定位：position属性设置定位.
* 使用left和top属性控制位置.
* display属性：控制元素的显示方式：
* block--显示的, none--隐藏的,inline--显示到一行.
JS:
* JS的概述：JavaScript运行在浏览器端脚本语言.
* JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
* JS的变量声明:
* JS的数据类型：
* 原始类型：undefined,boolean,string,number,null
* 引用类型：
* JS的运算符：
* 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
* JS的语句：
* 与Java中的语句一致.
* 简单的表单校验：
* 正则的校验：使用String的match方法和正则中的test方法.
第三天JS阶段：
JavaScript:
* JavaScript:基本使用:
* ECMAScript:
* 变量：弱变量类型: var i;
* 数据类型:原始类型和引用类型.
* 语句
* 运算符
* 对象:
* String,Boolean,Date,Math,Number,正则...
*全局函数
deURIComponent(),parseInt(),parseFloat()
* BOM:浏览器对象.
* window:
* Navigator:
* Screen:
* History:
* Location:
* DOM：文档对象.
* 获得元素:
* document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
* 添加元素:
* element.appendChild(),element,insertBefore();
* 删除元素:
* element.removeChild();
* 创建元素:
* document.createElement(),document.createTextNode();
* 修改元素值:
* innerHTML属性:
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
键盘操作：
*onkeyup
鼠标操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup
第四天JQ阶段
将JS转换成JS格式
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// d1.html("aaaaaa");
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
JQ的显示和隐藏
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
选择器；
基本选择器
ID选择器
$("#id")
类选择器
$(".类名")
元素选择器
$("元素名称")
通配符选择器
$("*")
并列选择器
$("选择器，选择器，选择器")
层级选择器
后代选择器：使用空格 所有后代包含孙子及以下的元素
?子元素选择器：使用> 第一层的元素（儿子）
?下一个元素:使用+ 下一个同辈元素
?兄弟元素:使用~ 后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
})；
})；
*
JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover() ---进行事件的切换.
第四天BootStrap阶段
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2