作者:老默 http://senir.blog.163.com (转载请注明出处)
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>
作者:老默 http://senir.blog.163.com (转载请注明出处)
相关推荐
从给定的文件信息中,我们可以提炼出关于jQuery的一些核心知识点和使用技巧,这将帮助初学者和进阶用户更好地理解和应用jQuery库。 ### jQuery简介与安装 jQuery是一款流行的JavaScript库,它简化了HTML文档遍历、...
### jQuery核心知识点详解 #### 一、jQuery简介与优势 **定义**: - **框架**:框架是指一种软件设计模式,提供了一套解决方案的基础结构。简单来说,就是使用最基本的编程语言,封装了一系列常用功能(方法),...
完整Jquery笔记总结,xmind思维导图文档,可以下载查看。
### jQuery 笔记详解 #### 一、简介 jQuery 是一款快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。它极大地提高了开发者编写 JavaScript 代码的效率,并且兼容各种...
jQuery笔记(上)涵盖了jQuery的基本用法,包括引入jQuery库、选择器的使用、事件监听与处理,以及简单的动态效果实现。这些基础知识为后续深入学习jQuery提供了坚实的基础。通过学习和实践,开发者可以更加高效地...
jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ,动画,ajax 。方便了网页技术的快速发展
《锋利的jQuery笔记》是一份深入探讨jQuery库的宝贵资料,它主要针对JavaScript开发者,尤其是那些希望提升jQuery技能的人员。jQuery是一个轻量级、高性能的JavaScript库,它的核心功能在于简化HTML文档遍历、事件...
这个“jquery笔记.rar”文件很可能是对jQuery库的深入学习和实践总结。 **DOM操作** 1. **选择器**: jQuery提供了一套强大的选择器,如ID选择器(#id)、类选择器(.class)和元素选择器(element),以及组合选择...
首先,我们来看看"韩顺平AJAX和jQuery笔记整理.doc"。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,而jQuery对AJAX提供了出色的封装,使得异步数据交换变得更加简单。在这个文档中,你将了解...
《圣思园 jQuery 笔记详解》 jQuery,作为一款强大的JavaScript库,它的出现极大地简化了JavaScript的DOM操作,使得网页动态化和交互性开发变得更加便捷。本文将深入探讨jQuery的选择器、过滤选择器及其在实际应用...
《jQuery笔记详解》 jQuery,作为JavaScript的一个库,极大地简化了DOM操作,提升了开发者的工作效率。它将常用的功能进行了封装,形成了一系列API,使得开发者无需关注底层实现,只需调用相应的方法即可实现复杂...
《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...
### 韩顺平AJAX和jQuery笔记整理 #### AJAX概览 - **定义**:Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **运行原理**: - ...
JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,