[jQuery] HTML

Get

text() - HTML 요소의 content 리턴

html() - HTML 요소의 content 리턴 (HTML 태그 포함)

val() - 폼 요소의 value 리턴

attr(name) -  Attribute 값 리턴

css(property) - css 값 리턴

 

Set

text(string) - HTML 요소의 content 변경

html(string) - HTML 요소의 content 변경 (HTML 태그 포함)

val(value) - 폼 요소의 value 값 변경

attr(name, value) - attribute 값 변경

css(property, value) - css 값 변경

 

 

get 방식

<script>
$(document).ready(function(){
	$('#btn11').click(function(){
    	alert('text(): ' + $('#test1').text());
    });
	$('#btn12').click(function(){
    	alert('html(): ' + $('#test1').html());
    });
    $('#btn13').click(function(){
    	alert('vsl(): ' + $('#test2').val());
    });
    $('#btn14').click(function(){
    	alert('attr(): ' + $('#test3').attr('href')); //특정 attribute 값을 읽어온다
    });
    $('#btn15').click(function(){
    	//alert('css(): ' + $('#test1').css("color));
        let cssObj = $('#test1').css(['color', 'backgroundColor']); //오브젝트를 리턴한다
        //cssObj에 {color:'...', background:'...'} 이런식으로 담겨 있으니 뽑을 땐?
        alert(cssObj.color + " " + cssObj.backgroundColor);
    });
});
</script>

 

 

set 방식 - 매개변수를 주면 값을 변경할 수 있다

<script>
$(document).ready(function(){
	$('#btn21').click(function(){
    	$('#test1').text('hello');
    });
    $('#btn22').click(function(){
        $('#test1').html('test1: Hello <b>world!</b>');
    });
    $('#btn23').click(function(){
        $('#test2').val('Donald Duck');
    });
    $('#btn24').click(function(){
    	$('#test3').attr("href", "https://jQuery.com");
        //한꺼번에 attribute 변경이 가능하다 (object 형태)
        $('#test3').text("jQuery 홈");
        $("#test3").attr({
            "href": "https://www.daum.net",
            "title": "DAUM",  //갖다대면 다음이라고 뜸
        });
    });
    $('#btn25').click(function(){
    	$('#test1').css({
        	"color": "black",
            "backgroundColor": "gray",
 	     });
    });
});
</script>

 

$(selector)의 리턴값은 하나 혹은 여러개의 element 일 수 있다

jQuery Object를 리턴한다 (wrapped set)

절대로 javascript의 DOM element 객체가 아니다!!

위의 결과는 배열처럼 사용이 가능하다 (for, index ..)

각 배열 요소는 DOM element이며 javascript DOM 함수 사용이 가능하다

 

이 떄! text(), html(), val() 값은 어떻게 동작할까?

이것들은 callback 함수를 매개변수로 넘겨줄 수 있다 

callback 함수의 매개변수는 2개 (index, oldvalue) 이고 결국 callback 함수의 리턴값이 새로운 값으로 된다

 

* input, form의 값을 변경할 때는 value를 사용한다

<script>
$(document).ready(function(){
	$('#btn31').click(function(){
    	//1
    	var $c1 = $('.c1') //리턴값이 jquery object
       	alert(c1.innerHTML) //innerHTML은 DOM의 속성이므로 실행되지 않는다 
        alert($c1[0].innerHTML); //DOM element이라 실행된다 index 사용해서 DOM element 접근 가능
        
        //2
        let result = [];
        for(e of $c1) result.push(e.innerHTML);
        alert(result.join(',');
        
        //3
        alert($c1.text()); //결과가 다 합쳐져서 나온다 결과를 하나씩 빼고 싶으면?
        
        //callback 함수 : select 된 element마다 callback 함수를 호출한다
        //index 값과 text()의 value값이 전달된다
        let result = [];
        $c1.text(function(index, value) {
        	result.push(`${index} : ${value}`)
        });
        alert(result.join('/n'));
    });
        
        //4 : callback 함수에 return 값이 있으면 변경이 발생한다
     $("#btn32").click(function(){
        $c1.text(function(index, oldValue) { //oldValue : 이전 값이 넘어오면서 값이 추가된다
        	return `old: ${oldValue} (${index})`; 
    });
    $("#btn33").click(function(){
        let result = []
		$(".i1").val(function(i, oldValue){ //oldvalue는 value 함수의 결과
            result.push(i + ":" + oldValue);
        });
        alert(result.join('\n'));
    });
    $("#btn34").click(function(){
		$(".c1").attr('title', function(i, oldValue){ //oldvalue는 value 함수의 결과
            return oldValue + "(" + i + ")";
        });
    });    
});