小编L84*_*L84的帖子

最近我使用AJAX提交表单.

在研究最好的方法时,我看到了一些AJAX提交使用.serialize()和其他使用FormData.例如.

一份意见书做了这个:

data: form.serialize()

而另一个做了:

var formData = new FormData($('form')[0]);
data: formData

那么FormData和之间的区别是什么.serialize()？

我正在读取数据属性字段中的一些值.我已经看到了两种简单的方法来读取数据,如下所示:

var webappData = document.getElementById('web-app-data'),
    rating = webappData.dataset.rating;

要么

var effectData = $('.effects-list li'),
    creative = effectData.filter('[data-creative]').data("creative");

我的问题是哪些具有更好的性能还是它们真的不同？

我有一个页面,我正在访问许多数据属性,我想使用具有最佳性能的方法.

任何有关理解两者之间差异的指导将不胜感激.虽然我正在考虑性能,如果有其他原因使用一个而不是另一个,我也想知道这一点.

通常,以多种尺寸提供favicon.ico被认为是一种很好的做法,因为这种方式在制作快捷方式或固定网站时看起来更好(IE9).虽然这样做会减少10倍,但这会导致网站加载速度变慢(在我的情况下,16x16的图标是1kb,16,32,64 = 30kb).

Facebook和雅虎等网站默认提供16x16的图标,大小不超过1kb,但是当您固定这些网站时,使用的图像大小合适.我假设只有在需要时才会加载更大的图片,从而解决了两难问题.我没有成功地弄清楚这些网站是如何做到这一点的.有人知道吗？

我有一个倒计时时钟,设定为2014年1月1日上午8点倒计时.

我使用以下代码来设置日期:

var futureDate = new Date(2014, 0, 1, 8, 0, 0, 0);

这有效,但我想更进一步,并将其设置为特定的时区.在我的情况下UTC -7.

我已经阅读了这个使用说明的答案:

new Date(Date.UTC(year, month, day, hour, minute, second))

但我感到困惑的是我如何将时区设置为UTC -7,而我在线阅读的内容只会让我更加困惑.

有人可以解释如何Date.UTC工作以及如何设置时区,以便我的倒计时时钟根据指定的时区倒计时？

注意:任何答案必须是仅客户端代码.

我试图让文本"摆动",通过一种方式应用旋转过渡,然后在悬停时通过下一种方式旋转.但是,它不会等待第一次转换完成,因此看起来只应用了最后一次转换.如何强制它等待第一次转换完成？JSfiddle:http://jsfiddle.net/hari_shanx/VRTAf/7/

HTML:

<div id="chandelier">
    <nav>
        <ul id="chandelier-list">
            <li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a>

            </li>
            <li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a>

            </li>
            <li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a>

            </li>
            <li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a>

            </li>
            <li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a>

            </li>
        </ul>
    </nav>
</div>

CSS:

.swing {
    position: absolute;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    writing-mode: lr-tb;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    font-size: 18px;
    -webkit-transition: all …

我正在使用RGBA创建一个覆盖在图像顶部的透明背景.工作得很好.我的问题是:有没有办法将盒子的边缘"软化"到更多地流入图片而不是硬边缘的位置.

这是我的框的CSS:

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,34,34,0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    /* For IE 8*/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index:10;
    padding:10px;
}

我知道我可以通过在Photoshop中创建背景图像来实现这一点,但我一直在寻找一种仅使用CSS的方式与使用图像.

此外,我希望尽可能在所有浏览器中都可以使用它.

谢谢您的帮助.=>

好像最近我看到更多的人开始在他们的样式表中使用media="all"vs.media="screen"

我的问题是,当我应该使用media="all"过media="screen",反之亦然？

注意:如果有所不同,我使用的是HTML5 Doctype.

我有两个这样的div

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

我正在动态更新子内容并使用jQuery滚动它.我希望能够找到孩子有多宽,所以我知道何时停止滚动.问题是,一旦溢出的内容存在,孩子的实际宽度甚至比屏幕宽(使用当前测试内容似乎大约2500像素).元素的边界(如果其集合)不会扩展到内容的实际宽度,文本溢出可见边框.

使用jQuerys $('#child').width的clientWidth,scrollWidth(感谢bobince)和offsetWidth性能都最大程度的发挥在1,024像素(这是我的显示器的宽度).有没有人知道如何找出包含溢出的元素内容有多宽？如果它有帮助,我正在构建的应用程序将在kiosk类型的环境中运行,因此只有Firefox(甚至是夜间版本)解决方案也没问题.

更新:scrollWidth关于父作品,我应该仔细阅读,再次感谢bobince.

我目前正在升级我的应用程序以使用jQuery 1.6.1(以前使用1.4.4),并发现现在该.click()事件.change()也会自动触发事件.

我在这里创建了一个简单的例子:http://jsfiddle.net/wDKPN/

请注意,如果包含1.4.4,.change()则在触发事件时不会触发该函数.click().但切换到1.6时,该.change()事件是发射时.click()被触发.

两个问题:

1. 这是一个错误吗？ 似乎以编程方式触发.click() 也不应该触发其他事件(例如,自动触发.blur()并.focus()帮助"模仿"用户的点击似乎也是错误的).

2. 什么是我绑定的正确方法change()事件,然后触发这两个一click()和change()事件为元素？ 我是否只是打电话.click(),并依赖于也.change()将开火的事实？

   $('#myelement').change(function() {
        // do some stuff
   });
   
   $('#myelement').click(); // both click and change will fire, yay!
   

   Run Code Online (Sandbox Code Playgroud)

在我的旧代码中,我使用此模式在ajax调用之后初始化一些复选框(及其检查的状态和值):

    $('#myelement').change(function() {
         // do some stuff including ajax work
    }).click().change();

但是在1.6.1中,我的逻辑会激发两次(一次为.click()一次,一次为一次.change() …

我正在尝试使用HTML2Canvas来呈现div的内容.这是代码:

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

我正在使用v5 beta 3.

此代码运行时,它仅呈现屏幕上可见的内容.该#potenzial-pageDIV实际上就是整个页面,减去页眉和页脚.通过滚动可以看到此div中的所有内容(有一些隐藏元素,但我不希望隐藏元素在图像中可见.)

我找不到什么是错的,或者为什么它不能保存整个div.我还应该注意到,图像看起来和div一样高,但只是部分可见.

举一个我的意思的例子,这是一个比较:

左边是HTML2Canvas应该如何呈现div.右边显示了它在运行上面的代码时如何呈现.正确的图像是我的浏览器屏幕中可见的图像.

我确实尝试添加height选项,但它没有任何区别.

UPDATE

如果我滚动到页面的最顶部然后运行脚本它将呈现整个div应该.

如何渲染div而不必滚动到顶部？