JQuery操作

JQuery操作手册：http://jquery.cuishifeng.cn/

Ĵjquery笔记：
jQuery

http://jquery.cuishifeng.cn/

模块 《=》类库
DOM/BOM/JavaScript的类库

版本：
    1.x  1.12
    2.x
    3.x

转换：
    jquery对象[0]   => Dom对象
    Dom对象         => $(Dom对象)


一、查找元素
    DOM
        10左右
    jQuery：
        选择器，直接找到某个或者某类标签
        1. id
            $('#id')
        2. class
            <div class='c1'></div>
            $(".c1")
        3. 标签
            <div id='i10' class='c1'>
                <a>f</a>
                <a>f</a>
            </div>
            <div class='c1'>
                <a>f</a>
            </div>
            <div class='c1'>
                <div class='c2'> </div>
            </div>

            $('a')

        4. 组合a
            <div id='i10' class='c1'>
                <a>f</a>
                <a>f</a>
            </div>
            <div class='c1'>
                <a>f</a>
            </div>
            <div class='c1'>
                <div class='c2'> </div>
            </div>

            $('a')
            $('.c2')

            $('a,.c2,#i10')

        5. 层级
            $('#i10 a') 子子孙孙
            $('#i10>a') 儿子

        6. 基本
            :first
            :last
            :eq()
        7. 属性
            $('[alex]')       具有alex属性的所有标签
            $('[alex="123"]') alex属性等于123的标签


            <input type='text'/>
            <input type='text'/>
            <input type='file'/>
            <input type='password'/>

            $("input[type='text']")
            $(':text')

        实例： 
            多选，反选，全选
            - 选择权
            - 
                $('#tb:checkbox').prop('checked');        获取值
                $('#tb:checkbox').prop('checked', true);  设置值
            - 
                jQuery方法内置循环： $('#tb:checkbox').xxxx

            - $('#tb:checkbox').each(function(k){
                    // k当前索引
                    // this，DOM，当前循环的元素 $(this)

                })
            - var v = 条件 ? 真值 : 假值


        筛选


            $('#i1').next()
            $('#i1').nextAll()
            $('#i1').nextUntil('#ii1')

            <div>
                <a>asdf</a>
                <a>asdf</a>
                <a id='i1'>asdf</a>
                <a>asdf</a>
                <a id='ii1'>asdf</a>
                <a>asdf</a>
            </div>

            $('#i1').prev()
            $('#i1').prevAll()
            $('#i1').prevUntil('#ii1')


            $('#i1').parent()
            $('#i1').parents()
            $('#i1').parentsUntil()

            $('#i1').children()
            $('#i1').siblings()
            $('#i1').find()
            $('li:eq(1)')
            $('li').eq(1)
            first()
            last()
            hasClass(class)

    文本操作：
            $(..).text()           # 获取文本内容
            $(..).text(“<a>1</a>”) # 设置文本内容

            $(..).html()
            $(..).html("<a>1</a>")

            $(..).val()
            $(..).val(..)
    样式操作：
            addClass
            removeClass
            toggleClass

    属性操作：
            # 专门用于做自定义属性
            $(..).attr('n')
            $(..).attr('n','v')
            $(..).removeAttr('n')

            <input type='checkbox' id='i1'  />


            # 专门用于chekbox,radio
            $(..).prop('checked')
            $(..).prop('checked', true)

            PS: 
                index 获取索引位置

    文档处理：
            append
            prepend
            after
            before

            remove
            empty

            clone
    css处理

        $('t1').css('样式名称', '样式值')
        点赞：
             - $('t1').append()
             - $('t1').remove()
             - setInterval
             - 透明度 1 》 0
             - position
             - 字体大小，位置
    位置：
        $(window).scrollTop()  获取
        $(window).scrollTop(0) 设置
        scrollLeft([val])

        offset().left                 指定标签在html中的坐标
        offset().top                  指定标签在html中的坐标

        position()                    指定标签相对父标签(relative)标签的坐标
        <div style='relative'>
            <div>
                <div id='i1' style='position:absolute;height:80px;border:1px'></div>
            </div>
        </div>


        $('i1').height()           # 获取标签的高度 纯高度
        $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
        $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
        $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

        # 纯高度，边框，外边距，内边距

    事件
        DOM： 三种绑定方式
            jQuery：
                $('.c1').click()
                $('.c1').....

                $('.c1').bind('click',function(){

                })

                $('.c1').unbind('click',function(){

                })

                *******************
                $('.c').delegate('a', 'click', function(){

                })
                $('.c').undelegate('a', 'click', function(){

                })

                $('.c1').on('click', function(){

                })
                $('.c1').off('click', function(){

                })

            阻止事件发生
                return false

            # 当页面框架加载完成之后，自动执行
            $(function(){

                $(...)

            })

    jQuery扩展：
        - $.extend        $.方法
        - $.fn.extend     $(..).方法

        (function(){
            var status = 1;
            // 封装变量
        })(jQuery)


二、操作元素

===》实例：

作业：
一：
$(‘i1’).height() # 获取标签的高度 纯高度$(‘i1’).innerHeight() # 获取边框 + 纯高度 + ？
$(‘i1’).outerHeight() # 获取边框 + 纯高度 + ？$(‘i1’).outerHeight(true) # 获取边框 + 纯高度 + ？

        # 纯高度，边框，外边距，内边距

二、所有实例敲一遍

三、编辑框