7 week_3 JQuery

Jquery

Jquery는 Java Script를 간략화한 자바스크립트 라이브러리

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>  <!-- jquery 최신 주소 -->

 

특징

• Java Script 보다 간편하다. ex) p 태그안에 text를 모두 "hello" 로 변경 

- Java Script 

let parr= document.getElementsByTagName("p");
for(i=0;i<parr.length;i++){
	parr[i].innerHTML="hello";
}

- Jquery

$(document).ready(function(){   // 문서를 다 읽은 후 처리
	$("p").html("hello");   
});

 -> 기존 Java Script보다 간편하게 사용할 수 있다.

 

 

기본문법

$(선택자).핸들러 함수();

-jquery 태그

• $("tag") - tag 선택
• $(this) - 현재 선택 중인 요소를 가리킴
• $("#idName") - id 선택
• $(".className") - class 선택
• $("Name") - name 선택
  • $("tag[name=Name]") - tag Name 선택

 

- jquery 메서드 모음

link : https://mjcoding.tistory.com/143

 

val()  vs text() vs html() 차이

메서드	설명
.val()	form 요소의(input, textarea..) 텍스트 값을 가져온다.
.text()	선택 요소의 텍스트 내용(문자열)을 가져온다.
.html()	선택 요소의 html 코드(태그, 문자열)를 가져온다.

 

 

데이터 전송

-  form을 통해 데이터 전송

<form id="frm">
    이름:<input type="text" name="name"><br>
    나이:<input type="text" name="age"><br>
    주소:<input type="text" name="address"><br>
    
    <!-- <input type="submit"> -->
    <button type="button" id="btn">전송</button>
</form>
 
<script type="text/javascript">
$(document).ready(function() {
    $("#btn").click(function() {
        $("#frm").attr("action", "NewFile.jsp").submit();
    });
});
 
</script>

이름:<input type="text" id="name"><br>
나이:<input type="text" id="age"><br>
주소:<input type="text" id="address"><br>
<button type="button" id="send">버튼</button>
 
<script type="text/javascript">
$(document).ready(function() {
    $('#send').click(function() {        
        let name = $("#name").val();
        let age = $("#age").val();
        let address = $("#address").val();
        
        location.href = "NewFile.jsp?name=" + name + "&age=" + age + "&address=" + address;        
    });    
});
</script>

 

태그 추가

<div id="demo"></div>
<button>click</button>
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function(){

- 문자열로 추가

let str="<p class='pclass'> 문자열로 p 태그 추가</p>";
$("#demo").append(str);

 -> 주로 사용하는 태그 추가로 문자열을 입력하여 간단하게 태그를 추가

 

- JavaScript로 추가

let JSstr =document.createElement("p");
JSstr.setAttribute("class","pclass");
JSstr.innerHTML="JS로 p 태그 추가";
$("#demo").append(JSstr);

-> <p> 태그 요소를 생성한 이후 해당 변수에 속성값과 text를 넣어줘 태그를 추가

 

- Jquery로 추가

let JQstr=$("<p>").text("jquery로 p 태그 추가");		
JQstr.attr("class","pclass");
$("#demo").append(JQstr);

-> <p> 태그를 text와 함께 생성한 이후 속성값을 넣어줘 태그를 추가

 

 

부모 노드 선택

- 기준점 red 색상 이름칸  위치는 <table>안에 <tr>안에 <td>안에 <div>

 

• $(선택자).parnet() : 선택자의 부모 노드 선택

$(document).ready(function(){
	$("#selected").parent().css("background","red");
});

 -> 기준점<div>의 부모 노드 <td>가 선택된다.

 

• $(선택자).parnets(["선택자"]) : 선택자의 부모 노드 전부 선택

$(document).ready(function(){
	$("#selected").parents(["tr"]).css("background","red");
});

-> <tr>의 모든 부모노드가 선택된다.

 

• $(선택자).parentsUntil(선택자) : 선택자 이전 부모 노드 전까지 전부 선택

$(document).ready(function(){
	$("#selected").parentsUntil("table").css("background","red");
});

 -> <table>의 이전의 노드<tr>가 모두 선택된다.

 

• $(선택자).closest() : 선택자 이전의 첫 번째 부모 노드까지 선택 

$(document).ready(function(){
	$("#selected").closest("tr").css("background","red");
});

-> 자신을 포함한 부모 요소<tr> 중 지정 요소의 집합의 첫번째 요소(3번)가 선택된다.