전체 글266 jQuery append appendTo a.append.b a에 b를 추가한다. append가 a를 가리키고 있다. 뒤에 .css를 붙이면 a에 대한 .css로 적용된다. b.appendTo.a b를 a에 넣는다. appendTo가 b를 가리키고 있다. 뒤에 .css를 추가하면 b에 대한 .css로 적용된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $('#result').append($(this).clone()); //이렇게 쓰면 기존에 있던 '내용추가'자료가 사라진다. //.clone()을 붙여 복제한다 //div#result 전체의 배경이 핑크색이 됨 $('#result').appendTo('aaa').css('background-color', 'pink'); //색칠된 'aaa'를 resul.. 2019. 12. 11. jQuery Effects 나타내기 .show() .slideDown() .fadeIn() 숨기기 .hide() .slideUp() .fadeOut() .toggle() : 클릭할때마다 나타내고 숨기기 1 2 3 4 5 6 7 8 9 10 11 12 13 $('#show').click(function(){ //show() $('#result').show(); //fadeIn() $('#result').fadeIn(200); //sldieDown $('#result').slideDown(); //css잡아주기 $('#result').show(2000,function(){ $(this).find('p') .css('color','red') .show(); }); https://api.jquery.com/category/effects/ 2019. 12. 11. // jQuery $(this) 2019. 12. 11. 화이팅 https://medium.com/jung-han/n명의-개발자-n개의-조언-e066a29a39ca https://medium.com/@bgh3470/2019년-개발자의-회고록-fe08102e1dad 2019. 12. 11. //jQuery find와 end 8_.html 정리해서 올리기 2019. 12. 11. jQuery each 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //1번째 each /* let d = $('div').each();*/ let d = $('div').each(function(index, item){ // console.log(index); //0부터3 출력 // console.log(item); //a-1부터 a-4 출력 return $(item).text($(item).text() + "입니다"); //아이템의 텍스트에(아이템 텍스트를) 넣는다? }); //2번째 each 배열을 사용할때는 $.each사용 $.each(['a','b','c'], function(index,value){ // console.log(index); //0,1,2 // con.. 2019. 12. 11. // jQuery sibling parent parents end filtering 내용일듯(아마도) sibling : 형제요소 parent : 바로 위 부모요소 parents : 조상 end : 이전 요소 집합을 반환 2019. 12. 11. jQuery add,remove,has,toggle Class addClass() 문서 객체의 클래스 속성을 추가 removeClass 클래스 속성 제거 hasClass 클래스 속성 검사 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //com으로 끝나는~ $z $('a[href$="com"]') .addClass('test'); //css에 있는 클래스 가져오기!*/ //mailto로 시작하는~ ^ $('a[href^="mailto"]') .addClass('green'); // google을 포함하는~ * $('a[href*="google"]') .addClass('red'); //link걸은 js파일 .red{ color:palevioletred; } .green{ colo.. 2019. 12. 11. /// jQuery 3개 메서드체인, 객체,콜백함수 4_selector.html 정리해서 올리기 2019. 12. 11. jQuery find와 filter find() : 현재 요소 집합의 자식요소에서 해당 조건의 요소를 찾음 filter() : 현재 요소 집합에서 해당 조건의 요소를 찾음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //find:children값을 찾아주는것 // $('p .middle) // p태그에 직접 혹은 간접으로 middle인 클래스를 찾아라! let data1=$('p').find('.middle'); //filter:걸러주는것 // $('p.middle') // p태그 이면서 middle클래스를 가지고 있는것 $(document).ready(function(){ let data2=$('p') .css('border','1px solid black') .filter('.middle').css('backgrou.. 2019. 12. 11. jQuery 속성 선택자(attribute) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 속성 선택자 -attribute // a태그의 href속성 // *$('a[href=]')*/ // 일치하는~ = $('input[type="text"]') //input태그의 type속성 .val("hello") .css('background-color','pink'); //com으로 끝나는~ $ $('a[href$="com"]') .addClass('test'); //css에 있는 클래스 가져와서 적용시키기 // .test{ // background-color: forestgreen; // color:floralwhite; // } //mailto로 시작하는~ ^ $('a[.. 2019. 12. 10. jQuery 위치관련 필터 선택자(index) eq(n) : n번째에 위치하는 문서 객체를 선택 not(선택자) : 선택자와 일치하지않는 문서 객체 선택 1 2 3 4 5 // eq(n) div n번째에 css를 적용시킴 $('div:eq(1)').css('background-color','yellow'); // not(.a) - 클래스 a 가 아닌 div에 적용 $('div:not(.a)').css('background-color','darkgreen'); contains(문자열) : 문자열이 포함되는 td에 css 적용 1 2 let data=$('td:contains("최솔이")') .css('border','1px solid silver'); nth-child (index even odd) index 예를들어 3n+1 even 짝수 odd 홀.. 2019. 12. 10. jQuery id/class별 css 설정 방법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 // 먼저 body 에 class와 id를 잡아준 div를 생성하고, style에서 네모박스로 만들어준다 //body 내용 a1 a2 a3 a4 //네모박스로 설정 div{ width:100px; height: 100px; border: 1px solid silver; float: left; margin-right: 10px; } // id와 class 별로 css설정하는 방법 $(document).ready(function(){ // id="t1" let v1=$('#t1').css('color','yellow'); // class=.. 2019. 12. 10. 이전 1 ··· 11 12 13 14 15 16 17 ··· 21 다음 반응형
