jQuery 小结

查看文章

Jquery 实战小结

2010-09-18 18:42

1.JQuery的特点：
1)Write less, Do more
2)jQueryis designed to change the way that you write JavaScript.
3)支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本。
4)以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。
5)屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。
6)强大的插件机制。
7)社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。

2.Jquery设计知识小结

一：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中做两次encodeURI，然后在服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文乱码问题。

二：JQuery可以编辑的表格
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键

三：JQuery横向纵向菜单
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.可以使用bakcground-repeat来控制背景图的重复填充方式。
8.如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的
9.text-decoration属性值为none时，可以取消文字上的下划线
10.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向
11.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’这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。
17.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同。
18.slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同。
19.slideToggle和toggle达到的效果类似
20.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果。
21.float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。
22.可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入过个选择器。

四：JQuery标签页效果
1.一组标签用一个ul来管理，每一个标签是ul中的一个li；标签下面的内容就是用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对象包装着的元素中。
15.load方法还支持部分装载，在装入的页面地址后面加空格，然后使用选择器，就可以把页面中符合选择器的部分装入进来。
16.被load的页面一定要是UTF-8编码的，否则装入后中文会出现乱码。
17.bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件，可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。
18.ajaxStart，ajaxStop对应ajax交互开始前和结束后的事件，给某一个节点注册了这两个事件后，当前页面的ajax交互开始前和结束后，就会执行指定的方法。

五：JQuery级联下拉框效果
1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来
2.select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中
3.div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto。简写方法是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>”)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中
15.attr方法可以设置或获取某一个节点的属性值
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete在每一个JQuery发出的ajax请求结束后执行
17.fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp，slideDown方法类似。
18.animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果
19.opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。
20.data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷
21.可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息。
22.load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件

六.JQuery窗口效果
1.页面中模拟的窗口可以通过html的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).scrollTop()来获得
8.窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除2，再加上滚动条的左边界值，才能获得窗口需要的左边界值；上边界值也是同理的方法获得。
9.插件的编写方法：$.fn.myplugin= function(){//mycode},方法中的this表示的是执行这个方法的jquery对象，注意方法应该在最后return this,以保证其他jquery方法可以级联操作。
10. instanceof可以用于判断一个变量是不是一个某个js类的实例，比如判断是不是一个Object，用法objinstanceofObject
11. typeof可以用于判断一个变量的数据类型，比如typeofstr== “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方法可以从动画队列的开头移除一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行。
18.is方法可以用来判断一个对象是否满足is方法参数中的jquery选择器
19. :visible选择器可以用于获取页面中的可见元素
20.浏览器间的差异导致在document.ready中中的代码获得浏览器可视区域宽高以及滚动条left，top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值。
21.$.browser可以用于判断浏览器的类型，判断的方法可以是$.browser.msie== true，还可以使用的值包括$.browser.opera$.browser.safari$.browser.mozilla
22.$.browser.version可以判断浏览器的版本号，例如$.browser.version.indexOf(“8”)