jquery基础学习

            var b = $("body");b instanceof Array;//false
            var b = $("body");b instanceof jQuery;

                $("input[type=checkbox]").change(function(){
                    console.log($(this).attr("checked"));
                    console.log($(this).prop("checked"));});

                $("div").click(function(){
                    $(this).toggleClass("slide");//判断是否有slide类，如果有就删除，
                    $(this).toggleClass("stop");//如果没有这个类则把这个类添加上去
                })

    <input type="checkbox" value="nan" name="p2" id="" checked><input type="checkbox" name="p2" id="" value="nv">
    <table>
        <thead><tr><th><input type="checkbox"></th></tr></thead>
        <tbody><tr><th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th></tr></tbody>
    </table>

                $("thead input").change(function(){
                var isChecked = $(this).prop("checked");
                $("tbody input").prop("checked",isChecked);
            })
            $("tbody input").change(function(){
                var btnLength = $("tbody input").length;
                var checkedCount = $("tbody input:checked").length;
                var isAllChecked = btnLength === checkedCount;
                $("thead input").prop("checked",isAllChecked);
            })

            $("div").animate({height:200,width:200},5000);
            $("div").animate({height:200}).animate({width:200});//先改变高，在改变宽，

            $("button:last").click(function(){
                $("div").stop();//停止当前的事件，如果有后续的事件并不停止。如果传入参数true，则停止所有动画。
            })

    <div id="container">
        <ul class="list">
            <li class="item">
                <p>1</p>
            </li>
            <li class="item">
                <p>2</p>
            </li>
            <li class="item">
                <p>3</p>
            </li>
            <li class="item">
                <p>4</p>
            </li>
            <li class="item">
                <p>5</p>
            </li>
        </ul>
    </div>

　　　  $li = $(‘li:eq(1)‘);//所有li的第二个li。得到一个jquery对象，一个伪数组
            $li.children().css(‘background‘,‘red‘);
            $li.parent().css(‘color‘,‘yellow‘);
            $li.parents(‘div#container‘).append(‘<h2>添加新元素到最后</h2>‘);//parents()表示选中了父元素，以及父元素的父元素，包含了所有父元素直到html。
            $(‘#container‘).find(‘p‘).css({bacground:‘#333‘,color:‘#fff‘});//children只能查找子元素，find可以查找父元素下的所有的元素，
            next(),pref();//表示后一个同级元素和前一个同级元素。
            $li.siblings().css({fontweight:‘bold‘});//获取同级的所有元素。

                $.ajax({
                    type:‘get‘,
                    url:‘../js/person.json‘,
                    data:{
                        name:‘sarah‘
                    },//如果我们想传递参数，可以加入data，他会自动将DATA连接到url上，会出现在url?后面发送给服务器
                    success:function(resp){
                        console.log(resp.hobby);
                    },
                    error:function(){
                            console.log(‘error‘);
                    }
                })

            $.ajax({
                type:‘get‘,
                url:‘../p1.ap‘
            }).done(function(){//如果成功，执行。
                return $.ajax({url:‘../p2.ap‘})
            }).fail(function(){//如果失败，执行。
 

            })

                $.ajax({
                type:‘get‘,
                dataType:‘jsonp‘,
                jsonp:‘cb‘,//jsonp的方法名称，jquery会自动生成cb=的方法名称。
                data:{wd:‘jsonp‘},//jsonp要传入的参数wd，这里相当于要baidu搜素的关键词
                url:‘https://www.baidu.com/sugrec?&prod=pc‘
            }).done(function(resp){
                    console.log(resp.g);
            })

            $(‘li‘).on(‘mouseover‘,function(){$(this).css(‘background‘,‘#333‘);})    

            $(‘li‘).on(‘mouseover‘,function(){$(this).css(‘background‘,‘#333‘);}).on(‘mouseout‘,function(){$(this).css(‘background‘,‘#fff‘);})

            $(‘ul‘).on(‘mouseover‘,‘li‘,function(){
                $(this).css(‘background‘,‘#333‘);
            })
            $(‘<li>newLi</li>‘).appendto(‘ul‘);

            var $el = $(‘<div>new element</div>‘)
            $(‘body‘).append($el);//或者：$el.appendto(‘body‘);
            $(‘ul‘).prepend($el);//在ul中的子元素第一个插入一个元素。或者:$el.prependto(‘ul‘);
            $(‘ul li:eq(1)‘).after(‘<li>1.5</li>‘);//在第2个li的后面插入一个li；或者：$(‘<li>1.5</li>‘).insertafter(‘ul li:eq(2)‘)
            $(‘button‘).click(function(){
                $(‘ul li:eq(1)‘).remove();//删除第二个li。
                $(‘ul li:eq(2)‘).empty();//清空第三个li里面的内容，相当于innerHtml；
            })