JQuery의 몇 가지 유용한 기교

4569 단어
JQuery 코드
/*        :JQuery filter attr
 *           :DOM contextmenu
 *       :DOM scrollTo
 *     Css   :JQuery filter Element Attribute
 *         : Css html.css parseFloat
 */
//  DOM    
$(document).ready(function () {

    /*    href   http             */
    // ^    ,  :        
    $("a[href ^='http']").attr("target", "_blank");

    /*        */
    //DOM contextmenu       
    $(document).bind("contextmenu", function (e) {
        alert(("No right-clicking!"));
        //     ,           
        return false;
    });

    /*        */
    //id="top"     click    
    $('#top').click(function () {
        //      
        $(document).scrollTo(0, 500);
    });


    /*        css    */
    //      href     link   href   
    $("a.cssSwap").click(function(){
        $("link[rel=stylesheet]").attr("href",$(this).attr("rel"));
    });


    /*          、  、   */
    //      , html      font-size
    var originalFontSize = $("html").css("font-size");
    //        
    $(".resetFont").click(function () {
        $("html").css("font-size", originalFontSize);
        //JavaScript     
        return false;
    });

    //    ,     class   increaseFont
    $(".increaseFont").click(function () {
        //           px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //        ,parseFloat()  float      
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //        
        var newFontSize = currentFontSizeNumber * 1.1;
        //     
        $("html").css("font-size", newFontSize);
        //JavaScript     
        return false;
    });

    //    ,     class   decreaseFont
    $(".decreaseFont").click(function () {
        //           px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //        ,parseFloat()  float      
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //        
        var newFontSize = currentFontSizeNumber * 0.9;
        //     
        $("html").css("font-size", newFontSize);
        //JavaScript     
        return false;
    });
});

 
Html 코드:
<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>JQuery      </title>
    <!--       -->
    <link type="text/css" rel="stylesheet" href="css/background-white.css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="script/helpful-tricks.js"></script>
</head>

<body>
<header>
    <div><p>       </p>
        <a href="#" class="cssSwap" rel="css/background-blue.css">    </a>
        <a href="#" class="cssSwap" rel="css/background-green.css">    </a>
        <a href="#" class="cssSwap" rel="css/background-yellow.css">    </a>
    </div>
    <br/>

    <div><p>      </p>
        <a class="resetFont" href="#">      </a>
        <a class="increaseFont" href="#">      </a>
        <a class="decreaseFont" href="#">      </a>
    </div>
</header>
<div><p>        </p>
    <a href="http://www.sina.com.cn">  </a><br/>
    <a href="http://www.sohu.com.cn">  </a><br/>
    <a href="http://www.cnblogs.com">   </a><br/>
</div>
<div class="layout-bottom">
    <a id="top" href="#">      </a>
</div>
</body>
</html>

좋은 웹페이지 즐겨찾기