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. ListView Item 点击展开隐藏问题

    public class ListAdapter extends BaseAdapter {     private Context mContext;     private View mLastV ...

  2. OrmLite使用小结（一）

    在使用OrmLite过程中,遇到了不少问题.鉴于中文文档比較少,看英文文档又不知道怎样看起.仅仅能遇到问题查找解决方法并整理出来,如有错误,希望能指正! ** 1.模糊条件查询 ** 使用条件查询时. ...

  3. Android提示版本号更新操作流程

    Android提示版本号更新操作流程 2014年5月8日: andorid的app应用中都会有版本号更新的操作,今天空暇的时候就花了点心思弄了一下.主要技术方面用到了AsyncTask异步载入.htt ...

  4. GO语言学习（十九）Go 错误处理

    Go 错误处理 Go 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } ...

  5. [D3] Add label text

    If we want to add text to a node or a image // Create container for the images const svgNodes = svg ...

  6. POJ 3723 Conscription MST

    http://poj.org/problem?id=3723 题目大意: 需要征募女兵N人,男兵M人,没征募一个人需要花费10000美元,但是如果已经征募的人中有一些关系亲密的人,那么可以少花一些钱, ...

  7. 最新GitHub新手使用教程(Windows Git从安装到使用)——详细图解

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.叙述 1.Git简介 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本 ...

  8. 【例题 6-14 UVA-816】Abbott's Revenge

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出某个方向的左边.前边.右边是哪个方向就好了. 然后就是普通的bfs了. hash存到某个点,走到这里的方向的最小距离. df ...

  9. [AngularJS] Interpolation fail in IE 11

    When you occured this problem, check few things: For the input field, use // Use ng-attr-placeholder ...

  10. [Angular] Stagger animation v4.3.3

    For example, when we open a form, we want to see all the inputs fields comes into one by one. Code f ...