对jQuery知识点总结！！！

jQuery知识总结：

jQuery的基本设计思想和主要用法，就是选择某个网页元素，然后对其进行操作。

选择器：

	所有选择器   *
	标签选择器    标签名
	ID选择器      #id
	类选择器      .className
	群组选择器    .one,.two   多个选择器使用逗号分隔，取并集
	复合选择器    .one.two   多个选择器组合使用，取交集
 
    $(document) //选择整个文档对象
 
　 　$('#myId') //选择ID为myId的网页元素
 
　 　$('div.myClass') // 选择class为myClass的div元素
 
　　 $('input[name=first]') // 选择name属性等于first的input元素

后代选择器：
		.one .two 两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
子代选择器   
		.one>.two 两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。
兄弟选择器
	下一个兄弟选择器   
		.one+.two 两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
  之后所有子代选择器  
		.one~.two 两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

过滤器：

  selector:first  获取所有已选择到的元素中的第一个元素
  $('div').first(); //选择第1个div元素
  selector:last   获取所有已选择到的元素中的最后一个元素
	$('div').last(); //选择第1个div元素

  selector:even    获取所有已选择到的元素中的索引为偶数的元素
  selector:odd     获取所有已选择到的元素中的索引为奇数的元素

  selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
	$('div').eq(5); //选择第6个div元素

  selector:lt(num)   获取所有已选择到的元素中的索引值小于num的元素
	$('div:gt(2)') // 选择所有的div元素，除了第三个之后的
  selector:gt(num)   获取所有已选择到的元素中的索引值大于num的元素
	$('div:gt(2)') // 选择所有的div元素，除了前三个
  selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
	$('div').not('.myClass'); //选择class不等于myClass的div元素

  selector:header   获取所有已选择到的元素中的标题元素(h1~h6)    
  selector:contains(text)  获取所有已选择到的元素中文本包含text的元素
  selector:empty   获取所有已选择到的元素中的空元素(没有子节点)

  selector:parent  获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent");
	$('div').parent(); //选择div元素的父元素
  selector1:has(selector2)  获取所有已选择到的元素中包含selector2的元素
	$('div').has('p'); // 选择包含p元素的div元素

	selector[attrKey]  获取所有已选择到的元素中具有属性attrKey的元素
  selector[attrKey=attrVal]  获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
  selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
  selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
  selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
  selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素
　　

删除节点：

   remove([selector])
       从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
       该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

   detach([selector])
       与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。

   empty()
       无参数。从DOM中清空集合中匹配元素的所有的子节点。

复制节点：

   replaceWith(newContent);
        用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。
        该方法会删除与节点相关联的所有数据和事件处理程序。

   replaceAll(target);
        用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。

遍历节点：

   children([selector]) children() 方法返回返回被选元素的所有直接子元素。
   $("div").children(".selected").css("color", "blue");

   find(selector) 在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素

   next([selector]) 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素
   nextAll([selector]) 查找当前元素之后所有的同辈元素

   prev([selector]) 取得匹配元素前面紧邻的兄弟元素
   prevAll([selector]) 取得当前元素之前所有的同辈元素

   parent([selector]) 取得匹配元素的集合中，每个元素的父元素
   parents([selector]) 获得集合中每个匹配元素的祖先元素

   silibinng([selector]) 取得匹配元素的前后所有的兄弟元素

   closest(selector) 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素

   filter(selector) 把当前所选择的所有元素再进行筛选过滤

事件：

   on() 在选定的元素上绑定一个或多个事件处理函数。
   off() 移除一个事件处理函数。
   trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

鼠标事件：
	 click()      单击
   dblclick()   双击
   hover()      悬停
   mousedown()  按下
   mouseup()    抬起
   mouseenter() 移入  不支持子元素
   mouseleave() 离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动
键盘事件：
	 keypress() 按键按下
   keyup()    按键抬起
   keydown()  按键按下
表单事件：
   focus()   聚焦事件
   blur()    失去焦点事件
   change()  当元素的值发生改变时激发的事件
   select()  当textarea或文本类型的input元素中的文本被选择时触发的事件
   submit()  表单提交事件，绑定在form上

方法：

	html() 无参：获取html的值
         有参数html：设置html的值

  text() 无参：获取文本值
         有参数text：设置文本值

  val()  无参：获取value的值
         有参数value：设置value的值

   1) get();  //以数组的形式返回DOM节点。
			console.log($('div').get());
        
   2) toArray();  //返回一个包含jQuery对象结合中的所有DOM元素数组。
      console.log($('div').toArray());

   3) eq(index);  //返回index位置上的jQuery对象。
      console.log($('div').eq(1).get(0));

   4) filter(function(index,item){});   //过滤器函数，返回jQuery对象。
      var $result = $('div').filter(function(index,item){
      		return index == 2;
      });
         
   5) map(function(index,item){});   //用于获取或设置元素集合中的值。
      var $result = $('div').map(function(index,item){
      		return $(item).html()
      });
    
   6) each(function(index,item){});  //遍历一个jQuery对象。
      $('div').each(function(index,item){
        console.log(index,'--',item);
      });

   7) slice(0,3);  //截取
    	var $result = $('div').slice(0,3);
      	console.log($result.get());
   		}); 

  8) not() 
  9) first()
  10) last()
  11) is()
  12) has()

属性相关:
   //获取属性值 attr(key)  prop(key)
   //删除属性  removeAttr(attributeName)  removeProp(propertyName)
   //批量设置属性  css(key)
   //添加类   addClass(className)
   //判断有没有指定的类，有，返回true，否则返回false  hasClass(className)
   //删除类   removeClass(className)

动画：

    1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()
 
    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()
 
    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()
 
    4.自定义效果
      animate()     

位置：

   //获取视口区的宽高：
    $(window).height()
    $(window).width()
 
   //获取内容区的宽高：
     $('div').width(); 
     $('div').height();
 
   pageX()属性 是鼠标指针的位置，相对于文档的左边缘。
 	 pageY()属性 是鼠标指针的位置，相对于文档的上边缘。
 
   //获取相对于文档的偏移 
		.offset()
 
   //获取相对于定位父元素的偏移
    .position()
 
   //横向滚动条左侧的偏移
    .scrollLeft()
 
   //横向滚动条上侧的偏移
    .scrollTop()
 
   //获取离它最近的父定位元素  
    .offsetParent()