jQuery Tutorial

jQuery Tutorial

jQuery 2016

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").on({
//Hover nền màu gray
        mouseenter: function(){
            $(this).css("background-color", "lightgray");
        },
//Đưa chuột vào và đưa ra nền màu blue
        mouseleave: function(){
            $(this).css("background-color", "lightblue");
        },
//Click chuột nhả ra nền màu vàng
        click: function(){
            $(this).css("background-color", "yellow");
        }
    });
});
</script>


<p>Click or move the mouse pointer over this paragraph.</p>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){

//Đặt chuột vào input nền màu gray
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
//Đưa chuột ra nền màu white
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").on("click", function(){
//Click chuột vào thẻ <p> ẩn nội dung thẻ <p>
        $(this).hide();
    });
});
</script>

<p>Click me away!</p>
<p>Click me too!</p>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn nội dung thẻ <p>
        $("p").hide();
    });
});
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn nội dung id test
        $("#test").hide();
    });
});
</script>

<p id="test">This is another paragraph.</p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn tất cả các nội dung
        $("*").hide();
    });
});
</script>

<p>This is another paragraph.</p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button chỉ ẩn thẻ <p> có class="intro"
        $("p.intro").hide();
    });
});
</script>

<h2 class="intro">This is a heading</h2>

<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button chỉ ẩn thẻ <p> đầu tiên
        $("p:first").hide();
    });
});
</script>

<h2>This is a heading</h2>

<p>This is a paragraph.</p> <<=
<p>This is another paragraph.</p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button chỉ ẩn thẻ <li> đầu tiên của <ul> đầu tiên
        $("ul li:first").hide();
    });
});
</script>

<p>List 1:</p>
<ul>
  <li>Coffee</li> <<=
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn thẻ <li> đầu tiên của tất cả các <ul> 
        $("ul li:first-child").hide();
    });
});
</script>

<p>List 1:</p>
<ul>
  <li>Coffee</li> <<=
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li> <<=
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn tất cả các thẻ chứa href
        $("[href]").hide();
    });
});
</script>

<p><a href="http://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

Run demo

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn thẻ chứa target="_blank"
        $("a[target='_blank']").hide(); //Ngược lại $("a[target !='_blank']")
    });
});
</script>

<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn thẻ button
        $(":button").hide();
    });
});
</script>

<button>Click me</button>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
//Sự kiện css nền màu vàng trên thẻ <tr> đầu và nhảy cóc
    $("tr:even").css("background-color", "yellow");
});
</script>

<table border="1">
  <tr>
    <th>Company</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr> ...

</table>


Company
Country
Alfreds Futterkiste
Germany
Berglunds snabbköp
Sweden
Centro comercial Moctezuma
Mexico
Ernst Handel
Austria
Island Trading
UK

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
//Sự kiện css nền màu vàng trên thẻ <tr> thứ 2 và nhảy cóc
    $("tr:odd").css("background-color", "yellow");
});
</script>

<table border="1">
  <tr>
    <th>Company</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
</table>


Company
Country
Alfreds Futterkiste
Germany
Berglunds snabbköp
Sweden
Centro comercial Moctezuma
Mexico
Ernst Handel
Austria
Island Trading
UK

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
//Click id hide ẩn thẻ <p>
    $("#hide").click(function(){
        $("p").hide();
    });
//Click id show hiển thị thẻ <p>
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

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

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

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button ẩn thẻ <p> trễ time 1000
        $("p").hide(1000);
    });
});
</script>

<button>Hide</button>

<p>This is a paragraph with little content.</p>

Run demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
//Click button lần 1 ẩn thẻ <p> lần 2 hiển thị thẻ <p>
        $("p").toggle();
    });
});
</script>

<button>Toggle</button>

<p>This is a paragraph with little content.</p>

Run demo