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. System and method for controlling switching between VMM and VM using enabling value of VMM timer indicator and VMM timer value having a specified time

    In one embodiment, a method includes transitioning control to a virtual machine (VM) from a virtual ...

  2. HTML5梦幻星空，可用作网页背景

    <html> <head> <title>星空</title> <META http-equiv="X-UA-Compatible&qu ...

  3. hard-negative mining 及伪代码实现

    Histogram of Oriented Gradients and Object Detection 获得 records 对于目标检测(object detection)问题,所谓的 hard- ...

  4. Windows Route 路由表命令整理

    Windows Route 路由表命令 在本地 IP 路由表中显示和修改条目. 语法 route [-f] [-p] [Command [Destination] [mask Netmask] [Ga ...

  5. mahout中KMeans算法

    本博文主要内容有   1.kmeans算法简介 2.kmeans执行过程  3.关于查看mahout中聚类结果的一些注意事项 4.kmeans算法图解      5.mahout的kmeans算法实现 ...

  6. Vue自定义组件

  7. PatentTips - Method, apparatus and system for instructing a virtual device from a virtual machine

    BACKGROUND OF THE INVENTION A virtual machine (VM) may be or include a framework or environment crea ...

  8. C++小项目-本校科协管理系统

    前几天老师说让我把之前做过的一个小项目改动一下,用于新成员练手. 想到在我刚接触面向对象编程的时候,也是急需一个小的case来熟悉和深入对C++的理解.如今搞的这个东西.希望能够帮到学弟学妹们,嘻嘻. ...

  9. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  10. mysql三种带事务批量插入

    原文:mysql三种带事务批量插入 c#之mysql三种带事务批量插入 前言 对于像我这样的业务程序员开发一些表单内容是家常便饭的事情,说道表单 我们都避免不了多行内容的提交,多行内容保存,自然要用到 ...