web实训知识点

最新推荐文章于 2022-08-24 11:15:54 发布

卡卡莉莉丝

最新推荐文章于 2022-08-24 11:15:54 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/weixin_44781372/article/details/89289493

版权

一：Jquery的使用1：加入Jquery库文档就绪（需要写一个函数（document），ready（function（）），相当于（document），ready（function（）），
2：jQuery的基本语法:(select).action()。
jQuery的选择器：当要选择“p标签的第一个和第三个”，可以 (select).action()。
二：jQuery动画效果:1：隐藏和显示。
两个方法：hide（），show（）。
语法：$（selector）.hide(speed.callback) $（selector）.hide(speed.callback)
例子：

<p>Jquery动画效果,隐藏和显示。
</p><input type="button" value="隐藏" id="button1"><input type="button" value="显示" id="button2">
<input type="button" value="按钮" id="button3">
<script>      
  $(document).ready(function(){            $("#button1").click(function(){                $("p").hide(1000)                alert("恭喜你，隐藏完成")            })            $("#button2").click(function(){                $("p").show(2000,function(){                alert("恭喜你，显示完成")            })        })                $("#button3").click(function(){                $("p").toggle(1000,function(){                $("p").css({color:"yellow"})})                })        })    
  </script>
  
2

.滑动

两个方法：slidedown（），slideup（），slidetoggle（）
例子：

<div id="slide">点击我，滑动显示或者隐藏面板</div>
 <div id="panel"> Hello Jquery! !</div> 
  <style>         #slide,#panel{             padding: 5px;             text-align: center;             background-color: #02a1d9;             border: solid 1px #ff8cb9;         }         #panel{             display: none;             padding: 40px;         }   
    </style>    
     <script>         $(document).ready(function(){             $("#slide").click(function(){                 $("#panel").slideToggle()             })         }) 
      </script>
3.an

imate（）方法用于创建自定义的动画jQuery停止动画：stop()stop()用于在动画完成前对它进行停止，只能暂停队列中的一个动画，如果队列中有很多个动画，它会结束当前的动画，然后运行下一个动画jQuery–链（chanining)通过jQuery，可以把方法连接在一起，chaining允许我们在一条语句中运行多个方法（在同一元素上）$(“p”).css({color:“red”}).slideUp(1500).slideDown(1500).animate(backgroundColor:“blue”);
jQuery停止动画：stop()
stop()用于在动画完成前对它进行停止，只能暂停队列中的一个动画，如果队列中有很多个动画，它会结束当前的动画，然后运行下一个动画
写二级菜单

 <!DOCTYPE html> <html lang="en"> 
 <head>    
  <meta charset="UTF-8">   
   <title>Title</title>    
    <script src="jquery-1.8.3.min.js"></script>   
      <style>    
         .two_bar {    
          display:none;    
               margin:0 auto;     }   
                 li {     list-style:none;     }    
                  .two_bar li,.one_bar {    
                   display:block;   
                     text-align:center;
                      font-size:16px;  
                      background-color: #9e3927;  
                      color: #3ae9ff;  
                      border-bottom:1px solid #ffffff;     
                       border-radius:10px;
                        line-height:38px; 
                        overflow:hidden; 
                         height:38px;   
                          width:258px;     } 
                         a:link,a:visited,a:hover,a:active {     text-decoration:none;     } </style> 
                             <script>
                                  $(document).ready(function(){            
                                   $(".one_bar").click(function(){                 
                                   $(this).next().slideToggle();                 
                                   $(this).parent().siblings().children("ul").slideUp();             });
                                            }); 
                                   </script> 
                                   </head> 
                                   <body> 
                                   <div class="top_bar">    
                                    <ul>         
                                    <li>             
                                    <a href="###" class="one_bar">首页</a>             
                                    <ul class="two_bar">                 
                                                <li>时尚</li>                
                                                 <li>新闻</li>                 
                                                  <li>美食</li>             
                                     </ul>         
                                     </li>         
                                     <li>             
                                           <a href="###" class="one_bar">导航</a>         
                                     </li>         
                                     <li>            
                                           <a href="###" class="one_bar">关注</a>         
                                      </li>        
                                       <li>         
                                           <a href="###" class="one_bar">榜单</a>         
                                           </li>    
                                            </ul> 
                          </div> 
                         </body> 
                       </html>

卡卡莉莉丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训知识点

一：Jquery的使用1：加入Jquery库文档就绪（需要写一个函数（document），ready（function（）），相当于（document），ready（function（）），2：jQuery的基本语法:(select).action()。jQuery的选择器：当要选择“p标签的第一个和第三个”，可以 (select).action()。二：jQuery动画效果:1：隐藏和显示...
复制链接

扫一扫