1、基础

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

  获取jquery对象集中的元素：

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

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

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

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

  jquery对象集的索引：
   var n = $(\'img\').index($(\'img#id\')[0])注意：index()参数是javascript元素
   var n = $(\'img\').index(\'img#id\') 等同于上一行 找不到返回-1
   var n = $(\'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(){return this.innerHTML.match(^\\d+$)})过滤包含数字的td

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

  转换jquery对象集中的元素
   var allIds = $(\'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(p span)

  判断是否是某个jquery对象集
   var hasImg = $(\'*\').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(){
   return this.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\')
 某个元素的所有子节点：$(p a.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){
   return previousValue + \' I am element \' + index + \' and my name is \' + 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(){
   var name = this.attr(\'someclsssname\');
   if(name != null){
    return name.split(\" \");
   }
   else
   {
    return [];
   }
  }

 设置样式：
  $(\'div.someclassname\').css(function(index, currentWidth){
   return currentWidth + 20;
  });
  $(\'div\').css({
   cursor: \'pointer\',
   border: \'1px solid black\',
   padding: \'12px 12px 20px 20x\',
   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>some text</b>\');
  在元素末尾dom中现有的元素：$(\'p\').append($(a.someclassname))
  在元素开头追加：$(\"p\").prepend()
  在元素的前面追加：$(\"span\").before()
  在元素的后面追加：$(\"span\")after()
  把内容追加到末尾：appendTo(targets)
  把内容追加到开头：prependTo(targets)
  把内容追加到元素前面：insertBefore(targets)
  把内容追加到元素后面：$(\'<p></p>\').insertAfter(\'p img\');

 包裹元素：
  $(\'a.someclassname\').wrap(\"<div class=\'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
  var checkboxValues = $(\'[name=\"checkboxGroup\"]:checked\').map(function(){
   return $(this).val();
  }).toArray(); 获取多选框的值

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