背景：学习完JQuery视频已经有一段时间了，由于最近的事情比较多，没有时间去系统的总结一下，总感觉刚学习的时候内容很多，过了一段时间后忘记了一多半，现在在脑海留下了很少的一部分内容，重新回头看看结合在网上的搜索，于是乎，这篇文章就诞生了。
一、概述
JQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
JQuery是一个轻量级的兼容多浏览器的javascript库，JQuery2.0及后续版本将不再支持IE6/7/8浏览器。核心理念是：write less,do more(写得更少,做得更多)。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
二、特点
1、Write less,Do more.
2、以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。
3、屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。
4、JQuery is designed to change the way that you write JavaScript。
5、强大的插件机制。
6、社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。
三、学到的JQuery及其它开发知识
概述中涉及到的知识点：
1、HTML负责页面内容，CSS负责页面样式，JavaScript负责页面行为。
2、HTML中应该有DOCTYPE来告知浏览器的渲染显示方式。
3、可以先定义div或span节点用于以后显示服务器返回数据。
4、border属性可以控制页面元素的边框。
5、background-**可以控制背景图，以及背景图的位置，重复显示的方式。
6、可以通过#idname或.classname的方式来个制定的html节点定义样式。
7、可以通过$(document).ready(function(){})的方式来定义页面装载完成时，需要执行的方法。
8、可以通过$()方法来获得页面的制定节点，参数是某种css的选择器。
9、可以在$()方法返回的jquery对象上执行各种JQuery的方法来获取数据，定义事件，执行操作。
10、val()方法可以获得节点的value属性值。
11、html()方法可以设定某个节点中的html内容。
12、click()方法可以响应鼠标点击事件。
13、keyup()方法可以响应键盘弹起的事件。
14、$.get()方法可以和服务器端进行get方式的交互，注册的callback方法会在数据回来的时候被调用，这个方法会接收到代表服务器端返回数据的一个纯文本的参数。
15、addClass() removeClass()方法给某个节点添加或删除一个class。
16、发送给服务器的数据在JavaScript中做两次encodeURL，然后在服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文乱码问题。
例子1：可编辑的表格
EditTable.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实例2：可以编辑的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/editTable.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</body>
</html>
EditTable.js
//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//简化的ready写法
$(function(){
//找到表格的内容区域中所有的奇数行
//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
$("tbody tr:even").css("background-color","#ECE9D8");
//我们需要找到所有的学号单元格
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件
numTd.click(function() {
//找到当前鼠标点击的td,this对应的就是响应了click的那个td
var tdObj = $(this);
if (tdObj.children("input").length > 0) {
//当前td中input，不执行click处理
return false;
}
var text = tdObj.html();
//清空td中的内容
tdObj.html("");
//创建一个文本框
//去掉文本框的边框
//设置文本框中的文字字体大小是16px
//使文本框的宽度和td的宽度相同
//设置文本框的背景色
//需要将当前td中的内容放到文本框中
//将文本框插入到td中
var inputObj = $("<input type='text'>").css("border-width","0")
.css("font-size","16px").width(tdObj.width())
.css("background-color",tdObj.css("background-color"))
.val(text).appendTo(tdObj);
//是文本框插入之后就被选中
inputObj.trigger("focus").trigger("select");
inputObj.click(function() {
return false;
});
//处理文本框上回车和esc按键的操作
inputObj.keyup(function(event){
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车的情况
if (keycode == 13) {
//获取当当前文本框中的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
}
//处理esc的情况
if (keycode == 27) {
//将td中的内容还原成text
tdObj.html(text);
}
});
});
});
EditTable.css
table {
border: 1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse: collapse;
width: 400px;
}
table td {
border: 1px solid black;
width: 50%;
}
table th {
border: 1px solid black;
width: 50%;
}
tbody th {
background-color: #A3BAE9;
}
例子1中涉及到的知识点：
1、table中可以包含thead和tbody。
2、表头的内容可以放在th中。
3、table{}这种写法称作标签选择器，可以对整个页面所有table产生影响。
4、table td{}这种写法表示的是table中包含的所有td。
5、可以通过border-collapse：collapse这种方式来使表格中德单元格的边框合并。
6、当th上有背景色时，这个th属于的tr上定义的背景色会无效。
7、$(function(){})是$(document).ready(function(){})的简化写法。
8、$("tbody tr")可以返回tbody中所有tr节点。
9、$("tbody tr:even")可以返回tbody中所有索引值是偶数的tr节点。
10、css方法可以用于设定或获取节点的css属性，参数名是css的属性名。
11、JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存。
12、get方法可以获得JQuery对象中包含的某一个DOM节点。
13、function中的this代表执行这个function的对象。
14、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象。
15、children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。
16、如果选择器返回的JQuery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时，所有DOM节点都会用于事件。
17、html方法可以设置或获取节点的HTML内容。
18、val方法可以获取或设置节点value值。
19、$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象。
20、JQuery大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写给予JQuery的代码。
21、width方法可以设置或获取某个节点的宽度。
22、appendTo方法可以将一个节点追加到另一个节点所有子节点的后面。
23、阻止事件传递可以让当前节点的事件返回false。
24、trigger方法可以触发某个JavaScript的事件发生。
25、JQuery中某个事件方法的参数function上可以定义一个event的参数，JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象。
26、JQuery的event对象上有一个which的属性可以获取键盘按键的键值。
27、13表示回车键，27表示ESC键。
例子2：横向纵向菜单
menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实战-菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li>
<a href="#">子菜单项11</a>
</li>
<li>
<a href="#">子菜单项12</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li>
<a href="#">子菜单项21</a>
</li>
<li>
<a href="#">子菜单项22</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li>
<a href="#">子菜单项31</a>
</li>
<li>
<a href="#">子菜单项32</a>
</li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li>
<a href="#">子菜单项11</a>
</li>
<li>
<a href="#">子菜单项12</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li>
<a href="#">子菜单项21</a>
</li>
<li>
<a href="#">子菜单项22</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li>
<a href="#">子菜单项31</a>
</li>
<li>
<a href="#">子菜单项32</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
menu.js
$(document).ready(function(){
//页面中的DOM已经装载完成时，执行的代码
$(".main > a").click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
/*
if (ulNode.css("display") == "none") {
ulNode.css("display","block");
} else {
ulNode.css("display","none");
}
*/
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle();
//
//ulNode.slideDown("slow");
//ulNode.slideUp;
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
menu.css
ul, li {
/*清除ul和li上默认的小圆点*/
list-style: none;
}
ul {
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
}
.main, .hmain {
background-image: url(../images/title.gif);
background-repeat: repeat-x;
width: 120px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
display: block;
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a, .hmain a {
color: white;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a, .hmain li a {
color: black;
background-image: none;
}
.main ul, .hmain ul {
display: none;
}
.hmain {
float: left;
margin-right: 1px;
}
效果：
例子2中涉及到的知识点：
1、页面中的菜单项可以通过嵌套的ul和li来表示
2、菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。
3、 浏览器中ul和li两个原色默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。
4、list-style属性值为none时，可以消除ul和li前面的小圆点。
5、消除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值。
6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域。
7、可以使用background-repeat来控制背景图的重复填充方式。
8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的。
9、text-decoration的属性值为none时，可以取消文字上的下划线。
10、background-position可以控制背景图的位置，属性值可以用数组，也可以用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向。
11、background-image的值为none表示没有背景图。
12、background-repeat的值为no-reapeat时，背景图不会在所在的区域中重复显示。
13、IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域，对于IE6，则需要设定display为inline-block，同时设定a的宽度。
14、display的值为none可以用于隐藏元素。
15、.main a 和 .main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中a节点。
16、show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是‘slow’，‘normal’，‘fast’这三个文字，都可以控制完成显示或隐藏需要的事件。注意这个动画效果靠不断改变元素的宽度和高度来实现的。
17、toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同。
18、slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果，需要注意的是这两个方法参数为空的情况和show，hide不同。
19、slide Toggle和toggle达到的效果类似。
20、DOCTYPE对于JQuery中德动画是有影响的，没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果。
21、float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。
22、可以给多个选择器定义同样的样式，选择器之间用“，”分割，同样对于JQuery的$方法，也可以传入这个选择器。
四、学习心得
1、例子比较简单，但是涉及到的知识点比较多。麻雀虽小，五脏俱全。
2、基础的东西必须扎牢固，不然的话很难前进。基础不牢，地动山摇。
3、这些东西比较碎，自己下来整理整理，那些常用，那些不常用，条理清晰，找到联系，才能学习到更多。
4、没有你做不到，只有你想不到，发动自己聪明的小脑瓜，想你不敢想的事，做你不敢做的事。
扫一扫
1857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
