jquery个人总结

注释：ele：元素名，className,id.  各种选择器   
    element具体的元素标签：例如 ,<div></div>

表单元素：select,input   
    .val(value)
        参数value 的值可以是String,Array,function
.css()
    .css(propertyName)   //返回该css样式的值。
    .css([propertyName1,propertyName2,propertyName3])  //返回一组css样式的值。
    .css(propertyName,function(index,style){}) //
    .css(propertyName,value)   //设置某个css样式的值。


元素的height
    为获取元素的真实高度（含padding,margin,border） 一般用$(ele).css("height");

    当元素设置box-sizing:border-box时;$(ele).height()获取的高度不包括padding ,border ,margin。


    $(ele).height(value) :可直接给元素设置高度。


    $(ele).innerHeight():获取元素包括padding的高度。


    $(ele).outerHeight():获取元素包括padding,border的高度。


    $(ele).outerHeight(true):获取元素包括padding,border,margin的高度。
      


偏移量
    $(ele).offset().top
    $(ele).offset().left

    设置偏移量：$(ele).offset({top:value,left:value})

position
    $(ele).position()
    $(ele).position().left
    $(ele).position().top
    
class
    $(ele).addClass(className);添加类名
    $(ele).removeClass(className);删除指定类名
    $(ele).removeClass();删除该元素所有类名
    $(ele).toggleClass(className)//切换class名
    $(ele).toggleClass(className,条件语句)//切换class名
    
scroll 
    $(ele).scrollTop();输出元素的滚动高度；
    $(ele).scrollTop(topValue);设置元素的滚动高度；
    
queue  
    将动画放到动画队列中，使动画顺序执行，上一个事件结束后才执行下一个事件，queue()执行后，必须dequeue()
    $(ele).queue(function(){
        var that=$(this);
        that.dequeue()
    })

.clearQueue()   清空队列

data
    
    设置data(key,value)
        $(ele).data(key,value)  //key:的值是String   value:String,Object,Array,number
        $(ele).data(obj)


    获取data()值
        $(ele).data() //获取所有data
        $(ele).data(key) //获取key所对应的值
        
        $( "body" ).data( { "my-name": "aValue" } ).data(); //return { myName: "aValue" }.


        <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 
            
            $( "div" ).data( "role" ) === "page";
            $( "div" ).data( "lastValue" ) === 43;
            $( "div" ).data( "hidden" ) === true;
            $( "div" ).data( "options" ).name === "John";
    
    删除data
        removeData() //删除所有的data
        removeData(key) //删除对应的data值

jQuery.data()
    
    //给元素设置data     
        jQuery.data(element,key,value)
        jQuery.data(element,key)  //获取元素指定data
        jQuery.data(element)      //获取元素所有data

andSelf()    //设置时将自己包含进去
    
    //将该元素的以后的兄弟元素包括他自己设置背景色为红色
    $( "li.third-item" ).nextAll().andSelf().css( "background-color", "red" );

.bind()        移出事件.unbind()
    //给元素添加事件
        .bind(eventName,eventData,handler)  
            例如:
                $("ul").bind("click",'li',functions(){})
        
        .bind(eventName,handler)   
            例如:
                $("ul").bind("click",functions(){})
                $("ul").bind("click,mouseenter",functions(){}) //绑定两个事件
        
        .bind({eventName:handler1,eventName:handler2})       
         
        .bind(eventName,data,handelName)
            例如：
                function handler( event ) {
                    alert( event.data.foo );
                }
                $( "p" ).bind( "click", {
                    foo: "bar"
                    }, handler )
        
        //若添加的事件 不是已有的事件名  使用  .trigger("yourEventName")
            $( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
                $( this ).text( myName + ", hi there!" );
                $( "span" )
                    .stop()
                    .css( "opacity", 1 )
                    .text( "myName = " + myName )
                    .fadeIn( 30 )
                    .fadeOut( 1000 );
                });
            $( "button" ).click(function() {
                $( "p" ).trigger( "myCustomEvent", [ "John" ] );
            });


.delegate() 给元素绑定事件   ，移出事件  .undelegate()
    $(ele).delegate(selector,events,handler)
        例如： 
            $( "table" ).delegate( "td", "click", function() {
                $( this ).toggleClass( "chosen" );
            });


.die()    .live()
        var foo = function() {
            // Code to handle some kind of event
        };
        
        // Now foo will be called when paragraphs are clicked
            $( "p" ).live( "click", foo );
        
        // Now foo will no longer be called
            $( "p" ).die( "click", foo );


.error()
    // 如果 missing.png未加载出来, 用replacement.png代替
        $( "img" )
        .error(function() {
            $( this ).attr( "src", "replacement.png" );
        })
        .attr( "src", "missing.png" );
.delay(timeNumber)   延迟执行


    $( "button" ).click(function() {
        $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
        $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
    })
.size()相当于 .length
.toggle(handler1,handler2,handler3)   // handler将会顺序执行  handler:function(){}

        $( "#go1" ).add( "#go2" ).click();  //给id="go1" 添加 id='go2'的点击时间

.animate()

    $(ele).animate({css样式},time)
        例如：
            $( "button" ).click( function() {
                console.log($( "button" ).index( this ) )
            })

    $(ele).animate({css},time,speed,completeHandler)
        例如： 
            $( "p" ).animate({
                height: 200,
                width: 400,
                opacity: 0.5
            }, 1000, "linear", function() {
                alert( "all done" );
            });


    $(ele).animate({css},
            {
                queue:false, //动画是否按顺序执行
                duration:3000   //动画执行时间
            }).animate({css})
        
.fadeIn(duration,completeHandler)

        duration:  timeNumber,slow,fast

.fadeOut(duration,completeHandler)

.fadeTo(duration,opacity,completeHandler)  //过渡到某个状态

.fadeToggle(duration,completeHandler)  //淡入淡出切换操作，一般与点击事件一起用

.finish()  //由第一个动画直接到最后一个动画结束

.slideUp(duration,completeHandler)
.slideDown(duration,completeHandler)
.slideToggle()

.stop()    //结束当前动画并从当前状态直接执行下一个动画
    .stop(true,true)  //结束当前动画，并到该动画的最终状态
    .stop(true,false)  //结束当前动画，并保持该动画当前状态
    .stop(false,false)  //结束当前动画并从当前状态直接执行下一个动画
    .stop(false,true)  //结束当前动画，并从当前动画的最终状态继续执行下一个动画
    
.hide(duration,completeHandler)
        $( "#hider" ).click(function() {
            $( "span:last-child" ).hide( "fast", function() {
                // 使用 arguments.callee 我们将不需要使用具体的函数名
                    $( this ).prev().hide( "fast", arguments.callee );
            });
        });

浏览器事件 

    $(window).resize(function)   //当浏览器窗口改变时触发
    $(window).scroll(function)   //当浏览器滚动时触发


Dom 文档事件 
    .load()   //一般用于img元素，或整个文档body
        $("img").load(function(){})
    
    $(document).ready(function) 
        
表单事件

    $("select").change(function(){})  //改变select选项时触发


    $("input").blur(function(){})    //失去焦点时触发


    $("input").focus(function(){})    //获取焦点时触发
    
    $( "input" ).select(function(){});  //选中input标签中的文字时触发


    $( "textarea" ).select(function(){});  //选中input标签中的文字时触发
    
    $("form").submit(function(){});


    $("input").val()


    $(":button")      //选取input标签，以及input 的type="button"的按钮


    $("input:checked")      //选中checked的input

//获取元素里边内容 
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值


//设置元素里边内容 
    text(value) - 设置或返回所选元素的文本内容
    html(value) - 设置或返回所选元素的内容（包括 HTML 标记）
    val(value) - 设置或返回表单字段的值

各种选择器

    $("div:animated")  //选择具有动画效果的div
    $("a[key=value]")

.context

        $(ele).context  //返回整个Dom节点

//自定义jquery的简写符号
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});