JQuery的一些注意事项（1）- 关于网页效果
1. toggle(speed, callback)函数适用于jQuery框架隐藏的页面元素或在CSS中声明为“display:none”的页面元素，但是它不适用于在CSS声明为“visibility:hidden”的页面元素。
因为 visibility:hidden 对象隐藏后，还占据相应的空间大小。而JQuery的hide及show是在通过操作display属性来实现，toggle()函数用于切换hide()和show()函数。
2. 除非规定了callback函数，否则，当使用fadeIn()函数实现页面元素“淡入”效果时，如果该元素已显示，则该效果不产生任何变化；当使用fadeOut()淡出函数时，如果该元素已隐藏，则无效。同样，fadeIn()不适用于 visibility:hidden 的元素。
3. 除非规定了callback函数，slideToggle()函数对元素效果是可见的不产生效果。
4. animate动画函数需要修改html元素的位置属性。如果要对位置进行操作，要在页面css样式中把元素的position设置为 relative、fixed或者absolute。
5. $(selector).live(event,data,function)，bind(), delegate()区别：
live方法，只有在click事件发生的时候，才会去检测绑定事件的对象target是否存在，所以live方法可以实现后来新增子元素（如由脚本创建的新元素）的事件的绑定。
bind会在事件在绑定阶段bind时就会判断绑定事件的对象target是否存在，而且只针对当前元素进行绑定，而不是绑定到父节点上。
<script type="text/javascript"> $(function () { $("#btn1").bind("click", function () { alert("bind"); }); $("#btn2").bind("click", function () { alert("bind"); }); $("#btn1").live("click", function () { alert("live"); }); $("#btn2").live("click", function () { alert("live"); }) $("body").append("<span id=\"btn2\">按钮2</span>") }); </script> <body> <span id="btn1">按钮1</span> </body>
按钮1会触发bind和live的绑定事件。
按钮2会触发live的绑定事件。不会触发bind的事件，因为绑定click事件的时候按钮2还没有生成。
6. 关于坐标的偏移量。
screenX, screenY是相对于用户屏幕的水平和垂直偏移量。
clientX，clientY 是相对于用户窗口客户区的偏移量
pageX，pageY 是相对于用户页面区域的偏移量。
$(document).ready(function () { $(document).mousemove(function (e) { getPageCoordinates(e); }); function getPageCoordinates(e) { x = e.pageX; y = e.pageY; $('span').text(x, y); } })
7. 字数限制插件：charCount.js。
引入charCount.js文件，jQuery代码如下：
$(document).ready(function () { $("#textarea-default").charCount(); // 默认风格 $("#textarea-custom").charCount({ //自定义风格 allowed:150, warning:120, counterText:'剩余字数:' }); })
以上可以对比两种微博和推特风格的字数限制。
8. 禁止页面滚动。css本身有一个很简单粗暴的方法来禁止页面滚动：
html,body{ overflow-y: hidden; padding-right: 17px; /*height: 100%; 如果chrome不支持的话*/ }
这个办法的缺点是：
① 在chrome和FF下，滚动条会消失。
② 页面会滑动到最初的位置。如果用户浏览到页面中部，点击按钮，弹出遮罩层后页面却回到顶部，体验就会非常糟糕。那能不能给加上一个固定高度呢？
