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代码:

  1. // 注意: 需要引入jQuery和underscore
  2. $(function() {
  3. // 获取window的引用:
  4. var $window = $(window);
  5. // 获取包含data-src属性的img,并以jQuery对象存入数组:
  6. var lazyImgs = _.map($('img[data-src]').get(), function (i) {
  7. return $(i);
  8. });
  9. // 定义事件函数:
  10. var onScroll = function() {
  11. // 获取页面滚动的高度:
  12. var wtop = $window.scrollTop();
  13. // 判断是否还有未加载的img:
  14. if (lazyImgs.length > 0) {
  15. // 获取可视区域高度:
  16. var wheight = $window.height();
  17. // 存放待删除的索引:
  18. var loadedIndex = [];
  19. // 循环处理数组的每个img元素:
  20. _.each(lazyImgs, function ($i, index) {
  21. // 判断是否在可视范围内:
  22. if ($i.offset().top - wtop < wheight) {
  23. // 设置src属性:
  24. $i.attr('src', $i.attr('data-src'));
  25. // 添加到待删除数组:
  26. loadedIndex.unshift(index);
  27. }
  28. });
  29. // 删除已处理的对象:
  30. _.each(loadedIndex, function (index) {
  31. lazyImgs.splice(index, 1);
  32. });
  33. }
  34. };
  35. // 绑定事件:
  36. $window.scroll(onScroll);
  37. // 手动触发一次:
  38. onScroll();
  39.  
  40. onScroll函数最后要手动触发一次,因为页面显示时,并未触发scroll事件。如果图片已经在可视区域内,这些图片仍然是loading状态,需要手动触发一次,就可以正常显示。

js&jq遇到的问题(不断更新中)的更多相关文章

  1. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  3. JS - 二叉树算法实现与遍历 (更新中...)

    一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...

  4. 常用JS、jquery 命令(不断更新中)

    设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...

  5. js坑爹笔试题目汇总(持续更新中)

    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...

  6. js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

  7. gulpfile.js不断更新中...

    Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...

  8. 前端深入之js篇丨Array数组操作从入门到成神Up Up Up,持续更新中

    写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...

  9. js常见错误类型及chrome常见报错(更新中)

    ECMA-262 定义了下列 7 种错误类型: 1.Error 错误 2.EvalError 全局错误 eval函数没有正确执行 3.RangeError 范围错误 4.ReferenceError ...

  10. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...

随机推荐

  1. vue 一些webpack的配置详解

    最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...

  2. RGB值得计算公式

    三原色分别为:红(Red).绿(Green).蓝(Blue). 颜色值=(Red)+(Green*256)+(Blue*256*256) //由三原色值合成颜色整数值 function ColorFr ...

  3. 微信公众平台消息接口开发(2)你的服务器没有正确响应Token验证的解决方法

    你的服务器没有正确响应Token验证,请阅读消息接口使用指南 微信 微信公众平台开发模式 平台 消息 接口 启用 URL Token作者:http://txw1958.cnblogs.com/ 本系统 ...

  4. 2 abp 领域层创建实体

    领域层: LearningMpaAbp.Core项目   基础服务层:EntityFramework对应的项目 1 在领域层新建Tasks文件夹 在文件夹下新建Task类 但是注意 Task类必须要继 ...

  5. Ubuntu logomaker sh: 1: pngtopnm: not found 解决方案

    暂时未找到logomaker的方法,来解决 命令替换,在文件夹: pngtopnm open_show.png > temp.ppm ppmquant 224 temp.ppm >temp ...

  6. NLP(paper + code)

    0. 开源的库 genism keras wrapper of theano/TensorFlow 1. CNN for NLP Convolutional Neural Networks for S ...

  7. WPF模拟Office2010文件菜单的TabControl模板

    原文:WPF模拟Office2010文件菜单的TabControl模板 这是Office2010中的文件菜单点开后的效果.本文我将以强大的WPF(www.itstrike.cn)来实现类似的效果.希望 ...

  8. 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

    原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...

  9. 怎样正确的理解和解决 ORA-01843:not a valid month

    今天码代码的时候遇到了这个问题,由于oracle用的比較少,所在查询了一下. 顿时傻眼,有非常多的贴子说是由于nls_date_language的问题,还要改会话级的NLS_DATE_LANGUAGE ...

  10. Tinyhttpd - 超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client(Qt也有很多第三方HTTP类)

    - 2. Tinyhttpd tinyhttpd是一个超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client,可以通过阅读这段代码理解一个 Htt ...