<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body {

            font-family: "Helvetica","Arial",serif;

            color: #333;

            background-color: #ccc;

            margin: 1em 10%;

        }

        h1 {

            color: #333;

            background-color: transparent;

        }

        a {

            color: #c60;

            background-color: transparent;

            font-weight: bold;

            text-decoration: none;

        }

        ul {

            padding: 0;

        }

        li {

            float: left;

            padding: 1em;

            list-style: none;

        }

        #imagegallery {

            list-style: none;

        }

        #imagegallery li {

            margin: 0px 20px 20px 0px;

            padding: 0px;

            display: inline;

        }

        #imagegallery li a img {

            border: 0;

        }

    </style>

</head>

<body>

<h2>

    美女画廊

</h2>

<ul id="imagegallery">

    <li><a href="../images/meinv/1.jpg" title="美女A">

        <img src="../images/meinv/1-small.jpg" width="100" alt="美女1" />

    </a></li>

    <li><a href="../images/meinv/2.jpg" title="美女B">

        <img src="../images/meinv/2-small.jpg" width="100" alt="美女2" />

    </a></li>

    <li><a href="../images/meinv/3.jpg" title="美女C">

        <img src="../images/meinv/3-small.jpg" width="100" alt="美女3" />

    </a></li>

    <li><a href="../images/meinv/4.jpg" title="美女D">

        <img src="../images/meinv/4-small.jpg" width="100" alt="美女4" />

    </a></li>

</ul>

<div style="clear:both"></div>

<img id="image" src="../images/meinv/placeholder.png" alt="" width="450px" />

<p id="des">选择一个图片</p>

<script src="../jquery-1.12.4.js"></script>

<script>

    $(function () {

        $('#imagegallery>li>a').click(function () {

            //获取当前点击的a标签的href属性的值和title属性的值。

            var srcValue = $(this).attr('href');

            var contentValue = $(this).attr('title');

            //给img标签的src属性赋值，以及给p标签的内容赋值。

            $('#image').attr('src',srcValue);

            $('#des').text(contentValue);

            //阻止a标签的跳转

            return false;

        });

    });

</script>

</body>

</html>

思路：

        //1.需求

        //给小图片a标签设置一个单击事件.

        //让id为image的img标签修改src属性为当前点击的a标签的href属性的值

        //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

效果图：

点击上方的小图片，下面显示对应的大图片

图片链接：https://pan.baidu.com/s/1o1E2ZfY_6q52Ov78e5AUWA

Jquery练习1的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. MyBatis（2）——增删改查

    增删改查: 1.在实体类的映射文件中增加insert.update.delete标签与数据库语句,例如 <!-- 会去获取到对应的实体类的getter方法 --> <insert i ...

  2. 用synchronized实现互斥锁

    package seday10;/** * @author xingsir * 互斥锁 * 当使用synchronized锁定多个代码片段,并且他们指定的同步监视器对象是同一个时,那么这些代码片段之间 ...

  3. swiper移动端全屏播放动态获取数据

    html:  <link rel="stylesheet" href="css/swiper.min.css">   <div class=& ...

  4. Codeforces Round #624 (Div. 3) C. Perform the Combo（前缀和）

    You want to perform the combo on your opponent in one popular fighting game. The combo is the string ...

  5. 解决linux乱码问题

    echo "LANG="zh_CN.UTF-8" >> /etc/sysconfig/i18n yum -y install kde-l10n-Chinese ...

  6. 喵星之旅-狂奔的兔子-rabbitmq的java客户端使用入门

    一.简介 RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件). 消息队列都涉及的生产者消费者模型,不做详解,本文只作为快速使用的参考文档. 消息队列主要有点 ...

  7. opencv：图像查找表 与 颜色表

    LUT 使用 颜色查找表 example LUT applyColorMap // 读入制作好的lut.png Mat color = imread("D:/images/lut.png&q ...

  8. Ip2Region IP转化地址位置

    Ip2Region有中文和数据结构支持,是一个很好的第三方ip转换工具. java: <dependency> <groupId>org.lionsoul</groupI ...

  9. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真（02）

    Silvaco的破解用了好久好久,而且之后拷了上次例子的代码,Tonyplot的输出存在报错,还是四连. 当然这个点一下还是会出图的.但是,源代码稍微改了下结构,又有报错,而且程序直接终止. go a ...

  10. IDEA部署项目，并结合Shell脚本运行Java程序

    一.概述 在实际开发中,我们写好的代码,往往打成war包或jar包,通过winscp或其他软件将其上传至服务器,然而这样非常大的一个弊端就是不利于开发,为什么这么说呢?假如我们刚刚将springboo ...