Selector Advanced in Jquery


Tiếp phần bài với các selectors . Bài này chúng ta nâng cao lên thao tác với các DOM

Source code : Download

Chúng ta sẻ đi qua 1 vài ví dụ cơ bản :

  • $(“#your_div”).html(” Hello World !!! “);

Chúng ta tìm element với id = your_div và thiết lập innerHTTML chuổi Hello World !!! vào trong đó.

  • $( “#your_button”) click(yourFunction );

Add hàm yourFunction của bạn vào khi thực hiện onClick handler trên button có id = your_button

  • $(“div.msg”).addClass(“important”).show();

Tìm all các element <div class=”msg”> mà chúng bị ẩn ( hidden) , add CSS style là important, sau đó sẻ visible chúng lên.

  • $( “form#some-id input[type =text]”).val( “” );

Chúng ta clear values all các textfields trong <form id=”some-id”> .

Basic Selectors
Selector Ý nghĩa Ví dụ
element Tìm các phần tử có <tag-name> . Trả về 1-N element $(“li”)$(“p”) Return all li elementReturn all p element
#id Tìm element với id tương ứng.Trả về 0-1 elements $(“#name”) Return element với<…id=”name”>
.class Tìm tấc cả element có tên CSS style . $(“.blah”) as $(“.*blad”). $(“.important”) Return all elements với <…class=”important”>
element.class Tìm all element với class name tương ứng $(“div.blah”) return all element <div class=”blah”>
element#id Tìm phần tử có tag name với id tương ứng $(“form#blah”) Return element <form id=”blah”> tương tự $(“#blah”).
* Tìm all các element trong toàn page. Sử dụng “not” để loại bỏ 1 số phần tử .$(“*”).not(“html,head,title,body) bỏ qua các thẻ như html, head, title, body. $(“*”) Return all element
Hierarchical Selectors
s1 s2 Element s2 nằm bên trong s1. kể cả trực tiếp or gián tiếp. $(“div.hehe span.haha”) Tìm all <span class=”haha”> nó thì nằm bên trong <div class=”hehe”> .trong đây ..></div>
s1 > s2 Element s2 phải trực tiếp nằm bên trong s1. $(“div.foo > span.bar”) Tìm all <span class=”bar”> element nằm trực tiếp trong <div class=”foo”>.
s1 , s2 tuần tự với all các element $(“ul, ol, li.blah”) tấc cá các thẻ ul, ol và < li class=”blah”>
s1 + s2 element s2 phải nằm gần nhất sau s1. bỏ qua các s2 tương tự phía sau $(“label + input”) All input element ngay lập tức phía sau lable element
s1 ~ s2 all element s2 phải nằm sau s1 bên trong s1 element . Không có tác dụng phía ngoài. $(“label ~ input”) All input elements

Đăng ký Event handlers

$(function() { // Load trước khi DOM load vs Sau khi image load

$(“#button1”).click(button1Handler);
$(“#button2”).click(button2Handler);

$(“ol.blah li”).hover (onHandler, offHandler );
$(“input.foo”).keyup(keyHandler);

});

Bài tập 1 : Event click trên button, addClass, removeClass, Show, Hide, hover

d1

Tìm event mà chúng ta muốn biết và xem Demo :http://api.jquery.com/

Tham khảo thêm tại : CourseServlet.com

Attribute Selectors

d1

Form Element Selectors

d2

Advanced Operators

d3

Positional Selectors

d4

Content Filtering Selectors

d5

Event Properties: Details

d6

Bài tập 2 : Sử dụng các Input , attribute, parent, each

hình ảnh :

d1

Bài tập 3 : Sử dụng Positional Selectors để tạo ra Zebra table

d1

Bài tập 4 : event Key code (Event Properties)

d1

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: