728x90
반응형
ㄴㅁ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <style> #zone2 :checked {width:30px; height:30px;} /* input[name="hobby1"]:checked {width:30px; height:30px;} */ </style> <script> function ent(){ // :hidden탐색선택자 : 엘리먼트 속성이 display: none인 태그만 인지함. $("#wrap p:hidden").css({"display":"block","background":"#ff0"}); var z1 = $("#course :selected").val(); var z1 = $("#zone1 :selected").val(); console.log("z1: ", z1); var z1 = $("#course :selected"); console.log(z1[0].attributes[0].value); // var z2 = $("#zone2 :checked").val(); // var z2 = $("#zone2 :checked"); console.log("z2: ", z2); var z3 = $("#zone3 :checked").val(); var z3 = $("#zone3 :checked"); console.log("z3: ", z3); } </script> </head> <body> <button onclick="ent()">클릭</button> <div id="wrap"> <p>내용1</p> <p style="display: none;">내용2-1</p> <p style="visibility: hidden;">내용2-2</p> <p>내용3</p> </div> <form action="#" > <p id="zone1"> <select name="course" id="course"> <option value="opt1">옵션1</option> <option value="opt2" selected>옵션2</option> <option value="opt3">옵션3</option> </select> </p> <p id="zone2"> <input type="checkbox" name="hobby1" value="독서">독서 <input type="checkbox" name="hobby2" value="자전거">자전거 <input type="checkbox" name="hobby3" value="등산" checked>등산 </p> <p id="zone3"> <input type="radio" name="gender" value="male">남성 <input type="radio" name="gender" value="female" checked>여성 </p> <input type="submit" value="전송하기"> </form> </body> </html>
ㅁ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> $(function(){ // :contains(문자열) =>문자열 포함여부 확인 선택자 $("#inner_1 p:contains(내용1)").css({"background-color":"green"}); // :has(요소명)=>해당 요소를 가지고 있는지의 여부 확인 선택자 $("#inner_1 p:has(strong)").css({"background-color":"aqua"}); // contents() => 자식(후손포함안됨)으로 존재하는 엘리먼트(태그)들 $("#outer_wrap").contents().css({"border":"1px dashed red"}); // not("선택자") => 해당선택한 요소가 아닌 것 $("#inner_2 p").not(":first").css({"background-color":"yellow"}); $("#inner_2 p").eq(2).css({"color":"red"}); // end() : 앞의 타겟선택 $("#inner_2 p"). $("#inner_2 p").eq(2).end().css({"color":"blue"}); }); </script> </head> <body> <div id="outer_wrap"> <h1>콘텐츠 탐색 선택자</h1> <section id="inner_1"> <h1>contains(), contents(), has()</h1> <p><span>내용1</span></p> <p><strong>내용2</strong></p> <p><span>내용3</span></p> </section> <section id="inner_2"> <h1>not(), end()</h1> <p>내용4</p> <p>내용5</p> <p>내용6</p> </section> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> $(function(){ $('p:first').css("color","green") .next().css('color','red') .next().css({'color': 'aqua', 'font-weight': 'bolder'}) .end().children('span').css({'color':'blue','font-weight':'bolder'}) ; }); </script> </head> <body> <p>p태그1 : <span>p태그1 안의 span태그</span></p> <p>p태그1의 동생 p태그2 : <span>p태그2 안의 span태그</span></p> <p>p태그3</p> </body> </html>
ㅁ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <style> span {color:blue;} </style> <script> $(function(){ // 이벤트핸들러 함수는 이벤트 객체(e)와 이벤트를 발생시킨 요소(this)를 가지고 있다. /* 이벤트 객체 사용하는 방법 1. function의 매개인자로 객체를 생성하여 사용하는 방법 ex) function(e){ let t= e.target; } 2. 자바스크립트의 event내장객체를 사용하는 방법 ex) function(){ let t= event.target; } */ $('.tt').click(function(e){ let i = e.target; let id=$(i).attr("id"); $("#"+id).css({"width":"30px", "height":"30px"}) }) $('button').click(function(e){ console.log('e: ', e); let t = e.target; // e.target과 this는 자바스크립트 객체이므로 // jQuery함수를 적용하려면 jQuery형식으로 변경해주어야 한다. // ex) $(e.target), $(this) console.log('t',t); console.log('this',this); console.log($(this).attr("id")); $(t).parent().css("background-color","black"); // 해당 엘리먼트의 자식 엘리먼트들 찾기 $("div").children().css("border-bottom","3px double red"); // $("div").children(".selected").css("color","red"); }); }); </script> </script> </head> <body> <button type="button" id="btn">엘리먼트에 스타일 입히기</button> <p>이곳은 문단</p> <input type="checkbox" class="tt"name="t1" id="t1" value="t1">t1 <div><span class="selected">이곳은 div의 차일드 span</span></div> <p>그리고<span>여기는 또 다른</span> 문단</p> <div>마지막으로 <span>이곳은 div의 차일드 span,</span>이곳은 div</div> </body> </html>
728x90
반응형
'[JS]' 카테고리의 다른 글
| [jQuery] slice(), find(), filter(), remove(), replace(), empty() (0) | 2024.03.06 |
|---|---|
| [JS] jQuery ㅇㅇㅇ (0) | 2024.03.06 |
| [JS] jQuery (0) | 2024.03.05 |
| [JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings (0) | 2024.03.05 |
| [JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings (0) | 2024.03.05 |