通过 jQuery 实现放大镜效果

发布者: superzhang | 发布时间:2017-11-25

相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。在接下来的博文中，将向大家介绍通过jQuery实现放大镜效果。

实现原理

首先，我们讲解一下放大镜效果的实现方式：

方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。

方法二：对原图片进行放大，也就是调整原图的长和宽。

上面我们介绍了通过两种方式实现放大镜效果，接下来，我们将以上的两种方式应用到我们的jQuery插件中。

首先，我们需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象。当鼠标移动到原图上时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。

接下来，让我们定义Index.html页面，具体实现如下：

<!doctype html><htmllang="en-US"><head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>jQuery Image Zoom Demo</title> <

想读更多 ->

JQuery的选择器优化

发布者: superzhang | 发布时间:2017-11-25

JQuery有非常多的选取节点的方法，但是采用这些方法选取节点时所影响到的性能是完全不一样的，用更合适的选择器去选取节点，是使用JQuery时优化浏览器性能的一个可考虑方向。

首先，我们的建立一个有着复杂样式的无序列表。

JQuery的选择器优化

调用浏览器时间调试工具，建立测试函数：

JQuery的选择器优化

我们采用选取循环50000次的无序列表中的一个方法，来测试每个选择器对于浏览器的响应性能的影响。

1、将选择器选取的节点缓存，将大大的提升响应时间。

分别调用两次方法，测试未把节点缓存和把节点缓存的时间。

想读更多 ->

jQuery的插入

发布者: superzhang | 发布时间:2017-11-25

append(content)

概述：

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似

append(function(index, html))

概述：

向每个匹配的元素内部追加内容

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似

appendTo(content)

概述：

把所有匹配的元素追加到另一个指定的元素元素集合中，对append的颠倒

prepend(content)

概述：

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

prepend(function(index, html))

概述：

向每个匹配的元素内部前置内容。

prependTo(content)

概述：

把所有匹配的元素前置到另一个、指定的元素元素集合中。对prepend的颠倒

想读更多 ->

JQ深入浅出（1）-初识jQuery

发布者: superzhang | 发布时间:2017-11-25

对于不了解jQuery的读者而言，可以从jQuery的首字母联想它的根基，没错jQuery属于JavaScript家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。

JQ深入浅出（1）-初识jQuery

Web应用程序的基本架构

Web服务器通常需要有固定的IP地址和永久域名，其主要功能如下：

存放Web应用程序。

接受用户申请的服务。如果用户申请浏览JSP、PHP等脚本文件，则Web服务器会对脚本进行解析，生成对应的临时HTML（HTM）文件。

如果脚本中需要访问数据库，则将SQL语句传送到数据库服务器，并接收查询结果。

将HTML（HTM）文件传送到Web浏览器。

说了这么多，那么重点来了，为何我们要学jq？它到底有何魅力？

遍历和操作HTML元素。要实现动态网页，就需要在程序中对网页的内容进行控制

想读更多 ->

Jquery深入浅出2——选择器

发布者: superzhang | 发布时间:2017-11-25

基础选择器：id选择器，标签名选择器，类选择器，选择所有html元素，同时选择多个元素层次选择器：祖先-后代选择器，父子选择器，前后选择器，前后兄弟选择器

可以给HTML元素设置一个id，根据id选取该HTML元素。例如，使用$("#menu")可以选取id为menu的HTML元素。

p注意：同一页面不要出现多个id相同的元素。当出现这种情况时，id选择器将只选择页面中第一个符合条件的元素。

<html>

<head>

$(document).ready(function(){

$("#button1").click(function(){

alert("hello");

});

</script>

</head>

<body>

<button id="button1">单击我</button&g

想读更多 ->

jQuery入门2

发布者: superzhang | 发布时间:2017-11-25

jQuery是什么

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

jQuery入门2

jQuery官网

jQuery的九类选择器

目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签

（1）基本选择器

（2）层次选择器

（3）增强基本选择器

（4）内容选择器

（5）可见性选择器

（6）属性选择器

（7）子元素选择器

（8）表单选择器

（9）表单对象属性选择器

注意：项目中，通常是多种选择器一起使用

jQuery入门2

想读更多 ->

jQuery 简介

发布者: superzhang | 发布时间:2017-11-25

jQuery 库可以通过一行简单的标记被添加到网页中。

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

jQuery 简介

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示：除此之外，Jquery还提供了大量的插件。

想读更多 ->

jQuery的查找

发布者: superzhang | 发布时间:2017-11-25

children([expr])

概述：

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

用以过滤子元素的表达式

closest(expr, [context])

概述：

jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用。

参数：

expr String, Array

用以过滤元素的表达式，可以

想读更多 ->