Webページデザイン実習教室ノート06 DYL

4159 ワード

JQuery学習
jQuery構文
1、${selector).hide(speed,callback)2、$(selector).show(speed,callback)3、speedパラメータは「slow」、「fast」、ミリ秒(1秒は1000ミリ秒)の値をとる隠蔽と表示の速度を規定する.4、$(selector).toggle(speed,callback)
//callbackパラメータは、完了後に実行される関数名を非表示または表示します.
効果練習コードは以下の通りです.





    
    Title
    
    
        $(document).ready(function(){
            $("#button1").click(function (){
                $("p").hide(2000)
            })
            $("#button2").click(function (){
                $("p").show(2000,function (){
                    alert("   ，    ")
                })
            })
            $("#button3").click(function (){
                $("p").toggle(1000,function (){
                    $("p").css({color:"blue"})
                })
            })
        })
    


 jquery

//hide()メソッド:指定した要素を非表示/shoe()メソッド:指定した要素を表示します.

2、スライド効果:slide()コード練習





    
    Title
    
    
    
        $(document).ready(function(){
            $("#slide").click(function (){
                $("#panel").slideToggle()
            })
        })
    


   ，          
hello

//slide()メソッド:slideUp()メソッドは指定した要素を伸ばし、slideDown()メソッドは指定した要素を圧縮します

3、カスタムアニメーションを作成する:animate()メソッド要素を200 pxコード練習に右に移動する




    
    Title
    
    
        $(document).ready(function(){
            $("button").click(function (){
                $("div").animate({left:"200px"},1000,function (){
                    $("div").css({background:"pink"})
                })
            })
        })

$(selector).animate({params}),speed,callback)
//デフォルトでは、すべてのHTML要素に静止した位置があり、移動できません.変更する必要がある場合は、要素のposition属性をabsolute,relative,fixedに変更します.
animate相対値コードを使用した練習




    
    Title
    
    
        $(document).ready(function(){
            $("#button").click(function (){
                $("div").animate({
                    left:"200px",opacity:'0.5',height: '160px',width: '160px'
                })
            })
        })
</head>
<body>
<input type="button" value="    " id="button" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

</code></pre> 
  <p>//     animate()        CSS  ，     ，   animate()     ，    camel           ，eg：css.background color animate ：backgroundColor.</p> 
  <p>  animate()               </p> 
  <pre class="has"><code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js">
    
        $(document).ready(function(){
            $("#button").click(function (){
                var div = $("div")
                div.animate({height:"160px",opacity:0.5},5000)
            })
            $("#button1").click(function (){
                $("div").stop()
            })
           
        })

JS循環はどれらがあります

URL生成方式の進化について述べる