jquery this 与javascript的this

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<div class="list">

                    <table>

                        <thead>

                            <tr>

                                <th width="110" rowspan="2">用户名id</th>

                                <th width="155" rowspan="2">用户名</th>

                                <th width="80" rowspan="2">姓名</th>

                                <th width="240" rowspan="2">手机号</th>

                                <th width="140" rowspan="2">qq</th>

                                <th width="140" rowspan="2">获奖时间</th>

                                <th width="140" rowspan="2">操作</th>

                            </tr>

                        </thead>

                        <tbody>

                                                                                    <tr>

                                <td>2007502</td>

                                <td>asdf123g</td>

                                <td>你好</td>

                                <td>18288668556</td>

                                <td></td>

                                <td>2014-06-18</td>

                                <td>

                                                                <a data-url="http://m.9first.com/admin/activity/awardCheck" data-value="122" class="award-give js-aaa">未发放</a>

                                </td>

                            </tr>

                                                        <tr>

                                <td>2007502</td>

                                <td>asdf123g</td>

                                <td>你好</td>

                                <td>18288668556</td>

                                <td></td>

                                <td>2014-06-18</td>

                                <td>

                                                                <a data-url="http://m.9first.com/admin/activity/awardCheck" data-value="101" class="award-give js-aaa">未发放</a>

                                </td>

                            </tr>

                                                        <tr>

                                <td>2021188</td>

                                <td>jami12123</td>

                                <td>test</td>

                                <td>15873124444</td>

                                <td></td>

                                <td>2014-06-18</td>

                                <td>

                                                                <a href="javascript:;" class="award-gived">已发放</a>

                                </td>

                            </tr>

                                                        <tr>

                                <td>1722723</td>

                                <td>songjing2013</td>

                                <td>songjing</td>

                                <td>13123233232</td>

                                <td></td>

                                <td>2014-06-18</td>

                                <td>

                                                                <a data-url="http://m.9first.com/admin/activity/awardCheck" data-value="35" class="award-give js-aaa">未发放</a>

                                </td>

                            </tr>

                                                        <tr>

                                <td>1722723</td>

                                <td>songjing2013</td>

                                <td>songjing</td>

                                <td>13123233232</td>

                                <td></td>

                                <td>2014-06-18</td>

                                <td>

                                                                <a data-url="http://m.9first.com/admin/activity/awardCheck" data-value="33" class="award-give js-aaa">未发放</a>

                                </td>

                            </tr>

                        </tbody>

<!--                        <tfoot>

                            <tr>

                                <td colspan="10">

                                    <a href="">上一页</a>

                                    <a href="">1</a>

                                    <a href="">2</a>

                                    <span>……</span>

                                    <a href="">4</a>

                                    <a href="">下一页</a>

                                </td>

                            </tr>

                        </tfoot>-->

                    </table>

                </div>


<script type="text/javascript">

$(function() {

    var $wrap = $('.list');

    $wrap.on('click','.award-gived',function(){

        alert("奖品已发放！");

    });

    $wrap.on('click', '.js-aaa', function() {

        var $this = $(this),

            url = $this.data('url'),

            v = $this.data('value');

        if(confirm('确认标记奖品为已发放？')){

        $.ajax({

                url: url,

                data: {id: v},

                type: 'post',

                success: function(response) {

                    if(response.status == 0) return alert('操作失败！');

                    else{

                        alert('操作成功！');

                        //window.location.reload();

                        $this.html('已发放').removeClass('js-aaa');

                    }

                }

            });

      }

    });

});

</script>

jquery的写法：var $this = $(this),
原生js的写法： var $this = this,

区别还是很大的。原生的里面不能操作自己添加的属性，
而jquery的里面可以这样操作 var url = $this.data('url'),

对于js写的比较少的人，作为一个小的知识点~~