正文
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和underscoreonScroll函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。
$(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();
js&jq遇到的问题（不断更新中）的更多相关文章- 百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- JS基础知识再整理..........不断更新中
1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...
- JS - 二叉树算法实现与遍历 (更新中...)
一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...
- 常用JS、jquery 命令（不断更新中）
设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...
- js坑爹笔试题目汇总（持续更新中）
把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...
- js jq输入框中按回车触发提交事件，用户在页面输入后按回车（Enter键）进行
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
- gulpfile.js不断更新中...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
- 前端深入之js篇丨Array数组操作从入门到成神Up Up Up，持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
- js常见错误类型及chrome常见报错（更新中）
ECMA-262 定义了下列 7 种错误类型: 1.Error 错误 2.EvalError 全局错误 eval函数没有正确执行 3.RangeError 范围错误 4.ReferenceError ...
- fastadmin 后台管理框架使用技巧(持续更新中)
fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...
随机推荐- async 和 await小结
三大返回值: 返回类型 - Task<TResult> 返回类型 - Task 返回类型 - void 当你添加 async 关键字后,需要返回一个将用于后续操作的对象,请使用 Task& ...
- 在django中使用自定义标签实现分页功能
效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...
- 系统重装后phpnow修复
最近在捣鼓wordpress,主题写了一半然后就重装了win8,在新系统里面访问127.0.0.1的时候出现无法访问的情况.主题写了一半,又不想重装wordpress导数据库这些繁琐的过程,于是,尝试 ...
- QT与JavaScript互调 - 虹的日志 - 网易博客
QT与JavaScript互调 - 虹的日志 - 网易博客 QT与JavaScript互调 2012-05-29 21:43:14| 分类: 技术 | 标签:qt javascript w ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- C#设计模式(0)-认识设计模式
简介 世界上本没有路,走的人多了也就成了路:世界上本来没有设计模式.用的人多了,也就成了设计模式.所以,我们不是严格按照它的定义去执行,可以根据自己的实际场景.需求去变通.领悟了其中的思想,实现属于自 ...
- 关于sass与VScode 一些配置 学习记录
VScode三个关于sass的插件 .vscode-Sass------sass/scss文件语法提示.(sublime text也有) .vscode-Easy Sass------scss编译成c ...
- 网络编程基础【day09】：堡垒机前戏（十一）
本节内容 1.堡垒机前戏 2.SSHClient 3.SFTPClient 一.堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 ...
- ffmpeg文件切片
先用ffmpeg把abc.mp4文件转换为abc.ts文件: ffmpeg -y -i abc.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb ...
- bitnami下mysql配置-包含phpMyAdmin配置
mysql开启远程访问: 默认情况下mysql的绑定ip是bind-address=127.0.0.1 找到my.cnf bitnami@linux:~$ sudo find / -name my.c ...
第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...
一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...
设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...
把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
ECMA-262 定义了下列 7 种错误类型: 1.Error 错误 2.EvalError 全局错误 eval函数没有正确执行 3.RangeError 范围错误 4.ReferenceError ...
fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...
- async 和 await小结
三大返回值: 返回类型 - Task<TResult> 返回类型 - Task 返回类型 - void 当你添加 async 关键字后,需要返回一个将用于后续操作的对象,请使用 Task& ...
- 在django中使用自定义标签实现分页功能
效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...
- 系统重装后phpnow修复
最近在捣鼓wordpress,主题写了一半然后就重装了win8,在新系统里面访问127.0.0.1的时候出现无法访问的情况.主题写了一半,又不想重装wordpress导数据库这些繁琐的过程,于是,尝试 ...
- QT与JavaScript互调 - 虹的日志 - 网易博客
QT与JavaScript互调 - 虹的日志 - 网易博客 QT与JavaScript互调 2012-05-29 21:43:14| 分类: 技术 | 标签:qt javascript w ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- C#设计模式(0)-认识设计模式
简介 世界上本没有路,走的人多了也就成了路:世界上本来没有设计模式.用的人多了,也就成了设计模式.所以,我们不是严格按照它的定义去执行,可以根据自己的实际场景.需求去变通.领悟了其中的思想,实现属于自 ...
- 关于sass与VScode 一些配置 学习记录
VScode三个关于sass的插件 .vscode-Sass------sass/scss文件语法提示.(sublime text也有) .vscode-Easy Sass------scss编译成c ...
- 网络编程基础【day09】：堡垒机前戏（十一）
本节内容 1.堡垒机前戏 2.SSHClient 3.SFTPClient 一.堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 ...
- ffmpeg文件切片
先用ffmpeg把abc.mp4文件转换为abc.ts文件: ffmpeg -y -i abc.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb ...
- bitnami下mysql配置-包含phpMyAdmin配置
mysql开启远程访问: 默认情况下mysql的绑定ip是bind-address=127.0.0.1 找到my.cnf bitnami@linux:~$ sudo find / -name my.c ...
