js&jq遇到的问题（不断更新中）

1.普通事件和事件绑定：

代码：

普通事件：
var btn=document.getElementById('btn');
btn.onclick=function(){
alert("change1");
}
btn.onclick=function(){
alert("change2");
}
取消绑定：
btn.onclick=null;

事件绑定：
btn.addEventListener("click",change1,false);
btn.addEventListener("click",change2,false);
function change1(){
alert("change1");
}
function change2(){
alert("change2");
}
取消绑定：
btn.removeEventListener("click",change1,false);

ie中绑定事件与取消绑定事件：

绑定事件：
btn.attachEvent("onclick",change1);
btn.attachEvent("onclick",change2);
取消事件：
btn.detachEvent("onclick",change1);

2.prop()和attr()的区别：

jquery1.6中新增了新的方法prop();

大家都知道有的浏览器只要写disabled，checked就可以了，

而有的要写成disabled = "disabled"，checked="checked"，

比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,

值为"checked"但没选中获取值就是undefined。

那么prop就是用来解决这个问题的。以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

3.jq获取select选中项的索引的三种方法：

$('#someId').prop('selectedIndex');

$('option:selected', '#someId').index();

$('#someId option').index($('#someId option:selected'))

4.图片懒加载

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

本文给出一种利用jQuery实现图片懒加载的原理。它的基本思想是：在输出HTML的时候，不要直接输出<img src="xxx"，而是输出如下的img标签：

因此，页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把<img>的src属性替换为data-src的内容，浏览器就会实时加载。

JavaScript代码：

// 注意: 需要引入jQuery和underscore

$(function() {

    // 获取window的引用:

    var $window = $(window);

    // 获取包含data-src属性的img，并以jQuery对象存入数组:

    var lazyImgs = _.map($('img[data-src]').get(), function (i) {

        return $(i);

    });

    // 定义事件函数:

    var onScroll = function() {

        // 获取页面滚动的高度:

        var wtop = $window.scrollTop();

        // 判断是否还有未加载的img:

        if (lazyImgs.length > 0) {

            // 获取可视区域高度:

            var wheight = $window.height();

            // 存放待删除的索引:

            var loadedIndex = [];

            // 循环处理数组的每个img元素:

            _.each(lazyImgs, function ($i, index) {

                // 判断是否在可视范围内:

                if ($i.offset().top - wtop < wheight) {

                    // 设置src属性:

                    $i.attr('src', $i.attr('data-src'));

                    // 添加到待删除数组:

                    loadedIndex.unshift(index);

                }

            });

            // 删除已处理的对象:

            _.each(loadedIndex, function (index) {

                lazyImgs.splice(index, 1);

            });

        }

    };

    // 绑定事件:

    $window.scroll(onScroll);

    // 手动触发一次:

    onScroll();

onScroll函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。

巴特西

js&jq遇到的问题（不断更新中）

最新文章

热门文章