jquery 总结

1.jquery 8大选择器：基本、属性选择器，层级、子元素选择器，内容、可见性选择器，表单、表单属性选择器
2.jquery dom元素操作（对象访问）
     each()   $("img").each(function{alert("test each()";});
     size()   $("img").size();计算dom元素的个数
    length  $("img").length; 同上
    get()   $("img").get(); 获取dom元素的集合
    get(index) $("img").get(0);获取某一个dom元素
    index(subject) $("li").index($("#bar"))   获取索引值
3.属性操作：
    attr(name,val);
    removeAttr(name)
    html() //获取 html("append"); 负值
    text() 同上
    val()取当前值
4.css相关操作
    css:
            css(name,val);
    位置：
            offset()   $("p:last").offset({top:30,left:20});  设置匹配元素相对于document对象的坐标
            postion() var postion = $("p:first").postion();  获取匹配元素相对父元素的偏移坐标
            scrollTop() $("p:last").scrollTop();获取匹配元素相对滚动条顶部的偏移
            scrollLeft   $("p:last").scrollLeft;       获取匹配元素相对滚动条左侧的偏移
      尺寸：
            width();
            height();
            innerWidth();innerHeight();
            outerWidth();outerHeight();         
5.文档处理
    内部插入：
        append();在匹配元素中插入
        appendTo();被插入
        prepend();
        prependTo()
    外部插入：
        after();  $("p").after("<b>ss</b>");  放到匹配元素后面
        insertAfter(); 把匹配元素放到后面
        before();
        insertBefor()
    包裹：
        wrap(html,elem,fn);  作用与内部插入appendTo()差不多
        unwrap();  移除父元素
        wrapInner(html,elem,fn); 作用与wrap相反，在匹配元素内部包裹
    替换： replaceWith(); replaceAll();
    删除：
     empty();  清空匹配元素的所有子元素
    remove();  只清空匹配元素，不清空匹配元素内容
    复制：clone();clone(true);
6.筛选
    过滤：
        eq(index); 取得index处的值
        first();
        last();
        filter();   $("p").filter(".myClass,:first");   
        is();    $("input[type='checkbox']").parent.is("form");是form,则返回true,否则返回false
        has();   $("li").has("ul").css("background-color","red");
        not();   $("p").not($("#id")[0]); 删除匹配的元素
        slice(start,end);   hello
ni hao
hoo
   选取第一个P，$("p").slice(0,1);
   
    查找：
        find(expr)        $("p").find("span"); expr 可以像是.selected  .myClass
        children(expr)  不带expr时是不带查找条件所有子结点元素
        parent(expr)   查找匹配元素的唯一父元素，最后还包括匹配元素
        prev(expr)      取得前一个紧邻元素
        next(expr)        取得后一个紧邻元素
        subling(expr)    取得同级其它子元素集合
  7.事件
        bind(type,[data],fn);
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
        one(type,[data],fn);一次性事件绑定 ，只要第一次

$("p").one("click", function(){
  alert( $(this).text() );
});
        trigger(type,[data]);在匹配元素上触发事件

$("form:first").trigger("submit") 不用submit提交第一个表单
//给事件传递一个参数$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
//显示Hello World!$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
     unbind([type],[data]);   去除绑定
    hover(overFn,outFn); 鼠标悬停时事件，不是点击
   
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
        toggle(fn1,fn2,fn3....)  鼠标点击依次事件
   
$("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":", "color":"});
      }
    );
8.效果
    基本：
        show(); 也可带参数show(speed,callback)
        hidden();也可带参数hidden(speed,callback)
        toggle();也可带参数toggle(speed,callback);
    滑动：
        slideDown(speed,[callback]);
        slideUp(speed,[callback]);
        slideToggle(speed,[callback]);
    淡入淡出：
        fadeIn(speed,[callback]);
        fadeOut(speed,[callback]);
        fadeTo(speed,opacity,[fn]); //opacity,不透明度值(0到1之间的数字
    动画效果：
        animate(parames,[duration],[easing],[callback])
       
paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function在动画完成时执行的函数




// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "10em",
    borderWidth: 10
  }, 1000 );
});

 

转自：http://yzd.iteye.com/blog/1157488