前端知识：jQuery的用法

Ⅰ jquery的加载

使用jquery需要先引入jquery库：

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

写js代码需要，另开一个script,不可以在引入标签里面写。

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

1）ready的完整写法：

<script type="text/javascript">
$(document).ready(function(){ 
     ......
});
</script>

2）可以简写为：

<script type="text/javascript">

$(function(){
     ......
});         #此处的分号最好加上，避免压缩时出错。
</script>

ready要比window.onload更快的原因：
window.onload需等标签加载完并渲染完（页面数据全部传完）之后才运行。ready是等标签加载完之后就运行。

Ⅱ jquery选择器

jquery用法思想：选择某个网页元素，然后对它进行某种操作。

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

(1) 选择器常用写法

• $('#myId') //选择id为myId的网页元素
• $('.myClass') // 选择class为myClass的元素
• $('li') //选择所有的li元素
• $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
• $('input[name=first]') // 选择name属性等于first的input元素

jquery的样式属性，容错率高（带‘_’的属性既可以写成驼峰式，也可以保持原来的‘_’）：

var $li = $('.list li');
$li.css({'background-color':'pink'});
等价于：
$li.css({'backgroundColor':'pink'});

(1) 对选择集进行过滤
对于只用一次的变量，不需用var来定义。

• $('div').has('p'); // 选择包含p元素的div元素
• $('div').not('.myClass'); //选择class不等于myClass的div元素
• $('div').filter('.myClass'); //选择class等于myClass的div元素
• $('div').eq(5); //选择第6个div元素 （常用）

（2）选择集转移

• $('div').prev(); //选择div元素前面紧挨的同辈元素
• $('div').prevAll(); //选择div元素之前所有的同辈元素
• $('div').next(); //选择div元素后面紧挨的同辈元素
• $('div').nextAll(); //选择div元素后面所有的同辈元素
• $('div').parent(); //选择div的父元素
• $('div').children(); //选择div的所有子元素
• $('div').siblings(); //选择div的同级元素
• $('div').find('.myClass'); //选择div内的class等于myClass的元素

（3）判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); 
弹出 1
alert($div2.length); 
弹出 0
......
<div id="div1">这是一个div</div>

Ⅲ jquery样式操作

jquery用法思想： 同一个函数完成取值和赋值。

（1）操作行间样式
获取div的样式，而原生js无法读取行间没有定义的css属性值。

$("div").css("width"); #读取宽度值
$("div").css("color");

//设置div的样式
$("div").css("width","30px");                #单个属性时
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});  #多个属性时

注意：
选择器获取的多个元素，获取的元素是第一个，比如：$("div").css("width")，获取的是第一个div的width。

（2）操作样式类名

• $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
• $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
• $("#div1").removeClass("divClass divClass2") //移除多个样式
• $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式，如果有anotherClass类，就去掉，没有就加上。

（3）绑定click事件
给元素绑定click事件，可以用如下方法：click里面内嵌了一个匿名函数。

$('#btn1').click(function(){

    内部的this指的是原生对象

    使用jquery对象用 $(this)

})

（4）获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index());
弹出 1
alert($li.filter(‘.mylist’)index());
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li class=”mylist” >4</li>
    <li>5</li>
    <li>6</li>
</ul>

Ⅳ jquery特殊效果

• fadeIn() 淡入

 $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });  #动画结束之后调用匿名函数

    });

• fadeOut() 淡出
• fadeToggle() 切换淡入淡出 #点一下淡入，点一下淡出
• hide() 隐藏元素
• show() 显示元素
• toggle() 切换元素的可见状态
• slideDown() 向下展开
• slideUp() 向上卷起
• slideToggle() 依次展开或卷起某个元素

Ⅴ jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，因此jquery对象的方法可以连起来写成一句：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素  #返回ul对象进行接下来的链式操作
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

Ⅵ jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

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

参数可以写成数字表达式：

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

stop()将前面的动画先关掉，然后再做动画。

$('#btn2').click(function(){
	$('.box2').stop.animate({'width':'+=100'});
})

jQuery UI 是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
jqueryUI 网址

Ⅶ 尺寸相关、滚动事件

（1）获取或者设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的宽和高

盒子模型

一个盒子的真实尺寸：
outerWidth()、outerHeight() 包括padding和border的宽和高 .

一个盒子的真实尺寸（再加上margin）：
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的宽和高。

（2）获取元素相对页面的绝对位置

offset()

（3）获取浏览器可视区宽度高度

$(window).width();
$(window).height();

（4）获取页面文档的宽度高度

$(document).width();
$(document).height();

（5）获取页面滚动距离

$(document).scrollTop();  #上下滚动
$(document).scrollLeft(); #左侧距右侧的距离

（6）页面滚动事件

$(window).scroll(function(){  
    ......  
}) 

技巧： 滚动到顶部
固定的写法：html,body为了兼容浏览器。

$totop.click(function(){
	$('html,body').animate({'scrollTop':0});
})

Ⅷ jquery属性操作

（1）html() 取出或设置html内容

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

#设置html内容
$('#div1').html('<span>添加文字</span>');

（2）prop() 取出或设置某个属性的值

#取出图片的地址（获取的是绝对地址）
var $src = $('#img1').prop('src');

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

Ⅸ jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环，此时可以用对象上的each方法：

$(function(){
    $('.list li').each(function(i){
        $(this).html(i);   #i是此处的索引值
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ⅹ jquery事件

（1）事件函数列表：

• blur() 元素失去焦点，焦点即光标 #应用在输入框中
• focus() 元素获得焦点
• click() 鼠标单击
• mouseover() 鼠标进入（进入子元素也触发） #容易引发事件冒泡
• mouseout() 鼠标离开（离开子元素也触发）
• mouseenter() 鼠标进入（进入子元素不触发）
• mouseleave() 鼠标离开（离开子元素不触发）
• hover() 同时为mouseenter和mouseleave事件指定处理函数
• ready() DOM加载完成
• resize() 浏览器窗口的大小发生改变
• scroll() 滚动条的位置发生变化
• submit() 用户递交表单

（2）bind绑定多个事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());  #可以同时绑定多个事件
    });
});

（3）unbind取消绑定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        # $(this).unbind();
        $(this).unbind('mouseover');

    });
});

十一 事件冒泡

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

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

（2）阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 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');  
    #$(document)代表顶级标签，即整个Html页面的标签
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>  
        #点击事件向父级传递按照标签的顺序
    </div>
</div>
   

（3）阻止默认行为
阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})

（4）合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用return false.

#event.stopPropagation();
#event.preventDefault();
#合并写法：
return false;  1阻止事件冒泡 2阻止默认行为 3结束函数

十二 事件委托

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

(1)一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function() {  #相当于绑定了5次li
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

(2) delegate事件委托的写法

$(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元素节点操作

（1）创建节点

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

通过html()添加节点性能最高，但会比较麻烦。

$('#div1').html($('#div1')).html()+'<a href="#">链接</a>')

(2) 插入节点
1). append()或appendTo()：在现存元素的内部后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
$span.appendTo(‘#div1’);
......
<div id="div1"></div>

2). prepend()或prependTo()：在该元素的内部前面插入元素

3).after()或insertAfter()：从该元素的外部后面插入元素

4).before()或insertBefore()：在该元素的外部前面插入元素

(3) 删除节点

$('#div1').remove();

技巧：

• <a href=“javascript:;”></a> #回到当前页面顶部。
• <a href=“javascript:alert(‘helloworld’);”></a> 连接javascript语句
• var $val=$input.val(); #val()获取text输入框的内容

十四 滚轮事件与函数节流

（1）jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

（2）函数节流
javascript中有些事件的触发频率非常高，比如onresize事件，onmousemove事件以及上面说的鼠标滚轮事件，在短时间内多次触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

高频触发事件：

$(window).mousewheel(function(event,dat){             
 #dat指出滚轮触发次数及方向，-1表示向上，1表示向下
console.log(dat)
})

十五 json

json (JavaScript Object Notation) ，javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
(1) javascript自定义对象：

var oMan = {
    name:'tom',
    age:16,
    talk:function(s){
        alert('我会说'+s);
    }
}

(2) json格式的数据：

{
    "name":"tom",
    "age":18
}

与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

(3) json的另外一个数据格式是数组，和javascript中的数组相同。

["tom",18,"programmer"]

json数据里面可以嵌套json数组

{"name":"tom","age":18,”info”:["tom",18,"programmer"]}

十六 ajax与jsonp

ajax技术的目的是让javascript发送http请求（实现局部刷新或无刷新的效果），与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

程序中的同步：做完一件事后再做另外一件事；
程序中的异步：同时做几件事情

（1）局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

（2）同源策略
ajax请求的页面或资源只能是同一个域(网页连接地址)下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

（3）$.ajax使用方法

1）常用参数：

• url 请求地址
• type 请求方式，默认是’GET’，常用的还有’POST’
• dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
• data 设置发送给服务器的数据
• success 设置请求成功后的回调函数
• error 设置请求失败后的回调函数
• async 设置是否异步，默认值是’true’，表示异步

2）以前的写法：

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

3）新的写法(推荐)：

# data.json里面的数据： {"name":"tom","age":18}

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}     #最后一个不用逗号
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

（4）jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签（script标签可以引用任何网站上的js资源），<script>标签有可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

1）用<script>标签跨域连接资源：

# data.js里面的数据： fnBack({"name":"tom","age":18});

<script type="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>

$.ajax({
    url:'js/data.js',
    type:'get',
    dataType:'jsonp',
    jsonpCallback:'fnBack'  #要和data.js里面的数据名称相对应
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

十七 本地存储

本地存储分为cookie，以及localStorage和sessionStorage
（1）cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

# jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});

# jquery 获取cookie
$.cookie('mycookie');

（2）localStorage 存储在本地，容量为5M或者更大，不会在请求时携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

# 设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

# 获取：
localStorage.getItem("dat");
localStorage.dat

# 删除
localStorage.removeItem("dat");

(3) sessionStorage 存储在本地，容量为5M或者更大，不会在请求时携带传递，在同源的当前窗口关闭前有效,窗口关闭后会自动删掉。

sessionStorage.setItem("dat", "456");
sessionStorage.getItem("dat");

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新通知监听者，Web Storage的api接口使用更方便。(iPhone的无痕浏览不支持Web Storage，只能用cookie)

十八 正则表达式

（1）正则表达式的写法：

var re=new RegExp('规则', '可选参数');

# var re=/规则/参数;

（2）规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，
/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

var sTr01 = '123456asdf';

var re01 = /\d+/; # 匹配纯数字字符串
var re02 = /^\d+$/; #以数字开头，以数字结尾

alert(re01.test(sTr01)); 弹出 true
alert(re02.test(sTr01)); 弹出 false

（3）量词

• ? 出现零次或一次（最多出现一次）
• + 出现一次或多次（至少出现一次）
• * 出现零次或多次（任意次）
• {n} 出现n次
• {n,m} 出现n到m次
• {n,} 至少出现n次

（4）任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

（5）限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

（6）修饰参数：
g： global，全文搜索，默认搜索到第一个结果就停止
i： ingore case，忽略大小写，默认大小写敏感

（7）常用函数
1）test
用法：正则.test(字符串)
匹配成功，就返回true，否则就返回false

2). replace
用法：字符串.replace(正则，新的字符串)
匹配成功的字符去替换新的字符

(8) 正则默认规则
匹配成功就结束，否则继续匹配，区分大小写

var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;

var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02);  弹出 ab*defedcbaCef
alert(sTr03);  弹出 ab*defed*baCef
alert(sTr04);  弹出 ab*defed*ba*ef

（9）常用正则规则

# 用户名验证：(数字字母或下划线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[3458]\d{9}$/;

十九 前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。
前端性能优化分为如下几个方面：
（1）代码部署：

• 代码的压缩与合并
• 图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
• 使用内容分发网络 CDN
• 为文件设置Last-Modified、Expires和Etag
• 使用GZIP压缩传送
• 权衡DNS查找次数(使用不同域名会增加DNS查找)
• 避免不必要的重定向(加"/")

（2）编码
1）html：

• 使用结构清晰，简单，语义化标签
• 避免空的src和href
• 不要在HTML中缩放图片

2）css：

• 精简css选择器
• 把CSS放到顶部
• 避免@import方式引入样式
• css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站
• 使用css动画来取代javascript动画
• 使用字体图标
• 使用css sprite(雪碧图)
• 使用svg图形
• 避免使用CSS表达式

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

• 避免使用css滤镜

3）javascript：

• 减少引用库的个数
• 使用requirejs或seajs异步加载js
• JS放到页面底部引入
• 避免全局查找
• 使用原生方法
• 用switch语句代替复杂的if else语句
• 减少语句数，比如说多个变量声明可以写成一句
• 使用字面量表达式来初始化数组或者对象
• 使用innerHTML取代复杂的元素注入
• 使用事件代理(事件委托)
• 避免多次访问dom选择集
• 高频触发事件设置使用函数节流
• 使用Web Storage缓存数据