[jQuery] Getting Started with jQuery 01

출처: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

간단한 부분은 제외.

Using selectors and events

$(document).ready(function() {    $("#orderedlist").addClass("red");  });

id가 orderedlist 인 것을 찾아서 red 클래스를 추가

$(document).ready(function() {    $("#orderedlist > li").addClass("blue");  });

orderedlist 가 갖는 모든 li 태그에 blue 클래스 추가

$(document).ready(function() {    $("#orderedlist li:last").hover(function() {      $(this).addClass("green");    },function(){      $(this).removeClass("green");    });  });

orderedlist 가 갖는 마지막 li 태그 위에 커서가 오면 green 클래스를 추가하고, 커서가 나가면 green 클래스를 제거

$(document).ready(function() {    $("#orderedlist").find("li").each(function(i) {      $(this).append( " BAM! " + i );    });  });

orderedlist 의 li 태그들을 찾아서, 각각의 li 태그 내의 값(<li>XXX</li>)에 BAM! 현재 카운트를 붙인다.
each(function(i) {...}) 에서 i 가 루프의 현재 카운트 값. 시작은 0.

$(document).ready(function() {    // use this to reset a single form    $("#reset").click(function() {      $("form")[0].reset();    });  }); $(document).ready(function() {    // use this to reset several forms at once    $("#reset").click(function() {      $("form").each(function() {        this.reset();      });    });  });

폼 리셋하기.
위는 폼이 1개일 때. 밑은 여러 개일 때.

$(document).ready(function() {    $("li").not(":has(ul)").css("border", "1px solid black");  });

ul 태그를 갖지 않는 모든 li 태그에 주어진 css 스타일을 적용(border를 1px solid black으로).
원래는 모든 li 태그를 찾고 그 중에서, ul 태그를 갖는 li 태그를 제거.

$(document).ready(function() {    $("a[name]").css("background", "#eee" );  });

XPath 형식의 객체 선택.
name 속성을 갖는 a 태그를 선택해서 css 스타일 적용.