jQuery基础：上（样式及DOM操作）

        //jQuery封装了自己的js方法，因此掩盖了js带来的兼容问题
        var $div = $('#imooc');
        $div.html('hello,bitch!').css('color','red');

        //.get(index)方法可以将jQuery对象转化为DOM对象
        var $p = $('p');
        $p.get(1).style.color = 'red';

        //$()操作符对DOM对象使用时可以将DOM对象转化为jQuery对象
        var p = document.getElementsByTagName('p');
        var $p = $(p);
        $p.last().html('w qu bu qu !').css('color','#ddd');

        //常见的层级选择器的使用
        $('body > #imooc').html("I am body's son");
        $('pre sub');
        $(' #imooc + p').html("o sb");
        $('.i1 ~ p').html("e sb");

        //常见的筛选选择器的使用
        $(':first');        //$('body:first');
        $(':last');
        $(':not(selector)');
        $(':eq(index)');
        $(':gt(index)');
        $(':lt(index)');
        $(':even');
        $(':odd');
        $(':header');
        $(':lang(language)');
        $(':root');
        $(':animated');

        //内容筛选选择器
        $(":contains(text)");
        $(':parent');
        $(':empty');
        $(":has(selector)")

        //可见性筛选器
        $(":visible");
        $(":hidden");

        //子元素筛选选择器
        $(":first-child");
        $(":last-child");
        $(":only-child");

        //表单元素选择器
        $(':input')
        $(':text')
        $(':radio')
        $(':checkbox')
        $(':button')
        $(':password')
        $(':image')
        $(':reset')

        //表单对象属性筛选器
        $(':checked')
        $(':selected')
        $(':enabled')
        $(':disabled')

        //this选择器
        $('p.i1').click(function() {          //p.i1注意这种选择方式
            var $this = $(this);
            $this.css('color','#ddd');
        })

        //.attr()和.removeAttr()
        $('.i1').attr('class');
        $('.i1').attr('title','p');
        $('.i1').attr({'title':'p','name':'Eric'});
        //.attr的函数方法，第一个参数书要操作的属性，第二个参数是回调函数
        //回调函数接受两个参数，第一个是选择器的索引，第二个是索引对应的属性值。
        $('p').attr('class',function(m,cla){
            // alert(cla);
            switch(m) {
                case 0 :
                    return 'a';
                    break;
                case 1:
                    return 'b';
                    break;
                case 2:
                    return 'c';

            }
        })

        //.html()和.text()
        $('.i1').html();
        $('.i1').html('w qu ni nainai');
        $('p').html(function(index,oldHtml) {
            switch(index) {
                case 0:
                    return 'w qu ni baba';
                    break;
                case 1:
                    return 'w qu ni yeye';
                    break;
                case 2:
                    return "w qu ni da yi ma"
            }
        })
        //.text()方法和html（）类似三种用法，但是只对文本内容处理，html是对整个html节点处理。

        //.val()处理表单元素的value值，同样三种用法。

        //.addClass()和.removeClass()
        $('p').addClass(function( index,currentClass) {
            switch(index) {
                case 0:
                    return 'i9';
                    break;
                case 1:
                    return 'i2';
                    break;
                case 2:
                    return "i3"            
            }
        });
        $('.i9').addClass('i2');

        //.toggleClass()切换样式

        //.css()设置样式

        //元素的数据存储
        //1.静态方法
        $('.i2').click(function() {
            var ele = $(this);
            $.data(ele,'a','a is babb');
            var reset = $.data(ele,'a');
            ele.text(reset);
        });
        $('.i3').click(function() {
            var ele = $(this);
            ele.data('b','b is your baba');
            var reset = ele.data('b');
            ele.html(reset);
        })


        //jQuery创建节点的方法
        $('body').on('click',function() {
            var ele = $('<div class="i5"> 我是jQuery创建的新节点</div>');
            $(this).append(ele);
        })

        //.append()和.appendTo()内部尾部添加节点
        //.prepend() .prependTo()内部首部添加节点

        //.before()和.after()外部添加节点
        //.insertBefore() .insertAfter() 与之前两个方法功能相同，单数相反。

        //.empty()清除元素的子节点，但保留自身标记。

        //.remove()会销毁绑定的事件，从而避免内存泄漏
        //.remove()的有参用法可以进一步筛选。
        // $('p').filter(":contains('yeye')").remove();
        $('p').remove(":contains('yeye')");

        //.detach() 将元素暂时性的去除，但保留所有的事件和属性数据。
        var p = $('p').detach();
        $('body').prepend(p);
        
        //.clone()克隆元素整个节点
        //.clone(true)复制整个节点以及绑定的事件和属性数据。但是属性数据中的对象和数组只复制引用。

        //.repalceWith() 和.replaceAll()替换节点
        //这两个方法返回的jQuery对象是替换前的节点，而不是新的节点。

        //.wrap()，包裹当前元素，返回值为当前元素。
        $('.i3')
        .wrap(function() {
            return '<div><div></div></div>';
        })
        .css('background-color','red');
        //也可以把函数换成在.wrap（）的参数中写入html内容。

        //.unwrap()方法删除父元素，没有参数，保留自身和兄弟元素。

        //.wrapAll()可以将多个元素包裹父元素
        //.wrapAll(function() {})可以在回调函数中对每个元素执行包裹操作。

        //.wrapInner()将当前元素下的所有子元素用指定的元素包裹起来，作为当前元素的子元素。

        //.children()遍历元素的一级子元素。
        //.children('.selector')遍历元素的筛选之后的一级子元素。

        //.find('.selector')查找后代

        //.parent() 查找当前元素的父元素
        //.parent()可以接受参数筛选器，例如
        //$('div').parent(":last")

        //.parents()

        //.closest()

        //.next()

        //.prev()

        //.siblings()

        //.add() 将元素（jQuery对象或者DOM或者HTML片段）添加到jQuery合集中。

        //.each() 对jQuery合集对象的遍历操作，each()中的回调函数有两个实参，索引和迭代元素。