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

    一、jquery属性操作

    1、html() 取出或设置html内容

    1. // 取出html内容
    2. var $htm = $('#div1').html();
    3.  
    4. // 设置html内容
    5. $('#div1').html('添加文字');

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

    1. // 取出图片的地址
    2. var $src = $('#img1').prop('src');
    3.  
    4. // 设置图片的地址和alt属性
    5. $('#img1').prop({src: "test.jpg", alt: "Test Image" });

    二、jquery循环

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

    1. $(function(){
    2.     $('.list li').each(function(i){
    3.         $(this).html(i);
    4.     })
    5. })
    6. ......
      7. class="list">
    8.     <li>li>
    9.     <li>li>
    10.     <li>li>
    11.     <li>li>
    12.     <li>li>
    13.     <li>li>

 三、jQuery事件

事件函数列表：

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

绑定事件的其他方式

  1. $(function(){
  2.     $('#div1').bind('mouseover click', function(event) {
  3.         alert($(this).html());
  4.     });
  5. });

取消绑定事件

  1. $(function(){
  2.     $('#div1').bind('mouseover click', function(event) {
  3.         alert($(this).html());
  4.  
  5.         // $(this).unbind();
  6.         $(this).unbind('mouseover');
  7.     });
  8. });

四、事件冒泡

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

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

阻止事件冒泡：事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

  1. $(function(){
  2.     var $box1 = $('.father');
  3.     var $box2 = $('.son');
  4.     var $box3 = $('.grandson');
  5.     $box1.click(function() {
  6.         alert('father');
  7.     });
  8.     $box2.click(function() {
  9.         alert('son');
  10.     });
  11.     $box3.click(function(event) {
  12.         alert('grandson');
  13.         event.stopPropagation();
  14.     });
  15.     $(document).click(function(event) {
  16.         alert('grandfather');
  17.     });
  18. })
  19.  
  20. ......
  21. class="father">
  22.     <div class="son">
  23.         <div class="grandson">div>
  24.     div>

阻止默认行为
阻止表单提交

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

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

  1. // event.stopPropagation();
  2. // event.preventDefault();
  3.  
  4. // 合并写法：
  5. return false;

 五、事件委托

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

一般绑定事件的写法

  1. $(function(){
  2.     $ali = $('#list li');
  3.     $ali.click(function() {
  4.         $(this).css({background:'red'});
  5.     });
  6. })
  7. ...
    8. "list">
  9.     <li>1li>
  10.     <li>2li>
  11.     <li>3li>
  12.     <li>4li>
  13.     <li>5li>

事件委托的写法

  1. $(function(){
  2.     $list = $('#list');
  3.     $list.delegate('li', 'click', function() {
  4.         $(this).css({background:'red'});
  5.     });
  6. })
  7. ...
    8. "list">
  9.     <li>1li>
  10.     <li>2li>
  11.     <li>3li>
  12.     <li>4li>
  13.     <li>5li>

六、jquery元素节点操作

创建节点

  1. var $div = $('
    ');
  2. var $div2 = $('
    这是一个div元素
    '    );

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

  1. var $span = $('这是一个span元素');
  2. $('#div1').append($span);
  3. ......
  4. "div1">

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自定义对象：

  1. var oMan = {
  2.     name:'tom',
  3.     age:16,
  4.     talk:function(s){
  5.         alert('我会说'+s);
  6.     }
  7. }

json格式的数据：

  1. {
  2.     "name":"tom",
  3.     "age":18
  4. }

与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使用方法
常用参数：

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

以前的写法：

  1. $.ajax({
  2.     url: 'js/data.json',
  3.     type: 'GET',
  4.     dataType: 'json',
  5.     data:{'aa':1}
  6.     success:function(data){
  7.         alert(data.name);
  8.     },
  9.     error:function(){
  10.         alert('服务器超时，请重试！');
  11.     }
  12. });

新的写法(推荐)：

  1. $.ajax({
  2.     url: 'js/data.json',
  3.     type: 'GET',
  4.     dataType: 'json',
  5.     data:{'aa':1}
  6. })
  7. .done(function(data) {
  8.     alert(data.name);
  9. })
  10. .fail(function() {
  11.     alert('服务器超时，请重试！');
  12. });
  13.  
  14. // data.json里面的数据： {"name":"tom","age":18}

jsonp：ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了