jquery-1  jquery几个小实例

一、总结

一句话总结：jquery真的是简单加简便。

1、jquery中改变多个css属性怎么整？

可以链式连接方式，也可以大括号整多个。中间是键值对加引号的形式，和在css中写很像。css中写左边没有引号。右边也没有引号

  1. 64     function(){
  2. 65         $(this).animate({
  3. 66             'margin-left':'0px'
  4. 67         },500);
  5. 68     }

二、jquery几个小实例

toggle循环单击

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.      </style>
  11.      <script src="jquery.js"></script>
  12.  </head>
  13.  <body>
  14.      <img src="a.png" alt="">
  15.  </body>
  16.  <script>
  17.  $('img').toggle(
  18.      function(){
  19.          this.src='b.png';
  20.      },
  21.      function(){
  22.          this.src='a.png';
  23.      }
  24.  );
  25.  </script>
  26.  </html>

hover鼠标循环移入移出

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.      </style>
  11.      <script src="jquery.js"></script>
  12.  </head>
  13.  <body>
  14.      <img src="a.png" alt="">
  15.  </body>
  16.  <script>
  17.  $('img').hover(
  18.      function(){
  19.          this.src='b.png';
  20.      },
  21.      function(){
  22.          this.src='a.png';
  23.      }
  24.  );
  25.  </script>
  26.  </html>

酒仙网左滑右滑特效

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.  
  11.          .jiu{
  12.              width:180px;
  13.              overflow: hidden;
  14.              float: left;
  15.              margin-left:35px;
  16.              margin-top:15px;
  17.          }
  18.  
  19.      </style>
  20.      <script src="jquery.js"></script>
  21.  </head>
  22.  <body>
  23.      <div class='jiu'>
  24.          <img src="jiu.jpg" alt="">
  25.      </div>
  26.      <div class='jiu'>
  27.          <img src="jiu.jpg" alt="">
  28.      </div>
  29.      <div class='jiu'>
  30.          <img src="jiu.jpg" alt="">
  31.      </div>
  32.      <div class='jiu'>
  33.          <img src="jiu.jpg" alt="">
  34.      </div>
  35.      <div class='jiu'>
  36.          <img src="jiu.jpg" alt="">
  37.      </div>
  38.      <div class='jiu'>
  39.          <img src="jiu.jpg" alt="">
  40.      </div>
  41.      <div class='jiu'>
  42.          <img src="jiu.jpg" alt="">
  43.      </div>
  44.      <div class='jiu'>
  45.          <img src="jiu.jpg" alt="">
  46.      </div>
  47.      <div class='jiu'>
  48.          <img src="jiu.jpg" alt="">
  49.      </div>
  50.      <div class='jiu'>
  51.          <img src="jiu.jpg" alt="">
  52.      </div>
  53.      <div class='jiu'>
  54.          <img src="jiu.jpg" alt="">
  55.      </div>
  56.  </body>
  57.  <script>
  58.  $('img').hover(
  59.      function(){
  60.          $(this).animate({
  61.              'margin-left':'-100px'
  62.          },500);
  63.      },
  64.      function(){
  65.          $(this).animate({
  66.              'margin-left':'0px'
  67.          },500);
  68.      }
  69.  );
  70.  </script>
  71.  </html>

单击标题切换内容

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.  
  11.      </style>
  12.      <script src="jquery.js"></script>
  13.  </head>
  14.  <body>
  15.      <h1>linux</h1>
  16.      <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
  17.  
  18.      <h1>linux</h1>
  19.      <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
  20.  
  21.      <h1>linux</h1>
  22.      <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
  23.  
  24.      <h1>linux</h1>
  25.      <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
  26.  </body>
  27.  <script>
  28.  $('h1').click(function(){
  29.      $(this).next().toggle(1000);
  30.  });
  31.  </script>
  32.  </html>

水果复制选择

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.  
  11.          select{
  12.              width:100px;
  13.              height:150px;
  14.          }
  15.      </style>
  16.      <script src="jquery.js"></script>
  17.  </head>
  18.  <body>
  19.      <h1>水果选择:</h1>
  20.      <form action="javascript:">
  21.          <select name="" id="s1" size='2'>
  22.              <option value="">西瓜</option>
  23.              <option value="">冬瓜</option>
  24.              <option value="">苹果</option>
  25.              <option value="">南瓜</option>
  26.          </select>
  27.  
  28.          <input type="button" value=">>" id='btn'>
  29.  
  30.          <select name="" id="s2" size='2'>
  31.          </select>
  32.      </form>
  33.  </body>
  34.  <script>
  35.  $('#btn').click(function(){
  36.      $('#s1 option:selected').clone().appendTo('#s2');
  37.  });
  38.  </script>
  39.  </html>

水果移动选择

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              font-family: 微软雅黑;
  9.          }
  10.  
  11.          select{
  12.              width:100px;
  13.              height:150px;
  14.          }
  15.      </style>
  16.      <script src="jquery.js"></script>
  17.  </head>
  18.  <body>
  19.      <h1>水果选择:</h1>
  20.      <form action="javascript:">
  21.          <select name="" id="s1" size='2'>
  22.              <option value="">西瓜</option>
  23.              <option value="">冬瓜</option>
  24.              <option value="">苹果</option>
  25.              <option value="">南瓜</option>
  26.          </select>
  27.  
  28.          <input type="button" value=">>" id='btn'>
  29.  
  30.          <select name="" id="s2" size='2'>
  31.          </select>
  32.      </form>
  33.  </body>
  34.  <script>
  35.  $('#btn').click(function(){
  36.      $('#s1 option:selected').appendTo('#s2');
  37.  });
  38.  </script>
  39.  </html>
 

jquery-1 jquery几个小实例的更多相关文章

  1. angularjs jquery thinkPHP3.2.3 相结合小实例

    angular1.5 与 jquery想结合一个小应用 index.html <html> <head> <meta charset="utf-8"& ...

  2. 【jQuery小实例】---2自定义动画

    ---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. jQuery.uploadify文件上传组件实例讲解

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

  5. JQuery数组详解（含实例）

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  6. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  7. jQuery FileUpload等插件的使用实例

    1.jQuery FileUpload 需要的js: jquery.js jquery.fileupload.js jquery.iframe-transport.js jquery.xdr-tran ...

  8. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  9. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

随机推荐

  1. 怎样将OpenStack部署到Hadoop

    随着信息时代的快速发展,大数据技术和私有云环境都非常实用;只是,假设将两者结合在一起.企业会获得巨大的利润.虽然结合两者会让环境变得更复杂.企业仍然能够看到将 OpenStack 私有云和 Apach ...

  2. 报错 关于python的x和y不等长

    ValueError: shape mismatch: objects cannot be broadcast to a single shape 这个错误可能是因为传入的两个参数数据长度不一样,比如 ...

  3. 初学者路径规划 | 人生苦短我用Python

    纵观编程趋势 人生苦短,我用Python,比起C语言.C#.C++和JAVA这些编程语言相对容易很多.Python非常适合用来入门.有人预言,Python会成为继C++和Java之后的第三个主流编程语 ...

  4. 【2017中国大学生程序设计竞赛 - 网络选拔赛 && hdu 6154】CaoHaha's staff

    [链接]点击打开链接 [题意] 给你一个面积,让你求围成这个面积最少需要几条边,其中边的连线只能是在坐标轴上边长为1的的线或者是两个边长为1 的线的对角线. [题解] 找规律题 考虑s[i]表示i条边 ...

  5. Jpa 的Persistence.xml配置讲解

    <?xml version="1.0"?> <persistence xmlns="http://java.sun.com/xml/ns/persist ...

  6. 基于ContentObserver来动态取消或加入屏幕超时任务

    前面也说了.ContentObserver能够来监控数据库里某一项数据的变化,当然也能够同一时候监控多个数据项的变化. 笔者在项目中须要改动到屏幕超时的需求,比方在车载业务中,倒车事件发生的时候,是不 ...

  7. JIRA6.3.6 安装汉化破解指南

    JIRA6.3.6 安装汉化破解指南 近期试着安装了下JIRA,碰到了些问题.特记录下来,供后来者使用: 1.常规安装 1.1. 下载并安装jira 从官网下载atlassian-jira-6.3.6 ...

  8. Oracle Web链接客户端

    TreeSoft数据库管理系统 http://www.treesoft.cn        

  9. 自定义 matplotlib 设置

    Customizing plots with style sheets import matplotlib as mpl 查看配置文件所在的目录:mpl.get_configdir() 1. 自定义 ...

  10. 【例题3-4 UVA - 340】Master-Mind Hints

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这里出现了没有在相同位置的只能唯一配对. 就是说 3322 2234 这种情况. 只有3个weak pair. 即key[1]=a[ ...