jQuery常用方法盘点（一）

元素

注意！ 只要不是取值返回的基本都是jquery对象可以进行链式编程

$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
$(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值
$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）
$(”元素名称”).html(”new stuff”); 给某元素设置内容 解析标签
$(”元素名称”).text(); 获得该元素的文本
$(”元素名称”).text(value); 设置该元素的文本值为value
$(”input元素名称”).val(); 获取input元素的值
$(”input元素名称”).val(value); 设置input元素的值为value

$(”元素名称”).after(content); 在匹配元素后面添加内容

   $("#btn3").click(function() {
                 // 3. after
                //  语法 : 目标元素A.after(添加的元素B)  把元素作为兄弟元素 添加到元素A的后面 
                //  // 1.1 新创建一个li标签 使用after  目标元素ul1
                $("#ul1").after($("<li>我是after添加的li</li>"))
            })

$(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面

 // 1.2 把ul1里面某一个li添加到ul1里面去   移动到父元素的最后
            $("#ul1").append($("#li1"));
            // 1.3 把ul2里面某一个li添加到ul1  从一个元素里面移动到另一个元素的最后
                $("#ul1").append($("#li2"))
            })

$(”元素名称”).appendTo(content); 在content后接元素

 // 2. appendTo
                //    语法 : 添加的子元素.appendTO(父元素)  把添加的子元素作为最后一个子元素添加到父元素

                    // 新创建一个li标签 添加到ul1  
                    $("<li>我是appendTo添加的li</li>").appendTo($("#ul1"))

$(”元素名称”).before(content); 与after方法相反

$("#btn4").click(function() {
                 // . before
                //  语法 : 目标元素A.before(添加的元素B)  把元素作为兄弟元素 添加到元素A的前面
                //  // 1.1 新创建一个li标签 使用after  目标元素ul1
                $("#ul1").before($("<li>我是before添加的li</li>"))
            })

$(”元素”).prepend(content); 将content作为该元素的一部分，放到该元素的最前面

//  prepend
                //  语法 : 父元素.prepend(子元素)  把某个元素作为第一个子元素添加到父元素
                $("#ul1").prepend($("<li>我是before添加的li</li>"))

$(”元素名称”).clone(布尔表达式) 当布尔表达式为真时，克隆方法（无参时，当作true处理）
$(”元素名称”).empty() 将该元素的内容设置为空

$(”元素”).prependTo(content); 将该元素作为content的一部分，放content的最前面
$(”元素”).remove(); 删除所有的指定元素

事件

blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form

动画

show( ) 显示隐藏的匹配元素。

                // show()只要给了参数 就有动画 没有参数 默认切换display:block
                // 参数1 : 执行动画的时长 可以直接个毫秒数  也可以给特殊值("slow"  "normal"  "fast")
                // 参数2 : 动画执行完毕之后的回调函数
                $("#box").show("normal", function() {
                    alert("动画执行完了")
                });

hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

// 隐藏  和show用法完全一样
 $("#box").hide(300, function() {
                    alert("动画执行完了")
                });

toggle( ) 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选
地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以
“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地
触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”
的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回
调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐
藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。

$(".box").stop(true, false);
					//stop的两个参数 :
                  //  参数1 : 布尔类型  是否清除队列  清除当前动画后面的所有队列
                  //  参数2 : 布尔类型  是否跳转到动画的最终效果  当前动画的最终效果
                
            //      默认值是false false

animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。

				$("#box").animate(
                    {
                    left : 900,
                    width : 300,
                    height : 300,
                    opacity : 0.5
                    }, 5000, "linear",fn)
   /*
            animate的参数
            参数一 : 动画执行的属性  必填项  而且他是一个对象
            参数二 : 动画的运动时长  可选  
            参数三 : 运动曲线  linear  匀速   swing 缓动(默认值)
            参数四 : 回调函数(当前动画自行完毕之后执行的函数)
            
            */

animate( params, options ) 创建自定义动画的另一个方法。作用同上。