黑马程序员技术交流社区

标题: [石家庄校区]web阶段笔记 [打印本页]

作者: 雪落 时间: 2018-5-3 15:31
标题: [石家庄校区]web阶段笔记
本帖最后由雪落于 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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2