jquery-1  jquery几个小实例

一、总结

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

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

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

64     function(){

65         $(this).animate({

66             'margin-left':'0px'

67         },500);

68     }

二、jquery几个小实例

toggle循环单击

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

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

 </head>

 <body>

     <img src="a.png" alt="">

 </body>

 <script>

 $('img').toggle(

     function(){

         this.src='b.png';

     },

     function(){

         this.src='a.png';

     }

 );

 </script>

 </html>

hover鼠标循环移入移出

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

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

 </head>

 <body>

     <img src="a.png" alt="">

 </body>

 <script>

 $('img').hover(

     function(){

         this.src='b.png';

     },

     function(){

         this.src='a.png';

     }

 );

 </script>

 </html>

酒仙网左滑右滑特效

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .jiu{

             width:180px;

             overflow: hidden;

             float: left;

             margin-left:35px;

             margin-top:15px;

         }

     </style>

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

 </head>

 <body>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

     <div class='jiu'>

         <img src="jiu.jpg" alt="">

     </div>

 </body>

 <script>

 $('img').hover(

     function(){

         $(this).animate({

             'margin-left':'-100px'

         },500);

     },

     function(){

         $(this).animate({

             'margin-left':'0px'

         },500);

     }

 );

 </script>

 </html>

单击标题切换内容

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

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

 </head>

 <body>

     <h1>linux</h1>

     <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>

     <h1>linux</h1>

     <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>

     <h1>linux</h1>

     <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>

     <h1>linux</h1>

     <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>

 </body>

 <script>

 $('h1').click(function(){

     $(this).next().toggle(1000);

 });

 </script>

 </html>

水果复制选择

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

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

 </head>

 <body>

     <h1>水果选择:</h1>

     <form action="javascript:">

         <select name="" id="s1" size='2'>

             <option value="">西瓜</option>

             <option value="">冬瓜</option>

             <option value="">苹果</option>

             <option value="">南瓜</option>

         </select>

         <input type="button" value=">>" id='btn'>

         <select name="" id="s2" size='2'>

         </select>

     </form>

 </body>

 <script>

 $('#btn').click(function(){

     $('#s1 option:selected').clone().appendTo('#s2');

 });

 </script>

 </html>

水果移动选择

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

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

 </head>

 <body>

     <h1>水果选择:</h1>

     <form action="javascript:">

         <select name="" id="s1" size='2'>

             <option value="">西瓜</option>

             <option value="">冬瓜</option>

             <option value="">苹果</option>

             <option value="">南瓜</option>

         </select>

         <input type="button" value=">>" id='btn'>

         <select name="" id="s2" size='2'>

         </select>

     </form>

 </body>

 <script>

 $('#btn').click(function(){

     $('#s1 option:selected').appendTo('#s2');

 });

 </script>

 </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. android屏幕适配方案

    曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手 ...

  2. C#做完一个网站怎么发布？

    前段时间在局域网上发布了一个自己做的网站,发布过程中遇到了不少问题.下面就发布过程和发布过程中遇到的问题与(你)大家一起分享一下,希望对(你)大家有所帮助吧! 在将ASP.NET网站发布到服务器之前需 ...

  3. （JavaScript基础向）sort()方法里的排序函数的理解

    比较常见的解释可以看这里:js的sort()方法,这篇博客写得挺好的,一般的应用的理解已经足够了. 但是如果要活用sort()方法里面的参数——也就是排序函数的话,可能就比较难理解了. 然后我就总结出 ...

  4. Docker---(6)问题：bash: vi: command not found

    原文:Docker---(6)问题:bash: vi: command not found 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://bl ...

  5. 你真得懂Javascript中的==等于运算符吗？

    var i = 2; Number.prototype.valueOf = function() { return i++; }; var a = new Number( 42 ); if (a == ...

  6. RMAN-03002、RMAN-06059

    使用RMAN备份的时候无法正常备份,抛出以下错误: RMAN-03002: failure of backup command at 04/20/2015 18:55:45 RMAN-06059: e ...

  7. 硬件——STM32 , 录音,wav

    详细的wav头文件解析,有例子:http://www.cnblogs.com/chulin/p/8918957.html 关于录音程序的编写: 我的思路是改写原子的程序,原子的程序需要借助VS1053 ...

  8. Fiddler--功能简介

    Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler是最 ...

  9. Redis实现Mybatis的二级缓存

    一.Mybatis的缓存 通大多数ORM层框架一样,Mybatis自然也提供了对一级缓存和二级缓存的支持.一下是一级缓存和二级缓存的作用于和定义. 1.一级缓存是SqlSession级别的缓存.在操作 ...

  10. Net知识

    Net知识图谱   对于Web系统开发来说,Net其实也是有好多知识点需要学的,虽然目前JAVA是主流,就业市场比较大,但Net也在积极的拥抱开源,大Net Core 2 出来了,这无疑给Net开发者 ...