[jQuery]
・자주 사용하는 기능을 함수(라이브러리)로 감싸서 쉽게 사용할 수 있도록 함.
・DOM과 관련된 기능을 브라우저에 상관없이 실행하도록 함.(크로스 브라우저)
・풍부한 함수(라이브러리) 제공
・CSS선택자를 그대로 사용함.
・대형 프로젝트 또는 규모가 큰 개발사의 경우 자체 프레임워크를 만들어 사용함.$(선택자).함수명(매개변수);
$("p").css("color", "red")
<frontend>
-javas + jQuery
-앵귤러
-뷰
-리액트
-부트스트랩
<backend>
・서버
-php
-jsp + string
-asp
-node.js[계산] <!DOCTYPE html> <html> <head> <title>JavaScript</title> <!-- <script src="jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ // jQuery("p").css("height", "300px"); // $와 jQuery 둘다 사용 가능 // $("p").css("border", "1px solid #0000FF"); // $("p").css("color", "red"); // var myJQ = jQuery("p"); // jquery 객체 // console.log(myJQ); // var elementP = document.getElementsByTagName("p"); // javascript가 넘기는 일반적인 기능 // console.log(elementP); // myJQ.css("textDecoration","underLine") // var myJQ= jQuery("p"); // myJQ.css("textDecoration",underLine); // myJQ.css("width","300px").css("border","1px solid #ff0000"); $("p") .css("fontsize", "2em") .css("height", "300px") .css("lineHeight", "300px") .css("textAlign", "center") /* $("p").css("height", "300px"); $("p").css("lineHeight", "300px"); $("p").css("fontWeight", "bolder"); $("p").css("fontSize", "2em"); $("p").css("color", "red"); $("p").css("textAlign", "center"); */ }) </script> </head> <body> <p>Hello jQuery!</p> </body> </html>[결과값]
[계산] <!DOCTYPE html> <html> <head> <title>JavaScript</title> <!-- <script src="jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> //document : 최상위객체 //window.onload는 덮어쓴다. window.onload = function () { console.log(1); }; window.onload = function () { console.log(2); }; window.onload = function () { console.log(3); }; // jQuery는 모두 출력된다. $(document).ready(function () { console.log(1); }); $(document).ready(function () { console.log(2); }); $(document).ready(function () { console.log(3); }); $(function () { $("*").css("fontSize", "1.1em"); // 전체 선택자 $("li").css("color", "#0000ff"); // 태그 선택자 $("#item").css("background", "#ffff00").css("width", "300px"); $(".seoul").css("background", "#ff0000"); // 클래스 선택자 $("#wrap p").css("border", "2px solid #cccccc"); // 후손 선택자 $("wrap > p").css("border", "5px solid #cccccc"); // 자손 선택자 }); </script> </head> <body> <div id="wrap"> <p>jQuery selector</p> <div id="centent"> <h1>centent</h1> <p>ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅌ</p> <p>ABCDEFGHIJKLMN</p> </div> <div id="item"> <ul> <li class="seoul">서울</li> <li class="gyeonggi_do">경기도</li> <li>충청도</li> <li>전라도</li> <li>경상도</li> <li>강원도</li> <li>제주도</li> </ul> </div> </div> </body> </html>[결과값]
[계산] <!DOCTYPE html> <html> <head> <title>JavaScript</title> <!-- <script src="jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("input[type='text']").css("color", "#ff0000"); // 속성 선택자 $("input[type='password']").css("color", "#0000ff"); // 속성 선택자 $("input:submit").css("fontSize", "1.2em"); // 필터 선택자 var chk = $("input:checked").val(); // 필터 선택자 console.log("chk : " + chk); $("li:nth-child(2n+1)").css("background", "#ffff00"); // 함수 선택자 }); </script> </head> <body> <form> UserID <input type="text" /> <br /> UserPW <input type="password" /> <br /> Submit <input type="submit" value="submit" /> <br /> Reset <input type="reset" value="reset" /> <br /> Food <br /> 사과<input type="checkbox" id="apple" value="사과" /> 바나나<input type="checkbox" id="banana" value="바나나" checked/> 수박<input type="checkbox" id="watermelon" value="수박" /> <br /> <ul> <li>이만기</li> <li>이승엽</li> <li>이종범</li> <li>이재학</li> <li>이순철</li> <li>이길동</li> <li>이동국</li> </ul> </form> </body> </html>[결과값]
[계산] <!DOCTYPE html> <html> <head> <title>JavaScript</title> <!-- <script src="jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> //$() 문서 객체 생성 $(document).ready(function () { var wrapObj = $("#wrap"); //<div>객체 생성 및 추가 var divObj = $("<div> Hello jQuery! </div>"); //자식으로 들어 가겠다 divObj.appendTo(wrapObj); //divObj:자식 wrapObj:부모 divObj.css("background", "#0000ff"); $("<div> Hello jQuery! </div>").appendTo($("#wrap")).css("background", "#ff0000"); $("<div> 홍길동 </div>").appendTo($("#wrap")).css("background", "orange"); }); </script> </head> <body> <div id="wrap"></div> </body> </html>[결과값]
[계산] <!DOCTYPE html> <html> <head> <title>JavaScript</title> <!-- <script src="jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> //$() 문서 객체 생성 $(document).ready(function () { var wrapObj = "#wrap"; //객체 생성 var divObj = $("<div> Hello jQuery! </div>"); // 객체 삽입 divObj.appendTo(wrapObj); // .appendTo() 어딘가의 자식으로 집어넣는다 // 부모객체가 자식 집어넣기 wrapObj.append(divObj); // .append() //첫번째 자식으로 집어넣기 divObj.prependTo(wrapObj); // .prependTo() 부모기준으로 집어넣기 wrapObj.prepend(divObj); // .prepend() 자식기준으로 집어넣기 // 막내로 들어가겠다. (형제) divObj.insertAfter(wrapObj); // .insertAfter() wrapObj.after(divObj); // .after() divObj.insertBefor(wrapObj); // .insertBefore() wrapObj.before(divObj); // .before() }); </script> </head> <body> <div id="wrap"> <div>contents</div> </div> </body> </html>[결과값]
[]
$("셀렉터").html()
셀렉터태그내에 존재하는 자식태그을 통째로 읽어올때 사용되는 함수
※ 태그 동적추가할때 주로 사용되는 함수$("셀렉터").text()
셀렉터태그내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용되는 함수
※ html태그까지 모두 문자로 인식시켜주는 함수[계산]
>>```
[결과값]