一、什么是 jQuery( 四 )


//在特定延时后加载页面上的图像
假如 , 我们要在整个页面实现延迟图像显示 。要做到这一点 , 我们需要的 HTML 的格式如下:

一、什么是 jQuery

文章插图
一、什么是 jQuery

文章插图
一、什么是 jQuery

文章插图
一、什么是 jQuery

文章插图
// 意思非常简单: image1.png , 第三个图像立即显示 , 一秒后第一个图像显示 image2.png 一秒钟后显示第二个图像 , 两秒钟后显示第四个图像$('img').each(function () {var element = $(this),src = http://www.kingceram.com/post/element.data('src'),after = element.data('after')if (src) {$.when($.loadImage(src), $.afterDOMReady(after)).then(function () {element.attr('src', src)},function () {element.attr('src', 'error.png')}).done(function () {element.fadeIn()})}})// 如果我们想延迟加载的图像本身 , 代码会有所不同:$('img').each(function () {var element = $(this),src = element.data('data-src'),after = element.data('data-after')if (src) {$.afterDOMReady(after, function () {$.loadImage(src).then(function () {element.attr('src', src)},function () {element.attr('src', 'error.png')}).done(function () {element.fadeIn()})})}})//这里 , 我们首先在尝试加载图片之前等待延迟条件满足 。当你想在页面加载时限制网络请求的数量会非常有意义 。

的使用场所:
Ajax(XMLHttpRequest) Image Tag , Script Tag , iframe //(原理类似)setTimeout/setInterval CSS3 Transition/Animation HTML5 Web Database postMessage Web Workers Web Sockets and more…
() 方法
当鼠标指针位于元素上方时时 , 改变元素的背景色:
$('p').mouseover(function () {$('p').css('background-color', 'yellow')})//Mousemove//获得鼠标指针在页面中的位置:$(document).mousemove(function (e) {$('span').text(e.pageX + ', ' + e.pageY)})
定义和用法
当鼠标指针在指定的元素中移动时 , 就会发生事件 。
() 方法触发事件 , 或规定当发生事件时运行的函数 。
click() 方法
click()函数用于为每个匹配元素的 click 事件绑定处理函数 。该函数也可用于触发 click 事件 。
click 事件就是鼠标按钮单击事件 。此外 , 你还可以额外传递给事件处理函数一些数据 。
此外 , 你可以为同一元素多次调用该函数 , 从而绑定多个事件处理函数 。触发 click 事件时 ,  会按照绑定的先后顺序依次执行绑定的事件处理函数 。
要删除通过 click()绑定的事件 , 请使用 ()函数 。
该函数属于对象(实例) 。
语法
复制
全屏
全选
:
.click( [ [ data ,]] )
如果指定了至少一个参数 , 则表示绑定 click 事件的处理函数;没有指定任何参数 , 则表示触发 click 事件 。
参数 描述
data 可选/任意类型触发事件时 , 需要通过 event.data 传递给事件处理函数的任意数据 。
可选/ 类型指定的事件处理函数 。
1.4.3 新增支持:click()支持 data 参数 。
参数中的 this 指向当前 DOM 元素 。click()还会为传入一个参数:表示当前事件的 Event 对象 。
如果函数的返回值为 false , 则表示阻止元素的默认事件行为 , 并停止事件在 DOM 树中冒泡 。例如 , 链接的 click 事件的处理函数返回 false , 可以阻止链接的默认 URL 跳转行为 。