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. Win8.1部署 .NET Framework 3.5 安装方式

    Windows 8.1中包含.NET Framework,操作系统安装过程中默认安装 .NET Framework 4.5.1.如果程序需要.NET Framework 3.5支持,将自动启用相关功能 ...

  2. Win7下IE11点击无反应的解决方法

    平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...

  3. Python产生随机数组，测试用

    import numpy as np if __name__ == '__main__': a=np.random.randint(0,10,size=[3,3])    print(a) 输出: [ ...

  4. 最小二乘法，python3实现

    https://www.cnblogs.com/BlogOfMr-Leo/p/8627311.html                      [用的是库函数] https://blog.csdn. ...

  5. GO语言学习（十八）Go 语言接口

    Go 语言接口 Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 /* 定义接口 */ type interface ...

  6. LA 3989 - Ladies' Choice 稳定婚姻问题

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  7. php实现 查找输入整数二进制中1的个数

    php实现 查找输入整数二进制中1的个数 一.总结 一句话总结: 1.if($j&intval($num)){}的作用是什么? 1 <?php 2 while($num=trim(fge ...

  8. CNTK 搞深度学习-1

    CNTK 搞深度学习 Computational Network Toolkit (CNTK) 是微软出品的开源深度学习工具包.本文介绍CNTK的基本内容,如何写CNTK的网络定义语言,以及跑通一个简 ...

  9. RISC-V评估系列

    RISC-V评估系列 RISC-V工具链搭建 SiFive虚拟机分享--提取码:xe1c SiFive SDK函数结构 底层驱动 driver框架 操作系统FreeRTOS移植 FGPA评估 benc ...

  10. 关于Android中设置闹钟的相对比较完善的解决方案

    我当时说承诺为大家写一个,一直没空,直到最近又有人跟我要,我决定抽时间写一个吧.确实设置闹钟是一个比较麻烦的东西.我在这里写的这个demo抽出来了封装了一个类库,大家直接调用其中的设置闹钟和取消闹钟的 ...