11.16정리

jquery 사용법

 

<script src='https://code.jquery.com/jquery-3.5.0.js'></script>로 jquery를 자바스크립트에 불러와야 사용가능!

 

//실행문(실행코드)<in

document.getElementById('id').value=str; == $('#id').(str);

str=Document.getElementById('id').value; == str=$('#id').val();

//이벤트 핸들러(Event Handler)

document.getElementById('id').addEventListener('event',function(){

});

document.getElementById('id').addEventListener('event',funcname);

$(document).on('event','#id',function(){});

$(document).on('event','#id',funcname);

//jquery Envet핸들러 종류 및 사용

$(document)

.on('click','#id1',function(){})

.on('blur','#id2',function(){})

.on('focus','#id3',function(){})

.on('mouseout','#id4',function(){})

//jquery는 하나의 document에 여러가지 id의 이벤트 지정가능

//radio, checkbox

//<input type=radio name=rname, <input type=checkbox name=cname

$('input:radio[name=rname]').each(function(){

    if($(this).prop('checked')==true){...}//여기에있는 radio버튼이 true면 아래있는조건 실행

   

});

$('input:checkbox[name=cname]').each(function(){

    if($(this).prop('checked')==true){...}//check박스가 선택되어 있다면 실행

});

each()는 반복문과 같은데 안에있는 str을 반복적으로 실행한다

//select

<option value='xxx'>yyy</option>

value :str=$('#id').val(); //<value값을 가져올땐input tag와 같음

text  :str=$('#id option:selected').text(); //option중에 선택된것의 text값을 가져옴

       str=$('#id option:checked').text();

 

 

(this)

불러온곳에있는 값 또는 이름 등을 사용하는 함수

 

값을 읽어오기

$('input:radio[name=rname]').each(function(){

if($(this).prop('checked')){

gender_str=$(this).val();

return false;

}

});

 

str=$(this).prop('checked'); //str== true or false 둘중하나뿐

//prop()내부에 값이 하나뿐이면 값을 return하는 역할

//prop()내부에 값이 두개라면 값을 세팅한다.

str=$('#id').prop('checked',true); // become checked

str=$('#id').prop('checked',false); // unchecked

 

jquery background color변경명령어

$('#id').css('background-color','color');

로 변경할 수 있다.

 

let n;

let flag;

let arRect; //전역변수로 선언을 해준뒤

$(document)

.ready(function(){ //ready()안에서 변수 값을 선언해준다!

    n=0;

    flag=true;

    arRect=['dvFirst','dvSecond','dvThird'];

})