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