자바스크립트 위치찾기

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

html에서 자바스크립트 파일을 추가하는 것이다. C언어의 include와 동일하다.

$(document).ready(function(){

$('#element').css('color' , 'red');

$('.a').css('color', 'blue');

});

소스코드 밑까지 실행이 끝나면 여기로 돌아와 실행을 한다.

$(function(){

$('#element').css('color' , 'red');

});

와 같다.

element아이디 선택

$(function(){

$('#element').css('color','red');

});

elements 클래스 선택

$(function(){

$('.elements').css('color', 'red');

});

ul아이디를 가지고있는 ul태그의 자식 태크 li 중 elements 클래스 선택

$(function(){

$('#ul > .elements;).css('color','red');

});

아이디가 element인 엘리먼트 바로 아래 엘리먼트 변경

$(document(){

$('#element + li').css('color', 'red');

});

속성 tilte의 값이 attr인 엘리먼트 색 변경

$(function(){

$('[title=attr]').css('color', 'red');

});

속성값이 title인것을 찾고 싶다면 [title] 을 해도 무방하다.

아이디가 el인 ul태그의 자식 엘리먼트 li를 선택하고 첫번째 엘리먼트 선택

$(document(){

$('#el > li:first').css('color', 'red');

});

아이디가 el인 ul태그의 자식 엘리먼트 li를 선택하고 마지막 엘리먼트 선택

$('#el > li:last').css('color', 'red');

짝수 엘리먼트 선택 - 인덱스 번호 0부터 시작을 하여 0,2,4,6

$('#el > li:even').css('color', 'red');

홀수 엘리먼트 선택

$('#el > li:odd').css('color', 'red');

아이디가 el인 엘리먼트의 자식 엘리먼트 li 태그 중 index가 3인것 선택

$(function(){

$('#el > li:eq(3)').css('color', 'red');

});

index가 3초과인것

$('#el > li:gt(3)').css('color', 'red');

index가 3미만인것

$('#el > li:lt(3)').css('color', 'red');

아이디가 el엘리먼트의 자식 엘리먼트중 p태그를 가지고 있는 태그 선택

$(function(){

$('#el > li:has(p)').css('color', 'red');

});

아이디가 el엘리먼트의 자식 엘리먼트 중 클래스네임 a를 가지고 잇는 태그 선택

$(function(){

$('#el > li:not(.a)').css('color', 'red');

});

///////////////////////////////////////////////////////////////////////

size() 메소드로 ul의 자식 엘리먼트의 갯수 세어보기

$(function(){

var a = $('#wrapper > ul > li').size();

});

alert(a);

ul의 자식 엘리먼트  중 세번쨰 엘리먼트의 색을 바꾸시오

$(function(){

$('#wrapper > ul > li').eq(2).css('color', 'red').css('background-color', 'blue');

});

//css를 여러개 하고 싶을 떄 계속 붙여서 쓰면 된다. .css()까지 하면 태그값이 다시 리턴되어 다시 css를 사용할 수 있다.

첫번쨰 엘리먼트 마지막 엘리먼트 색을 바꾸시오

$(function(){

var a = $('#wrapper > ul > li');

a.first().css('color', 'blue');

a.last().css('color', 'blue');

});

ul의 자식 엘리먼트 중 id가 el인 인덱스 값을 출력

$(function(){

var a = $('#el').index();

alert(a);

});

ul의 자식 엘리먼트 중 클래스의 이름이 el인 엘리먼트 변경

$(function(){

$('#wrapper > ul > li').filter('.el').css('color', 'red');

});

slice() 메서드를 이용하여 해당 위치의 색 변경

$(function(){

$('#wrapper > ul > li').slice(2,5).css('color', 'red');

});

li엘리먼트 중 자식으로 ul엘리먼트 를 가지고 있는 엘리먼트 찾으시오

$(function(){

$('#wrapper > ul > li).has('ul').css('color', 'red');

});

ul엘리먼트 자식 엘리먼트를 순환하여 모든 색을 바꿔주세요.

$(function(){

$('#wrapper > ul > li').each(function(i){

$(this).css('color', 'red');

});

});