jQuery常用语法总结

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");