Đôi khi làm web bạn sẽ gặp những trường hợp lệnh Javascript phải chạy sau khi việc load trang đã hoàn tất, nếu không thì sẻ gặp lỗi.

Việc đó sẽ được giải quyết bằng một đoạn Script jQuery đơn giản sau:

<script type="text/javascript">
$(window).bind("load", function() { 

// lệnh javascript mà bạn muốn chạy sau khi load trang xong 

});
</script>

Giải thích:
Phương thức bind() gắn một hoặc nhiều sự kiện xử lý cho các thành phần đã được chọn, và chỉ rõ một hàm để chạy khi sự kiện đó xảy ra.
Thành phần được chọn ở đây là window và sự kiện là load nghĩa là khi cửa sổ được load xong thì sẻ chạy lệnh mà bạn muốn.

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery 
- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Lấy đường dẫn URL của trang hiện tại bằng PHP

Sau đây là trích dẫn cách làm menu dropdown bằng css và jquery rất đơn giản nhanh chóng chỉ với 3 bước cho mọi người cùng tham khảo:

Bước 1. HTML
Coppy đoạn code html dưới vào vị mà bạn muốn đặt menu:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Bước 2. CSSBạn coppy đoạn css này vào file css của bạn:

ul.topnav {
 list-style: none;
 padding: 0 20px; 
 margin: 0;
 float: left;
 width: 920px;
 background: #222;
 font-size: 1.2em;
 background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
 float: left;
 margin: 0; 
 padding: 0 15px 0 0;
 position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;
}
ul.topnav li a:hover{
 background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
 list-style: none;
 position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
 left: 0; top: 35px;
 background: #333;
 margin: 0; padding: 0;
 display: none;
 float: left;
 width: 170px;
 border: 1px solid #111;
}
ul.topnav li ul.subnav li{
 margin: 0; padding: 0;
 border-top: 1px solid #252525; /*--Create bevel effect--*/
 border-bottom: 1px solid #444; /*--Create bevel effect--*/
 clear: both;
 width: 170px;
}
html ul.topnav li ul.subnav li a {
 float: left;
 width: 145px;
 background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
 padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
 background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}

Bước 3. jQuery
Chèn đường dẫn jQuery vào trang web của bạn

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

Chèn đoạn script sau đặt dưới link jQuery:

$(document).ready(function(){

 $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
 
 $("ul.topnav li span").click(function() { //When trigger is clicked...
  
  //Following events are applied to the subnav itself (moving subnav up and down)
  $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

  $(this).parent().hover(function() {
  }, function(){ 
   $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
  });

  //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() { 
   $(this).addClass("subhover"); //On hover over, add class "subhover"
  }, function(){ //On Hover Out
   $(this).removeClass("subhover"); //On hover out, remove class "subhover"
 });

});

Chú ý: Bạn có thể bỏ dấu mũi trên bằng cách bỏ thẻ SPAN như trong hình ra:

Tham khảo: sohtanaka.com

Chúc các bạn thành công!

Nút Roll Top hay còn gọi là nút "Lên đầu trang" dùng để di chuyển nhanh lên đầu trang web mà không cần dùng chuột kéo RollBar. Website của bạn đã có nút này chưa? Nếu chưa có thì hãy cùng Beetiny Blog thực hiện thêm nút này chỉ với 3 bước nhé.

Bước 1: Thêm file thư viện jquery vào website của bạn (Gắn trước thẻ đóng </head>), bạn có thể dùng thư viện jquery trực tuyến của google:

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

Thêm đoạn script dưới đây bên dưới :

<script type="text/javascript">

    $(function() {
        $(window).scroll(function() {

            if($(this).scrollTop() != 0) {

                $('#toTop').fadeIn();   

            } else {

                $('#toTop').fadeOut();
            }

        });
        $('#toTop').click(function() {

            $('body,html').animate({scrollTop:0},800);
        });   

    });

    </script>

Chú ý: đoạn script trên phải nằm dưới link file thư viện jquery.

Bước 2: Viết style cho nút Roll Top, bạn chèn trên thẻ </head> hoặc add vào file css của bạn đoạn css sau:

<style type="text/css">

    #toTop{

        border:1px solid #ccc;

            background:#f7f7f7;

            text-align:center;

            padding:18px;

            border-radius:5px;

            position:fixed; /* this is the magic */

            bottom:10px; /* together with this to put the div at the bottom*/

            right:10px;

            cursor:pointer;

            display:none;

            color:#333;

            font-size:11px;

    }

    #toTop:before{

        content:"";

        position:Absolute;

        width:0;

        height:0;

        border:11px solid transparent;

        border-bottom:11px solid #099;

        left:7px;

        top:-4px;

    }

    #toTop:after{

        content:"";

        position:Absolute;

        width:10px;

        height:12px;

        background-color:#099;

        left:13px;

        top:18px;
    }

    </style>

Bước 3: Chèn nút Roll Top vào website, bước này rất đơn giản chép thẻ div bên dưới vào vị trí bất kì trên website của bạn, nên nhớ là nằm trong thẻ <body> nhé:

<div id="toTop"></div>

Vậy là xong, bây giờ hãy chạy thử để thấy kết quả!

Chúc các bạn thành công!

Trong jQuery bạn sử dụng method hide() và show() để thực hiện hành động ẩn một thành phần nào đó trong html, cách thực hiện nhanh như sau:

Tạo một file html với đoạn code bên dưới:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Trong file html trên ta có đoạn jQuery tạo hành động ẩn thành phần html là <p> khi click <button> có id là hide và để hiện thành phần <p> ta click <button> có id là show.

Rất đơn giản phải không nào, bạn hãy lưu và mở trên trình duyệt để xem kết quả nhé.

Chúc các bạn thành công!