jQuery

[jQuery] 2장 jQuery 기초

반응형

 

$(  ) jQuery 함수

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('input').css('color', 'blue');
});
</script>
<body>
    <div>
        $('selector'[,context]) <br>
        선택자를 검색할 범위 설정, 생략시 문서 전체에서 선택자를 검색한다.
    </div>

    <form id="frm1">
        <input type="text">
    </form>
    <form id="frm2">
        <input type="text">
    </form>
    <form id="frm3">
        <input type="text">
    </form>
</body>
</html>

 

결과 화면1

 

 

  • 특정 폼만 적용 (컨텍스트 사용)

 

ex)

var myJquery1 = $(“p”);
 var myJquery2 = $(“p”, document.forms[2]);

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('input', $('#frm2')).css('color', 'blue');
});
</script>
<body>
    <div>
        $('selector'[,context]) <br>
        선택자를 검색할 범위 설정, 생략시 문서 전체에서 선택자를 검색한다.
    </div>

    <form id="frm1">
        <input type="text">
    </form>
    <form id="frm2">
        <input type="text">
    </form>
    <form id="frm3">
        <input type="text">
    </form>
</body>
</html>

 

결과 화면2

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('input', $('#frm2')).css('color', 'blue')
                          .css('backgroundColor','pink')
                          .css('fontSize','1.5em');

    $('form').on('click', function(){
        $('input').css('backgroundColor', 'white'); // 일괄 설정
        $('input', this).css('backgroundColor', 'gold');
    });
});
</script>
<body>
    <div>
        $('selector'[,context]) <br>
        선택자를 검색할 범위 설정, 생략시 문서 전체에서 선택자를 검색한다.
    </div>

    <form id="frm1">
        <input type="text">
    </form>
    <form id="frm2">
        <input type="text">
    </form>
    <form id="frm3">
        <input type="text">
    </form>
</body>
</html>

 

결과 화면3-1 : 클릭 전

 

결과 화면3-2 : 클릭 후

 

 

 

버튼 클릭 시 정보 삽입

 

 

  • 문자열로 일괄 생성
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    // 문자열로 일괄 생성
    $('[type=button]').eq(0).on('click', function(){
        let tagP = $("<p title='🎁' onclick='f_click(this)'>Hi🎁 jQuery!!</p>");
        $('div').html(tagP);
        // $('div').append(tagP); // 이걸 사용해도 되지만 연속적으로 클릭 시 계속 출력됨
        
        // 부모.append(자식)
        // $('div').append(tagP); // append()는 제이쿼리 메소드이며, appendChild()는 원시 DOM 요소만 대상으로 함
        // 자식.appendTo(부모)
        // tagP.append($('div'));
    });
});
</script>
<body>
    <input type="button" value="문자열로 일괄 생성">
    <input type="button" value="요소만 생성 후 속성 지정하여 생성">
    <div></div>
</body>
</html>

 

결과 화면4 : 문자열로 일괄 생성 클릭 시 추가

 

 

=> 글자를 클릭 시 배경색 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    // 문자열로 일괄 생성하기 - $("html")
    $('[type=button]').eq(0).on('click',function(){

        let $tagP = $("<p title='🎁' onclick='f_click(this)'>Hi🎁 jQuery!!</p>");
        $tagP.appendTo('div');
    });
    
function f_click(p_this){
    p_this.style.backgroundColor = 'olive';
}
</script>
<body>
    <input type="button" value="문자열로 일괄 생성">
    <input type="button" value="요소만 생성 후 속성 지정하여 생성">
    <div></div>
</body>
</html>

 

결과 화면5

 

 

 

  • 요소만 생성 후 속성 지정하여 생성
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
    // 문자열로 일괄 생성하기 - $("html")
    $('[type=button]').eq(0).on('click',function(){      //속성type이 button인거

        let $tagP = $("<p title='🎁' onclick='f_click(this)'>Hi🎁 jQuery!!</p>");   //제이쿼리로 선언된변수다라는 뜻으로 변수명앞에 $붙여준다
        // $('div').html($tagP);     //innerhtml 한번만 추가됨
        // $('div').append($tagP);   //appendChild 계속 추가됨   // append() 는 제이쿼리 메소드이며, appendChild()는 원시 DOM요소만을 대상으로 함
        // 부모.append(자식)
        // 자식.appendTo(부모)
        $tagP.appendTo('div');
    });

    // 요소의 껍질만 생성하고 추가정보는 두번째 인자에 객체 형식으로 작성하기
    // 요소선택자:입력양식선택자
    $('input:button').eq(1).on('click',function(){
        $("<p></p>", {
            title: '🐱‍🐉',
            // click: function(){   // 이벤트만 설정되고 이벤트 발생시점에 함수 호출
            onclick: function(){    // 이벤트 핸들러로 설정되었기 때문에 함수가 바로 실행되어 스타일 반영
                // this.style.backgroundColor = "pink";
                $(this).css("backgroundColor", "pink");
            },
            text: '🐱‍🐉공룡 고양이'
        }).appendTo($('div'));

    });

});

function f_click(p_this){
    p_this.style.backgroundColor = 'olive';
}
</script>
<body>
    <input type="button" value="문자열로 일괄 생성">
    <input type="button" value="요소만 생성 후 속성 지정하여 생성">
    <div></div>
</body>
</html>

 

결과 화면6

 

 

 

동적 버튼 & 정적 버튼

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
  let btn = $("<input type=\"button\" value=\"동적 버튼\">");
	$('body').append(btn);
});

</script>
</head>
<body>
    <input type="button" value="정적 버튼">
</body>
</html>

 

결과 화면7

 

 

=> 버튼 클릭 시 이미지 보이기 & 이미지 클릭 시 css 추가

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
	width: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
  let btn = $("<input type=\"button\" value=\"동적 버튼\">");
	$('body').append(btn);
  
	$('[value="동적 버튼"]').on('click',function(){

		let v_img = $('<img src="../images/ala.jpg" alt="꽐라" onclick="f_fnc(this)">');
		$('body').append(v_img);
	});

	$('[value="정적 버튼"]').on('click',function(){
		/* $('<img>',{
			'src' : '../images/lion.jpg',
			alt : '사자어흥',
			"click" : function(){
				$(this).css('border','3px dashed purple').css('border-radius','10px');
			}
		}).appendTo($('body')); */

		$('body').append($('<img>',{
			'src' : '../images/lion.jpg',
			title : '사자어흥!!!!!!',
			"click" : function(){
				$(this).css('border','3px dashed purple').css('border-radius','10px');
			}
		}));
	});
});

let f_fnc = function(p_this){
	$(p_this).css('border','3px double brown');
}; 

</script>
</head>
<body>
    <input type="button" value="정적 버튼">
</body>
</html>

 

결과 화면8-1 : 정적 버튼, 동적 버튼 클릭 시

 

결과 화면8-2 : 각각의 사진 클릭 후

 

 

 

.text(), .html(), .val(), each()

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>비투비 사랑해</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <p>1<span>BTOB</span></p>
    <p>1<span>Born TO Beat</span></p>
    <p>1<span>비투비</span></p>

    <input type="button" value="text">
    <input type="button" value="html">
    <input type="button" value="each">
    😪 <br><br>

    <!-- <button>객체대상 each</button>
    <button>선택자대상 each</button> -->

<script>
    // 자바스크립트 방식으로 요소의 정보를 가져올 때 innerHTML, innerText, textContent
    // 자바스크립트 방식으로 입력양식요소의 정보에 접근할 때 value

    // 제이쿼리 방식으로는 각 html(), text(), val() 메소드로 대체

    $('[value=text]').on('click',function(){
        // 모든 대상요소의 태그를 포함하지 않는 문자 정보를 가져옴
        console.log($('p').text());
    });

    $('[value=html]').on('click',function(){
        // 대상요소가 여러개라도 첫번째 대상요소의 태그를 포함한 정보만 가져옴
        console.log($('p').html());
        console.log($('input').val());
    });

    $('[value=each]').on('click',function(){
        // console.log( $('p').length );

        $('p').each(function(i,v){
            console.log( $('p') );  // 모든 p요소를 p요소의 갯수만큼 반복적으로 제공
            //console.log(this);      // p요소를 순차적으로 반환
            //console.log(i); // 각 요소의 index 반환
            //console.log(v); // this와 동일하게 대상요소(현재 p)를 순차적으로 반환

            // 요소의 정보 반환
            //console.log($('p').html()); // 전부 같은 첫번째 항목 정보만을 반환하므로 실패..
            // console.log($(this).html());     // 순차적 정보를 반환
            // console.log($(v).html());        // 순차적 정보를 반환
            console.log($('p').eq(i).html());   // 순차적 정보를 반환
        });
    });
</script>
</body>
</html>

 

결과 화면9

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>비투비 사랑해</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <p>1<span>BTOB</span></p>
    <p>1<span>Born TO Beat</span></p>
    <p>1<span>비투비</span></p>

    <button>객체대상 each</button>
    <button>선택자대상 each</button>

<script>
    let $btn = $('button');

    let obj = {
        key1 : 'value1',
        key2 : 'value2',
        key3 : 'value3'
    };

    // 객체 대상 each문법 - $.each(객체,콜백)
    $btn.eq(0).on('click',function(){

        $.each(obj,function(i,v){
            console.log(this[0]);  // 객체의 순차적인 value정보를 반환
            console.log(i);  // 객체의 순차적인 key정보를 반환
            console.log(v);  // this 와 동일
        });
    });

    $btn.eq(1).on('click', function(){
        
        // 선택자 대상 each문법 - $('선택자').each(콜백)의 선택자 위치에 객체를 넣었을 때
        $(obj).each(function(i,v){
            console.log(this); // 객체 한 덩어리 자체를 반환
            console.log(i); // 객체 한 덩어리를 가리키는 index0을 반환
            console.log(v.key1); // this와 동일
        });

        // 객체 대상 each문법 - 선택자를 대상으로 했을 때
        // $.each('p', function(){});
        // Cannot use 'in' operator to search for 'length' in p
        // 객체 대상 문법은 대상인 객체의 갯수만큼 함수를 호출하는데,
        // 현재 대상이 갯수를 셀 수 있는(length속성을 갖는) 대상이 아니므로 오류를 발생시킴!
    });


</script>
</body>
</html>

 

결과 화면10 : each 클릭 시 화면

 

결과 화면11 : 선택자대상 each 클릭 시 화면

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 6장 기타 필터  (0) 2024.02.21
[jQuery] 5장 내용 필터  (0) 2024.02.21
[jQuery] 4장 필터 및 기본 필터  (0) 2024.02.21
[jQuery] 3장 jQuery 선택자  (0) 2024.02.21
[jQuery] 1장 jQuery와 사용법  (0) 2024.02.19

티스토리툴바