本帖最后由 雪落 于 2018-5-3 16:01 编辑
--[石家庄校区]web阶段笔记--
#CSS&JS
#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方法.
#JavaScript
#JavaScript:基本使用:
* ECMAScript:
* 变量:弱变量类型: var i;
* 数据类型:原始类型和引用类型.
* 语句
* 运算符
* 对象:
* String,Boolean,Date,Math,Number,正则...
* 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),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属性:
#JQuery(很重要)
## 主要的JQ操作
* 属性(prop(),attr()),
* 样式(css(),addClass(),removeClass(),show(),hide()),
* DOM(创建$("<a>百度</a>"),
* 添加append(),
* 删除remove(),empty(),
* each方法遍历数组
* 要使用JQuery,必须先引入Jquery的js文件
* `<script src="../../js/jquery-1.11.3.min.js"></script>`
* 写出JQ的入口函数
* `$(function(){});`
* JQ对象和DOM对象的转换
* JQ对象里面实际上是Dom数组,我们操作JQuery对象,实际上就是操作里面的每一个元素
* 只有被$()包裹的对象才是JQuery对象
* JQuery=>dom `$("div")[0];`
* dom=>JQuery `{dom对象};`
* JQuery完成显示和隐藏
* show():
1. jq对象.show();
2. jq对象.show("slow");//slow,normal,fast
3. jq对象.show(毫秒值);//1000
4. jq对象.show(毫秒值,function(){});
* hide():
1. jq对象.hide();
2. jq对象.hide("slow");//slow,normal,fast
3. jq对象.hide(毫秒值);//1000
4. jq对象.hide(毫秒值,function(){});
#JQ的选择器
* 基本选择器
* id选择器
* 用法:`$("#id")`
* 类选择器
* 用法:`$(".类名")`
* 元素选择器
* 用法:`$("元素名称")`
* 并列选择器
* 用法:`$("选择器1,选择器2,选择器3,...")`
* 层级选择器
* 后代(子孙)选择器:使用空格 所有后代包含孙子及以下的元素
* 子元素选择器:使用> 第一层的元素(儿子)
* 基本过滤选择器
* `:eq(index)`:匹配一个给定索引值的元素,**注意:**这里没有引号
* `:even`:匹配所有索引值为偶数的元素,从 0 开始计数
* `:odd`:匹配所有索引值为奇数的元素,从 0 开始计数
* `:first`:获取第一个元素
* `:last`:获取最后一个元素
* 属性选择器
* `input[type='']`
* 表单选择器(认识就行)
* :input
* :text
* :password
* :radio
* :checkbox
* :submit
* :image
* :reset
* :button
* :file
* :hidden
* 表单属性选择器
* :checked
#JQuery对属性的操作的方法
* val();
* 传入值表示赋值
* 不传入值表示获取
* attr();
* 使用方法一:$(“”).attr(“src”);
* 使用方法二:$(“”).attr(“src”,”test.jpg”);
* 使用方法三:$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一:$(“”).prop(“src”);
* 使用方法二:$(“”).prop(“src”,”test.jpg”);
* 使用方法三:$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass();
* removeClass();
* 添加子元素
* append();
* 在某个元素后添加内容
* 如果添加的元素已经存在,那就变成移动了
* html();
* 传入之表示,覆盖某个元素的内容
* 不传入值表示,获取
* appendTO(); ---将某个元素添加到另一个元素后.
* 删除子元素
* remove(); ---将某个元素移除.
* JQuery的遍历
* `$.each(objects,function(index,element){});`
* `$("").each(function(index,element){});`
* 如何获下拉框中选中的数据:selected
* 表单选择器和表单属性选择器组合使用
* `var options = $("#right").find('option:selected');`
* JQ的查找事件
* find()
* $("p").find("span")
* 搜索所有与指定表达式匹配的元素
* 这个函数是找出正在处理的元素的后代元素的好方法
* parent()
* `$("p").parent()`获取父元素
* children()
* `$("div").children()`获取子元素
* JQ的事件处理
* trigger:触发某个或某类元素中的事件
* `$("input").trigger("focus");`
* triggerHandler:触发某个元素中的事件
* `$("input").triggerHandler("focus");`
## 总结
* JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架:
* JQuery,ExtJS,DWR,Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* `window.onload`和`$(document).ready(function(){})`;区别?
* onload页面加载完成后才会执行.执行一次
* ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
* JS-->JQuery: $(JS的对象)
* JQuery-->JS: JQ对象.get(0), JQ对象[0]
#JQuery的选择器:(*****)
* 基本选择器:
* ID选择器,类选择器,元素选择器,通配符选择器,选择器并列.
* 层级选择器:
* 空格 ,> ,+ ,~
* 过滤:
* `:first`,`:last`,`:eq()`,`:even`,`:odd`...
* 属性选择器:
* `[属性名]`,`[属性名='属性值']`...
* 表单选择器:
* `:input`,`:text`,`:password`,`:radio`...
* 可见性:
*
* 表单对象属性:
* `:checked`,`:selected`,`:enable`,`:disable`
* JQuery实现效果:
* `show()`:显示
* `hide()`:隐藏
* `slideDown()`:向下滑动
* `slideUp()`:向上滑动
* `fadeIn()`:褪色
* `fadeOut()`:褪色
* `animate()`:自定义
* JQuery样式操作:
* `css()`;
* JQuery属性操作的方法:
* `attr()`,`removeAttr()`,`prop()`,`removeProp()`,`html()`,`text()`,`val()`,`addClass()`,`removeClass()`
* JQuery文档处理:
* `append()`,`appendTo()`,`insertBefore()`,`insertAfter()`,`remove()`,`clone()`,`replaceAll()`
* JQuery的事件:
* `click()`,`change()`,`submit()`,`dblclick()`,`keyUp()`,`keyDown()`...
* `toggler()`,`hover()` ---进行事件的切换.
* 事件绑定
* $().click(function(){});
* onclick(function(){});
* $().on('click','span',function(){});
* JQ的事件切换
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
## 重要单词
* 设置和获取
1. 属性
* `$("div").prop("属性名")`:获取
* `prop("属性名","属性值")`:设置,
* `attr...`
2. 表单值
* `$("#a").val()`:获取
* `val("")`:设置
3. CSS样式
* `css("")`:获取
* `css("","")`:设置
4. html内容
* `html("")` 传入纯文本或者是标签
5. 类样式
* `addClass("已经存在的类名")`
* `removeClass("")`
* dom操作
1. 创建 `$("<option></option>")`
2. 添加 `A.append(B)`
3. 删除
* `$().remove()`:会将自己删除
* `$().empty()`:只会删除子元素
4. 遍历
* `$.each(objects,function(index,element){});`
* `$("").each(function(index,element){});`
* `$("").each(function(){var index=... var element=...});`
* 事件
1. `对象.on('事件名','span',function(){})`
2. `this`代表触发事件的对象
3. `click`,`dblclick`,`keydown`,`keyup`,`mouseenter`,`mouseleave`,`change`,`blur`,`focus`
4. `find()`
* `$("p").find("span")`
* 搜索所有与指定表达式匹配的元素
* 这个函数是找出正在处理的元素的后代元素的好方法
5. `parent()`
* `$("p").parent()`获取父元素
6. `children()`
* `$("div").children()`获取子元素
7. `trigger()`:触发某个或某类元素中的事件
* `$("input").trigger("focus");`
8. `triggerHandler()`:触发某个元素中的事件
* `$("input").triggerHandler("focus");
# BootStrap
* BootStrap可以在那些地方使用
* BootStrap可以在那些地方使用:
* BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
* BootStrap的全局CSS:
* BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
* 栅格系统:
* Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
* 使用.row样式定义栅格的行.
* 定义列:.col-lg-n .col-md-n .col-sm-n .col-xs-n
|
|