반응형

<ul id="destinations">

<li>AAA</li

<li>BBB</li

<li>CCC</li

</ul>


destinations의 li를 전체 잡고 싶으면

$("#destinations li");


=======================================

<ul id="destinations">

<li>AAA</li

<li>

<ul id="france">

<li>BBB</li

</ul>

</li>

</ul>


france의 li를 전체 잡고 싶으면

$("#destinations > li");


=======================================


<ul id="destinations">

<li>AAA</li

<li>

<ul id="france">

<li>BBB</li

</ul>

</li>

<li class='promo'>Rio</li>

</ul>


promo와 france를 잡고 싶으면


$(".promo, #france");


=======================================


CSS-like pseudo classes


첫번째 li잡기(#0)

$("#destinations li:first");


가운데 li잡기(#1)

$("#destinations li:odd");


마지막 li잡기(#2)

$("#destinations li:last");


첫번째, 마지막 li잡기

$("#destinations li:even");


=======================================


1번 문제

$("#tours li")


2번 문제

$("#tours > li")


3번 문제

$(".asia, .sale")


4번 문제

$("#tours li:first")


5번 문제

$('#tours > li:even')


반응형

'Java > jQuery' 카테고리의 다른 글

1.2 Using jQuery  (0) 2014.02.19
1.1 What is jQuery?  (0) 2014.02.19
반응형

1. down jQuery

2. load it in your HTML document

<script src="jquery.min.js"></script>

3. start using it

<script src="application.js"></script>


===========================================


<h1>Where do you want to go?</h1>

<ul id="destinations">

<li>Rome</li>

<li>Paris</li>

<li class='promo'>Rio</li>

</ul>


We can find elements by ID or Class

css                 jQuery

p{...}          <-> $("p");

#container{...} <-> $("#container")

.articles{...}  <-> $(".articles");


===========================================


ID로 찾기

$("#destinations");


class로 찾기

$(".promo");


===========================================

1번문제

<script src="jquery.min.js"></script>


2번문제

<script src="application.js"></script>


3번문제

$('h2').text('vacation');


4번문제

$('#vacations')


5번문제

$('.america')


반응형

'Java > jQuery' 카테고리의 다른 글

2.1 Searching the DOM  (0) 2014.02.19
1.1 What is jQuery?  (0) 2014.02.19
반응형


- jQuery 는 JavaScript의 라이브러리

- 이벤트 탐색, 이벤트 제어, HTML 문서탐색, 동적표현, AJAX제어 가능

- Document Object Model => DOM


- Basic jQuery usage

  jQuery(<code>);

- How jQuery Accesses The DOM

  jQuery(document);


- CSS selectors

<!DOCTYPE html>

<html>

<head>

<title>jQuery Adventures</title>

</head>

<body>

<h1>Where do you want to go?</h1>

<p>Plan your next adventure.</p>

</body>

</html>


h1 { font-zie: 3em; }

p { color: blue; }


jQuery("h1"); == ${"h1"};

jQuery("p"); == ${"p"};


1번문제

>$("h2")

2번문제

>$("span")

3번문제

>$("span").text()

4번문제

>$("span").text('$100')

5번문제

>$(document).ready(function(){});


반응형

'Java > jQuery' 카테고리의 다른 글

2.1 Searching the DOM  (0) 2014.02.19
1.2 Using jQuery  (0) 2014.02.19

+ Recent posts

티스토리툴바