Juery

jquery easyui   有写好的前端代码
JQuery
    选择器  查找标签或class或id
        // $('*').css('color','red');
            $('div').css('color','blue');
            $('p').css('color','green');
            $('#p').css('color','red');
            $('.div').css('color','red');
        盒子里的所有p标签
            $('.outer p')   后代
            $('.outer>p')   子代
            $('.outer+p')   相邻
            $('.outer~p')   只向下找兄弟

        基本筛选器
            只有两种可能  一个或者多个
            对集合做处理  那个想拿到的
            $('.div li:first').css('color','green');  取第一个
            $('.div li:last').css('color','green');   取最后一个
            $('.div li:eq(2)').css('color','green');   取索引
            $('.div li:lt(2)').css('color','green');  小于索引2的
            $('.div li:gt(2)').css('color','green');  大于索引2的

        属性选择器
            $('[alex]').css('color','green');  只有一个属性名字  可以直接找属性名字
            $('[alex='dsb'].css('color','green'); 通过[alex='dsb']找到

        表单选择器
            $('[type='button'].css('width','300'); input标签 的属性
            $(':button'].css('width','300'); 同上  简写  只适用input标签

        筛选器
            过滤筛选器
                $('li').eq(2)        跟上面作用一样  有区别   索引值可以当做参数传进来   更灵活
                $('ul li').hasclass('test')  判断ul下面的li标签  有没有test标签

            过滤筛选器
                $('.div1').children('.div3').css('color','red');   children（可以加参数） 查找只找子代
                $('.div1').find('.div3').css('color','red');   find(可以加参数) 查找后代
                $('.div2').next().css('color','red');   向下查找一个兄弟   只会在同级里找
                $('.div2').nextAll().css('color','red');   向下查找所有兄弟
                $('.div2').nextUntil('.div6').css('color','red');   向下区间查找  div2 - div6
                $('.div2').prev().css('color','red');   向上查找一个元素
                $('.div2').prevAll().css('color','red');   向上查找所有
                $('.div2').prevUntil('div8').css('color','red');   向上查找区间 div2 - div8
                $('.div1').parent().css('color','red');  div1 下的所有标签
                $('.div1').parents().css('color','red'); 一直向上找 一直找到body 全部改变
                $('.div3').parentUntil('.div1').css('color','red');往上找的同级无效
                $('.div2').siblings('.div1').css('color','red'); 自己不变  上下都变   上下兄弟都找

            列子：
                属性关联：
                    <div xxx='c1'>  <div id='c1'>
                    s = $(self).attr('xxx')       拿到属性值=c1   把对象赋给s
                    $('#'+s).removeClass('hide').siblings.addClass('hide')      字符串拼接 '#'+s=拿到id='c1'

                事件绑定的第二种方式： 这种方式用的多  不用提前设置this
                    document.getElementById('div').onclick=function(){
                        this.getAttribute('id')   通过this就触发事件
                    }

    操作元素：
        <input >
        $('#ck').attr('checked','true');   给方框加上对勾   用在自定义属性  查找标签
        $('#ck').removeAttr('checked');    给方框取消对勾
        $('#ck').prop('checked','true');   给方框加上对勾   不能设置自己添加的属性 比如alex='ss'  比如正选反选
        $('#ck').removeProp('checked');    给方框取消对勾
        $('.test').add

        循环：
            li = [10,20,30,40]
            $each(li换成dic,function(i,x)){
                console.log(i,x)  li拿到的是 0索引 10值 , 1 20 , 2 30, 3 40
                                    字典dic  拿到到是  键 值
            }

            正反选列子：
            找到table标签：
                $('table tr').each(function(){
                    $(this.html())       拿到tr里的所有标签
                })
                function selectAll(){
                    $('table :checkbox').each(function(){   //只有input属性里的type 可以写成：
                        $(this).prop('checked','true')      //$(this) 这样用
                    })
                }

            模态对话框：
                function remove(self){
                    $(self).parent().siblings().removeClass('hide'); 向上查找兄弟标签 删除css
                }
                function add(self){
                    $(self).parent().parent().children('div1','div2').addClass('hide'); 向上查找两层并向下查找
                        //到div1和div2  添加css
                }

            文档处理：
                <input type='text' value='123'>
                <input type='checkbox' mame='hobby'>
                $(':text').val()    //输出结果  123
                $(':text').val('456')    //修改值  输出结果123   加参数就是修改值

                添加元素：
                    var ele = $('P')   //找到P标签  并插入到div标签里面  放到最后一个
                    append('div1')  //在div里插入P标签  就用append

                    var ele = $('P')  //  这个是div标签 被插入
                    ele.appendTo('div1')  //

                    var ele = $('P')  //   插入div标签  并放到最上面
                    prepend('div1')  //

                    var ele = $('P')  //  这个是div标签 被插入  并放到最上面
                    ele.prependTo('div1')  //

                    var ele = $('P')  //  这个是把div标签内部的P标签  拿到外部和div是兄弟关系 放到下面
                    after('div1')

                    var ele = $('P')  //  这个是把div标签内部的P标签  拿到外部和div是兄弟关系 放到上面
                    before('div1')

                    ele.insertAfter('p') //向上同理  和prepend
                    ele.insertBefore('p')

                    赋值：
                        clone()
                        <div class='outer'>
                            <div class='item'>
                                <input type='text'>
                                <input type='button' value='+' onclick='func1(this)'>
                            <div/>
                        <div/>

                        function func1(self){  //直接找item 并复制  容易1变  2变4  用this就会只找一个
                            var clone = $(self).parent().clone();  //找到标签对象
                            clone.children(':button').val('-').attr('onclick','func2(this)');
                                //把+号变成-号  添加多了可以删除 .attr是修改新的标签对象的onclick的对象名字
                            $('#outer').append(clone);
                        }
                        function func2(){
                            $(self).remove()    //删除当前带this的标签

                        }

                    删除：
                        remove()    直接删除标签
                        empty()   清空标签

    事件：
        加载完成  在执行函数   windows.onload  一样
            $(document).ready(function(){
                $(this).css('color','red')
            })
        简写：
            $(function(){
                $(this).css('color','red')
            })

        绑定事件：
            $('div').click(function(){
                alert(123)
            })
        事件委托：
            function add(){  动态添加标签li
                $('ul').append('<li>5555</li>')
            }
            on('事件','查找','[data一般不用]','function')
            $('ul').on('click','li',function(){  动态绑定元素触发事件 没有selector参数  就不成立  不能动态触发
                alert(456)
            })
                data方法:
                    function maHandler(){
                        event.data.foo2     拿到bar
                    }
                    $('ul').on('click',{foo:'bar'},maHandler)

        取消绑定事件：
            off(event,selector,function)


    拖动面板：

    动画效果：
        过度动画
            $('p').show(1000);  显示    参数是1秒过度动画
            $('p').hide(1000);  隐藏    参数是1秒过度动画
            $('p').toggle(1000); 切换（显示，隐藏）
        淡入淡出：
            $('p').fadeIn(1000);  淡入
            $('p').fadeOut(1000); 淡出
            $('p').fadeToggle(1000); 切换
            $('p').fadeTo(1000,0.3); 淡出       0.3的透明度
        滑动滑出：
            $('p').slideDown()  滑出
            $('p').slideUp()    滑入
            $('p').slideToggle()  切换
        回调函数：
            $('p').show(1000,function(){
                1000,执行成功后在执行function函数
            });
        扩展方法：
            $.extend({
                getmax:function(a,b){ getmax是键
                    return a>b?a:b   如果a>b 成立？返回a  否则：返回b
                }
            })
            调用的话用键调用
            $.getmax(5,8)

            $.fn.extend({  fn 是标签对象
                print:function(a,b){
                    console.log(123)
                }
            })
            调用的话用键调用
            $('p').print()

            在自定制方法后  把方法外面加一层function   私有域


页面布局：
    1、滚动滑轮的事件
    2、内容到窗口的距离
    3、position:absolute
        定位置：右下角
        滚动的时：不固定 随着滚动
+++++++++++++++++后台管理页面的布局+++++++++++++++++++
利用： absolute + overflow:auto;
            上菜单和左菜单 固定的
            无overflow
+++++++++++++++++滚动菜单的功能+++++++++++++++++++
1 监听滑轮滚动事件
    $('body').scrollTop()  滚动就执行一次
2 如何获取当前滚轮滑动事件
$('body').scrollTop()    监听滚动的高度
$('body').scrollTop(0)    设置滚动的高度

$('div1').offset()  获取当前标签距离距离顶部的高度
$('div1').height()  永远获取自己的高度，获取当前标签的自身高度
$('div1').innerHeight()  永远获取自己的高度+padding ；获取第一个元素内部区域高度（包括补白，步包括边框）
$('div1').outerHeight()  false永远获取自己的高度+padding+border ；  获取第一个元素外部区域高度（默认包括补白和边框） 设置为 true时 ，计算边距在内。
                         true永远获取自己的高度+padding+border+margin ；

$('div1').
$('div1').
$('div1').


js里的return 只是跳出循环  不在检查其他内容