Jquery  พัฒนามาจาก Javascript

ด้วย Slogan ที่ว่า

      Write Less , Do more 

เขียน js ได้สั้นลง เข้าถึง Dom ได้ง่าย

-เวลาอ้างอิง jquery ต้องไว้ด้านบนสุดของ <script></script> ที่มีการเรียก jquery เสมอ มิฉะนั้นจะไม่สามารถใช้คำสั่ง JQuery ได้

--------------------------------------------------------------------------

<script>

document.addEventListener('DOMContentLoaded', function() {

        document.getElementById('test').style.color = 'blue';

}); 

</script>

--------------------------------------------------------------------------

<script>

window.addEventListener('load', function() {

        document.getElementById('test').style.color='blue';

});

</script>

--------------------------------------------------------------------------

</script>

$(document).ready(function(){

});

// หรือ

$(function(){      });

</script>

--------------------------------------------------------------------------

Event Handler

<script>

$(function(){

           $('#test').mouseenter(function(){

                        $(this).css("color",'red');

           });

          $('#test').mouseleave(function(){

                       $(this).css("color",'black');

           });

          $('#test').mouseup(function(){

                       $(this).hide();

          });

          $('#test').on({

                   mouseenter:function(){

                          $(this).css("color",'blue');

                   },

                  mouseleave:function(){

                         $(this).css("color",'green');

                  },

                 mouseup:function(){

                         $(this).css("color",'red');

                  }

          });

});

</script>

--------------------------------------------------------------------------

ใช้งาน Effect

- show(2000); hide();

- toggle(2000);

- fadeIn(“slow”);

-fadeOut("slow");

- slideDown(2000);

- slideUp(2000);

--------------------------------------------------------------------------

ใช้งาน Animate

Animate Method

  - animate()

<style>

#test{

  width:100px;

  height:100px;

  background-color:red;

  position:relative;   // ต้องกำหนดคำสั่งนี้ด้วย

}

</style>

$('#btn').click(function(){

        $('#test').animate({

    left:"250px",

        });

        $('#test').animate({

    top:"250px",

        });

});

ทำตามลำดับบนลงล่าง

• stop();

Callback function หลัง effect method  ที่มี เวลา

เพราะ js จะทำงานทันที ไม่รอ จึงต้องใช้ callback function หลังเวลา เพื่อให้เสร็จแล้วค่อยทำ

หรือทำแบบ method chaining

$(‘#test’).slideDown(5000).slideUp()

--------------------------------------------------------------------------

ใช้งานกับ DOM,HTML

 .text();  // เอาแต่ข้อความใน tag มาแสดง

 .html();

         ต่างกันตรงที่  แสดง markup เช่น <b> มาด้วย

 .val();

        เอาค่าจากช่อง input

 .attr(“href”);  // ดึงค่าจาก attribute มาแสดง

$('#btn').click(function(){

        $('#test').slideDown(5000).slideUp(2000,function(){

               alert($('#a').attr('href'));

        });

});

.attr(“href”,’www.youtube.com’);  // เซ็ตค่า

.attr({“href”:”www.youtube.com”,”title”:”Link”);  // เซ็ตค่าหลายตัว

--------------------------------------------------------------------------

Append Text , Append List Item หลังที่มีอยู่แล้ว

append() เพิ่มหลังสุดเป็นลูกคนสุดท้ายใน List ที่เป้าหมายอยู่ , after()เพิ่มหลังเป้าหมายเลย

prepend() เพิ่มหลังสุดเป็นลูกคนสุดท้ายใน List ที่เป้าหมายอยู่ , before()เพิ่มหลังเป้าหมายเลย

.remove()

.empty()

--------------------------------------------------------------------------

ใช้งานกับ Style

addClass(’test’);

removeClass(’test’);

.css();

.css({“color”:”red”,”background-color”:})

--------------------------------------------------------------------------

JQuery Traversing

การท่องไปใน Dom เพื่อระบุเป้าหมายได้ สามารถนำประยุกต์ให้ใช้พวก css แบบหลาย element ได้

Traversing UP (ancestors)

parent(); 

parents();

parentsUtil(“div.ancestors”);

—————————

Traversing Down (Descendant)

children();

find(‘’).css(“.....”,”......”)

siblings(); ยกเว้นตัวมันเอง

next(); // ต่อจากเป้าหมาย  1 อัน

nextAll();// ต่อจากเป้าหมายทั้งหมด

nextUtil(“h6”)// ต่อจากเป้าหมายทั้งหมดจนถึง h6

prev();

prevAll();

preUtil(“h1”)

--------------------------------------------------------------------------

Filter

$(“div”).first()

$(“div”).last()

$(“div”).eq(0) => นับ index แบบ array. ,eq=ย่อมาจาก equal

$(“div”).filter(‘.demo’)=>ทุกตัว ที่มี class demo

$(“div”).not(‘.demo’)=> ทุกตัว ที่ไม่มี class demo

<body class="ancestors"></body>

.ancestors *{    }

ตัวอย่าง สร้าง style ใช้ * แปลว่าทั้งหมด