jquery의 기본문법

<script type="text/javascript">

jQuery(document).ready(function() {    //방법1

//$(document).ready(function() {      //방법2

$("*").css("border", "1px solid #ff0000");  //$("*") : 적용범위... *는 전체를 의미한다.

$("span").css("border", "3px dotted blue");  //엘리먼트.

$("#content").css("background","cyan"); //#content : id가 content인 것에 조건을 준다.

$(".my").css("background", "yellow");   //class="my"인 녀석에게

$("h2").addClass("korea");

});

</script>

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

<script type="text/javascript">

$(document).ready(function() {

$("div > a[target]").css("background", "#aaa"); //div > a  디브태그 안에 있는 에이태그라는 뜻.

$("div > a[href='http://naver.com']").css("background", "#ff0");

$("div > a[href!='http://naver.com']").css("font-size", "24px");

//$("div[id='content-1']").css("background", "#abc");

$("div[id^='cont']").css("background", "#abc");   // id^ =   cont로 시작하는...(앞에 글자 패턴과 같으면 적용)

$("div[id$='1']").css("background", "#cba");   // id$ =   1로 끝나는...(뒤의 글자 패턴과 같으면 적용)

$("input[name*='한국']").css("background", "red");   //포함된

$("input[name~='한국']").css("background", "silver"); //독립단어

});

</script>

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

<script type="text/javascript">

/* $(function() {});      //이렇게 쓸수도 있다. 그러나 별로 추천하진 않음. */

$(document).ready(function() {

var p = $("p");  // 같은 뜻 var p = document.getElementsByTagName("p");

//alert("배열 크기 : " + p.length + ", " + p.size());

p[0].style.color = "red";

$("p").eq(1).css("color", "aqua");  //eq(1) = p[1]

//alert($("p").index($(".kbs"))+"번째 요소");

$("p").eq($("p").index($(".kbs"))).css("color","yellow");

var arr = $("h1~p");   //$("요소1~요소2")   <- 요소1에서 검색 시작 즉, h1부터 뒤에 세 개의 p만 검색한다. 

//alert("배열 크기 : " + arr.length + ", " + arr.size());

var result ="";

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

//result += arr[i].innerHTML;   //js  

//result += $(arr[i]).html();    //jquery

//result += arr[i].innerText;    //js - 순수하게 텍스트만 뽑아 내는거

result += $(arr[i]).text();     //jquery - 위와같음

}

//alert(result);

//var arr2 = $("p:not(.kbs)"); // p:not(.kbs)  = <p> 태그중에 class의 이름이 kbs가 아닌 녀석들만. 즉 not!

//alert("배열 크기 : " + arr2.length + ", " + arr2.size());

//실행 중에 요소 추가

//$("b").prepend("<h2>요소 추가(기존 요소 앞)</h2>");   //prepend <b>태그 앞에!

//$("<h2>요소 추가(기존 요소 앞)</h2>").prependTo("b");   //위와 같다.  

//$("b").append("<h2>요소 추가(기존 요소 뒤)</h2>");   //prepend <b>태그 뒤에!

$("<h2>요소 추가(기존 요소 뒤)</h2>").appendTo("b");  //위와 같다.

//each

var arr3 = "";

$("li").each(function(){

//arr3 += $(this).html() + ", ";

arr3 += $(this).text() + ", ";

});

alert(arr3);

});

</script>