jquery易混知识点总结

一、DOM与jquery对象的转换
1.DOM对象转换为jquery对象
 $(DOM对象)
2.jquery对象转换为DOM对象
 jquery对象是数组对象-角标【0】
 jquery对象提供一个get(index)方法 .get(0)

3.注意：DOM对象与jquery对象之间不能相互调用

二、选择器

1.计数问题

：nth-child(n)  -n从1开始

：eq(n)         - n从0开始

: even/ :odd 从0开始计数

三、文档jquery

1.$("selector").remove()  $("selector).empty()

$("selector).remove() - 删除自身节点和对应的子节点

$("selector).empty() - 删除对应的子节点，保留自身节点

2.内部插入和外部插入

      内部插入和外部插入
     内部插入仅仅是在这个节点也就是标签里的插入
     外部插入是在这个节点也就是标签外的插入

1）内部插入

  /*1. append()
         append后面的节点被添加到append前面的节点的后面
  */
 // $("#tj").append($("#ms"));
  /*2. prepend()
         prepend后面的节点被添加到append前面的节点的前面
  */
  //$("#tj").prepend($("#ms"));
   /*3. appendTo()
          appendTo前面的节点被添加到 appendTo后面的节点的后面
  */
  //$("#tj").appendTo($("#ms"));
   /*4. prependTo()
          prependTo前面的节点被添加到 appendTo后面的节点的后面
  */
$("#tj").prependTo("#ms");
  </script>

2）外部插入

/*1. before()
   brfore后面的节点被添加到before前面的节点的前面
*/
$("#tj").before($("#ms"));
/*2.after()
   after后面的节点被添加到after前面的节点的后面
*/
$("#tj").after($("#ms"));

 /*3.insertBefore()
    与before()相反
*/
$("#tj").insertBefore($("#ms"));
 /*4.inserAfter()
   与after()相反
*/
$("#tj").insertAfter($("#ms"));

*/

四、效果

   1.自定义动画：

1）animate(params,duration,easing.callback)
params - 设置动画执行的样式（CSS的属性）
写法 - {attrName:attrValue,}
duraion - 设置动画执行的时长（毫秒）
三个预定义值 - slow|fast|normal
easing - 需使用的擦出效果的名称（不使用）
callback - 当动画执行完毕后的函数


    写法： $(...).animate({//目标样式
         css属性:值,
                           ... : ... ,
                }, speed, easing, callback)
         //所有属性，从当前状态，同时均匀变化到指定的目标样式
  


       2）animate(params,option)
  params - 设置自定义动画的样式（css属性）


  options - 选项
duration - 设置自定义动画的时长
queue - Boolean值。如果为false,该动画不会被加入到动画队列中

    2.切换动画

toggle()   ---hide()+show()

slidetiggle（）  ----slideDown()  +slideUp()

    3.停止动画

$(...).stop();
       问题: 默认只能停止正在执行的一个动画
                如果后续有排队的动画，依然会继续触发
       解决: $(...).stop(true); //1. 停止当前动画，2. 清除队列

五、jquery遍历

1.$().each(callback)方法  --隐式迭代
   callback - 回调函数 
            function(index,domEle)
            index - 当前遍历数组或对象的索引值
            domEle - 遍历数组或对象的每个元素（DOM对象）

2.$.each(obj,callback)
      obj - 需要遍历的数组或对象
      callback  - 回调函数
         function(index,domEle)
            index:当前遍历数组或对象的索引值
            domEle - 遍历数组或对象的每个元素