前段HTML+CSS+Javascript+Jquery总结

前段技术加html+css+JS

     html:负责页面的结构（语义） 网页制作语言（不是编程语言）

     css：负责页面的美化（样式） js：增加交互或特效

HTML基本知识点：

    HTML含义:html超文本标记语言，通过标签进行语义化描述。“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素 。“标记”的主要含义不是从外观角度考虑，而是从语义的角度。

  1.<h1~h6> 主要给文字赋予标题的含义  容器级标签

  2.<p> 段落标签 文本级标签

  3.超链接a  <a href="链接资源的地址" target=_blank"></a> " target=_blank"在新窗口打开

  4.<img src="图片路径" title=“” alt=”“>

  5.表单：收集用户输入的信息

        *文本框：input type="text"

        *密码框：input type="password"

     laber 标签

          <laber for="txt">文字</laber>

         <input type="text"/>  //让label标签的文字和当前表单产生关联

     radio 单选  checkbox多选

     图片按钮：<input type="image" src="">

  6.<caption>定义网页标题

  7.<maequee>跑马灯标签

  8.<div>块级标签 容量级标签

  9.<span>行内标签

  10.有序列表：

             <ol>

                  <li></li>

                  <li></li>

             </ol>

         无序列表：

             <ul> 

                   <li></li>

                   <li></li>

             </ul>

  11.表格 <table> <tr>  <td>;

CSS基本知识点:   

  1.width：宽度； height：高度；

  2.padding：外边距； margin：外边距； border：边框；

  3.solid 实现  dashed 虚线  dotted 圆点虚线  double 双实线  ridge 具有3D立体效果的边框

  4.padding属性的写法：

             padding-top:上内边距；

             padding-right：右内边距；

             padding-bottom:下内边距；

             padding-left:左内边距；

  5.做网页时，需清楚默认样式 *{padding：0； margin：0；}

  6.border三要素：细线、颜色、线型（形状） 透明度：transparent；

  7.！imporant 给最高权重；

  8.text-align:center; 文本居中；

  9.display：inline； 块元素转为行内元素  display:block; 行内元素转为块元素；

  10.css中三种方式可以让元素脱离标准文档流：浮动、绝对定位、固定定位；

  11.clear：both； overflow：hidden；清除浮动

  12.list-style-type:none; 清除列表的小圆点；

  13.background属性：

       background-img：url（）设置背景图片；

       background-color 背景颜色；

       background-size: 放大/缩小倍数，用%表示；

       background-position:center top； 图片居中

       background-repeat:no-repeat; 图片不平铺；repeat-x; 表示水平方向重复； repeat-y;表示垂直方向重复；

       background-attachment 背景是否被固定；

  14.<link href="这里是css文件引用路径" type="text/css" rel="stylesheet"/>

  15.<style>这里是css样式编辑区域</style>

  16.css链接：

         a:link 普通的、未被访问的链接；

         a:visited 用户已访问的链接；

         a:hover 鼠标指针位于链接的上方； 

         a:active 链接被点击的时刻

         a的样式涵盖了:a:link,a:visited的样式；

   17.line-height 行高；

   18.font属性：能够让字号、字体、行高一起设置；

        font-size：字体大小设置；

        font-family:字体；

        font-weight:bold; 字体加粗；

   19.文本装饰：

        text-decoration:overline；上划线；

        text-decoration:underline; 下划线；

        text-decoration:line-through; 删除线；

        text-decoration：none；去掉下划线；

  19.rgba（0,0,0,0.8）；a表示透明度；

  20.position：relative；相对定位 用于元素微调；

       position：absolute；绝对定位； 更灵活

       position：fixed；固定定位；

       position：static； 静态定位；

  21.border-radius:10px; 圆角  opacity：0.5；透明度；

  22.margin：auto； 标准流中；

  23.z-index; 表示谁压着谁，数值大的压着数值小的；

  24.text-indent: 文字缩进；

  25.box-shadow:10px 10px 5px black；边框外阴影；

       box-shadow:insit 10px 10px 5px black；边框内阴影；

  26.text-shadow: 文字阴影；

  27.overflow：hidden； text-overflow：ellipsis； white-space:nowrap; 多余文字的省略；

  28.浏览器的兼容：

       -webkie-  谷歌兼容  -moz- 火狐兼容  -ms-  IE兼容  -o-  欧朋兼容；

  29.css3 2D转换transform；

         transform：scale（1.2）ratote（360deg）；scale 放大倍数  ratote 旋转度数；

         transition：all 0.2s ease； 达到渐入渐出的效果；

  30.resize：none； 文本域固定；

  31.outline：none；边框不变；

  32.元素的显示或隐藏：

            display：none；隐藏 元素所占空间的释放；

            display：block；显示；

            visibility:hidden；让多余的内容隐藏；

            visibility：visible；显示；

   33.vertical-align：middle；垂直居中

   34.行内式>id选择器>类>*>继承>默认选项；

Javascript基本知识点:

  javascript:基于对象和事件驱动并具有相对安全性的客户端脚本语言；

  javascript简介：*用途：制作页面交互效果，如轮播图的切换、tab栏切换、地图、表单。 

                            *脚本语言：嵌入在html中，由浏览器解析执行

  js核心内容：基础语法（重点） 变量  表达式  循环

                       dom（重点）js控制一些html元素

                       bom（了解）控制浏览器的一些东西

  1.js代码引入位置：

    <script type = "text/javascript">

                 //js代码写在这对标签里

                 alert（“......”）；完整写法 window.alert（“消息”）；

  </script>

  2.alert("消息"); 在浏览器中，弹出一个窗口；

  3.语法规则:

         a. js对换行、空格不敏感；

         b. 每句末尾，必加；；

         c. 都在英文状态下输入；

  4.注释：

       a.html的注释<!--...-->;

       b.css的注释/*...*/;

       c.js的注释 单行注释 //；

                        多行注释 /*...*/;

  5.直接量（常量）

  6.变量（未知数）js中用来储存不同数据（以字母开头或者以下划线，以$符开始的变量）；

  7.typeof判断数据类型，结果是number表示是数值（整数或小数）；string是字符串；

  8.外链式写法：<script type="text/javascript" src="引入文件”></script>

  9.confirm("...");弹窗显示  一般与if...else配合显示；

     prompt（“请你输入一个数”）用户输入的信息都是字符串；

     document.write("...”)往网页中输入信息，而且参数可以放置；

  10.变量值的传递：a=b； 含义：将b的值赋予给左边的变量a，但b不变；

  11.程序流程结构：

              a.顺序结构：程序从上往下，一句句执行；

              b.条件结构：if if-else等；

              c.循环结构：while、for、do-while；

   12.Math.floor(number)  向下取整；

        Math.ceil  向上取整；

        Math.round 四舍五入；

   13.==不全等于;  ===全等于;  布尔值 true false; !=不等于；！==不全等于；&& 并且；

       || 或；！取反；

   14.a++与++a都是表达式，表达式是有值的，a++表达式的值用a原来的值，++a表达式的值用a加1后的值；

   15.数组定义 var arr = new Array（）；//通过new来创建；

                       var arr2 = [ ];

   16.javascript的特点：

           a.一种解释性执行的脚本语言（也是一种解释性语言）；

           b.一种基于对象的脚本语言；

           c.一种简单弱类型脚本语言；

           d.一种相对安全脚本语言；

           e.一种跨平台性脚本语言；

   17.函数含义：对一段js代码进行封装，便于反复使用，提高代码的复用性；

   18.变量的作用域：全局变量和局部变量

               全局变量：a.在最外层声明的变量；

                                 b.在函数体内部，但是没有声明var的变量也是全局变量；

               局部变量：在函数内部 ，通过var声明的变量（局部变量的有效范围在本身所在的{ }内）；

               隐式全局变量：在函数内部来用var申明的变量，并在函数处也没有申明的系统默认为全局变量；

   19.事件三要素：a.事件源：一般是个名词，表示事件的来源；（开关 发起者 被触发者）

                             b.具体的事件（行为或动作）单击 双击 鼠标悬停；（打开）

                             c.事件处理程序：当事件发生，做什么？（灯亮）

   20.onmouseover 当鼠标移入；       onmouseout 当鼠标移出；

        onmousedown 当鼠标按下时；  onmouseup 当鼠标按下时；

        onfocus 获得焦点；                    onblur 失去焦点；

        onclick 点击                                onchange 值改变；

   21.js入口函数：

           window.οnlοad=function( ){ //窗口加载完执行里面的代码 }；

   22.js数据类型：字符串、数值型、布尔类型、null、object、undefind；

   23.获取表单的值：text.value ；

   24.函数参数：a.函数名.length得到形参个数；

                          b.arguments.length得到实参个数；

       变量提升：在函数内部通过var声明的变量，无论这个变量在什么位置定义，都先把声明放在前面，赋值放在定义的位置；

   25.找元素：a.通过id的值；

                      b.通过标签名；

   26.定义函数：考虑参数设置arr，接受传来的数组；

   27.排他思想：先干掉其他所有，最后剩下自己一个在处理；

   28.变量和属性：a.变量：独立，自由自在，在有效范围内大家都可以用；

                             b.属于某个对象的；对象属性或对象方法（）；一个对象可以设置或添加属性；

   29.数组的常用方法：

           a.添加元元素：arr.push（）；push（）方法在数组的末尾添加一个或多个元素，返回的是数组的长度；  unshift（）从数组的前面放入元素；

           b.删除元素：pop（）移除最后一个元素； shift（）移除第一个元素；  

              数组的连接concat（）该方法用于连接两个或多个数组，不会改变原来的数组，返回的是连接的数组的一个副本；

           c.把数组转为字符串：join（）作用是将数组各个元素是通过指定的分隔符，进行连接成为一个字符串；

           d.把字符串转为数组：split（）用于把一个字符串分隔成字符串数组；

   30.节点（标签 元素 节点）：

            元素节点：每一个HTML标签；

            文字节点：标签中的文字；

            属性节点：标签的属性；

        访问节点

            getElementById（）id访问节点；

            getElementByTagName（）标签访问节点；

            getElementsByClassName（）类名 兼容问题；主流浏览器识别，ie6，ie7，ie8不识别；要想任何浏览器都识别这个方法，需要自己封装

            *****封装自己的类；

       parentNode  父节点 

       兄弟节点：下一个兄弟  nextSlibling ie6,ie7,ie8识别；nextElementSibling 其他浏览器识别；

       兼容处理：one.nextElementSibling||one.nextSil 上一个与下一个兄弟同理；previouSibling   previousElementSibling；

       子节点（不常用，几乎很少用）

             firstChild 第一个孩子；  ie7,ie8识别     firstElementChild 正常浏览器识别（空格也算孩子） lastChild 最后一个孩子； lastElementChild；

       孩子节点（重点）

            childNodes选出全部的孩子   利用nodeType==1 获取元素节点；

            children选择所有的孩子，仅仅选择的是元素节点（庶出，推荐使用）；

      demo节点操作：新建节点、删除节点、克隆节点；

             新建节点 creatElement            插入节点appendChid            insertBefore子节点添加孩子          getAttribute（属性）获取属性；

    31.var time = new Date（）； 

         getFullYear（） 年；getMouth（）月；getDay（）星期；getDate（）日；getHours（）时；getMiutes（）分；getSeconds（）秒；

    32.setInterval  定时器；clearInterval清除定时器；setTimeout定时器执行一次关闭；

    33.this指的是事件源或者函数调用者；

    34.   even 对象；

    35.screenX  screenY  光标相对于屏幕的x/y的值；

         pageX     pageY     光标相对于当前页面（网页）的x/y值；

         clientX     clientY  光标相对于可视区的x/y的值；

    36.window.scrollTo（x，y）让窗口滚动到某个位置；

    37.joson一种轻量级的数据交换格式，js的一种表现法；

    38.事件冒泡：当一个元素的事件被触发，同样的事件会在这个元素的所有祖先元素上触发，这种过程叫事件冒泡；

JQuery基本知识点：

   1.基本使用：jquery是js的一个库，把我们开发过程中常见的功能进行了封装，放在一个文件里，这个文件就是库文件；

    2.jquery的入口函数：

        a.$(document).ready(function( ){ //代码 });

        b.$(function( ){ });

        c.JQuery(function( ){ });

    3.eq( );找元素； odd（）序号为基数，对列行数为偶数；even（）序号为偶数，对列行数为基数；

      $(" ").find(" ");找具体的某一个元素；

    4.addClass 添加样式； removeClass 移除元素； hasClass 在样式上来回切换；

    5.show（）显示  作用：让元素展示出来； hide（）隐藏   作用：让元素隐藏起来；

    6.slideUp（）向上滑动；slideDown（）向下滑动；slideToggle（）向上，向下切换；

    7.自定义动画：所有能够执行动画的属性必须只有一个数字类型的值；

      停止动画：stop（）;

    8.fadeIn （）淡入；fadeOut（）淡出；fadeToggle（）淡入淡出切换；

    9.append （）添加元素；clone（）复制元素；html（）创建元素；remove（）清除元素；

   10.attr（）获取属性；removeAttr移除属性；

      checked、selected、disabled要使用prop（）方法；

   11.值和内容：

          val（）获取内容方法   作用：设置或返回表单字段的值；例如：input，select，textarea的值；

          text（）方法  设置或获取匹配元素的文本内容；

   12.scrollTop（）作用：获取或设置元素垂直滚动的位置，有参数是设置，无参数时获取；

   13.each方法：一般针对不同的元素设置 不同的操作；

   14.简单事件：——bind方法——delegate——on；

   15.unbind（）对通过bind方式绑定的事件进行解绑，解绑指定元素的某个事件；

   16.undelegatete（）对通过delegate方式进行解绑——产生事件冒泡（进行解绑是对父级元素进行解绑）；

   17.trigger 让某个元素的事件触发；triggerHandler 触发事件响应方法；

   18.target属性  表示真正触发事件的元素；

   19.keydown键盘按下；

   20.siblings（）获得匹配集合中每个元素的同胞，通过选择器筛选是可选的（其他的兄弟，不包括自己）；