JQuery

一、jQuery基本操作

1、样式操作
    1.设置和获取样式
        设置
            css(name,value)
            css({name:value,name:value})
        获取
            css()
    2.追加样式和删除样式
        追加
            addClass()
        删除
            removeClass()
        包含
            hasClass()
        切换
            toggleClass() 类似开关   点击一下添加再点击一下删除
2、内容操作
    1.HTML代码操作
        html() 类似与js的innerHTML
            添加html标签代码
            于获取第一个匹配元素的HTML内容或文本内容
        html(content)
            用于设置所有匹配元素的HTML内容或文本内容    
    2.标签内容操作
        text()
            可以设置或者获取元素的文本内容（不包括HTML标签）
        text(content)
            用于设置所有匹配元素的文本内容
    3.属性值操作
        val() 可以获取或者设置表单元素的value属性值
3、节点操作
    1.查找节点（前面章节已讲）
        $(选择器)选择器获取节点
        $(element)将DOM节点转化为jQuery节点可以使用jQuery封装的方法
    2.创建节点
        $(html)创建新的jQuery节点
    3.插入节点
        插入子节点
            A.append(B)    将B添加到A文本内容末尾  
            A.appendTo(B)  将A添加到B文本内容末尾   
            A.prepend(B)   将B添加到A文本内容之前    
            A.prependTo(B) 将A添加到B文本内容之前
        插入同辈节点
            A.after(B)         将B添加到A标签后面
            A.insertAfter(B)   将A添加到B标签后面
            A.before(B)        将B添加到A标签之前
            A.insertBefore(B)  将A添加到B标签之前
    4.删除节点
        remove()  删除当前节点
        empty()   清空所有子节点
        detach()  删除当前节点但是保留事件附件数据
    5.替换节点
        A.replaceAll(B)     用A替换B
        A.replaceWith(B)    用B替换A
    6.复制节点
        A.clone(true)           复制A节点，然后返回一个复制后的A节点
                                true表示复制事件，false表示不复制
4、属性操作
    1.设置或者获取元素属性
        attr(name)
        
        attr(name,value)
        attr({name:value,name:value})
        
    2.删除元素属性
        removeAttr(name)  一次只能删除一个
5、节点遍历
    1.遍历子元素
        children() 包含所有子元素但是不包含子元素的子元素
    2.遍历同辈元素
        next     紧邻其后
        prev     紧邻其前
        siblings   遍历前后所有同辈元素
    3.遍历前辈元素
        parent()   返回直接父元素
        parents()  返回父，祖父。。。。。直到根目录html
    4.其它遍历方法
        each(function(){}) 为每个匹配的元素执行函数
        end()    
        $("li").first().css("background","red").end().last().css ("background","green");
        这个案例就是为第一个li元素添加背景色红色，给最后一个li元素添加背景色绿色
        如果没有添加end(),在给第一个li元素添加红色背景色之后会在这个红色li子元素里寻找最后一个元素添加背景色，找不到就不会由任何操作
6、CSS-DOM操作
        css()                  设置或返回匹配元素的样式属性
        height([value])          设置或返回匹配元素的高度
        width([value])          设置或返回匹配元素的宽度 
        offset([value])          返回以像素为单位的top和left坐标。仅对可见元素有效
        offsetParent( )          返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
        position( )              返回第一个匹配元素相对于父元素的位置
        scrollLeft([position])    参数可选。设置或返回匹配元素相对滚动条左侧的偏移
        scrollTop([position])    参数可选。设置或返回匹配元素相对滚动条顶

二.事件与特效

jQuery事件与特效
1.事件分类
    基础事件
        鼠标事件
            click( )
            mouseover( )
            mouseout( )
            mouseenter( )
            mouseleave( )
            区别：
                相同点：
                    鼠标进入被选元素时会触发
                    鼠标离开被选元素时会触发
                不同点：
                    鼠标在其被选元素的子元素上来回进入时：
                        触发mouseover( )
                        不触发mouseenter
                    鼠标在其被选元素的子元素上来回离开时：
                        触发mouseout
                        不触发mouseleave
        键盘事件
            keydown( )
            keyup( )
            keypress( )
        window事件
            调整窗口大小时，完成页面特效
                <script>
                    var x = 0 ;
                    $(function(){
                        $(window).resize(function(){
                            $('span').text(x+=1);
                        }); 
                        $("p").click(function(){
                            $(window).resize();
                        });  
                    });
                </script>
        表单事件
            提交
            blur
            focus
            select
    复合事件
        鼠标光标悬停
            hover( )方法
                hover()方法相当于mouseover与mouseout事件的组合
                hover(enter,leave);
            触发：
                $(".top-m .on").hover(function(){
                    $(".topDown").show();
                          },
                         function(){
                     $(".topDown").hide();
                         }
                );

        鼠标连续点击
            toggle( )方法
                toggle()方法用于模拟鼠标连续click事件
                    toggle(fn1,fn2,...,fnN);   jQuery1.8之前有效。1.8之后方法移除
                toggle()方法不带参数，与show( )和hide( )方法作用一样
                $("input").click(function(){$("p").toggle();})
            toggleClass( )可以对样式进行切换
                $("input").click(function(){$("p").toggleClass("red");})
            总结
                toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
                toggle( )实现事件触发对象在显示和隐藏状态之间切换
                toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

2.绑定事件和移除事件
    绑定事件：
    bind(type,[data],fn); 
        事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
        可选函数
        处理函数
        
        单个事件
            $(document).ready(function(){
                $(".on").bind("mouseover",function(){
                    $(".topDown").show();
                });
            });
        多个事件
            $(".top-m .on").bind({
                mouseover:function(){
                    $(".topDown").show();
                },
                mouseout:function(){
                    $(".topDown").hide();
                }
            });

    移除事件：
        unbind([type],[fn])
            事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
            处理函数，函数名称
            当unbind()不带参数时，表示移除所绑定的全部事件
        $("#del").click(function(){
                $("#nav li:first").unbind("click", content1)
        });
3.jQuery动画效果
    控制元素显示与隐藏
        show() 控制元素的显示，hide( )控制元素的隐藏
        $(selector).show([speed],[callback])
        $(selector).hide([speed],[callback])
            可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
            可选。show函数执行完之后，要执行的函数
    改变元素的透明度
        fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
        $(selector).fadeIn([speed],[callback])
        $(selector).fadeOut([speed],[callback])
            可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
            可选。show函数执行完之后，要执行的函数
    改变元素高度
        slideDown() 可以使元素逐步延伸显示
        slideUp()则使元素逐步缩短直至隐藏
        $(selector).slideUp ([speed],[callback])
        $(selector).slideDown ([speed],[callback])

    自定义动画