<style>

.selected { color:red; }

.highlight { background:yellow; }

</style>

<p id="subject" name="world">hello</p>

<p id="content"></p>

<div>

    <ul>

        <li class="g1">list 1</li>

        <li class="g1">list 2</li>

        <li class="g2">list 3</li>

        <li class="g3"><span>list 4</span></li>

    </ul>

</div>

1. subject의값을얻기

var subject = $("#subject").text();

2.subject의 name속성값얻기

var name= $("#subject).attr("name");

3.content에값을설정하기

$("#content").text("world");

4.subject의 name속성값을변경하기

$("#subject").attr("name","helloword");

5. 개체에 CSS적용하기

$("#subject").addClass("selected");

$("#content").addClass("highlight");

$("li").eq(2).addClass("selected");

$("li").filter(".g1").addClass("highlight");

$("li").find("span").addClass("selected");

6. 태그p의 id와 innerHTML

var arrtag = $("p");

for(i=0; i<arrtag.length; i++) {

    alert(arrtag[i].id + " " + arrtag[i].tagName + " " + arrtag[i].innerHTML);

}

7. 태그p를 클릭했을 때

$("p").click(function() {

    alert("click");

});

기타 유용한 Attribute Method정리

Useful Attribute Methods:

Following table lists down few useful methods which you can use to manipulate attributes and properties:

Similar to above syntax and examples, following examples would give you understanding on using various attribute methods in different situation:

• $("#myID").attr("custom") : This would return value of attribute custom for the first element matching with ID myID.

• $("img").attr("alt", "Sample Image"): This sets the alt attribute of all the images to a new value "Sample Image".

• $("input").attr({ value: "", title: "Please enter a value" }); : Sets the value of all <input> elements to the empty string, as well as sets the title to the string Please enter a value.

• $("a[href^=http://]").attr("target","_blank"): Selects all links with an href attribute starting with http:// and set its target attribute to _blank

• $("a").removeAttr("target") : This would remove target attribute of all the links.

• $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); : This would modify the disabled attribute to the value "disabled" while clicking Submit button.

• $("p:last").hasClass("selected"): This return true if last <p> tag has associated classselected.

• $("p").text(): Returns string that contains the combined text contents of all matched <p> elements.

• $("p").text("<i>Hello World</i>"): This would set "<I>Hello World</I>" as text content of the matching <p> elements

• $("p").html() : This returns the HTML content of the all matching paragraphs.

• $("div").html("Hello World") : This would set the HTML content of all matching <div> to Hello World.

• $("input:checkbox:checked").val() : Get the first value from a checked checkbox

• $("input:radio[name=bar]:checked").val(): Get the first value from a set of radio buttons

• $("button").val("Hello") : Sets the value attribute of every matched element <button>.

• $("input").val("on") : This would check all the radio or check box button whose value is "on".

• $("select").val("Orange") : This would select Orange option in a dropdown box with options Orange, Mango and Banana.

• $("select").val("Orange", "Mango") : This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.