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