전체 글258 /// 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. jQuery 사용 방법 jQuery 를 사용하는 방법은 다운로드하거나 html 파일에 직접 url을 입력해서 사용할수있다. 1 2 (내용) jQuery 문장 쓰는 방법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // .ready()는 window.onload 기능 //자체에 for문이 장착되어있음. // 1번째 방법 // 생략 가능한것도 모두 씀. // 유지보수 시 무엇을 의미하는지 알기 쉬우므로 첫번째 방법을 쓰는게 좋다. $(document).ready(function(){ $('div').css('border', '1px solid silver'); }); // 2번째 방법 $().ready(function(){ $('div').css('background-color', 'sil.. 2019. 12. 10. JS children & childnode children : 자식정보확인 childnode : white space포함 정보 확인 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 36 37 38 39 Document window.onload=function(){ let lst=document.getElementsByClassName('menu'); let chlst=lst[0].children; console.log(chlst); //li,li,li,li 출력 console.log(chlst.length); let chlst2=lst[0].childNodes; console.log(chlst2); //text, li, te.. 2019. 12. 9. JS elementSibling 1 2 3 4 5 6 7 8 9 10 11 12 13 14 window.onload=function(){ document.getElementById('btn').addEventListener('click', function(){ let d1=document.getElementById('item1'); let d2=d1.nextElementSibling; //다음값 console.log(d1); console.log(d2); let d3=d2.previousElementSibling; //이전값 console.log(d3); let d4=d2.nextElementSibling; console.log(d4); }); } 2019. 12. 9. JS addEventListner 이용해서 checkbox 전체선택 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 36 37 38 Document window.onload=function(){ document.getElementById('allche').addEventListener('click', function(){ let ck = document.getElementsByName('ck1'); if(this.checked==true){ console.log('t1'); for(let i=0;i 2019. 12. 9. JS onchange 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 Document window.onload=function(){ document.getElementById('sel').onchange=function(){ //console.log('test') // 옵션 변경할때마다 콘솔에test출력 let d = this.selectedIndex; // console.log(d); //선택하는것에 따라 0,1,2 출력 let d2 = document.getElementsByTagName('option'); /*console.log(d2[this.selectedIndex]);*/ //아래와 같음. c.. 2019. 12. 9. JS addEventListener 연습 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 Document ul li{ list-style: none; display: inline-block; } li a{ display: inline-block; padding: 5px 20px; border: 1px solid silver; color:darkblue; text-decoration: none; /*링크 밑줄없애기*/ } 메뉴1 메뉴2 메뉴3 메뉴4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 window.onload=function(){ let elea = document.getElementsByTagName('a.. 2019. 12. 9. JS create Element 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 //createElement : 태그 이름 //createTextNode : 태그 내용 입력.... 태그 속성..?정확한 명칭은 모르게음..ㅠ //setAttribute : 태그 내부에 입력 window.onload=function(){ let h=document.createElement('h1'); let txt=document.createTextNode('hello'); h.appendChild(txt); //태그에 hello 입력 let h2=document.createElement('h2'); let txt2=document.createTextNode('hello2.. 2019. 12. 9. JS add Event Listener (set 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 28 29 30 31 32 33 34 35 36 37 38 39 40 //스크립트 window.onload=function(){ var d1=document.getElementsByTagName('a'); //d1은 태그 'a'를 가리킴 for(let i =0;i 2019. 12. 9. 이전 1 ··· 11 12 13 14 15 16 17 ··· 20 다음 반응형
