본문 바로가기

Steve World

2-2 filter() DOCTYPE html>Insert title here$(function(){/*$('h3:even').css({backgroundColor:'black',color: 'white'});같은 의미로 사용 가능*/$('h3').filter(':even').css({backgroundColor:'hotpink',color:'white'});$('h3').filter(':odd').css({backgroundColor:'orange',color:'yellow'});}); Header-0Header-1Header-2Header-3Header-4Header-5Header-6 더보기
2-1 필터 선택자 요소 콜론 DOCTYPE html>Insert title here $(function(){$('h3:even').css({backgroundColor:'black',color: 'white'});}); Header-0Header-1Header-2Header-3Header-4Header-5Header-6 더보기
꿈틀이 DOCTYPE html>Insert title here $(function(){ $('li').css('display','inline').css('float','left').css('width','100px').css('height','60px').css('text-align','center') .css('line-height','60px'); $('li:nth-child(2n+1)').css('background','hotpink'); $('li:nth-child(2n)').css('background','orange');$('li:nth-child(1)').css('border-top-left-radius','8px') .css('border-bottom-left-radius','8px');$('li.. 더보기
1-22 jQuery 충돌 방지 DOCTYPE html>Insert title here.high-light{background:orange;} .append::before{content:'※' }.append::after{content:'※'}$.noConflict(); //더이상 jQuery 의 식별자로 $를 사용할 수 없음var j = jQuery; //jQuery 객체를 다른 변수에 저장해서 사용함//jQuery 를 사용j(function(){alert('출동 방지 예제');j('h1').removeClass('high-light'); //클래스 속성 제거j('h1').addClass('append');//클래스 속성 추가});item - 0 더보기
1-21 클래스 속성 $.each DOCTYPE html>Insert title here$(function(){var array=[{name:"네이버", link:"http://www.naver.com"},{name:"다음", link:"http://www.daum.net"},{name:"구글", link:"http://www.google.com"}];var output='';$.each(array, function(index,item){output += '';output += ' ' + item.name +'';output += '';});document.body.innerHTML += output;}); 더보기
1-21 클래스 속성 추가 each DOCTYPE html>Insert title here .high-light-0{background:yellow;}.high-light-1{background:orange;}.high-light-2{background:blue;}.high-light-3{background:green;}.high-light-4{background:red;}.high-light-5{background:gray;} window.onload=function(){var hs = document.getElementsByTagName('h1');hs[0].setAttribute('class','high-light-0');hs[1].setAttribute('class','high-light-1');hs[2].setAttribute('.. 더보기
1-20 클래스 속성 추가, 제거 (addClass, removeClass) DOCTYPE html>Insert title here.high-light{background:yellow;}$(function(){$('h1').addClass('high-light');$('h1').removeClass('high-light');}); item - 0item - 1item - 2item - 3item - 4item - 5 더보기
1-19 요소 DOCTYPE html>Insert title herebody{margin: 50px auto; width:500px}table{margin: 20px auto;border-collapse:seperate;text-align:center}tr{height:50px;} $(function(){$('tr:first').css('background','black').css('color','white');$('td:eq(4)').css('background','#a4ff0b'); $('th:eq(4)').css('background','red'); }); 추천 도서 표 책 제목작가가격 총2권30,000원 스티브잡스월터아이작슨 저, 안진환 역25,000원나를 지키는 말 88손화신, 쌤앤파커스25,000원언어의 마.. 더보기
1-18 위치 필터 선택자 odd, even DOCTYPE html>Insert title herebody{margin: 50px auto; width:500px}table{margin: 20px auto;border-collapse:seperate;text-align:center}tr{height:50px;} $(function(){ $('tr:odd').css('background','red'); $('tr:even').css('background','green'); $('tr:first').css('background','black').css('color','white');}); 추천 도서 표 짝/홀책 제목작가가격 홀총2권30,000원 짝스티브잡스월터아이작슨 저, 안진환 역25,000원홀나를 지키는 말 88손화신, 쌤앤파커스25,000원짝언어.. 더보기
1-17 select option selected DOCTYPE html>Insert title here $(function(){//2초후 코드 실행setTimeout(function(){//변수를 선언//var value = $('select> option:selected').valvar value = $('option:selected').val();//출력alert('선택하신 메뉴는 ' + value + '입니다');}, 2000);});김밥짜장면냉면비빔밥돈까스 더보기

티스토리툴바