jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用

```
使用 .on() 方法，这个方法能够直接绑定和代理事件。根据我们要实现的需求，我们需要使用代理事件来解决问题，也就是说我们把事件的绑定交给父级元素。

<div class="box" id="set" title="season">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>
<div class="clone"> </div>

```
       <!-- 绑定事件 -->
       <script>
            $('p').click(function(){
                var str = $(this).text()
                $('.clone').text(str)  
            })
        </script>

         <!-- 代理事件 -->
       <script>
            $('.box').on('click.hello', 'p', function(){
                var str = $(this).text()
                $('.clone').text(str)
            })
        </script> 

```

//ps:两种方式内存消耗相差很多。明显第二种使用on的事件委托形式更优，如果项目中有类似的需求，还是择后者。并且后者还支持动态绑定。

实现如下效果

查看效果
要求

1.  点击创建时会创建3个产品
2.  点击编辑时，所有产品会展示遮罩，再次点击编辑遮罩会隐藏
3.  点击遮罩按钮时，会删除当前产品

注意的问题

1.  [https://picsum.photos/200/200/?image=1](https://picsum.photos/200/200/?image=1 "null") 可以生成一个200x200的图片，如果想更改图片，设置参数 image 的值即可(<100)
2.  如果出现点击按钮页面刷新，需要对a 链接做绑定事件处理，比如`< a href="javascript:void(0)"></a>`或者使用阻止默认事件

http://jsbin.com/tupojarizu/edit?html,output

jQuery 如下函数如何使用？演示使用方式

*   `.show()`
*   `.hide()`
*   `.slideUp`
*   `.slideDown`
*   `.slideToggle`
*   `.fadeIn`
*   `.fadeOut`
*   `.animate`

    <style>
        .box {
            position: relative;
        }
        .amt {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
    <div class="box">
       <button class="btn">show</button>
       <button class="btn">hide</button>
       <button class="btn">slideUp</button>
       <button class="btn">slideDown</button>
       <button class="btn">slideToggle</button>
       <button class="btn">fadeIn</button>
       <button class="btn">fadeOut</button>
       <button class="btn">animate</button>
       <div class="amt"></div>
    </div>
    <script>
         $('.btn').on('click', function(){
           $('.amt').show(); 
              // 用于显示元素，用法和hide类似

           $('.amt').hide();  
              // 用于隐藏元素，没有参数的时候等同于直接设置display属性

           $('.amt').slideUp('slow');
              // 向上滑上去

            $('.amt').slideDown('slow');
              // 向下滑去

            $('.amt').slideToggle('slow');
              // 上下滑动切换

            $('.amt').fadeIn('slow');
               // 元素淡入

            $('.amt').fadeOut('slow');
               //元素淡出

            $('.amt').animate({
                opacity: 0.5,
                left: '+=30',
                height: 'toggle'
            },1000,function(){
                console.log("动画结束！")
            })
         }) 
                //必须以定位为条件使用，是一个CSS属性和值的对象,动画将根据这组对象移动。
    </script>

写篇博客，介绍动画队列(可选)

https://www.jianshu.com/p/9df8cad415fb
ps:点击添加为什么，第2排会空2格
因为你苹果那个li图片加载完之后的高度要高一点，所以就有这样的现象了。

介绍一些函数的用法，给出范例

*   $.ajax
*   $.get
*   $.getJSON

    <script>
    $.ajax({
    url: 'http:://xx.com.php',
    type: 'GET', //method: 'POST',1.9之前使用“type”
    data: {
    username: 'shanghang',
    password: '123456',
    },
    dataType: 'json'
    }).done(function(resule){
    console.log(result);
    }).fail(function(jqXHR,textStatus){
    console.log(taxeStatus);
    });
    //jQuery.ajax( [settings ] )

    $.get('http:api.jirengu.com/weather.php').done(function(ret){
    console.log(ret)
    })
    //$.get直接获取

    $.getJSON("data.php",$("#firstName.val()"),function(jsonData){
    $("#getJSONResponse").html(jsonData.id);}
    );
    //无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式

    </script>