상세 컨텐츠

본문 제목

2023.01.27

Javascript

by 연을 2023. 1. 27. 17:27

본문

728x90

val() : text, textarea

text() : label, textarea, div

html() : div

css

 

addClass

removeClass

hasClass

toggleClass

 

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">&nbsp;<label id="lblName"></label><br>
    <input type="password" id="passcode">&nbsp;<label id="lblPwd"></label><br>
    <input type="button" id="btnLogin" value="Login"><br><br>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.on('blur','#name',function(){
    if($(this).val()==''){
        $('#lblName').text('이름이 비어있습니다.');
    }
})
.on('focus','#name',function(){
    $('#lblName').text('');
    $('#name').val('');
})
</script>
</html>

<결과>

첫화면 위 텍스트 클릭후 로그인 텍스트 입력하고 다시 텍스트 클릭후

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">&nbsp;<label id="lblName"></label><br>
    <input type="password" id="passcode">&nbsp;<label id="lblPwd"></label><br>
    <input type="button" id="btnLogin" value="Login"><br><br>
    <select id="country">
        <option>대한민국</option>
        <option>쌀국</option>
        <option>불란서</option>
        <option>화란</option>
        <option>서반아</option>
        <option>비울빈</option>
    </select><br><br>
    <textarea id="txtara" rows="40" cols="40"></textarea>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.on('blur','#name',function(){
    $('#txtara').append('blur TEXT\n');
})
.on('change','#name',function(){
     // $('#lblName','lblPwd').text('');
     // $('#lblName').text('change on country');
     $('#txtara').append('change TEXT \n');
})
.on('click','#country',function(){
    // $('#lblName','lblPwd').text('');
    // $('#lblName').text('click on country');
    $('#txtara').append('click on country \n');
})
.on('change','#country',function(){
    // $('#lblName','lblPwd').text('');
    // $('#lblName').text('change on country');
    $('#txtara').append('change on country \n');
})
</script>
</html>

<결과>

text에 클릭후 로그인 누르면 글쓰고 로그인 누르면 일단 클릭만 해도 click on country
대한민국이 기본값이고 다른 나라로 바꾸면 change on country

 

============================

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{ 
        border-collapse: collapse;
    }
    td{
        width: 40px; height: 40px;
        border: 1px solid lightpink;
    }
    .borderColor{
        border: 1px solid lightblue;
    }
    .backColor{
        background-color: lightcyan;
    }
</style>
<body>
    <table>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
    </table><br>
    <input type="button" id="btnChange" value="Change">
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#btnChange',function(){
       // $('table').toggleClass('backColor');
        if($('table').hasClass('backColor')){//toggleClass와 같은 효과를 낸다.
            $('table').removeClass('backColor');
        }else{
            $('table').addClass('backColor');
        }

    })
</script>
</html>

<결과>

첫화면 눌렀을때

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btnStart">Animate</button><br>
    <div id="dvAnim" style="width: 100px;height: 100px;background-color:brown;">
    </div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#btnStart',function(){
        $("#dvAnim").animate({
            opacity : 0.25,  //0:투명 1:완전 불투명
            left: "+=50",
            height : "toggle"

            // width: [ "toggle", "swing" ],
            // height: [ "toggle" , "swing" ],
            // opacity : "toggle"

        })
    })

<결과>

첫 번째 화면 실행 다시 실행시 두번째 거 화면 실행 : 줄어든다 다시 실행 : 다시 커진다

=================================

^= :  starting with

$= : ending with

*= : including with

!= : is not

[]을 여러개 이어서 여러개의 속성을 지정하면, AND조건을 만족하는 요소를 찾을 수 있다.

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label id="john">John</label><br>
    <label id="jacob">Jacob</label><br>
    <label id="johanson">johanson</label><br>
    <label id="james">james</label><br>
    <label id="johnny">johnny</label><br>
    <label id="jefferson">jefferson</label><br>
    <label id="jason">jason</label><br>
    <label id="mark">mark</label><br>
    <label id="mickey">mickey</label><br>
    <label id="mini">mini</label><br>
    <label id="marlie">marlie</label><br><br><br>
    <button id="btnChange">Change</button>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#btnChange',function(){
        $('[id^=john]').css({'color':'lightyellow','background-color':'lightblue'});
        $('[id$=son]').css({'color':'lightyellow','background-color':'lightblue'});
        $('[id*=john]').css({'color':'lightyellow','background-color':'lightblue'});
        $('label[id!=james]').css({'color':'lightyellow','background-color':'lightblue'});
    })
</script>
</html>

<결과>

^= $= *= !=

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="gender" value="one" id="male">남성
    <input type="radio" name="gender" value="two" id="female">여성<br><br>
    <input type="radio" name="marriage" value="one" id="single">미혼
    <input type="radio" name="marriage" value="two" id="marriged">기혼
    <button id="btnChange">Change</button>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#btnChange',function(){
        $('#male,#single').attr('checked',true);
        //$('input[type=radio][name=gender][value=one]').prop('checked',true);
    })
</script>
</html>

<결과>

첫번째 줄 실행 두번째 줄 실행

=================================

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btnOpen">Open New Window</button>
    <button id="btnClose">Close Window</button>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    let w =null;
$(document)
.on('click','#btnOpen',function(){
   // window.open('http://www.naver.com','_self');
   window.open('http://www.naver.com','_blank','width:500px hight:500px');
})
.on('click','#btnOpen',function(){
    w.close();
})
</script>
</html>

<결과>

'_self' 안썼을때 : 탭으로 켜진다 '_self' 썼을때 : 버튼이 눌러진 그 화면에서 네이버가 켜진다. 아예 따로 창이 켜지게 만든것 w.close()를 켜진 창이 닫아진다.

modal

  1. 기존에 열려있는 브라우저 위에, 새로운 창이 아닌 레이어를 까는 것
  2. 원래 브라우저와 종속적인 관계, 부모-자식의 형태를 가지고 있음
  3. 브라우저 옵션과 관계없이 띄울 수 있음
  4. 모달창이 열릴때는 기존에 있던 창을 사용하지 못함.

팝업

  1. 기존에 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지을 띄운다
  2. 원래 브라우저와 독립적인 관계
  3. 브라우저 옵션을 통해 열리지 않도록 강제할 수 있음

modeless

  1. 어느 하나의 다이얼로그 창이 있어도 다른작업을 할 수 있음
  2. 사용자가 순서에 관계없이 액세스 할 수 있기 때문에 사용자의 동작에 관계없이 응용 프로그램 상태를 일관성 있게 유지해야 함
728x90

'Javascript' 카테고리의 다른 글

2023.01.31-카페관리  (0) 2023.02.01
2023.01.30  (0) 2023.01.30
2023.01.26  (0) 2023.01.26
2023.01.25  (0) 2023.01.25
2023.01.20  (0) 2023.01.20

관련글 더보기

티스토리툴바