前言：“Write less do more”作为JQuery的宗旨，在运用的时候，得到了充分的体现，不得不说JQuery的很多设计都是从用户角度出发，充分体现了这个宗旨，下面和大家分析一下JQuery中的一些内容。

（一）概述

1.JQuery与CSS、Javascript

①HTML负责页面内容，CSS负责页面样式，Javascript负责页面行为
②HTML中应该有DOCTYPE来告知浏览器的渲染显示方式
③发送给服务器端的数据在javascript中做两次encodeURI，
然后在服务器端的代码中按UTF-8的方式做一.次URLDecode，可以解决中文乱码问题。

2.内容

div或span节点//以后显示服务器返回数据
border属性//控制页面元素的边框
background-***//控制背景图，以及背景图的位置，重复显示的方式
#idname或. classname//制定的html节点定义样式

.$(document).ready(function()})//定义页面装载完成时，需要执行的方法。
$()//获得页面的指定节点，参数是某种css的选择器
可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据，定义事件，执行操作

val()方法//获得节点的value属性值
html()方法//设定某个节点中的htmI内容
click()方法//响应鼠标点击事件
.keyup()方法//响应键盘弹起的事件。
$.get()方法//和服务器端进行get方式的交互，注册的callback方法会再数据回来的时候被调用，这个方法会接收到代表服务器端返回数据的- -个纯文本的参数
addClass() removeClass()方法//给某个节点添加或删除一个class

(二)和表格相关的内容

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键

(三)和菜单相关的内容

1.页面中的菜单项可以通过嵌套的u和来表示
2.菜单最外层为ul，一层每个主菜单放在一一个li中， 如果有子菜单，在这个主菜单的Ii中建立新的ul，再依次嵌套即可构建多层的菜单。
3.浏览器中u|和i元素默认情况下文字前都有圆点标识符，li元素 会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。
4.list-style属性值为none时，可以清除u|和前面的小圆点
5.清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只 有margin也为0的时候才可以清除缩进值
6.可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向.上重复显示，知道填满整个区域
7.可以使用bakcground-repeat来控制背景图的重复填充方式。
8.如果一 个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的
9.text-decoration属性值为none时，可以取消文字上的下划线
10.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center, :lef,top这些值来控制横向和纵向的位置。这个属性的两个值，第一一个对应横向，第二个对应纵向
1 1.background-image的值为none表示没有背景图
12.background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示。
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'这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的16show,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.-组标签用-一个u|来管理，每一个标签是ul中的一个i;标签下面的内容就是用div来管理
2跟在浮动元素(float) 之后的元素会围绕着浮动元素，如果不希望有这种围绕，可以在浮动元素之后的那个元素上定义clear属性,来清除这种效果。
3.实现当前标签和内容区域的融合，  可以通过使用相同的背景色，外加当前标签使用同颜色的边框来实现
4.JQuery中的mouseover, mouseout 方法対立示准javascript的onmouseover,
onmouseout事件，可以処理鼠棕迸入和高幵的事件。

5.在一-个包含了多个元素的JQuery対象上拠行each方法，可以注册給each方法的那个function的内容被毎- - 个元素拠行。同吋込个function胚可以接收到一个参数，表示込个元素的索引値。JQuery中的很多 方法也用到了each
6.eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一一个元素，并仍然返回元素对应的新JQuery对象。
7.选择器中使用eq，例如$(“div:eq(1)")
8 addClass和removeClass方法用于添加和移除元素的class定义。
9.Javascript中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作。
10.做-一个AJAX应用的时候，可以考虑现在FireFox_上调试通过，然后再到其他浏览器中进行检查，并修正可能的兼容性问题。
11.cursor属性可以控制元素上的鼠标样式，pointer的属性值表示手型样式，也就是我们常见的链接鼠标样式
12.position属性可以控制元素定位的方式，值为relative时表示相对原来的位置进行定位。可以通过设定top，left, bottom, right的 值来控制元素相对原来的位置进行移动
13.z-index可以控制元素在页面中的层高，值越大就会在页面的层越靠前，也就会覆盖住一.些z-index值较低的元素。只有position的值为relative或absolute的元素，z-index才 会生效。
14.JQuery中的load方法十分强大，可以把个指定的静态，动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中。

1 5.load方法还支持部分装载，在装入的页面地址后面加空格，然后使用选择器，就可以把页面中符合选择器的部分装入进来。。

16.被load的页面一定要是UTF-8编码的，否则装入后中文会出现乱码。

17.bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件，可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

(五)和下拉框相关的内容

1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来
2.select表示下拉框，下 拉框的每-项都是一个option, option开 始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中
3.div元 素居中显示的方法:给div设定宽度，然后margin-left和margin-right的值都为autoO简写方法是margin: 0 auto;
4.html的p标签 表示--个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示
5.为了让p中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值,需要的话可以通过css清除
6.visibility的属性值为hidden时，元素隐藏，但是和display为none不同的时，在页面中任然占据一定空间，只是不显示
7.多个选择器如果有相同的属性值，一-起定义，选择器之间用逗号分割
8.change方法对应标准Javascript中的onchange事件，可以处理下拉框内容变化的事件
9.parent方法可以获得一个节点的父节点
10.next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一一个节点的上一个兄弟节点
11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同
12.Javascript中的简单对象定义方式是{key1:value1, key2: value2}
13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1: value1, key2: [1 ,2,3]}或[1 ,2,{key2:value2}]
14.可以直接$(“<option> </option>”)的方法来建立下拉框中的选项，然后用appgndTo这样的方法加入到下拉框中
1 5.attr方法可以设置或获取某一个节点的属性值
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete 在每一个JQuery发出的ajax请求结束后执行
17.fadeOut和fadeln可以实现淡出淡入的效果:,  参数内容和slideUp，slideDowni 法类似。
1 8.animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果
19.opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。
20.data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷
21.可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一-些图片装载的提示信息,。
22.load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件

(六)与windows相关的内容

1.页面中模拟的窗口可以通过htmI的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示
2.让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口设置一-定的padding值(或者是内容区域设置边框)，已达到内容区域和标题栏以后窗口外边的对比，从而看起来是一个窗口的效果。
3.正确理解float的效果，实际上会影响到后面的- -个元素和float的元素之间的显示效果，区此这个例子中如果html代码中img位于标题栏的最后时，float: right导致图片跑到了内容区域的最右边。只有在html里面将img放到标题栏文字的前面，这个时候float: right才会使图片刚好位于标题栏的最右边
4.overflow属性值为auto时，当内容区域很多超过了定义的高度或宽度时，就会显示滚动条。
5.position属性值为absolute时，元素将在页面中绝对定位，默认情况是相对页面的左上角进行定位。如果祖先节点中有position:relative的定义，则相对这个祖先节点的左上角进行定位
6.浏览器可视区域的宽和高可以通过$(window).width()和$(window).height()的方式来获得
7浏览器滚动条的左边界和上边界可以通过$(window) .scrollLeft()和$(window) .scrolITop()来获得
8.窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除2,再加上滚动条的左边界值，才能获得窗口需要的左边界值;上边界值也是同理的方法获得。
9.插件的编写方法: $.fn.myplugin =function(){//mycode},方法中的this表示的是执行这个方法的jquery对象，注意方法应该在最后return this,以保证其他jquery方法可以级联操作。
10. instanceof可以用于判断一一个变量是不是一个某个js类的实例，比如判断是不是一个Object,用法obj instanceof Object
11.typeof可以用于判断-个变量的数据类型比如typeof str ==“string"
12.height()和width()方法获得是元素本身的高和宽，innerHeight() 和innerWidth()获得是包括了padding的高和宽，outerHeight()和outerWidth()获得是包括了border和padding的高和宽，outerHeight(true)和outerWidth(true) 获得是包括maring, border 和padding的高和宽
13.scroll可以用于注册浏览器或某一个节点的滚动条滚动所需要执行的操作。
14.resize可以用于注册浏览器大小改变时所需要执行的操作。
15.jquery提供的事件操作在注册的时候是增量的，比如说我有两段代码都是$(window).scroll(function(){})，第二段的
function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行
16.animate方法可以对left, top值进行一定时间内的变化，达到动画的效果。
17 dequeue方法可以从动画队列的开头移除一一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行
1 8.is方法可以用来判断一个对象是否满足is方法参数中的jquery选择器
1 9. :visible选择器可以用于获取页面中的可见元素
20.浏览器间的差异导致在document.ready中中的代码获得浏览器可视区域宽高以及滚动条left，top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值21.$.browser可以用于判断浏览器的类型，判断的方法可以是$ browser.msie == true，还:可以使用的值包括$. browser opera$.browser safari $ browser .mozilla; 22.$.browser.version可以判断浏览器的版本号，例如$.browser.version .indexOf("8")

总结：学习是一遍重复和升华的，从开始知道JQuery，到跟着视频敲JQuery的代码逐渐感受到了JQuery的方便，不过真正的运用还是有差距的，以后的学习中，不断的学习吧。