[HTML5] JQuery 시작하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

내취향이 아닌게 계속계속 나오고잇다..

---

JQuery syntax

$(selector).function();

select : html Elements. 

* element

* id selector (#)

action() : 해당 엘리먼트에 대해 실행할 내역

****selector

$("p")

$("#id")

$(".class")

$("p:first") : first element

$(":radio") : all input type radio

******EVENT

$(document).ready(function(){

//to-do

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//1. 예제01: 문서에서 id가 header인 노드를 찾아 border 속성을 “4px solid #f00”으로 변경

$('#header').css('border', '4px solid #f00');

// 예제 02: p 태그를 찾아 border 속성을 “4px solid #f00”으로 변경  

$('p').css('border', '4px solid #f00');

// 예제 03: test1 클래스가 적용된 노드를 찾아 border 속성을 “4px solid #f00”으로 변경

$('.test1').css('border', '4px solid #f00');

//04: 문서의 ul.menu 노드에서 select 클래스가 적용된 메뉴 항목(li)을 찾아 border 속성을 “4pxs olid #f00”으로 변경.

$('ul.menu li.select').css('border', '4px solid #f00');

//예제 05: 클래스가 적용된 모든 노드를 찾아 border 속성을 “4px solid #f00으로 변경

$('[class]').css('border', '4px solid #f00');

//6.  클래스 이름에 test라는 단어가 포함된 모든 노드를 찾아 border 속성을 “4px solid #f00”으로 변경  

$('[class*=test]').css('border', '4px solid #f00');

/*

*속성 옵션 설명*

       - $("E[A]") :  속성 A를 포함한 모든 E노드 선택.

       - $("E[A=V]") :  속성 A의 값이 V인 모든 E 노드 선택.

       - $("E[A^=V]") :  속성 A의 값이 V로 시작하는 모든 E 노드 선택.

       - $("E[A$=V]") :  속성 A의 값이 V로 끝나는 모든 E 노드 선택.

       - $("E[A*=V]") :  속성 A의 값이 V를 포함하고 있는 모든 E 노드 찾기.

       

 

예제 06: 클래스 이름에 test라는 단어가 포함된 모든 노드를 찾아 border 속성을 “4px solid #f00”으

    로 변경  

*/

   

});

    </script>

---

**EACH

$('h1').each(function(index, item){

$(item).css('color','pink');

$(item).css('font-family','tohama'');

$(item).css('font-size','50pt'');

});

$('p').each(function(){

$(this).css('color','pink');

$(this).css('font-family','tohama'');

$(this).css('font-size','50pt');

});

---

**클래스 주입과 해제 : css 변경

<style type="text/css">

.reverse{

background-color: black;

color: white;

}

</style>

$(document).ready(function(){

$('h1').click(function(){

alert($(this).html());

});

$('h1').mouseenter(function(){

$(this).addClass('reverse');

});

$('h1').mouseleave(function(){

$(this).removeClass('reverse');

});

});

---

AJAX + JQuery

var name = $('#name').val();

var address = $('#address').val();

var tel = $('#tel').val();

$.ajax({

//json 형식으로 필요한 값 표시

url: 'paramTest.jsp',

success: function(result){

$('#result').html(result);

},

data:{

name: name,

address: address,

tel : tel

},

error: function(xhr, status, err){

$('#result').val(err + " / " + status);

}

});