[jQuery实战]聊聊jQuery中的那些事

这几天研究了一下jQuery,来聊聊

jQuery是什么以及我们为什么要用

jQuery(即JavaScript Query)是一个JavaScript函数库
但是既然有JavaScript了,我们为什么还要用jQuery呢?原因大概有以下几个方面:

• 轻量级
  
  • 压缩包大小不到30kb
• 强大的选择器
  
  • 不仅支持CSS里所有选择器,还有自己独有的选择器
• DOM操作封装
  
  • jQuery封装了大量常用的DOM操作,使用起来很方便
• 兼容性好
  
  • jQuery能够兼容当前主流浏览器,除此之外还修复了一些浏览器之间的差异
• 开源
  
  • 作为程序员,最喜欢的事情是什么?不是收费,而是开源.jQuery就是开源的,任何人都可以自由使用,并提出自己的意见
• 可能是基于以上原因,很多大公司都在使用jQuery,比如Google,Microsoft,IBM等.所以,我们有必要来聊聊jQuery如何使用这个问题.

  jQuery如何使用

  1,隐藏与显示:

  隐藏:$(selector).hide(speed,callback);
  显示:$(selector).show(speed,callback);
  可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
  

  但是有时候,对于一个内容,可能需要切换hide()和show()方法,怎么办呢?写if判断可以,但是jQuery提供了一个更简单的方法:

  $(selector).toggle(speed,callback);
  参数speed和callback是可选参数
  只需要这样一行代码,便可实现show和hide方法的切换
  

  2,淡入淡出:

  淡入元素:$(selector).fadeIn(speed,callback);
  淡出元素:$(selector).fadeOut(speed,callback);
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是滑动完成后所执行的函数名称。
  

  隐藏与显示有一个方法toggle可以实现两者切换,同样淡入淡出也有一个方法,可以实现两者切换

  $(selector).fadeToggle(speed,callback);
  参数同样是可选
  

  3,滑动

  向下滑动元素:$(selector).slideDown(speed,callback);
  向上滑动元素:$(selector).slideUp(speed,callback);
  向下向上切换:$(selector).slideToggle(speed,callback);
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是滑动完成后所执行的函数名称。
  

  4,动画-animate方法

  $(selector).animate({params},speed,callback);
  必需的 params 参数定义形成动画的 CSS 属性。
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是动画完成后所执行的函数名称。
  其中animate几乎可以用来操作所有css属性
  

  5,取值赋值操作:

  取值:
  第一种方式:
  $('#元素 option:selected').text();     //选中的文本
  $('#元素 option:selected') .val();    //选中的值
  第二种方式:
  $("#元素").find("option:selected").text();      //选中的文本
  $("#元素").find("option:selected").val();       //选中的值
  
  赋值:
  第一种:
  $("#Type  option:["value='0']").val("0");
  第二种:
  $("#Type").val("0");
  

  6,添加元素:

  $("元素").append()      在被选元素的结尾插入内容
  $("元素").prepend()     在被选元素的开头插入内容
  $("元素").after()       在被选元素之后插入内容
  $("元素").before()      在被选元素之前插入内容
  

  7,删除元素:

  $("元素").remove()     删除被选元素（及其子元素）
  $("元素").empty()      从被选元素中删除子元素
  其中,remove() 方法也可接受一个参数，允许对被删元素进行过滤
  比如,删掉 class="a" 的所有 <p> 元素：
  $("p").remove(".a");
  

  8,遍历:

  遍历祖先:
  $("元素").parent()     //返回被选元素的直接父元素
  $("元素").parents()   //返回被选元素的所有祖先元素
  $("元素").parentsUntil()   //返回介于两个给定元素之间的所有祖先元素
  比如,返回介于 <span> 与 <div> 元素之间的所有祖先元素:
  $("span").parentsUntil("div");
  

  9,过滤:

  $("元素").first()     //返回被选元素的首个元素
  $("元素").last()      //返回被选元素的最后一个元素
  $("元素").eq()       //返回被选元素中带有指定索引号的元素
  $("元素").filter()    //匹配的元素会被返回,不匹配的元素将会从集合中删除
  比如:带有类名 "url" 的所有 <p> 元素：$("p").filter(".url");
  $("元素").not()     //返回不匹配标准的所有元素
  比如:返回不带有类名 "url" 的所有 <p> 元素：$("p").not(".url");
  

  最后来张导图

  总觉得一张图,比上面的文字来的更加直接准确一些,所以最后上一张我梳理的导图(个人观点,如有偏颇之处,还望指出):
  
  想说的大概就这么多了,感谢您的阅读~