框架(Framework)是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。框架是完成某种功能的半成品，框架是将我们日常的繁琐的代码进行抽取，并提供出更加简洁，功能更加强大的语法实现，我们可以对底层的API进行封装，对外提供更加简单的语法来实现最终的功能，从而提高开发效率。
jQuery框架概述jQuery是一个优秀的JavaScript的轻量级框架之一，兼容css3,和各大浏览器，提供了dom，events，animate，ajax等简易的操作。并且jQuery的插件非常丰富，大多数功能都有相应的插件解决方案jQuery的宗旨是 “write less do more”即“少写多做”。
轻量级就说明框架很小，jQuery插件，就是利用jQuery技术实现的具有特定功能的效果。
jQuery的作用jQuery最主要的作用是简化js的操作
jQuery下载位置jQuery的官方下载地址：
jQuery的版本1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小
jQuery的引入
在需要使用jQuery的html中使用js的引入方式进行引入，如下：
<script type="text/javascript" src="jquery-x.x.x.js></script>
jQuery对象与js对象之间的转换jquery本质上虽然也是 js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象的方式获得的dom，使用js方式获取的对象是js的dom对象，使用jQuery方式获取的对象是jQuery对象，两者的转换关系如下:
js 的DOM对象转成jQ对象，语法：$(js对象)
jq对象转换成js对象，语法：jq对象[索引]或jq对象.get(索引)
jQuery选择器 基本选择器
代码示例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>基本选择器</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src=""></script> 7 <style type="text/css"> 8 div,span{ 9 width: 180px; 10 height: 180px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div .mini{ 20 width: 50px; 21 height: 50px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div .mini01{ 29 width: 50px; 30 height: 50px; 31 background: #CC66FF; 32 border: #000 1px solid; 33 font-size: 12px; 34 font-family:Roman; 35 } 36 37 38 39 </style> 40 41 </head> 42 43 <body> 44 45 <input type="button" value="保存" /> 46 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"/> 47 <input type="button" value=" 改变元素名为<div>的所有元素的背景色为 红色"/> 48 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"/> 49 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"/> 50 51 52 <h1>有一种奇迹叫坚持</h1> 53 <h2>自信源于努力</h2> 54 55 <div> 56 id为one 57 </div> 58 59 <div > 60 id为two class是 mini 61 <div >class是 mini</div> 62 </div> 63 64 <div > 65 class是 one 66 <div >class是 mini</div> 67 <div >class是 mini</div> 68 </div> 69 <div > 70 class是 one 71 <div >class是 mini01</div> 72 <div >class是 mini</div> 73 </div> 74 75 <div > 76 div 动画 77 </div> 78 79 <span>class为spanone的span元素</span> 80 <span>class为mini的span元素</span> 81 82 83 <input type="text" value="zhang"> 84 85 </body> 86 87 88 <script type="text/javascript"> 89 90 // <input type="button" value="改变 id 为 one 的元素的背景色为 红色"/> 91 //js动态注册事件方式：js对象.onclick = function(){}; 92 //jq动态注册事件方式：jq对象.click(function(){}); 93 $("#b1").click(function () { 94 //改变元素的背景色为 红色 95 // js方式1：js对象.style.backgroundColor="red"; 96 // js方式2：js对象.style="background-color:red"; 97 // jq方式1：jq对象.css("backgroundColor","red"); 98 // jq方式2：jq对象.css("background-color","red"); 99 $("#one").css("background-color","red");//idea擅长web后端，写前端不是很完美，前端完美的开发工具是HBuilder 100 }); 101 // <input type="button" value=" 改变元素名为<div>的所有元素的背景色为 红色"/> 102 $("#b2").click(function () { 103 $("div").css("background-color","red"); 104 }); 105 // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"/> 106 $("#b3").click(function () { 107 $(".mini").css("background-color","red"); 108 }); 109 // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"/> 110 $("#b4").click(function () { 111 $("span,#two").css("background-color","red"); 112 }); 113 </script> 114 115 </html>