关于Zepto的小知识点

4章节：学会用jsbin
    http://jsbin.com/zozuqiside/edit?html,js,output
    http://zeptojs.com/#$()
    http://www.bootcss.com/
    https://v3.bootcss.com/examples/theme/
..................................................
第五章节：
    Core: Zepto工具方法（下）
        数组遍历：$.each,$.map,$.grep=>Array.prototype
        对象：$.extend=>Object.assign    extent是把两个对象连接起来
        工具：$.is*=>typeof,instanceof
        节点：$.contains
        字符：$.trim,$.parseJSON
    
    在jsbin中写代码
        前提是要在Add library中选择zepto.js最新版和bootStrap最新版js    

        $.each():
        
            $.each([1,2,3,'a'],function(){
              console.log(arguments);
            })
            $.each({a:'name'},function(key,value){
              console.log({key:key,value:value});
            })
            
            $.each===Array.prototype.forEach;
            [1,2,3,'a'].forEach(function(value,index){
              console.log(arguments);
            })
        
        
        $.map和$.grep:
        
            var arr=[1,2,3];
            console.log($.map(arr,function(value){
              return value*value;
            }));
            var grep=$.grep(arr,function(value){
              return value%2===0;
            })
            console.log(grep);
...........................................
        $.extend是把两个对象连接起来，对原结果是有影响的
            var obj1={name:'wuyou'};
            var obj2={gender:'male',name:'wuhen'}
            console.log($.extend(obj1,obj2));
            console.log(obj1);
            console.log(obj2);

            结果是、
                Console Run  Clear
                [object Object] {
                  gender: "male",
                  name: "wuhen"
                }
                [object Object] {
                  gender: "male",
                  name: "wuhen"
                }
                [object Object] {
                  gender: "male",
                  name: "wuhen"
                }
..............................................

        is方法：
            var obj1={name:'wuyou'};
            console.log($.isPlainObject(obj1));         //true
            console.log($.isArray([]));                    //true
            
            
        。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        $.trim和$.parseJSON:
        
            var obj1={name:'wuyou'};
            var str='wuyou&gougou         ';
            console.log(str.length,$.trim(str).length)
            console.log($.parseJSON('{"name":"wuyou&gougou"}'))
            结果是：
                21
                12
                [object Object] {
                  name: "wuyou&gougou"
                }
    。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

6-zepto
    DOM-用Zepto快速选择元素
        试验田准备
        Zepto选择符    这几个选择符可以互相使用
            element selector    元素选择符 $('h1')  //可以把页面中所有的h1寻找出来
            id selector            $('#nav')
            class selector        $('.nav')        $('.nav').size()直接在console下面进行运算
            child selector        $('ul>li>a')    父子选择符，这个是选择ul下面的li下面的a
            desendant selector    $('ul li')        后代选择符
            attribute selector    $('div[role=main]') 或者 $('div[role="main"]') 或者 $('div[role=\'main\']')        属性选择符
                                $('div[role*=main]')是role包含main这个字样
         zepto运行时出现 missing ) after argument list，表示拼接的串里面有特殊字符需要处理，当选择元素的时候，一定不要忘记加单引号

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
7-用Zepti增删该查系节点
    插入节点：insertAfter,insertBefore,append,prepend,appendTo,prependTo    //append是在之后插入   prepend是在之前插入
            h2.insertBefore(h1)   //在h1之前插入h2      
            container.append(h2)  在container之后插入h2 == h2.appendTo(container)  //在container之后插入h2
    减少节点：remove    h2.remove() //删除节点
    修改节点：html,css,attr,props,*class
    container.html('jhjh') //把括号里面的内容设置成container的内容                 
    container.html(h2.html) 把h2的内容设置成container的内容
    var html=container.html();    container.html(html);  //把原内容插入到container里面
    两种定义设置颜色的方法
        1、container.css('color','#fff')
        2、container.css({color,'#fff'})
    改变字体的大小
        container.css('fontSize','40px')
    改变字体的背景颜色
        container.css({background:'#000'})
    获取container的style样式
        container.attr('style')
    设置container的style样式
        container.attr('style','');  //style样式为空，返回到初始值的网页形态
    为页面添加class
        container.addClass('class')    //为container成功加入class
        container.toggleClass('class')    //toggleClass意思是：如果html中有该class，那么就删除这个加class，如果没有就加上这个class
        
    ..................................................................
        使用zepto时把该段代码注入sources
        var ndParent=document.getElementsByTagName('script')[0];
        var ndScript=document.createElement('script');
        ndScript.src='http://zeptojs.com/zepto.js';
        ndScript.onload=function(){
            if(window.Zepto){
                console.log('injected');
                window.$=window.Zepto;
            }
        }
        
        ndParent.parentNode.appendChild(ndScript);
    
    .................................................................


8-用zepto增删该查节点（下）
    根据已知的节点去获取相对位置的节点
        获取节点：parent,prev,next,find,children
        节点计算：width,height,position,offset,data
        
        var container=$('.jumbotron');
        container.parent();        //得到container的父节点
        var btn=$('.btn.btn-lg.btn-default');
        container.find('h1')      find是查找的意思
        container.children()      container的子节点
        container.width()        //container的宽度
        container.height()        //container的高度
        container.width(100);    //设置成container的宽度为100px
        container.height('auto')    //设置高度为auto
        container.position()        //获取位置 left和top
        container.offset()            //以前会返回4个属性，获取left和top，width和height，现在是返回两个属性，left和height，参考点是文章的左上角

9-zepto
    用Zepto高效管理Event
        事件绑定、解绑：on,off        //事件绑定时在function函数小括号里面要加e,可以打印出来，会显示出所有的事件
        事件委托机制：on                //利用浏览器的冒泡和捕获机制
        自定义事件机制：trigger
        
        事件绑定，当点击该按钮时打印下面一句话
        var btn=$('.btn.btn-lg.btn-primary')
        btn
        btn.on('click',function(e){console.log('一杯敬自由，一杯敬死亡')})
        
        解绑该事件
        btn.off('click')              //当点击时不会再打印出该句话
        
        btn.one('click',function(e){alert('123')})    回调函数只执行一次
        
        
        事件委托机制  --》 当事件比较多的时候，可以委托在其他节点上
            var btn=$('.btn.btn-lg.btn-default')
            btn.parent()
            btn.parent().on('click',function(e){colsole.log('无忧')})   //每点击一次p下面的btn就会打印出无忧这个词语
//    效果相同    btn.parent().on({click:function(e){console.log('无忧')}})

        自定义事件机制
            btn.parent().trigger('customclick');
            
10-Zepto        //需要重新设置环境 &&
    用Zepto的移动端事件
        构建包含Zepto移动端事件的版本
            通过命令行构建
            通过WEB界面构建
        使用移动端事件
        手势事件模式
        
11-Zepto
    $.ajax参数详解和实战
    $.get,$.post,load
    $.param
    
    $.ajax()里面data参数的含义、用法 
        1.这段代码中，data是什么含义？data参数和success:function(data){}里面的data有什么关系？？？
        $.ajax({
            type:"GET",
            url:"test.json",
            data:{ username:$("#username").val(), content:$("#content").val() },//???这个data是发送到服务器的数据么
            dataType:"json",
            success:function(data){                                                //???这个data又是什么意思，和上面的那个data一样么
            $('#restText').empty();                                                //清空resText里面内容
            var html='';
            $.each(data, function( commentIndex, comment ){
            html+='<div class="comment"><h6>'+comment['username']+':</h6><p class="para">'+comment['content']+'</p></div>';
            });
            $('#resText').html(html);
            }
        });
            1、data:{ username:$("#username").val(), content:$("#content").val() }, 这个data是客户端传到服务器端的数据。
            2、success:function(data) 这个data是服务器端返回客户端的数据
            你的dataType是json的话,这两个data里的数据都要是json格式的