JQuery学习笔记

jQuery1.x.x：兼容IE6,7,8

jQuery2.x.x：不兼容6,7,8，从一袋中剔除了所有兼容代码

jQuery3.x.x：全面支持HTML5和CSS3；

 

基础

$()函数的执行结果会返回一个jq对象，jq对象只能调用jq框架出现的方法，和js出现的方法不能共用；

1. size()和length：都能获取选取的页面元素个数；

   $('#div').size();
   $('#div').length;

    

2. $灵活的用法；
   • 
3. 在jq中$()和jQuery()这两种申明是等价的，有时使用jQuery()时为了防止以其他插冲突；
4. $()函数赤星的结果返回的是一个集合对象，和js中的‘对象’不是一样的，因此js和jq里的方法不能通用，jq可以通过对象[n]h和对象.get(n)方式使用js中的方法；

   var p = $("p")[0];
   var p = $("p").get(0);

    

事件监听

1.  基本写法；
   1. $("选择器").click(funtion(){})，因为是集合对象，所以不用for循环添加；
2. 事件名；
   1. 一律没有on；
3. 事件监听的特点；
   1. 允许jq连续调用方法；
   2. 绑定多少，执行多少，按照绑定的顺序执行，不会覆盖；
4. 其他添加事件的监听方法；
   1. 通过on()方法来为jq对象添加事件监听，通过off()方法取消事件监听；
   2. 通过bind()方法为jq对象添加多个事件监听，用空格隔开，还可以采用JSON形式添加事件监听；

      $('#d3').bind(
      	{
      		mouseenter:function(){
      		num++;
      		$('#d1').html(num);
      		}
      	}
      );
      
      $('#d3').bind('mouseenter mouseleave',function(){
      	num++;
      	$('#d1').html(num);
      });
      
      
      

   3. 通过one()方法增加监听，此方法是一次性的；

常见方法

1. css()，可读可写，里面css的属性不需要改写；
   1. 赋值可以累加（+=50px）

      $('div').css('width','500px');//相当于js中style属性
      $('div').css('width');//读取属性的值

2. show()和hide()
   1. 语法：jq对象.show(animationTime)；
3. sildeDown()和slideUp()
   1. 语法：jq对象.slideUp()；
   2. 原理：如果一个元素是display:none的，先把height设置为0，然后瞬间变为display:block，然后进行定时动画，慢慢变为用户设置的height值；
   3. 两个方法存在隐形的属性，叫“边界”，通过定位属性，bottom和top设置，可以设置其运动方向；
4. fadeIn()和fadeOut()
5. addClass()和removeClass()；
   1. 只是添加和删除
6. attr()
   1. 如果要覆盖，使用jq对象.attr("a","b")修改class属性；
7. html()

animate()方法

1. 最简单的形态；
   1. 语法：jq对象.animate(动画结束状态JSON,动画的时间ms,动画线性运动,回调函数)；
   2. 能改变的都是有数值的，颜色这种不能渐变动画修改；
   3. 多个animate，按照添加顺序改变；
   4. 回调函数在动画完成后自动调用；
2. stop方法
   1. 两个参数，默认false；第一个false不清空所有动画，只清除当前的；第二个false表示不去终点，停留在当前的位置；
3. 防止动画积累
   1. 立即结束当前动画，执行新动画；

      $().stop(true).animate()

       

   2. 如果当前执行动画，不接受新命令；

      if($('div').is(':animated')){
          return true;
      }
      新的动画命令

       

节点关系

1. children()：所有的直接子元素，可以传入选择器参数；
2. find()：在某个节点中查找符合选择器要求的后代节点；
3. parent()：父元素
4. parents()：当前节点的所有父元素；直到html，可传入参数；
5. siblings()：当前节点所有兄弟节点（除本身之外）；
6. next()：后一个亲兄弟；
7. prev() ：前一个亲兄弟；
8. nextAll()：后所有亲兄弟；
9. prevAll()：前所有亲兄弟；

节点顺序和遍历

1. index()；
   1. 语法：jq选择器.index()；
   2. 经常和eq()函数一起用
2. each()；
   1. 语法：jq选择器.each(function(index,ele))；
   2. 遍历每个节点，然后执行里面的回调函数；

节点操作

1. append()，appendTo()，prepend()，prependTo()：在节点内部添加内容
2. after()，before()，insertAfter(),insertBefore()；
3. empty ()，remove()：删除节点；