html,css

超文本标记语言，是一种标签语言
由单独的或者成对的标签组成
文本编辑器打开就是一些标签文本，浏览器打开会渲染成网页

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

常见的标签

 标题标签：<h1>一号标题</h1>
 区域标签：<div>一段内容</div>
 段落标签：<p>段落</p>
 图片标签：<img src="图片路径" alt"图片描述">
 链接标签：<a href=“链接地址”>链接描述</a>
 换行：<br>
 行内一块内容：<span></span>
 列表标签：
   <ul>
     <li></li>
     <li></li>
     <li></li>
   </ul> 
 ```
- 字符实体：一些符号已经被使用了，如><,如果还想使用，在HTML中就使用这些符号的字符实体形式
 - &nbsp:空格
 - &lt:<
 - &gt:>     

- css，层叠样式表，是对标签的样式化处理文件
- 有了css,HTML专心堆叠网页结构，网页内每一个标签的样式就交给css文件了。

- 格式

 ```
 选择器{
   属性1：值；
   属性2：值；
   属性3：值；

 }


 ```

- css 引用方式
 - 1.内联式：直接写在标签的属性里：`<div style="width:100px; height:100px; background:red ">......</div>`
 - 2.嵌入式:`<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>`
 - 3.外链式:通过link标签，链接外部样式文件到页面中。`<link rel="stylesheet" type="text/css" href="css/main.css">`

- css 选择器
 - 标签选择器：直接使用标签类型名进行所有这个类型标签的样式设置，范围最大。
 - `div {color:red}`
 - 类选择器：使用标签里的class属性名对标签进行选择
 - `.blue{color:blue}`  
 - 层级选择器：利用标签的包含关系对标签进行选择
 - `div .bule{color:blue}`
 - id 选择器：利用标签中的id属性对标签进行选择，一般标签的id属性是唯一的
 - `#box{color:red}`
 - 组选择器：一次性选择多个标签，进行相同的设置
 - `#box1,.blue,#box2{color:blue}`
 - 伪类选择器：在类选择器的基础上再加一个:hover,增加了，当鼠标放在这个标签上时的样式
 - `.box1:hover{color:red}`
 - 伪元素选择器：在常规选择器的基础上加上：before/:after，可以在css里标签的行首或者行尾增加文字。
 - `.box:before{content:"行首文字"}`
 - `.box:after{content:"行尾文字"}`

- css 属性
 - width：设置标签的宽度，单位为px(像素数)，如：`width:100px`
 - height：设置标签的高度，单位为px(像素数)，如：`height:200px`
 - backround:设置元素的背景颜色或者图片，如:   `background:gold`
 - border:设置元素四周的边框，如：`border:1px solid black`
 - border可以分开设置：border-top,border-left, border-right, border-bottem
 - padding:设置元素的内边距，如：`padding:20px`,padding也可以拆分分别设置，同border
 - margin：设置元素的外边距，如:`margin:20px`,margin的四个边也可以分别设置，同上
 - float:设置元素浮动，浮动可以让元素排在一行，分为左浮动：`float:left`和右浮动`float:right`
 - list-style:设置无序列表中的小圆点，一般设置为‘无’，如：list-style:none 

- 其中，文本常用的属性
 - color：设置文本的颜色，如:color:red
 - font-size：设置文本的大小，如:font-size:12px
 - font-family:设置文字的字体，如：font-family:'Microsoft Yahei'
 - line-height:设置文字的行高，如:line-height:24px 
 - font-weight:设置文字时都加粗，如:font-weight:bold  
 - test-align:设置文字水平对齐方式，如：text-align:center 
 - text-indent:设置文字首行缩进，如：text-indent:24px
 - font-style:设置文字是否倾斜，如：font-style:'italic'
 - font同时设置几个属性：font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

- 元素溢出
 - 子元素的大小超过父元素，默认就会出超出显示，也可以，设置溢出的显示方式
 - overflow：visible:默认值
 - overflow:hidden:内容被修剪，即溢出内容不可见
 - overflow:scroll：浏览器以滚动条形式查看溢出内容,不溢出也显示滚动条
 - overflow: auto:浏览器自动判别是否需要显示滚动条来显示溢出内容

- css盒子模型
 - 元素在页面中的显示，类似一个盒子从里到外为：内容，内边距，边框，外边距，可以分别设置，整体显示

 - chrome开发者工具，可以快速查看元素的结构，样式，以及盒子模型结构和尺寸

- 常用图片格式
 - psd:ps专用，图片信息完整
 - jpg：网页制作使用最普遍的，优点：压缩效率高，容量小；缺点:有损压缩，失真，并不支持透明背景，不能做成动画
 - gif：制作网页小动画常用格式。优点：无损压缩，图像容量小，可以制作成动画，支持透明背景；缺点：图像色彩范围小，不支持半透明
 - png ：网页制作及日常使用常用格式。优点：无损压缩，图像容量小，支持透明，半透明，透明图像的边缘光滑；缺点：不能制作成动画
 - 总结
  - 网页制作，如果需要使用半透明，透明，使用.png，不使用，用.jpg
  - 动画使用gif


- html表单
 - 表单类似平时填写的申请表，信息表。用于搜集不同类型的用户输入，由不同类型的标签组成。
 - 例子

 ```
 <form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

其中
标签定义表单的整体区域
- action属性定义表单数据的提交地址
- method属性定义表单的提交方式，一般有GET,POST方式
<label></label>标签为表单元素定义文字标注
<input />标签定义通用的表单元素
其中type属性
- text:单行文本输入框
- password:密码输入框
- radio:单选框
- checkbox:复选框
- file:上传文件
- submit:提交按钮
- reset:重置按钮
- button：普通按钮
name属性:定义表单元素的名称，为提交数据时的键名
value属性:定义表单元素的值，为提交数据时的值
<textarea>标签：定义多行文本输入框
<select><option></option>...</select>:定义下拉元素的选项
搜索框就是一个表单提交的例子
表单中的元素可以拿出来单独使用
块元素
- 也叫行元素，独占一行的元素
- 有：div，p, ul,li,h1`h6
- 特点是：支持全部样式；没有设置宽度，宽度为父级宽度的100%；盒子模型占据一行
- 一些块元素是包含默认样式的
- 如：p：默认外边距，ul:默认外边距和内边距，以及条目符号；h1-h6:外边距和字体大小；body:默认外边距
为了可以自定义，一般会重置这些元素的默认样式，叫样式重置

/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul{
    margin:0px;
    padding:0px;
}

/* 清除标签默认条目符号 */
ul{
    list-style:none;
}

/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    /* 根据实际需求来加   */
    font-weight:normal;
}

内联元素

行内元素，可以多个在一行显示
a,span
特点：
- 不支持宽，高，margin上下，padding上下
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
- 解决内联元素之间间隙方法
- 去掉内联元素之间的换行
- 将内联元素父级样式中font-size设置为0,内联元素自身再设置font-size
- 其他内联元素
- ：强调词
- :专业词汇
- ：关键字/产品名
- :表示非常重要的内容
- 包含默认样式的内联元素
- a:含有下划线及文字颜色
- em,i:默认为斜体
- b,strong:默认为加粗
- 实际开发中，会进行样式重置
```
/* 去掉a标签默认的下划线 */
a{
text-decoration:none;
}
/* 去掉标签默认的文字倾斜 */
em,i{
font-style:normal;
}
/* 去掉标签默认的文字加粗(按实际需求) */
b,strong{
font-weight:normal;
}
```

内联元素的特性，类型转换

内联块元素
- 可以在一行展示的块元素
- img input
- 特点：支持全部样式；如果没有设置宽高，宽高由内容决定；代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align设置子元素水平对齐的方式
块元素，内联元素，内联块元素，可以通过display属性来回转换
display属性
- none:元素隐藏且不占位置
- block:以块元素显示
- inline:以内联元素显示
- inline-block：以内联块元素显示

浮动

元素在一行中的展示方式
左浮动：float:left;右浮动：float:left
特性：
- 浮动的时候，碰到父元素的边界，其他元素才停下来
- 块元素浮动会变成内联块元素
- 父元素如果没有设置尺寸（一般是高度不设置），父元素内的整体浮动的子元素无法撑开父元素，解决办法是父元素清除浮动：父元素增加属性overflow：hidden

定位

文档流：每个盒子好好的占据自己的位置
可以利用元素的Position属性来设置元素的定位状态
- relative：相对于自己原位置进行偏移，元素原位置文档流位置保留
- absolute:相对于上一个设置了定位元素的父级元素进行定位，如果找不到，相对于body元素进行定位，是脱离文档流的
- fixed：相对于浏览器窗口进行定位。脱离文档流，像漂浮在文档流的上方
- static:默认值，没有定位
定位元素的偏移
- 需要定位的元素，需要用Left,right，top,bottom来设置相对于参照元素的偏移值
定位元素的层级
- 定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级

.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;            /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10 */
}

background属性

是给盒子设置背景图片和背景颜色的属性
是一个复合属性，包括以下几个设置项
- url:背景图片的地址
- position：背景图片的位置
- repeat:背景图片的如何平铺
- color：背景的颜色
backgroud：url(文件路径) left center no-repeat #00FF00
位置也可以用具体的位置点，是背景图片相对于元素的左上角进行移动.先左右，再上下，正值左下，负值右上
- background：url(location_bg.jpj) -110px -150px ，表示图片相对于元素向左移动100像素，向上移动150像素
雪碧图

css权重

是指样式的优先级。
当有两条或者多条元素作用于一个元素的术后，权重高的样式先起作用。权重相同的，后面定义的样式会覆盖前面的样式。
权重的大小以数值的形式体现，计算样式的优先级，计算他们的权重值的和即可，大的，先执行，小的后执行
- ！impport,加载样式属性值后，权重值为10000
- 内联样式，如：Style=” ,权重为1000
- id选择器，如：#content,权重值为100
- 类，伪类选择器，如：.content:hover，权重值为10
- 标签选择器，如，div,p 权重值为1
示例

 <style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

表格元素

指在HTML中定义像excel那样的表格
标签

 - <table></table>：声明一个表格
 - <tr></tr>:定义表格中的一行
 - <td></td>,<th></th>:定义一行中的一个单元格，td代表普通单元格，th代表头单元格

表格整体的样式属性设置
- border-collapse：设置表格的边线合并，如：border-collapse:collapse;
单元格的常用属性
- colspan:设置单元格的水平合并，设置值是合并的单元格数量
- rowspan：设置单元格的垂直合并，设置值是合并的单元格数量

页面开发流程

1.创建项目目录
- 一般先创建一个总目录，然后在此目录下创建images,css,js三个目录，分别存储图片，css文件和js文件
2.切图
- ps,制作需要的各种图
3.制作雪碧图
- 将小的装饰图合并成一张大图
4.新建HTML文件，新建和编写，reset.css
5.参照效果图，编写HTML和css代码

javascript

前端三大块：html，css,js
- html负责页面的结构
- css负责页面的样式
- js负责处理页面本身的行为，如动画和元素与用户的交互
javaScript是一种运行在浏览器的脚本语言。
解决的问题是前端页面与用户交互的问题，如点击按钮,移动鼠标等
js是需要浏览器解释执行的。
前端脚本语言还有：JScript（微软，IE独有）；ActionScript（Adobe公司）

js嵌入页面的方式

行间事件。用于简单的事件
- <input type="button" name="" onclick="alerk('ok!')">

页面script标签嵌入。用于简单的交互逻辑

<script type="text/javascript">
alert('ok!')
</script>

外部引用,一般用法
- <scipt type="text/javascript" src="js/index.js"></script>

js基本语法

注释
- 单行注释：//单行注释
- 多行注释
```
/*  
多行注释
1、...
2、...
*/
```

变量定义

js是一种弱类型语言，变量的类型由它的值来决定
var：用var 来声明要定义一个变量

var iNum = 123;
var sStr1 = "michael";

//多个变量定义可以使用同一个var
var iNum=123, sStr1="michael";

变量类型

5 种基本数据类型

1：number :数字类型
2：string：字符串类型
3：boolean:布尔类型
4：undefined:undifined类型，变量声明但是未初始化
5：null:nulll类型，变量声明了，是为了存储对象的，还没存储，返回的就是  null

1 中复合类型
object:对象类型

命名规范

1.区分大小写
2.第一个字符必须是字母，下划线，或者$(python中没有)
3.其他字符可以是字母，下划线，数字或者$(python中没有)
匈牙利式命名规范：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

注意点
- 结束一句代码要用；
- js不想求缩进，但是为了美观，易于阅读，还是要缩进

函数

是什么
- 可以重复执行的代码块

定义与执行

<script type="text/javascript">
// 函数定义
function fnAlert(){

 alert('hello');
}

// 函数执行
fnAlert()

</script>

预解析
- js代码解析过程分为两个阶段，预解析和执行
- 预解析会将定义的函数和变量加载一遍
- 就是说，函数可以在定义前使用；变量的如果没有赋值，先赋值为undefined
```
<script type="text/javascript">    
fnAlert();       // 弹出 hello！
alert(iNum);  // 弹出 undefined
function fnAlert(){
    alert('hello!');
}
var iNum = 123;
</script>
```
函数传参
- 像python一样进行传参
- 参数不能设置为缺省值
函数返回值
- 像python中一样使用

条件语句

需要控制语句的走向，就需要用到条件语句
if ; if else;
条件判断时的运算符
- ==，===，>,>=,<,<=,!=,&&，||，！

获取元素的方法

根据元素的id值进行元素的获取
使用内置对象document的getElementById方法获取

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div

这样有一个问题，在获取元素前必须定义，所以代码必须在html该元素之后获取，比较不方便

结局办法：将获取元素语句放在 wIndow.onload（）{}函数中即可，表示在页面加载的时候再运行，而此时，该元素肯定已经被编译过了

<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById('div1');
}
</script>

....

<div id="div1">这是一个div元素</div>

操作元素的属性

对获取到的页面元素进行操作，操作方式包括读和写
读：var 变量名 = 元素对象.属性名

写：元素对象.属性名 = 新的属性值

注意有些属性名在js中的写法个html中不一样

"class" 在js 中写成 ”className“
"style" 属性里面的属性，有横杠的改成驼峰式，如：”font-size“,改成"fontSize"

例子：

<script type="text/javascript">

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oA = document.getElementById('link1');
    // 读取属性值
    var sValue = oInput.value;
    var sType = oInput.type;
    var sName = oInput.name;
    var sLinks = oA.href;
    // 写(设置)属性
    oA.style.color = 'red';
    oA.style.fontSize = sValue;
}

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">巴拉拉小魔仙</a>

innerHTML

标签包裹里的内容‘
可以获取和写入标签包裹里的内容


# 获取

var sTxt = oDiv.innerHTML


# 写入

oDiv.innerHTML = '<span>这是新增加的一段内容</span>'

事件属性

一个元素（标签）除了有，id,class,style这些属性，还有事件属性
事件：发生的动作，如：点击事件(onclick)，鼠标移入事件(mouseover),鼠标移出事件(mouseout)…
事件属性就是标签一旦发生了某些事件，起作用的属性
一般，事件属性都会关联相关函数

格式：元素对象.事件属性=函数名

<script type="text/javascript">

window.onload = function(){
var oBtn = document.getElementById('btn1');

oBtn.onclick = myalert;

function myalert(){
    alert('ok!');
}
}

</script>

匿名函数

没有名字的函数
用于直接将函数体传给元素事件属性的时候
可以减少函数名的命名数
格式：对象名.事件名= function(){函数体}
- 例子
```
oBtn.onclick = function (){
    alert('ok!');
}
```

数组

一组数据的集合
- 在js中数组中的类型可以是不一样的
- 像python中的List类型:[1,2,3,"abc"]
定义数组
- 对象实例创建：var alist = new Array(1,2,3)
- 直接创建：var aList = [1,2,3,”abc”]
操作数组
- 获取长度:aList.length
- 用下标查询某个值:aList[2]
- 将数组元素串成字符串:aList.jin('-')
- 从数组最后增加或者删除元素:aList.push(5),aList.pop()
- 将数组反转:aList.reverse()
- 返回数组中元素第一次出现的索引值:aList.indexOf("a")
- 在数组中删除插入元素
```
var aList = [1,2,3,4];
alist.splice(2,1,5,6,7);//从数组的第2个元素开始(不包括第2个元素)，删除1个元素，并且将5，6，7加入到数组中去
alert(aList);//弹出1,2,5,6,7,4
```
- 多维数组
- 数组的成员也是数组
- var aList = [[1,2,3],[4,5,6]]

循环语句

一种代码结构
- 有需要重复执行的语句时，使用循环语句

while 循环

while(条件)
{
需呀循环执行的语句
}

for 循环

for(var i=0; i<len; i++)
{
 需要循环的语句

}

字符串处理

对js里的字符串可进行一系列操作

字符串合并：

var sTr1 = "12";
var iNum1 = 23;
var iNum2 = 25;
var sTr2 = "abc"

alert(iNum1+iNum2);//弹出48
alert(iNum1+sTr1);//弹出 2312，字符串和数字相加，会将数字转换为字符串
alert(sTr1+sTr2);//弹出 12abc

将数字字符串转换为整数:parseInt()

var sTr1 = "12";
var iNum1 = 23;
alert(parseInt(sTr1)+iNum1); //弹出35

将数字字符串转换为小数:parseFloat()

var iNum1 = 12;
var sTr2 = "23.22";
alert(iNum1+parseFloat(sTr2));//弹出25.22

将一个字符串分割成字符串组成的数组 :split()

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

查找字符串是否含有某字符:indexOf()

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

截取字符串:substring(start, end),不包括end

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

字符串反转：转换为数组后使用.revese()在转换为字符串

var sStr = "asdfasdf123asdf"
var sStrReverse = sStr.split('').reverse().join('')

alert(sStrReverse)

调试程序的方法

alert
console.log()
document.title

定时器

定时器是在js中用于定时调用函数和制作动画的功能类

//定时器：
setTimeout :只执行一次的定时器
clearTimeout：关闭只执行一次的定时器
setInterval:反复执行的定时器
clearInterval：关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

变量作用域

变量的作用范围，分为全局变量和局域变量

全局变量:在函数之外定义，在整个页面公用的变量
局域变量:在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
    // 定义局部变量
    var b = 23;
    alert(a);
    // 修改全局变量
    a++;
    alert(b);
}
myalert(); // 弹出12和23
alert(a);  // 弹出13    
alert(b);  // 出错
</script>

封闭函数

定义好就执行的函数
格式

//封闭函数定义
(function(){
  函数体 })();

// 一般函数定义
function func1 (){
  函数体
};

作用
- 创造一个独立的空间，在封闭函数里定义的变量和函数跟外面的同名的话，不会影响外面的变量或者函数

var iNum01 = 12;
function myalert(){
    alert('hello!');
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();

JQuery

是什么？

是应用最广泛的javascript函数库
愿景：Write Less, Do More
导入：将这个文件导入到HTML文件中即可
- <script type="text/javascript" src="js/jquery-1.12.2.js"></script>

解决需要先解析才能执行的问题

和原生js一样，直接使用Jquery，如果写在HTML代码的上面，也会出现因为没有定义就使用的错误
解决办法，更简单的.read(),比window.onload()更快

$(document).read(function(){
  jQuery代码；
  });

 更可以简写成

 $(funcition(){
   jQuery代码
 });

jQuery选择器

选择某个网页元素的方式

然后对这个元素进行操作

格式：$(‘选择器’)；用法和css选择器一样

$('#myId') //选择id为myId的元素
$('.myclass') //选择class为myclass的元素
$('li') //选择所有的li元素
$('#ur1 li span')//选择id为ur1元素里的 所有li标签 里的所有span标签
$('input[name=first]')//选择name属性为first的input元素

对选择集进行过滤

$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择不class属性不等于myClass的div元素
$('div').eq(5);//选择第6个div元素

选择集转移

$('#box').prev();// 选择id是box的元素的上一个同辈元素
$('#box').prevall();//选择id是box的元素之前所有的同辈元素
$('#box').next();//选择id是box的元素的后面的一个同辈元素
$('#box').nextall();//选择id是box的元素的后面的所有同辈元素
$('#box').parent();//选择id是box的元素的父级元素
$('#box').children();//选择id是box元素的所有子元素
$('#box').siblings();//选择id是box元素的所有同级元素
$('#box').find('.myClass');//选择id是box元素内的class属性为myClass的元素

判断是否选择到了元素

使用length属性判断

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length);// 弹出1
alert($div2.length);// 弹出0

...

<div id=”div1“>这是一个div</div>

jQuery样式操作

用JQuery语法对获取到的元素的样式进行读写操作
核心思想：同一个函数完成取值和赋值

// 获取div的样式
var sTr = $('div').css('width')
var sTr1 = $('div').css('color')

// 设置div的样式
$('div').css("width","30px");
$('div').css("height","30px");
$('div').css({fintSize:"30px",color:"red"});

选择器获取的多个元素，获取信息获取的是第一个，比如$(“div”).css(“width”)，获取的是第一个div的width

操作样式类名

$("#div1").addClass("divClass2") // 为id为div1的元素增加类名 divClass2
$("#div1").remove("divClass") // 为id为div1的元素删除类名divClass
$("#div1").remove("divClass divClass2") // 为id为div1的元素删除类名 divClass 和 divClass2
$("#div1").toggleClass("anotherClass") // 重复切换anotherClass的选择器(使用/不使用)

　绑定事件

－给获取到的元素绑定一个事件

$(#btn1).click(function(){
  // 内部的this指的是原生对象

  // 使用 JQuery对象用$(this)

})

获取元素的索引值
- 获取一个元素在其同胞元素的索引值
- $li.index()

jquery动画

使用jquery函数库里的animate方法完成一些动画的效果

$('#div').animate({
   width:300,
   height:300},
   1000,
   'swing',
   function(){
     alert('done!');
   }
});

其中：
参数1：要改变的样式属性值。写成字典的形式，注意是动画结束的终止位置的样式
参数2：动画持续的事件。单位为毫秒
参数3：动画曲线。默认为’swing‘,缓冲运动，还可以设置成’linear‘,匀速运动
参数4：动画回调函数。动画完成后执行的匿名函数

jquery的特殊效果

fadeIn():淡入

 $btn.click(function(){
   $('#div1').fadeIn(1000,'swing',function(){
   alert('ok!');
 });
 });

fadeOut():淡出
fadeToggle：切换淡入淡出
hide():隐藏元素
show():显示元素
toggle():切换元素的可见状态
slideDown():向下展开
slideUP():向上卷起
slideToggle():依次展开或者卷起某个元素

jquery的链式调用

jquery对象在执行完方法后会回到这个jquery这个对象，可以继续使用其他方法，完成后再次回到当前的对象，可以继续使用方法，可以将一系列的方法调用和对象间跳转写在前后依次写在一起用’.’连起来读。这种调用方式，叫做链式调用

$('#div1')//获取id为div1的元素
.children('ur')//获取该元素下面的ul元素
.slideDown('fast')//高度从零变到实际高度来显示ul元素
.parent()//跳到ul的父级元素，也就是一开始的id为div1的元素
.siblings() //跳到与id=div1的元素平级的所有兄弟元素上
.children('ul') //这些兄弟元素里的ul元素
.slipUp('fast'); //高度从实际高度变换到0来隐藏元素

jquery属性操作

html()：取出或者设置html内容

//取出html内容
var $htm = $('#div1').html()

// 设置html内容
$('#div1').html('<span>一段文字<span>')

prop():取出或者设置某个属性的值

// 取出图片的地址
var $src = $('#imag1').prop('src')

// 设置图片的地址和alt属性
$('#imag1').prop({src:"test.jpg", alt:"Test Image"})

jquery循环

使用each方法对获取到的多个元素进行分别操作

$(function(){
 $('.list li').each(function(){

  alert($(this).html())

 })


})
...
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jquery事件

一些常用的jquery事件

blur():元素失去焦点
focus():元素获得焦点
click():鼠标点击
mouseover():鼠标进入（进入子元素也触发）
mouseout():鼠标离开（离开子元素也触发）
mousenter():鼠标进入(进入子元素不触发)
mouseleave():鼠标离开（离开子元素不触发）
hover():同时为mouseenter()和mouseleave()事件指定处理函数
read():Dom加载完成
submit():用户提交表单

事件冒泡

是什么

在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回True,那么这个事件会向这个对象的父级对象传播，从里到外，直到它被处理(父级对象所有同类事件都会被激活)，或者它到达了对象的顶层，即document对象(有些浏览器是window)

作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件添加到多个子元素上），它还可以让你在对象的不同级别捕获事件

如何阻止

event.stopPropagation()

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div

阻止默认行为

// 阻止表单的提交
$('#form1').submit(function(event){
  event.preventDefaut();
)

合并阻止操作
- 实际开发中，一般把阻止冒泡行为和阻止默认行为合并起来写
```
// 单独写法
event.stopPropagation
event.preventDefault

// 合并写法
return false
```

事件委托

时间委托是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行响应的操作
事件委托的作用
- 极大的减少事件的绑定次数，提高性能
- 可以让新加入的元素也可以拥有相同的操作

// 一般事件写法
$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>


//事件委托的写法
$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jquery 元素节点操作

元素节点：就是之间的结合点
元素节点操作，就是通过删除增加元素的方式，改变原HTML文件的结构
常见的操作
- 移动现有标签的内容
- 将新创建的标签插入到现有标签中
创建新标签

var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>')

移动或者插入标签的方法
- append(),appendTo()：在现存的元素内部，从后面放入元素
```
var $span = $('<span>这是一个span元素<span>')
$('#div1').append($span)

...

<div id="div1"></div>
```
- prepend(),prependTo():在现存元素的内部，从前面放入元素
- after(),insertAfter():在现存元素的外部，从后面放入元素
- before(),insertBefore():在现存元素的外部，从前面放入元素
删除标签
- $(‘#div1’).remove();

表单验证

就是使用正则表达式验证表单中的提交数据是否符合要求
正则表达式
- 可以对字符串进行匹配，处理的格式字符表达式
定义
- 1. var reO1 = new RegExp('规则','可选参数')；
- 1. var re01 = /规则/参数

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

修饰参数
- g:global,全文搜索，默认搜索到第一个结果就停止
- i:ignore case,忽略大小写，默认是大小写敏感的
常用函数
- 正则.test() :匹配成功，返回 true;失败，返回 False
常用正则匹配规则

// 用户名验证（数字，字母，下划线，6-20位）
var reUser = /^\w{6,20}$/;

// 邮箱验证
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i

// 密码验证
var rePass = /^[\w!@#$%^&*]{6,20}$/;

// 手机号验证
var rePhone = /^1[34578]\d{9}$/;

前端_review

html,css

内联元素

内联元素的特性，类型转换

浮动

定位

background属性

css权重

表格元素

页面开发流程

javascript

js嵌入页面的方式

js基本语法

函数

条件语句

获取元素的方法

操作元素的属性

事件属性

匿名函数

数组

循环语句

字符串处理

调试程序的方法

定时器

变量作用域

封闭函数

JQuery

是什么？

解决需要先解析才能执行的问题

jQuery选择器

jQuery样式操作

绑定事件

jquery动画

jquery的特殊效果

jquery的链式调用

jquery属性操作

jquery循环

jquery事件

事件冒泡

是什么

作用

如何阻止

事件委托

jquery 元素节点操作

表单验证

猜你喜欢

　绑定事件