html, php, jquery, javascript and css
TRANSCRIPT
HTML, PHP, jQuery, javaScript, CSSMR.SUTTIPONG KULLAWATTANA
jQuery Selectors
$("p").hide()Demonstrates the jQuery hide() method, hiding all <p> elements.
$("#test").hide()Demonstrates the jQuery hide() method, hiding the element with id="test".
$(".test").hide()Demonstrates the jQuery hide() method, hiding all elements with class="test".
$(this).hide()Demonstrates the jQuery hide() method, hiding the current HTML element.
jquery Import Source to develop
If you want to download<script src="jquery-1.10.1.min.js"></script> If you want not to download<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
For example : <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script></head>
jQuery Function & Method
$(document).ready(function(){
// jQuery methods go here...});
$(function(){
// jQuery methods go here...
});
jQuery Selectors
The element Selector (“p”) The #id Selector (#test) The .class Selector (“.test”)
jQuery Selector
$("p")
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});
selector method
More Examples of jQuery Selectors
Syntax Description$("*") Selects all elements (เลือกทัง้หมด)$(this) Selects the current HTML element$("p.intro") Selects all <p> elements with class="intro"$("p:first") Selects the first <p> element$("ul li:first") Selects the first <li> element of the first <ul>$("ul li:first-child") Selects the first <li> element of every <ul>$("[href]") Selects all elements with an href attribute$("a[target='_blank']")
Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements$("tr:odd") Selects all odd <tr> elements
jQuery : click() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head>
<body>
<p>If you click on me, I will disappear.</p><p>Click me away!</p><p>Click me too!</p>
</body></html>
jQuery : dblclick() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head>
<body>
<p>If you double-click on me, I will disappear.</p><p>Click me away!</p><p>Click me too!</p>
</body></html>
jQuery : mouseenter()
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); }); </script> </head>
<body>
<p id="p1">Enter this paragraph.</p>
</body></html>
jQuery : mouseleave() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); }); </script> </head>
<body>
<p id="p1">This is a paragraph.</p>
</body></html>
jQuery : focus() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); }); </script></head>
<body>
Name: <input type="text" name="fullname"><br>Email: <input type="text" name="email">
</body></html>
jQuery : blur() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); });</script></head>
<body>
Name: <input type="text" name="fullname"><br>Email: <input type="text" name="email">
</body></html>
jQuery : hide() and show() <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/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>
jQuery : Speed $(selector).show(speed,callback);
<!DOCTYPE html> <html> <head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head>
<body><button>Hide</button><p>This is a paragraph with little content.</p><p>This is another small paragraph.</p></body></html>
jQuery toggle()
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head>
<body>
<button>Toggle</button><p>This is a paragraph with little content.</p><p>This is another small paragraph.</p></body></html>
jQuery fadeIn() Methods <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head>
<body><p>Demonstrate fadeIn() with different parameters.</p><button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body></html>
jQuery fadeOut() Method <!DOCTYPE html> <html> <head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); </script></head>
<body><p>Demonstrate fadeOut() with different parameters.</p><button>Click to fade out boxes</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body></html>
jQuery fadeToggle() Method <!DOCTYPE html> <html> <head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p><button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body></html>
jQuery slideDown() Method
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script>
<style type="text/css"> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{padding:50px;display:none;}</style></head><body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div></body></html>
Example : $(“*”)ทกุอยา่งภายใน Body หายหมด (Method hide) ด้วย *
<html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("*").hide(); }); });</script></head>
<body><h2>This is a heading</h2>
//document<p>This is a paragraph.</p>
//document<p>This is another paragraph.</p>
//document<button>Click me</button>
//button</body></html>
Example : $(“this”)Tab <button> จะถกูสัง่ให้หายไป แต่ขอ้มูลท่ีเหลือยงัคงอยู่
<html><head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); });</script></head>
<body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button>
</body></html>
Example : $(“p.intro”)ตัวแปร p เรยีก class intro ให้ทำางาน โดยให้ขอ้ความใน Document หายไป
<html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("p.intro").hide(); }); });</script></head>
<body><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>
</body></html>
Example : $(“ul li:first”)Button เรยีก Tag ul li อันดับ 1 ใน list แล้วทำาการลบออก
<html><head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("ul li:first").hide(); }); });</script></head>
<body><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>
</body></html>
CSS Style
<style>.icon-alone {
display: inline-block; }
.screen-reader-text { position: absolute; //สามารถเปล่ียนเป็น Absolute หรอื Relative ก็ได้top: -9999px;left: -9999px;
}</style>