jquery简单使用方法

 jQuery使用
        1.jQuery是JS的工具,对原生JS的方法进行封装,提供更便捷,简易的方法
            官网:http://jquery.com 
            中文API:http://jquery123.com        
        2.使用
            1.先引入jquery文件,后使用jquery的语法
            2.工厂函数-$()
                用于获取元素,创建元素节点或转换对象类型
                例:
                    根据选择器获取元素,返回jquery对象
                    $('h1') $('#d1') $('.c1') $('#d1 h1')
        3.DOM操作
            * 获取元素
                jquery中只用选择器获取元素
                1.基础选择器
                    $('h1') $('#d1') $('.c1') $('#d1 h1') $('ul,ol') 
                2.层级选择器
                    * 后代选择器
                    * 子代选择器
                    * 相邻兄弟选择器
                        $('h1+h2')
                        查找h1后面相邻的兄弟元素,要求必须满足选择器h2
                    * 通用兄弟选择器
                        $('h1~h2')
                        查找h1后面所有满足选择器h2的兄弟元素
                3.过滤选择器
                    * 过滤选择器与伪类选择器相似,必须与基础选择器结合使用
                        1.查找第一个元素
                            :first
                        2.查找最后一个元素
                            :last
                        3.查找奇数下标对应的选择器
                            :odd
                        4.查找偶数下标对应的选择器
                            :even
                        5.查找制定下表对应的元素
                            :eq(index)
                        6.查找大于指定下标的元素
                            :gt(index)
                        7.查找小于指定下标的元素
                            :lt(index)
                        8.否定删选
                            :not(selector1,selector2)
                            匹配除了selector1,selector2之外剩下的元素
                4.属性选择器
                    根据标签属性匹配元素
                    * 匹配包含指定属性的元素
                        [attrName]
                    * 匹配属性名=属性值的元素 
                        [attrName=value]
                    * 匹配属性值以指定字符开头的元素
                        [attrName^=value]
                    * 匹配属性值以指定字符结尾的元素
                        [attrName$=value]
                    * 匹配包含指定字符的元素
                        [attrName*=value]
                5.子元素过滤选择器
                    *匹配第一个子元素
                        :first-child
                    *匹配最后一个子元素
                        :last-child
                    *匹配第n个子元素
                        :nth-child(n)
            * 获取元素内容
                1.html("")
                    同原生的innerHTML属性,读取或设置标签内容,可以识别标签语法
                2.text("")
                    同原生的innerText属性,读取或设置标签内容,不能识别标签语法
                3.val("")
                    同原生的value属性,读取或设置表单控件的值

            * 操作元素属性
                1. attr('attrName','value')
                    设置或读取元素属性

                2. prop('attrName','value')
                    设置或读取元素
            * 操作元素样式
            * 根据层级结构获取元素
            * 元素创建, 添加和删除

* 操作元素属性
        1. attr('attrName','value')
            设置或读取元素属性

        2. prop('attrName','value')
            设置或读取元素,如果操作用于标记元素状态的属性(例:checked属性值)只能使用prop()方法

        3. removeAttr('attrName')
            移除指定的标签属性
    * 操作元素样式
        1. 为元素添加id或class属性,对应选择器的样式
        2. 针对class属性可以取多个值的情况,提供专门操作类名的方法
            addClass('className') 添加指定类名
            removeClass('className') 移除指定类名
            toggleClass('className') 借助用户行为动态修改类名,有则删除,无则添加
        3. 操作行内样式
            * css('attrName','value')
            * css(JSON对象)
                格式:
                    {
                        'attrname':'value',
                        'attrname':'value',
                        ......
                    }
    * 根据层次结构获取元素
        1. 获取父元素
            parent()
        2. 获取祖先元素/满足选择器的祖先元素
            parents()/parents('selector')
        3. 获取子元素列表
            children()/children('selector')
        4. 获取指定的后代元素
            find('selector')
        5. 获取下一个兄弟元素,必须满足选择器,否则查找失败
            next()/next('selector')
        6. 获取上一个兄弟元素,必须满足选择器,否则查找失败
            prev()/prev('selector')
        7. 获取所有的兄弟元素
            siblings()/Siblings('selector')
    * 元素的创建,添加和移除
        1.创建元素
            $('<h1 id="d1">老王</h1>h1>')
        2.添加元素
            *作为子元素添加
                将新创建的元素添加至父元素的末尾
                $parent.append(elem);
                将新创建的元素添加至父元素的末尾
                $parent.prepend(elem);
            *作为兄弟元素添加
                在obj之前添加新元素
                $obj.before(elem)
                在obj之后添加新元素
                $obj.after(elem)
        3.移除元素
            $obj.remove()
    * 事件处理
        1.窗口加载完毕
            原生JS使用onload事件
            jQuery使用ready()表示:
                语法一:
                    $(document).ready(function(){
                        //文档加载完毕后执行
                    })
                语法二:
                    $()ready(function(){})
                语法三:
                    $(function(){
                        //文档加载完毕后执行
                    })
            区别:
                onload重复书写会造成覆盖问题,需要手动检测;
                ready方法可以重复书写,不需要考虑覆盖问题. 
        2.绑定方式
            1.使用on()绑定
                例:
                    $('h1').on('click',function(){})
            2.使用bind()绑定
                例:
                    $('h1').bind('click',function(){})
            3.将省略on前缀的时间名称作为方法名直接绑定
                例:
                    $('h1').click(function(){})
        3.this关键字
            直接使用this关键字,表示原生的对象,需要转换为jquery对象才能使用jquery方法
        4.事件对象的获取和使用同原生JS