1.入口函数 $(document).ready(function(){}) $(function(){}) $(window).ready(function(){}) 2.$===jQuery 3.CSS样式 selector.css({"width":100,"height":100,"background":"red"}); selector.css("width",100); 4.js对象转换成jquery对象 $(js对象) jquery对象转换成js对象 （1）jquery对象[0] （2）jquery对象.get(索引值) 5.案例 (1)varjqdiv=($div); jqdiv.css("background","black"); (2)varjqdiv=($div); for(var i=0;i<jqdiv.length;i++){ jqdiv[i].style.backgroundColor="black"; } 6.层级选择器 $("ul li")子子孙孙 $("ul>li")子代 7.筛选选择器 find:在jq对象后代查找 ul.find("li").css("backgroundColor","red"); 不写参数获取所有子元素 console.log(ul.children()); 从jquery对象的子代中查找 ul.children("li").css("backgroundColor","red"); 查找所选元素中第几个元素 console.log(ul.children("li").eq(1)); eq():从jquery对象的子代中查找该索引值的元素,从0开始 ul.children().eq(1).css("backgroundColor","red"); prev():该元素的上一个兄弟元素 ul.().children().eq(0).prev().css("backgroundColor","red") next():该元素的下一个兄弟元素 ul.children().eq(0).next().css("backgroundColor","red"); siblings():该元素的所有兄弟元素,除去自己以外 ul.children().eq(1).siblings().css("backgroundColor","red"); parent():某元素的父元素 ul.children().eq(0).parent().css("backgroundColor","red"); 8.$(this).index()相对于同胞元素的位置，俗称索引值 9.设置多个样式 $(selector).css({"width":100,"height":100}) 设置多个样式 $(selector).css("background","red") 获取样式 $(selector).css("background") 10.类操作 $(selector).addClass("current"); 删除类 $(selector).removeClass("current") 判断类 $(selector).hasClass("current") 有:true 无:false 切换类 $(selector).toggleClass("current") 11.show(执行时间，function(){})显示 hide(执行时间,function(){})隐藏 toggle(执行时间，function(){})切换 12.slideUp(时间，function(){})向下滑入，通过改变高度 slideDown(时间,function(){})向上滑出 slideToggle(时间,function(){})切换 13.fadeIn(时间，function(){})淡入 通过控制透明度 fadeOut(时间,function(){})淡出 fadeToggle(时间，function(){})切换 fadeTo()(时间,透明度,function(){}) 14.创建节点$("<li class='aa'>我是li标签</li>"); $("ul").html("<li>我是li标签</li>") 15.添加节点 $("ul").append(newLi);newLi.appendTo($("ul")); 在盒子末尾添加 $("ul").prepend(newLi);newLi.prependTo($("ul"));在盒子最前边添加 16.$("li").before(newLi);$("li").after(newLi)在兄弟元素之前或之后添加 17.清空节点 $("ul").html(""); $("ul").empty(); 删除元素 自杀式 $("li").eq(0).remove() $(this).parent().children("div").remove(); 18.复制节点 var Newul=$("ul").clone(); $(".box").append(Newul); 19.属性操作 $("div").attr("aaa","111");两个参数表示设置该属性的值 可以添加到标签上 $("div").attr("aaa");一个参数表示获取该属性值 20.移出属性 $("div").removeAttr("class")选择要移出的属性,必须 21.$("checkbox").click(function(){ console.log($(this).prop("checked")); 选中时输出true，取消时输出false }) 22.在设置checked，等时候，要用prop()方法 $("checkbox").prop("checked",true); 23.获取状态值，返回true或false $("checkbox").prop("checked"); 24.val()获取标签的value属性的值,带参数表示设置 text()获取文本值 html()获取文本值，识别标签 25.获取高度$("div").height() 设置高度$("div").height(200) 获取宽度$("div").width() 设置宽度$("div").width(200) 获取边距. innerWidth()获取内边距和内容宽度 outerwidth获取内边距+边框+内容宽度 26.距离页面最顶端或者最左侧的距离和定位无关 $("div").offset().top; $("div").offset().left 设置距离，和定位没有关系 $("div").offset({"top":100,"left":100}) 距离父系盒子中带有定位的盒子的距离（获取的就是定位值，和margin/padding无关） $("div").position().top $("div").position().left 设置距离 $("div").position().top="100px" $("div").position().left="100px" 获取被卷去的头部 $(window).scrollTop() 设置卷去的距离 $(window).scrollLeft(100) 27.绑定事件 这种绑定事件不会层叠掉 $(document).click(function(){ alert(1); }) $(document).click(function(){ alert（2); }) bind不推荐,1.7以后不使用，可以同时绑定多个事件 $(document).bind("click mouseenter",function(){ alert(1); }) $(document).bind("click mouseenter",function(){ alert(2); }) delegate支持动态创建出来的元素绑定事件 $(document).delegate("div","click mouseenter",function(){ alert(1) }) on $(document).on("click mouseenter","div",{"name",11},function(event){ alert(event.data.name) }) 28.事件解绑 $("div").unbind("click") $("div").delegate("click") $("div").off("click") 29.end(),prevAll(),nextAll()使用 $(this).text(have).prevAll("li").text(have).end().nextAll("li").text(none); 30.$("ul li").each(function (index,element){ $(element).css("opacity",(index+1)/10); }) 31.$(this).index() 相对于同胞元素的位置，俗称索引值 32.$(".div").fadeIn(1000).delay(1000).fadeOut(1000) 33.$.each(数组，function(i,value){ }) $("ul li").each(function (index,element) { $(element).css("opacity",(index+1)/10); }); 34.获取自定义属性 $(selector).data("pid");