zepto

zepto元素和dom元素的互相转换

        // zepto对象转成DOM对象
            // $('#one')[0].className = 'two';
            // $('#one').get(0).className = 'thr';

            //DOM对象转成zepto对象 
            $(one).addClass('four');

选择器中的特殊符号需要转义
例如id为a#a
$(‘#a\#a’) 这样才能选中

DOM操作

插入节点

<div id="a">
        <div class="a_one"></div>
    </div>

append
var $b  = $("<div class='b'></div>");
$('#a').append($b)

那么结果为

<div id="a">
        <div class="a_one"></div>
        <div class='b'></div>
    </div>

appendTo和append其实是类似的

prepend的结果为

<div id="a">
        <div class='b'></div>
        <div class="a_one"></div>
    </div>

prependTo同prepend

before

 $('#a').before($b)
...

//结果为
<div class='b'></div>
<div id="a">
        <div class="a_one"></div>
    </div>

after

 $('#a').after($b)
...

//结果为

<div id="a">
    <div class="a_one"></div>
</div>
<div class='b'></div>

insertBefore与before的关系和prepend与prependTo关系一样
insertAfter与after关系和append和append与appendTo关系一样

删除节点
remove和empty的区别.

$('ul li').empty()；
// 结果为
<ul>
    <li></li>
</ul>

$('ul li').remove()
<ul ></ul>

总结 remove会把li也一起删除 而empty只删除li中的元素

复制节点

    $('ul li').on('click', function () {
                $(this).clone().appendTo($('ul'));
            })

点击一次 ul内就多一组li标签

替换节点

$('p').replaceWith($('<div>哈哈</div>'))

包裹节点

<div>
    <p>本节是操作dom</p>
</div>
<div>
    <p>本节是操作dom</p>
</div>


wrap
$("p").wrap("<div></div>");

结果为
<div>
    <div>
    <p>本节是操作dom</p>
    </div>
</div>
<div>
    <div>
    <p>本节是操作dom</p>
    </div>
</div>


wrapAll
结果为
<div>
    <div>
    <p>本节是操作dom</p>
    <p>本节是操作dom</p>
    </div>
</div>
    <div></div>

属性与样式

属性操作

// console.log($("div").attr("title"));
            // $("div").attr("name","att");
            // $("div").attr({"name":"att" , "class":"test"})
            // $("div").removeAttr("title name");

class操作

// 添加样式操作   addClass
            // $("div").addClass("red").addClass("fs");
            // $("div").addClass("red fs");

            // 删除class类   removeClass
            // $("div").removeClass();

            // 切换样式  toggle   toggleClass
            // $("button").click(function(){
            //  // $("div").toggle();   // show和hide的切换
            //  $("div").toggleClass("red");   // addClass("red")和removeClass("red");
            // });  

            // 判断是否含有某个样式  hasClass
            console.log($("div").hasClass("red fs"))

对相邻的元素操作

// next是取得紧邻的后面的同辈元素
            // console.log($("#one h3").next());

            // prev获取紧邻的前面的同辈元素
            // console.log($("#one a").prev());

            // siblings获取前后的所有同辈元素
            // console.log($("#one p").siblings());

            // parent与parents直系亲属
            // console.log($("b").parent());
            console.log($("b").parents());

对css的操作

// $(".one").css("color", "red").css("fontSize", "36px");
            // $(".one").css({
            //  color:"red",
            //  fontSize:"36px"
            // });
            $(".one").width(500);
            $(".one").height(500);

window.onload和document.ready的区别

$(document).ready(function(){
            // DOM加载完毕，图片并未完全加载，调用时机比较快
        });

        window.onload = function(){
            // 全部文件加载完毕，调用时机比较久
        }

简写方法

$().ready(function(){
            $(".one").html("helloworld");
        })

事件
zepto不支持事件捕获！！！！！！！

// $(".one").click(function(e){
            //  console.log("我是简写方式");
            // })

            $(".one").on("click", function(e){
                console.log("我是on事件");
            });
        })

自定义事件

$('div').on('hha', function () {
                console.log('hha')
            })
            $('div').trigger('hha')

动画
值得注意的是zepto要使用动画额外需要引入两个文件

$('button').on('click' , function(){
                // $('div').toggle('slow');   //切换元素的显示与隐藏
                // $('div').hide(3000); 
                // $('div').hide('slow');
                // $('div').show('slow');
                // $('div').fadeIn('slow');
                // $('div').fadeOut('slow');
                // $('div').fadeToggle('fast');   //切换元素的淡入与淡出
                // $('div, button').fadeToggle('slow');
                // $("div").fadeTo(3000 , 1)
            })

 $("div").animate({left:"300px", height:"300px"}, 3000, function(){
            //  alert("动画执行完毕");
            // })

            // $("div").animate({left:"300px"}, 3000, function(){
            //  $(this).animate({height: "300px"},3000, function(){
            //      alert("动画有先后顺序");
            //  })
            // })

Ajax
原生写法

function Ajax(){

            var xmlHttpReq = null;

            if(window.ActiveXObject){

                // 兼容IE5、IE6
                xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            }else{

                xmlHttpReq = new XMLHttpRequest();
            }

            xmlHttpReq.open("GET", "test.php", true);

            xmlHttpReq.onreadystatechange = RequestCallBack;

            function RequestCallBack(){
                if(xmlHttpReq.readyState == 4){
                    if(xmlHttpReq.status == 200){
                        console.log("获取数据："+xmlHttpReq.responseText);
                    }
                }
            }

            xmlHttpReq.send(null);

        }

zepto的ajax写法

    // get简写
            $.get('urlxxx',function(response){
              $(document.body).append(response)
            });

            // post简写
            $.post('urlxxx', { sample: 'payload' }, function(response){

            });

            // ajax 完整写法
            $.ajax({
              type: 'GET',
              url: 'urlxxx',
              data: { name: 'Zepto.js' },
              dataType: 'json',
              success: function(data){
                this.append(data.project.html)
              },
              error: function(xhr, type){
                alert('Ajax error!')
              }
            })

touch类事件

tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

注意 ：需要引入

    $(el).tap(function(){
        console.log(' | tap!')
      })
      .doubleTap(function(){
        console.log(' | double tap!')
      })
      .swipe(function(){
        console.log(' | swipe!')
      })
      .swipeLeft(function(){
        console.log(' | swipe left!')
      })
      .swipeRight(function(){
        console.log(' | swipe right!')
      })
      .swipeUp(function(){
        console.log(' | swipe up!')
      })
      .swipeDown(function(){
        console.log(' | swipe down!')
      })
      .longTap(function(){
        console.log(' | long tap!')
      })
      .singleTap(function(){
        console.log(' | single tap!')
      })

zepto插件写法

自己编写的zepto.color.js

;(function($){

//  $.extend($.fn, {
//      color: function(option){
//          var options = $.extend({
//              col: "blue",
//              fz : "20px"
//          }, option);

//          this.css("color", options.col);
//          this.css("fontSize", options.fz);

//          return this;
//      },

//      background: function(option){
//          var options = $.extend({
//              bg: "blue"
//          }, option);

//          this.css("background", options.bg);

//          return this;
//      }
//  })

// })(Zepto);

html中

<body>
    <div>这里是插件</div>
    <script type="text/javascript" src="../../lib/zepto.min.js"></script>
    <script type="text/javascript" src="../../lib/zepto.color.js"></script>
    <script type="text/javascript">
        $("div").color({
            col : "red"
        }).addClass("helloworld");
    </script>
</body>