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. Linux 进程通信之管道

    管道是单向的.先进先出的,它把一个进程的输出和还有一个进程的输入连接在一起.一个进程(写进程)在管道的尾部写入数据,还有一个进程(读进程)从管道的头部读出数据.数据被一个进程读出后,将被从管道中删除, ...

  2. ViewPager+Fragmrnt最简单结合方法

    Fragment和ViewPager 本博文系本菜鸟第一次博文展示,有错误之处请虽然提出 FragmentPagerAdapter 谷歌官方提供了这么一个adapter(FragmentPagerAd ...

  3. 怎样让索引仅仅能被一个SQL使用

    有个徒弟问我,要创建一个索引,去优化一个SQL,可是创建了索引之后其它 SQL 也要用 这个索引,其它SQL慢死了.要优化的SQL又快.遇到这样的问题咋搞? 一般遇到这样的问题还是非常少的.处理的方法 ...

  4. SQLite-SQLiteDatabase 数据库实例练习

    今天趁着有时间,自己在网上找了相关的数据库操作代码,进行了一下练习,先上代码 main.xml文件 <RelativeLayout xmlns:android="http://sche ...

  5. Android Studio运行报错，Cannot find System Java Compiler. Ensure that you have installed a JDK......

    详细报错信息如下 Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Cannot find System J ...

  6. nodejs连接mysql突然中断问题解决方案

    db/index.js数据库配置文件 一.在数据库连接失败的情况下,回调函数,再次发起连接,直到连接成功为止. handleDisconnect(){ this.connection.connect( ...

  7. 开源企业IM-免费企业即时通讯-ENTBOOST V2014.177 Windows版本号正式公布

    ENTBOOST,VERSION 2014.177 LINUX 版本号公布.主要添加Android安卓手机开发接口.企业IM接口,JQUERY开发接口,PCclient部分BUG修正: 下版本号更新时 ...

  8. BingMap频繁Add Pushpin和Delete Pushpin会导致内存泄露

    近期在做性能測试的时候发现BingMap内存泄露(memory leak)的问题,查找了一些国外的帖子,发现也有类似的问题,可是没有好的解决的方法. https://social.msdn.micro ...

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

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

  10. winedt （latex 编译器）解决中文的问题（CJK & CTEX）

    主要是导入相关的库支持: 1. CJK \usepackage{CJK}:CJK,是中日韩的英文首字母的组合,处理中文需要先导入这个包: \begin{CJK*}{GBK}{song}:默认句式,表示 ...