整理Java学习期间web前端知识

      主要知识点整理

                     前端

                            html

                                   标签

                                          <ahref='#' target='_blank'></a>

                                         

                                          <tableborder='1' cellspacing='1' cellpadding='1'>

                                                 <tr>

                                                        <td></td>

                                                        <th></th>

                                                 </tr>

                                          </table>

                                                 colspan   跨列（左右）

                                                 rowspan 跨行（上下）

                                         

                                          <form>

                                                 <inputtype=''/>

                                                        text

                                                        password

                                                        checkbox

                                                        radio

                                                        file

                                                        hidden

                                                        submit

                                                        reset

                                                        button

                                                        image

                                                 <textarea></textarea>

                                                 <select>

                                                        <optionvalue=''></option>

                                                 </select>

                                          </form>

                            css

                                   标签选择器

                                   类选择器       .class

                                   id选择器       #id

                            js

                                   基本语法

                                          数据类型       var

                                          数组      

                                   BOM

                                          消息框

                                          定时器

                                          history

                                          location

                                   DOM

                                          增删改查

                                                 document.getElementById()

                                                

                                                 document.getElementsByName()

                                                 document.getElementsByClassName()

                                                 document.getElementsByTagName()

                            jquery

                                   基础语法

                                          $()

                                  

                                   DOM

                                          for(){...}

                                          jq对象.each(){...}

                                          $.each(jq对象,function(){...})

                                  

                                   this

                                   $(this)

                                          在事件里面，指代是当前正在操作的事件源

                                          在each里面，指代是每一个被遍历的元素

                                  

                                  

                            bootstrap

1 html网页分层结构

 

html: Hyper Text Markup Language，中文称之为超文本标记语言

       结构层html

       表现层 css

       行为层JavaScript

<h1 align = “center”>  一级标题  格式居中

align 水平对齐方式

color

颜色

#000黑色  #fff白色

red红色    green绿色

size

大小

最小1，最大7，默认3

face

字体

只能显示本地已存在的字体

图片

src

 

图片的路径地址

必写属性，否则看不到图片

width

 

宽度

如果只设置其中一项，那么图片会等比例缩放

height

 

高度

title

 

提示文本

鼠标悬停在图片上方会出现的文字信息

alt

 

替换文本

图片加载失败的时候才会出现的文字信息

border

 

边框

只能定义边框的宽度

 

 

空格符

&nbsp;

 

< 

 

小于号

&lt;

 

> 

 

大于号

&gt;

 

©

 

版权符

&copy;

 

 

注意：大于号和小于号很特殊，想以文本形式出现在页面中，必须用特殊字符替代！

 

无序列表

<ul>

      <li>内容一</li>

      <li>内容二</li>

</ul>

 

 type="circle"

空心圆

 type="disc"

默认值，实心黑色圆

 type="square"

实心黑色正方形

注意：type写在ul身上是所有li改变，写在li身上是单个改变

有序列表

<ol>

      <li>内容一</li>

      <li>内容二</li>

</ol>

 

 type="1"

默认值，1、2、3...

 type="a"

小写的英文字母，a、b、c...

 type="A"

大写的英文字母，A、B、C...

 type="i"

小写的罗马数字，i、ii、iii...

 type="I"

大写的罗马数字，I、II、III...

注意：type写在ol身上是所有li改变，写在li身上是单个改变

 

超链接

href

跳转的路径地址

必写属性

target

打开方式

_blank 新窗口打开

_self   默认打开方式

空链接

锚点链接

 

表格

生成快捷键 table>tr*6>td*2

table

表格标签

tr

行标签

td

单元格标签

border

边框

cellspacing

单元格与单元格之间的距离

cellpadding

单元格与内容之间的距离

align

水平对齐方式（不推荐使用）

left左边  center中间  right右边

bgcolor

背景颜色（不推荐使用）

rowspan

跨行合并

colspan

跨列合并

width

宽度

height

高度

 

表单

表单域 <form action="该表单提交至的地址" method="get/post"name="该表单名称"></form>

get与post的区别

get安全性差 会把所有数据显示在浏览器地址栏 有长度限制

post较为安全 会把数据放在http请求中没有长度限制

表单控件

<inputtype=”” />

       文本框 <input type=”text” />

       密码框 <input type=”password” />

       单选框 <input type=”radio” />

       多选框 <input type=”checkbox” />

       上传控件 <input type=”file” />

隐藏域 <input type=”hidden” /> 临时储存数据 并不会显示在页面中

图片按钮 <input type=”image” src=”图片地址” /> 功能等同于提交

提交按钮 <input type=”submit” />

重置按钮 <input type=”reset” />

普通按钮 <input type=”button” /> 默认没有任何功能,可绑定

 

下拉菜单 <select name=””>

                     <optionvalue=”名字”>内容<option/>

                     <optionvalue=”名字”selected = “selected”>内容<option/>

multiple="multiple" 能同时选择多个  size="10"  

       value值

       placeholderH5新增的表单属性，不兼容ie67 8

       checked= checked 单选多选框 默认选择的选项

       selected= “selected” 下拉菜单的默认选项 加在option中

文本域

       <textarea><textarea/>  noresize

style="resize:none"  限制长宽不能拖动

              cols 宽度

              rows高度

       border-color边框颜色

2 css

英文：CascadingStyle Sheets。中文：层叠样式表。又称之为网页的美容师

样式规则

选择器{ 属性:属性值;属性:属性值; }

 

书写位置

       内嵌式一般书写在<head>范围内

              <style>

                     div{

                            color:red;

}

              </style>

       行内样式写在标签上

              <divstyle = “color:red;”></div>

       外链式外部.css文件

              CSS文件中

div{

                            color:red;

}

              使用link标签 写在head中

                     <linkrel="stylesheet" href="CSS文件位置"/>

CSS属性词

background   背景

                                  

                                   text-align       文本对齐方式

                                          leftcenter right

                                         

                                   font-size 文字大小  必须加单位px

                                  

                                          谷歌浏览器不支持小于12px的字

                                  

                                   text-indent     文本缩进       1em代表一个字宽

                                  

                                   font-weight   文本粗细       normal不加粗    bold加粗

                                  

                                   font-style       文本样式       normal正常        italic倾斜

                                  

                                   line-height     行高  必须加单位px   不加单位默认是百分比

                                  

                                   文本输入框的轮廓outline          浏览器默认的蓝色轮廓线    none

                                  

                                   word-wrap:break-word;文字到达边界自动换行

 

显示模式

块元素

       网页中，一切皆盒子，一切皆矩形

       盒子实体化：宽、高、背景色

                    

       特点：

              1.一行只能存在一个

              2.支持宽高的设置

              3.如果没有宽度，默认占整行

                                  

       代表：div ul ol li p h1 h2 h3 h4 h5 h6...

                    

                    

行内元素

       特点：

       1.一行可以存在多个

       2.不支持宽高的设置

       3.大小是由内容决定的

                           

       代表：span a b i...

 

显示模式转换

       display

              block转换成块

              inline转换成行内

             

              盒子隐藏none

              js中盒子的显示隐藏通过block和none来切换

基本选择器

标签选择器

       选择标签名把该标签名内的内容定义成一个样式,缺点:无法实现多样化

id选择器

       id唯一

#test{...}

       <divid='test'></div>

类选择器

       可重复使用

       <divclass='test'></div>

       <divclass='test1 test2'></div>

 

扩展选择器

后代选择器

       选择的是元素的子级

      

       父级选择器子级选择器{...}

      

并集选择器

       优化的时候使用，定义相同的样式，减少代码冗余

       把各个选择器通过逗号连接而成，最后一个后面不要加逗号

      

       div,.class,#id,ulli{...}

                           

       属性选择器

       选择器[属性=值]{...}

伪类

当达到一个状态的时候，可能得到某些样式

当失去这个状态的时候，刚刚得到的样式也随之而去了

                    

                     选择器:link            未被访问过的链接

                     选择器:visited 已经被访问过的链接

                     选择器:hover        鼠标悬停在元素上方的时候★★★★★

                     选择器:active        激活中的元素（按下的链接）

                    

                    

                     选择器:focus         获取键盘输入焦点的时候（针对表单元素）

                    

                     这个顺序不能颠倒  lv ha

盒子模型

盒模型=内容+内边距（padding）+边框（border）+外边距（margin）

                    

                     border:1pxsolid red;

                            会撑大盒子

                            border-top/left/bottom/right

                    

                     1px         宽度

                    

                     solid       线型

                            solid实线  dashed虚线  dotted点线

                           

                     red         颜色

                    

                    

                    

                     padding

                            padding-top/right/bottom/left

                           

                            会撑大盒子

                           

                     padding：10px                                 上下左右10px

                     padding：10px 20px                         上下10px 左右20px

                     padding：10px 20px 30px                 上10px 左右20px 下30px

                     padding：10px 20px 30px 40px        上10px 右20px 下30px 左 40px（顺时针）

                    

                    

                     margin   4种取值情况同padding

                            margin-top/right/bottom/left

                    

                     特殊取值：

                    

                     1.可以用负数,后写的盒子会压住先写的

                    

                     2.margin:0auto;可以让一个固定大小的块元素水平居中

                            margin-left:auto;

                            margin-right:auto;

背景

background:颜色 图片 平铺方式 位置;

                           

                            background-color 背景色

                           

                            background-image      背景图片              默认平铺

                           

                            background-repeat      背景平铺方式

                                   no-repeat

                                   repeat-x

                                   repeat-y

                                  

                            background-position:xy;    背景位置

                                   topright bottom left center

                                   具体的px     

                                   正    x向右y向下

                                   负    x向左y向上

                                  

                            background-size       背景尺寸 100%拉伸满,

常用样式

color

字体颜色

red红  green绿  blue蓝

#fff白  #000黑

rgb(0,0,0)  取值0-255

font-size

文字大小

必须加单位像素px

浏览器默认的字号是16px

text-align

文本对齐方式

left左  center中  right右

效果等同于标签属性align

text-indent

文本缩进

1em代表一个字宽

line-height

行高

必须加单位px

font-weight

文本粗细

正常：normal

加粗：bold

font-style

文本样式

倾斜：italic

正常：normal

outline

浏览器默认的蓝色轮廓线

没有：none

 

浮动

float: left       right       none

                     价值：布局

                     可以让块元素在一行上存在多个

                    

                     让元素飘起来，上浮到空中,原先在文档中的位置消失了

闭合浮动（清除浮动）

                    

                            找到最后一个浮动的元素，在它后面加一个空的div

                           

                            定义样式：

                                   clear:left  right  both

 

3 JavaScript

文件书写格式

{

“属性”:”值”,

}

特点：

1.    交互性（它可以做的就是信息的动态交互）

2.    安全性（不允许直接访问本地硬盘）

3.    跨平台性（只要是可以解析Js的浏览器都可以执行，和平台无关）

书写位置

在不影响页面功能的前提下,,,JS越晚加载越好

内嵌式

                            理论上js可以书写在html的任意位置

                            在不影响功能的前提之下，js越晚加载越好(例如在Html标签结束后)

                           

                     外链式

                            新建.js文件，在该文件中书写js语句，通过script标签链入到页面中

                            <scriptsrc="js/out.js"></script>

                            一旦做了引入，内部不允许写任何的js语句

                           

                     行内

                            事件属性，简写的事件

                            <inputtype="button" value="普通的按钮"onclick="alert('Hello World!');" />

                            引号交替使用的时候，必须单双分开

数据类型

js当中

                            数值型    凡是数字都是这个类型                     number

                            字符串    凡是引号包裹的都是这个类型           string

                            布尔型    true false                     boolean

                            对象型    null                              object

                            未定义型       undefined                           undefined

                           

                            新建数据类型，记住一个var即可

                           

                            var变量名 = ...;

                           

                            命名规范：

                                   1.只能由字母、数字、_（下划线）、$（美元符号）组成

                                   2.不能以数字开头

                                   3.命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突

                                  

                                   驼峰命名法

                                  

                           

                            检测数据类型

                                   typeof变量

                                   typeof(变量)

       alert(b);

       //原样输出的时候必须加引号

       //变量一定不要加引号

运算符

算术运算符

+

                     -

                     *

                     /

                     %

                     a++        ++a

                     --

                    

                     注意：

                            1.字符串通过加号可以跟任意的数据类型重新组成一个全新的字符串

                            2.如果字符串本身是一个数字的话，做除了加法以外的运算，首先会把他转成数值型再计算

                            3.如果不是数字，一定返回NaN              not a number

关系运算符

== 等于（只比较内容）     ===    恒等于（比较内容的同时还要比较数据类型）

注意：关系运算符返回的结果只有两个：true / false

      alert("22"== 22);// true

      alert("22"=== 22);// false

 

逻辑运算符

&&     与        true&&false         ====>false

||         或        true||false             ====>true

！       非        !true                     ====>false

false（理解）：0  null undefined

true（理解）：非0 非null 非undefined

三元运算符

条件？表达式1：表达式2

如果条件为true，返回表达式1的结果

如果条件为false，返回表达式2的结果

语句

全局函数：parseInt(num);      // 取整，不会四舍五入

Math.round(num);//取整，会四舍五入

if            switch           while             dowhile              for   

与Java用法相同

 

自定义函数++++

自定义函数

                            function fn(){...}

                           

                            这个函数不会主动执行，需要你调用

                           

                            fn();

                           

                     匿名函数

                            function(){...}需要调用  

1函数必须被调用,才会被执行

2如果函数需要返回值 直接使用return返回即可,不需要指定返回类型

3如果需要传递参数,不需要指定类型

4在js中不存在函数重载, 如果写了两个,后面的会把前面的覆盖掉

 

匿名函数

       无法直接调用

       1赋值给变量,通过变量名调用

       2自我调用

1     (function(){

              alert('我是一个匿名函数！');

       })();

      

2    var fn= function(){

             alert('我是一个匿名函数！');

事件++++

语法格式：事件源.事件类型=执行指令

事件三要素：

1.    事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签

2.    事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等

3.    执行指令：事件触发后需要执行的代码，一般使用函数进行封装

 

常用的事件

事件名

描述

onload

某个页面或图像被完成加载

onsubmit

当表单提交时触发该事件---注意事件源是表单form

onclick

鼠标点击某个对象

ondblclick

鼠标双击某个对象

onblur

元素失去焦点，通常针对表单元素

onfocus

元素获得焦点，通常针对表单元素

onchange

用户改变域的内容，通常针对表单元素

onkeydown

某个键盘的键被按下

onkeypress

某个键盘的键被按下或按住

onkeyup

某个键盘的键被松开

onmousedown

某个鼠标按键被按下

onmouseup

某个鼠标按键被松开

onmouseover

鼠标被移到某元素之上

onmouseout

鼠标从某元素移开

onmousemove

鼠标被移动

window.onload=function(){

           //只有当页面其他内容全部加载完成之后才会执行这里的语句

      }

checked =   true   false   true触发

BOM   对象

Screen对象：里面存放着有关显示浏览器屏幕的信息。

Window对象：表示一个浏览器窗口或一个框架。

Navigator对象：包含的属性描述了正在使用的浏览器。

History对象：保存浏览器历史记录信息。

Location对象：Window对象的一个部分，可通过window.location属性来访问。

window对象

消息框

警告框

                            alert();

                     确认框

                            confirm();

                                   true  false

                     消息框

                            prompt();

//alert();

       //confirm('你真的要离开我吗？');

       vari = prompt('请输入您的爱好','例如：看视频');

       console.log(i);

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

定时器

                     单次定时器（定时炸弹）

                            setTimeout(匿名函数整体或者自定义函数名,时长)

                            单位毫秒数

                            setTimeout(fn,1000)

循环定时器（闹钟）

                            setInterval(匿名函数整体或者自定义函数名,时长)

                     停止定时器

                            clearTimeout(变量名)

                            clearInterval(变量名)

                            定时器的变量名

定时器积累Bug的解决：

在JS中，如果一次性开启了N个定时器，则会产生定时器积累的Bug；解决这一Bug方法很简单，只需要在每次开启新定时器前，将旧的定时器做一次清空即可：

clearInterval(timer);

vartimer=setInterval(....);

注意：开启定时器前，一定要先清除定时器。

History对象

                     首先必须产生历史记录

                     history.forward()前进

                     history.back()        后退

                     history.go(正数前进几页,负数后退几页)          前往

Location 对象

location.href = ...

<input type="button" value="百度" onclick="location.href='www.baidu.com';" />

 

 

DOM(增删改查)

 

 

                     获取元素

                            id:                  document.getElementById(''); 唯一性

                           

                            下面的方式获取到的一定是一个集合或者一个数组

                            js中不允许对集合进行整体的操控

                            哪怕当前只有一个对象，也是一个数组的格式

                            name:            document.getElementsByName('');

                            tagname:       document.getElementsByTagName('');

                            classname:     document.getElementsByClassName('');

获取标签内容

                            innerHTML   实际开发运用的最多 后面内容加引号

                            innerText    写入的是实际文本

                     判断是否拥有子节点

                            hasChildNodes()  返回值true false

                     删除节点

                            remove()               删除某节点

                            父节点调用.removeChild(要删除的子节点)      删除子节点

                     替换节点

replaceChild(new,old)    如果替换还需保留原数据,补充:cloneNode(true是全部克隆,不填则是标签克隆)克隆复制一份去替换.

                     创建节点

                            document.createElement(‘标签’)  可以创建一个空标签

                                                                                                        

                            appendChild()

                            insertBefore(new,old)在old之前的位置加new

                                   在js中没有insertAfter()   

 

 

 

                     获取标签属性

                            对象.属性名                 一般使用

                            getAttribute(‘’)                     上述无用时使用

                            setAttribute(‘属性’,’值’)                设置属性

                            removeAttribute()         删除某属性的值

                     获取css

                            对象.style.属性名

                           

                                   font-size =====>  fontSize   减号不能出现,会按照算术符识别

JS当中的对象

                     Array对象                  就是数组,不过元素类型不限,长度随增

                     newArray();                 直接new

                     newArray(10);             定义长度,但是设置超出长度的角标时会自动扩大

                     [1,2,3,4,5]                     直接定义数组    可以直接定义多元数组

 

                     RegExp对象                正则

                     newRegexp("");            一种定义方式,内容需要用双\

                            /  /;                    这种定义方式常用,不需要双\

                     test();  true false       测试

                     ^行开始                     限定

                     $行结尾

       不支持双|| 双&&

一般字符串判断空的话 可以使用 str.replace(/^\s+$/,'') == '' 来判断

校验正则的方法：

正则对象.test(验证对象);

验证通过返回true ，验证不通过返回false

 

 

                     Data日期对象

年：getFullYear()              以四位数字返回年份

月：getMonth()                返回月份 (0 ~ 11)

日：getDate()                          返回一个月中的某一天

星期：getDay()                 返回一周中的某一天 (0 ~ 6)，0代表周日

小时：getHours()                    返回小时（0 ~ 23）

分：getMinutes()                    返回分钟（0 ~ 59）

秒：getSeconds()                    返回秒数（0 ~ 59）

毫秒值：getTime()                   返回 1970 年 1 月 1 日至今的毫秒数

toLocaleString()               把Date对象转换为字符串

toLocaleDateString()       把Date对象的日期部分转换为字符串

toLocaleTimeString()        把Date对象的时间部分转换为字符串

                     毫秒/1000   秒

                     秒/86400        天

                     Math对象

Math.random() 返回 0 ~ 1 之间的随机数

 

4 jquery

官网：http://jquery.com/

推荐在http://lib.sinaapp.com/下载小版本最高的1.X源文件。

引入：在需要使用jquery的html中使用js的引入方式进行引入

<scriptsrc="jquery-1.12.4.min.js></script>       该标签如果用来引包，里面不允许写任何js语句！

jq中针对同一个对象的所有操作，可以采用链式编程的方式写在一行上

基础

入口函数

差异: js：window.onload=function(...){}

jq：$(document).ready(function(){...});

$(function(){...});

       //js

       //只能书写一个

       //等待页面中所有的元素都加载完成（包括标签对、标签内容、标签属性）

 

       //jq

       //$() jquery的选择器环境

       //只要标签对加载出来了，就会开始执行

       //书写多个,并行存在,都会生效

 

事件

       //事件源.事件类型(执行指令)

       //jq里面的事件都不需要加on

       this不需要加引号

对数组

       对数组可以整体操控

       获取数组元素:数组名.eq(i)

对象互转

       js对象转换成jq对象：$(js对象)

jq对象转换成js对象：jq对象[索引]或 jq对象.get(索引)

 

控制CSS

格式: var box = $('#box');

       box.css('width','200px');

批量控制; box.css({

                     "width":"200px",

                     "height":"200px",

                     "background-color":"skyblue"

              })

获取: box.css('width');

 

控制标签属性;

       //js

       //.title

       //getAttribute('title')

       //setAttribute('title')

       //removeAttribute('title')

 

       //jq

       //attr()

       //attr({})

       //removeAttr()

获取部分属性状态获取不到(例如checke),获取到的是undefined

这时使用

       //prop()

       //prop({})

       //removeProp()

补充

       //disabled让表单控件启用或者禁用

disabled="disabled"

true启用      false禁用

 

连接

val()

无参获取value  有参修改值

控制标签内容

相当于js的innerHTML();

jq对象.html(); 有参修改,无参获取

 

选择器

基本选择器

$('标签名')       标签选择器

$('#id名')        id选择器

$('.class名')     类选择器

层次选择器

$('A  B')    获得A元素内部的所有子元素B          

$('A >B')   获得A元素内部的第一层所有子元素B

$('A + B')   获得A元素同级下一个B元素       

$('A ~ B')   获得A元素后面的所有同级B元素

 

筛选选择器

jq对象.parent()           当前元素的亲生父级元素

jq对象.parents()         当前元素的所有父级元素

jq对象.siblings()         最牛的筛选选择器，可以选出除了自己以外的所有同级元素

jq对象.children()         当前元素的第一层子元素

jq对象.find()               当前元素的指定子级元素

表单属性选择器

$(':enabled')          选择可用的input标签

$(':disabled')         选择不可用的input标签         

$(':checked')         选择选中的radio或者checkbox

$(':selected')         选择选中的<select>

属性选择器

$('A[属性名]')             获得有属性名的A元素

$('A[属性名=值]')        获得属性名等于值的A元素

$('A[属性名!=值]')        获得属性名 不等于 值的A元素

$('A[属性名^=值]')      获得属性名 以值开头 的A元素

$('A[属性名$=值]')       获得属性名 以值结尾 的A元素

$('A[属性名*=值]')       获得属性名 含有值 的A元素

$('A[属性名!=值][属性名^=值]')    复合属性选择器，多个属性同时过滤

基本过滤选择器

$('A:first')              过滤出第一个

$('A:last')              过滤出最后一个

$('A:not(选择器)')   排除指定的元素

$('A:eq()')              按索引值过滤    

$('A:gt()')              过滤大于指定索引值  从0开始

$('A:lt()')                过滤小于指定索引值

$('A:even')             过滤索引值为偶数  从0开始

$('A:odd')              过滤索引值为奇数

$(':header')           过滤所有的标题标签     h1-h6

$(':animated')       过滤正在执行动画的标签对象

 

JQ动画

 

对角线动画

jq对象.show()    hide()    toggle()

注意：

1.    括号中可以加动画时长（slownormal fast毫秒数）任一个；

2.    fast=200    normal=400    slow=600

3.    默认不做动画

 

滑动动画

jq对象.slideDown()    slideUp()    slideToggle()

注意：如果没有参数，默认以normal（400）的速度做动画

动画队列机制

jq中如果多次触发动画，这些动画将放入一个队列里，该队列中的动画都会被执行，并且都会执行完毕。

stop( )作用：清空动画队列。

类似于开启定时器之前先清空一次一样的道理！

注意：一定要写在动画开始之前。

 

淡入淡出动画

jq对象.fadeIn()    fadeOut()    fadeToggle()

注意：如果没有参数，默认以normal（400）的速度做动画

 

透明度动画

效果：让元素在规定时间里改变一定的透明度

jq对象.fadeTo(时间,透明度)           透明度取值0-1

可以准确的设置透明度，而且透明度最终会停留在标签身上。

注意：只是降低盒子的透明度，不是隐藏盒子

 

自定义动画

效果：把原本生硬的状态变化通过时间渲染出来

animate({属性名1：值1}，动画时长，回调函数)；

在jq中，针对任意数值型CSS属性（bg-position除外），都可以产生动画。

注意：回调函数是可选的参数，如果书写了，代表动画结束后，才会去执行该函数体内的代码块。

 

控制class

                            //addClass()

                            //removeClass()

                            //toggleClass()          切换

                            //hasClass()   true false

DOM操作(增删改)

增

                     内部新增

                            A.append(B)          在节点内部的末尾处新增

                            B.appendTo(A)

                           

                            A.prepend(B) 在节点内部的最前面新增

                            B.prependTo(A)

      

                     同级新增

                            A.after(B)       同级之后

                            B.insertAfter(A)

                           

                            A.before(B)           同级之前

                            B.insertBefore(A)

删

                            //remove()     删除（删除整条标签）

                            //empty()       清空（清空内容）

 

改

                            //old.replaceWith(new)        完整替换掉(包括标签)

索引值

                            //获取到当前元素在文档中相对于他父亲的位置

                            //index()  从0开始排序

                            //-1获取不到该元素，文档中不存在该元素

 

遍历函数

Jq对象.each（function（index，element）{

alert（index）;     //打印索引

alert（element）; //打印集合对象中的每一个元素

}）

$(element).css('color','red');在使用的时候必须加选择器环境$()

经验：一般我们很少去用element这个参数，this在这里等同于element

 

Jq对象.each(function(){

           $(this).css('color','red');

}

事件绑定解绑切换

绑定

Jq对象.bind(‘事件’,function(){

事件体

})

Jq对象.bind({事件类型1:function(){事件体},事件类型2:function(){事件体}});

解绑

Jq对象.unbind("事件类型");

解绑所有事件：

Jq对象.unbind();

解绑指定事件：

Jq对象.unbind("click");

切换

       //mouseover

       //mouseout

       //hover(function(){mouseover},function(){mouseout});第一个移入第二个移出

      

       //只写一个function，代表移入和移出都会执行一次里面的语句

       //hover(function(){mouseover，mouseout});

 

5 表单验证插件

基于JQ所以需要先导入JQ再导插件

l  官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

l  帮助文档位置：http://jqueryvalidation.org/documentation/

<script>

$("form表单的选择器").validate({

rules:{

          表单项name值:校验规则，

          表单项name值:校验规则... ...

},

messages:{

          表单项name值:错误提示信息，

         表单项name值:错误提示信息... ...                                                                                          

}

});

</script>

 

常用校验规则

自定义校验规则

$.validator.addMethod(name,method,message);参数1：name，校验规则的自定义名称。例如：aaa

      参数2：method，执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。

           function(value,element,params){},处理函数被调用时，可以获得3个参数。

                 参数value：表单项的value值。例如：<inputvalue="">

                 参数element：被校验的表单项对象。

                 参数params：使用当前校验规则传递的值。例如：rules : { username : {required : true}}

                     只有为true才会开始校验

      参数3：message，校验未通过时的提示信息（可以不写，不写可以在messages里面配置）。

 

6 Bootstrap

官网：http://getbootstrap.com/

中文网：http://www.bootcss.com/

菜鸟教程网：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

<divclass="container"></div> 容器套装有宽度

 

<divclass="container-fluid"></div>   100%宽度,占据整个视口

 

每一行容器最多可以划分12个格子,多余会另起一行

响应式工具

列偏移

col-lg-offset-num       盒子往右偏移num格

注意：移动的距离也是占据格子的份数的，所以会影响其他盒子！

（Ps：lg的尺寸和num都是可以换的）

列排序

col-lg-push-num      盒子往右偏移num格，不会影响其他盒子

col-lg-pull-num          盒子往左偏移num格，不会影响其他盒子

（Ps：lg的尺寸和num都是可以换的）