jQuery基础知识小结

1、基础

 jquery对象集：
  $()：jquery对象集合

  获取jquery对象集中的元素：

   使用索引获取包装器中的javascript元素：vartemp=$("img[alt]")[0]

   使用jquery的get方法获取jquery对象集中的javascript元素：vartemp=$("img[alt]").get(0)

   使用jquery的eq方法获取jquery对象集中的jquery对象元素：
    $("img[alt]").eq(0)
    $("img[alt]").first()
    $("img[alt]").last()

  jquery对象集转换成javascript数组：
   vararr=$("label+button").toArray()label后面所有同级button元素，转换成javascript数组

  jquery对象集的索引：
   varn=$("img").index($("img#id")[0])注意：index()参数是javascript元素
   varn=$("img").index("img#id")等同于上一行找不到返回-1
   varn=$("img").index()img在同级元素中的索引

  向jquery对象集中添加更多的jquery对象集：   
   使用逗号：$("img[alt],img[title]")
   使用add方法：$("img[alt]").add("img[title]")

   对不同的jquery对象集中采取不同的方法：
    $("img[alt]").addClass("thickBorder").add("img[title]").addClass("");

   向jquery对象集中添加新创建的元素：
    $("p").add("<div></div>");

  删除jquery对象集中的元素：
   $("img[title]").not("[title*=pu]")
   $("img").not(function(){return!$(this).hasClass("someClassname")})
   过滤jquery对象集：
    $("td").filter(function(){returnthis.innerHTML.match(^\d+$)})过滤包含数字的td

   获取jquery对象集的子集
    $("*").slice(0,4)包含前4个元素的新的jquery对象集
    $("*").slice(4)包含前4个元素的新的jquery对象集
    $("div").has("img[alt]")

  转换jquery对象集中的元素
   varallIds=$("div").map(function(){
    return(this.id==undefined)?null:this.id;
   }).get();通过get方法转换成javascript数组

  遍历jquery对象集中的元素
   $("img").each(function(n){
    this.alt="这是第["+n+"]张图片，图片的id是"+this.id;
   })
   $([1,2,3]).each(function(){alert(this);})

  使用元素间关系获取jquery对象集
   $(this).closest("div")比如触发的按钮在哪个div中发生
   $(this).siblings("button[title="Close"]")所有同级元素，不包含本身
   $(this).children(".someclassname")所有子节点元素，不包含重复子节点
   $(this).closest("")临近祖先元素
   $(this).contents()由元素内容组成的jquery对象集，比如可以获取<iframe>元素内容
   $(this).next(".someclassname")下一个同级元素
   $(this).nextAll()后面所有的同级元素
   $(this).nextUntil(".someclassname")后面所有的同级元素直到遇到目标元素
   $(this).offsetParent()离jquery对象集最近的父辈元素
   $(this).parent()直接父元素
   $(this).parents()所有父元素
   $(this).parrentsUntil()所有父元素，直到目标父元素
   $(this).prev()上一个同级元素
   $(this).prevAll()之前的所有同级元素
   $(this).prevTntl()之前的所有同级元素，直到目标元素

  其它获取jquery对象集的方式
   $(this).find(pspan)

  判断是否是某个jquery对象集
   varhasImg=$("*").is("img");

 jquery方法：
  $().hide()
  $().addClass("")
  $().html("")
  $("a").size()元素数量

  jquery选择器：
   $("p:even")  
   $("tr:nth-child(1)")
   $("body>div")直接子元素
   $("a[href=$="pdf"]")根据属性选择
   $(div:has(a))过滤

 jquery函数：
  $.trim()

 jquery执行时间：
  $(document).ready(function(){});
  $(function(){});

 创建DOM元素：
  $("<p></p>").insertAfter();
  $("<img>",{
   src:"",
   alt:"",
   title:"",
   click:function(){}
  }).css({
   cursor:"pointer",
   border:"",
   padding:"",
   backgroundColor:"white"
  }).append("");
 jquery扩展：
  $.fn.disable=function(){
   returnthis.each(function(){
    if(this.disabled!=null)this.disabled=true;
   })
  };
  $("").disable();

 jquery测试元素是否存在：
  if(item)(){}else{}宽松测试
  if(item!=null)推荐测试，能把null和undefined区别开
 

2、选择要操作的元素

 根据标签名：$("a")  
 根据id：$("#id")
 根据类名：$(".someclassname")
 满足多个条件：$("a#id.someclassname")或$("div,span")
 某个元素的所有子节点：$(pa.someclassname)
 某个元素的直接子节点：$(ul.myList>li)

 根据属性名：
  $(a[href^="http://"])以...开头
  $(href$=".pdf")以...结尾
  $(form[method])包含method属性的form
  $(intput[type="text"])
  $(intput[name!=""])
  $(href*="some")包含

 某元素后的第一个元素：$(E+F)匹配的是F，F是E后面的第一个元素

 某元素后的某一个元素：$(E~F)匹配的是F，F是E后面的某一个元素

 通过位置：
  $(li:first)第一个li
  $(li:last)最后一个li
  $(li:even)偶数行li
  $(li:odd)奇数行li
  $(li:eq(n))第n个元素，索引从0开始
  $(li:gt(n))第n个元素之后的元素，索引从0开始
  $(li:lt(n))第n个元素之前的元素，索引从0开始
  $(ul:first-child)列表中的第一个li
  $(ul:last-child)列表中的最后一个li
  $(ul:nth-child(n))列表中的第n个li
  $(ul:only-child)没有兄弟li的ul
  $(ul:nth-child(even))列表中的偶数行li,odd为计数行li
  $(ul:nth-child(5n+1))列表中被5除余1的li

 通过过滤器：
  $(input:not(:checkbox))
  $(":not(img[src*="dog"])")
  $("img:not([src*="dog"])")
  $(div:has(span))
  $("tr:has(img[src$="pu.png"])")
  $(tr:animated)处于动画状态的tr
  $(input:button)包括type类型为button,reset,submit的Input
  $(input:checkbox)等同于$(input[type=checkbox])
  $(span:contains(food))包含文字food的span
  $(input:disabled)禁用
  $(input:enabled)启用
  $(input:file)等同于$(input[type=file])
  $(:header)h1到h6
  $(input:hidden)
  $(input:image)等同于$(input[type=image])
  $(:input)包括input,select,textarea,button元素
  $(tr:parent)
  $(input:password)等同于$(input[type=password])
  $(input:radio)等同于$(input[type=radio])
  $(input:reset)等同于$(input[type=reset])或$(button[type=reset])
  $(".clssname:selected")
  $(input:submit)等同于$(input[type=submit])或$(button[type=submit])
  $(input:text)等同于$(input[type=text])
  $(div:visible)

3、处理DOM元素  

 操作元素的属性：

  $("*").each(function(n){
   this.id=this.tagName+n;
  })
 

获取属性值：$("").attr("");

 设置属性值：

  $("*").attr("title",function(index,previousValue){
   returnpreviousValue+"Iamelement"+index+"andmynameis"+this.id;
  })为一个属性设置值
  $("input").attr({
   value:"",
   title:""
  });为多个属性设置值

 删除属性：

  $("p").removeAttr("value");
 让所有链接都在新窗口中打开：
  $("a[href^="http://"]").attr("target","_blank");

 避免表单多次提交：
  $("form").submit(function(){
   $(":submit",this).attr("disabled","disabled");
  })

 添加类名：$("#id").addClass("")

 删除类名：$("#id").removeClass("")

 切换类名：$("#id").toggleClass("")存在就删除类名，不存在就添加类名

 判断是否含有类名：$("p:first").hasClass("")$("p:first").is("")

 以数组形式返回类名列表：
  $.fn.getClassNames=function(){
   varname=this.attr("someclsssname");
   if(name!=null){
    returnname.split("");
   }
   else
   {
    return[];
   }
  }

 设置样式：
  $("div.someclassname").css(function(index,currentWidth){
   returncurrentWidth+20;
  });
  $("div").css({
   cursor:"pointer",
   border:"1pxsolidblack",
   padding:"12px12px20px20x",
   bacgroundColor:"White"
  });

 有关尺寸：
  $(div).width(500)
  $("div").height()
  $("div").innerHeight()
  $("div").innerWidth()
  $("div").outerHeight(true)
  $("div").outerWidth(false)

 有关定位：
  $("p").offset()相对于文档的参照位置
  $("p").position()偏移父元素的相对位置
  $("p").scrollLeft()水平滚动条的偏移值
  $("p").scrollLeft(value)
  $("p").scrollTop()
  $("p").scrollTop(value)

 有关元素内容：
  $("p").html()
  $("p").html("")
  $("p").text()
  $("p").text("")

 追加内容
  在元素末尾追加一段html：$("p").append("<b>sometext</b>");
  在元素末尾dom中现有的元素：$("p").append($(a.someclassname))
  在元素开头追加：$("p").prepend()
  在元素的前面追加：$("span").before()
  在元素的后面追加：$("span")after()
  把内容追加到末尾：appendTo(targets)
  把内容追加到开头：prependTo(targets)
  把内容追加到元素前面：insertBefore(targets)
  把内容追加到元素后面：$("<p></p>").insertAfter("pimg");

 包裹元素：
  $("a.someclassname").wrap("<divclass="hello"></div>")
  $("a.someclassname").wrap($("div:first")[0])
  $("a.someclassname").wrapAll()
  $("a.someclassname").wrapInner()
  $("a.someclassname").unWrap()

 删除元素：
  $(".classname").remove()删除元素，绑定到元素上的事件和数据也会被删除
  $(".classname").detach()删除元素，但保留事件和数据
  $(".classname").empty()不删除元素，但清空元素内容

 复制元素：
  $("img").clone().appendTo("p.someclassname")
  $("ul").clone().insertBefore("#id")

 替换元素：
  $("img[alt]").each(function(){
   $(this).replaceWith("<span>"+$(this).attr("alt")+"</span>");
  })
  $("p").replaceAll("<b></b>")

 关于表单元素的值：
  $("[name="radioGroup"]:checked").val()获取单选按钮的值，如果没有选中一个，返回undefined
  varcheckboxValues=$("[name="checkboxGroup"]:checked").map(function(){
   return$(this).val();
  }).toArray();获取多选框的值

  对于<selectid="list"multiple="multiple">使用$("#list").val()返回值的数组
  $("input").val(["one","two","three"])如果单选框或复选框与数组中的元素匹配，则选中状态