|
jQuery是一个js的框架。 什么是框架呢？框架就是封装。 以吃饭举例： 要想吃饭那么你就得买菜、洗菜、切菜、炒菜、盛菜、端菜，最后就能吃到菜，而如果你到饭馆去吃饭，那么你只需要点菜，然后就等着吃饭。那么饭馆就是一种封装，也就是框架。 同样，如果你自己用js来开发，那么等同于自己做菜；如果用jQuery来开发，那么相当于饭馆点菜； 去饭店点菜都需要菜单，菜单就是饭馆提供给我们的接口，每个饭馆的菜单都不一样，只有菜单上有的菜你才可以点。 同样，jQuery的手册就是jQuery的菜单，这里详细列出了哪些方法可以使用； 饭馆分好多种，有五星级酒店，也有小饭馆；那么js的框架也分好多种，有重量级的也有轻量级的； jQuery是js框架中的一种，其他的还有prototype等，jQuery是一个轻量级的框架，但是功能却非常犀利，所以应该是一个经济实惠且味道不错的饭馆。 为什么要用框架？ 呵呵，想想你为什么要去饭馆就可以了。因为去饭馆省事啊，只要坐那喊过来服务员，点完菜就等着上菜就行了，一个字“省事”，为啥不是一个字呢？ 同样，用jQuery可以省去很多的工作，如果用js自己开发的话可能需要巴拉巴拉敲半天，而用jQuery可能一两行代码就OK了。 jQuery提供了些什么菜单给我们呢？想想平常我们经常用js干的一些事是什么？ 一个经常的案例是鼠标点击提交按钮的时候，对表单进行一些验证，验证通过则提交；又或者是一组tab标签，鼠标放上去的时候当前的标签要高亮，代码如下；  1 <body> 2 <div id="main"> 3 <div id="like" class="rightbar"> 4 <h2>猜你喜欢</h2> 5 <ul> 6 <li>海飞丝洗头膏</li> 7 <li class="red">六神花露水</li> 8 <li>舒肤佳香皂</li> 9 <li>心相印纸巾</li>10 <li>哇哈哈矿泉水</li>11 <li>王老吉</li>12 </ul>13 </div>14 <div id="hot" class="rightbar">15 <h2>热门推荐</h2>16 <ul>17 <li>融氏橄榄油</li>18 <li>帮宝适纸尿裤</li>19 <li>有机大米</li>20 <li>妙洁垃圾袋</li>21 <li>优乐美奶茶</li>22 <li>亲亲果冻</li>23 </ul>24 </div>25 <div id="inner"></div>26 </div>27 <script type="text/javascript" language="javascript">28 var hot = document.getElementById("hot");29 var li = hot.getElementsByTagName("li");30 for(var i in li) {31 li[i].onmouseover = function() {32 this.style.color = "red";33 };34 li[i].onmouseout = function() {35 this.style.color = "black";36 };37 }38 </script>39 </body>
总结这些经常的案例会发现，这里基本上包含三个要素：一个是事件，如onmouseover，onmouseout等，一个是选择，如document.getElementById("hot");hot.getElementsByTagName("li");等；第三个是操作，如this.style.color = "red";this.style.color = "black";等。那么jQuery就是对这三个要素进行封装，提供给我们更强大的事件支持，更强大的选择器，更强大快捷的操作。 jQuery另外还提供两个强大的封装，一个是Ajax，一个是动画。 jQuery除了支持js原生态的事件外（写法不一样，原生态前面有on，jQuery没有on，如onmouseover对应的jQuery事件是mouseover），如click(),mouseover(),mouseout(),change(),focus(),scroll(),submit()等等，还支持事件绑定bind(),一次性事件绑定one(),解除绑定unbind(),事件委派live(),解除事件委派die(),事件切换hover(),toggle()等等，这里只做介绍，以后再详细分析。 jQuery的选择器非常强大，基本的如按标签名选择，如$("p")、按id号选择$("#id")、按类名选择$(".class")，这些之外还支持上下级选择$("#id p")、按序号选择$("div :first")、按属性选择$("div [name=box]")、按单属性选择$("div :hidden");$("input :checked")等等。 操作功能也非常强大，常用的有html(),val(),css(),attr(),append()等等，还有很多这里不一一列出。 还有Ajax和动画功能，非常的强大，这里具体不聊，以后单个详细分析。 简单介绍就到这里，最后贴出上面的代码用jQuery改写后的代码。 1 <script type="text/javascript" language="javascript"> 2 $("#hot li").hover( 3 function() { 4 $(this).css("color","red"); 5 }, 6 function() { 7 $(this).css("color","black"); 8 } 9 );10 </script> |
|
|
来自： 昵称10504424 > 《Jquery》
