zoukankan      html  css  js  c++  java
  • jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例

    一、总结

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

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

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

    64     function(){
    65         $(this).animate({
    66             'margin-left':'0px'
    67         },500);
    68     }

    二、jquery几个小实例

    toggle循环单击

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10     </style>
    11     <script src="jquery.js"></script>
    12 </head>
    13 <body>
    14     <img src="a.png" alt="">        
    15 </body>
    16 <script>
    17 $('img').toggle(
    18     function(){
    19         this.src='b.png';
    20     },
    21     function(){
    22         this.src='a.png';
    23     }
    24 );
    25 </script>
    26 </html>

    hover鼠标循环移入移出

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10     </style>
    11     <script src="jquery.js"></script>
    12 </head>
    13 <body>
    14     <img src="a.png" alt="">        
    15 </body>
    16 <script>
    17 $('img').hover(
    18     function(){
    19         this.src='b.png';
    20     },
    21     function(){
    22         this.src='a.png';
    23     }
    24 );
    25 </script>
    26 </html>

    酒仙网左滑右滑特效

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10 
    11         .jiu{
    12             width:180px;
    13             overflow: hidden;
    14             float: left;
    15             margin-left:35px;
    16             margin-top:15px;
    17         }
    18 
    19     </style>
    20     <script src="jquery.js"></script>
    21 </head>
    22 <body>
    23     <div class='jiu'>
    24         <img src="jiu.jpg" alt="">        
    25     </div>
    26     <div class='jiu'>
    27         <img src="jiu.jpg" alt="">        
    28     </div>
    29     <div class='jiu'>
    30         <img src="jiu.jpg" alt="">        
    31     </div>
    32     <div class='jiu'>
    33         <img src="jiu.jpg" alt="">        
    34     </div>
    35     <div class='jiu'>
    36         <img src="jiu.jpg" alt="">        
    37     </div>
    38     <div class='jiu'>
    39         <img src="jiu.jpg" alt="">        
    40     </div>
    41     <div class='jiu'>
    42         <img src="jiu.jpg" alt="">        
    43     </div>
    44     <div class='jiu'>
    45         <img src="jiu.jpg" alt="">        
    46     </div>
    47     <div class='jiu'>
    48         <img src="jiu.jpg" alt="">        
    49     </div>
    50     <div class='jiu'>
    51         <img src="jiu.jpg" alt="">        
    52     </div>
    53     <div class='jiu'>
    54         <img src="jiu.jpg" alt="">        
    55     </div>
    56 </body>
    57 <script>
    58 $('img').hover(
    59     function(){
    60         $(this).animate({
    61             'margin-left':'-100px'
    62         },500);
    63     },
    64     function(){
    65         $(this).animate({
    66             'margin-left':'0px'
    67         },500);
    68     }
    69 );
    70 </script>
    71 </html>

    单击标题切换内容

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10 
    11     </style>
    12     <script src="jquery.js"></script>
    13 </head>
    14 <body>
    15     <h1>linux</h1>
    16     <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>
    17 
    18     <h1>linux</h1>
    19     <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>
    20 
    21     <h1>linux</h1>
    22     <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>
    23 
    24     <h1>linux</h1>
    25     <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>
    26 </body>
    27 <script>
    28 $('h1').click(function(){
    29     $(this).next().toggle(1000);
    30 });
    31 </script>
    32 </html>

    水果复制选择

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10         
    11         select{
    12             width:100px;
    13             height:150px;
    14         }
    15     </style>
    16     <script src="jquery.js"></script>
    17 </head>
    18 <body>
    19     <h1>水果选择:</h1>
    20     <form action="javascript:">
    21         <select name="" id="s1" size='2'>
    22             <option value="">西瓜</option>
    23             <option value="">冬瓜</option>
    24             <option value="">苹果</option>
    25             <option value="">南瓜</option>
    26         </select>
    27 
    28         <input type="button" value=">>" id='btn'>
    29 
    30         <select name="" id="s2" size='2'>
    31         </select>
    32     </form>    
    33 </body>
    34 <script>
    35 $('#btn').click(function(){
    36     $('#s1 option:selected').clone().appendTo('#s2');
    37 });
    38 </script>
    39 </html>

    水果移动选择

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10         
    11         select{
    12             width:100px;
    13             height:150px;
    14         }
    15     </style>
    16     <script src="jquery.js"></script>
    17 </head>
    18 <body>
    19     <h1>水果选择:</h1>
    20     <form action="javascript:">
    21         <select name="" id="s1" size='2'>
    22             <option value="">西瓜</option>
    23             <option value="">冬瓜</option>
    24             <option value="">苹果</option>
    25             <option value="">南瓜</option>
    26         </select>
    27 
    28         <input type="button" value=">>" id='btn'>
    29 
    30         <select name="" id="s2" size='2'>
    31         </select>
    32     </form>    
    33 </body>
    34 <script>
    35 $('#btn').click(function(){
    36     $('#s1 option:selected').appendTo('#s2');
    37 });
    38 </script>
    39 </html>
     
  • 相关阅读:
    Centos8 静态IP设置
    2022年1月6号 LocalDateTime触发列无效问题
    2021年12月14日复盘(Oracle Not In,Limit 1000)
    2022年1月2日复盘 线上CPU飙升
    2021年12月16日复盘 JSQLParser 命中Oracle关键词报错
    2022年1月5号 on update CURRENT_TIMESTAMP无效情况记录
    2021年12月21日复盘 雪花算法 服务器时钟偏移错误
    Centos替换源
    2021年12月9日复盘 前端日期少8小时
    WPF中DataContext作用
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9181173.html
Copyright © 2011-2022 走看看