zoukankan      html  css  js  c++  java
  • 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下,滚动条会消失。

    ② 页面会滑动到最初的位置。如果用户浏览到页面中部,点击按钮,弹出遮罩层后页面却回到顶部,体验就会非常糟糕。那能不能给加上一个固定高度呢?

  • 相关阅读:
    JavaScript没有块级作用域
    JavaScript数据类型
    接口
    Linux用户与组别的操作
    解决 macOS 下 SSH 空闲一段时间后自动断开
    Excel 系列一 之 账户类长数字打开不截断与完全显示
    怎样花两年时间去面试一个人
    北京大学硕士学位论文模板
    Mysql: 图解 inner join、left join、right join、full outer join、union、union all的区别
    刷 LeetCode 时再学习 Python 中引用
  • 原文地址:https://www.cnblogs.com/dodocie/p/6924349.html
Copyright © 2011-2022 走看看