jQuery基础学习（属性操作、循环、事件冒泡委托、元素节点操作、滚轮事件、函数节流、json、ajax、jsonp与本地存储）

一、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);})
})
......
<ul class="list"><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

三、jQuery事件

事件函数列表：

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

绑定事件的其他方式

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

取消绑定事件

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

四、事件冒泡

事件冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回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.preventDefault();
})

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

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

创建节点

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

插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素

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

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

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

七、滚轮事件与函数节流

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

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

八、json数据格式

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式

javascript自定义对象：

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

json格式的数据：

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

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

json的另外一个数据格式是数组，和javascript中的数组字面量相同

["tom",18,"programmer"]

九、ajax与jsonp

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

同步和异步：现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步

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

同源策略：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.

$.ajax使用方法
常用参数：

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

以前的写法：

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

新的写法(推荐)：

$.ajax({url: 'js/data.json',type: 'GET',dataType: 'json',data:{'aa':1}
})
.done(function(data) {alert(data.name);
})
.fail(function() {alert('服务器超时，请重试！');
});// data.json里面的数据： {"name":"tom","age":18}

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

$.ajax({url:'js/data.js',type:'get',dataType:'jsonp',jsonpCallback:'fnBack'
})
.done(function(data){alert(data.name);
})
.fail(function() {alert('服务器超时，请重试！');
});// data.js里面的数据： fnBack({"name":"tom","age":18});

获取360搜索关键词联想数据

$(function(){$('#txt01').keyup(function(){var sVal = $(this).val();$.ajax({url:'https://sug.so.360.cn/suggest?',type:'get',dataType:'jsonp',data: {word: sVal}}).done(function(data){var aData = data.s;$('.list').empty();for(var i=0;i<aData.length;i++){var $li = $('<li>'+ aData[i] +'</li>');$li.appendTo($('.list'));}})        })
})//......
<input type="text" name="" id="txt01">
<ul class="list"></ul>

十、本地存储

本地存储分为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或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便

iPhone的无痕浏览不支持Web Storage，只能用cookie