[JQuery] Attribute 속성 가져오기, 변경하기

attribute 가져오기 

attr(), val(), text(), html()

 

Val()과 attr()의 차이 

- 특정한 값을 가지고 올 때 val 

- 특졍한 속성의 값을 가지고 올 때 attr

 console.log($("input[type='text']"));
 //타입이라는 속성의 값 가져오기
 var type = $("input[type='text']").attr('type'); 
 console.log(type); //text
        
        
//value 속성의 값 가져오기 
var val = $("input[type='text']").val(); //value 속성의 값 가져오기 
console.log(val); //some text

 

 

 

html()과 text()의 차이

공통점 : 태그와 태그 사이의 값

차이점 : 내부 html태그 포함 여부 

• text() : text는 html태그를 인정하지 않음. 그래서 가져올 때 html 태그를 빼고 가져온다.
• text는 태그를 일반 문자열로 취급한다.
• html() : html은 태그를 인정하여 태그의 효과를 내준다

var txt = $("p").text(); 
var html = $("p").html();
console.log('text : ' + txt); 
console.log('html : ' + html);

html()을 쓰는 걸 더 추천

 

 

 

 

각 체크박스를 눌렀을 때, 체크박스의 내용을 아래에 보이게 하기(직접 작성해보기)

 

 

//처음 작성한 코드 
$("input[type='radio']:first").on("click",function(){

            $("#selected").html($(this).val());

        });

        $("input[type='radio']").eq(1).on("click",function(){

            $("#selected").html($(this).val());

        });

        $("input[type='radio']").eq(2).on("click",function(){

            $("#selected").html($(this).val());

        });



 // 가져와야할 것을 먼저 확인 
       console.log($("input[type='radio']"));

        $("input[type='radio']").on("click",function(){
            console.log($(this).val());
            $("#selected").html($(this).val());
        });

: 처음 각 버튼에 따라 실행될 수 있도록 쿼리문을 여러개 작성한다음, 공통점을 찾아 한번에 사용하는 방법을 찾았음 

먼저 어렵게 한번에 하는 방법을 찾으려고 하지 말고, 먼저 각자 해보고 그다음 하나로 합치는 방법을 생각해보자 

그리고 console 창으로 찍어보고 확인해보면서 하기! 

This 를 잘 사용하면 코드가 간결하게됨 

 

셀렉터로 요소를 가지고 오고, 이벤트 등록할 때 생각해보기

어떤 태그를 가져와야하고

어떤 속성을 가져와야하고

어떤 값을 가져와야하나

어떤요소를 가져와서 어떤 함수를 가져와야 하나?

 

 

 

Attribute 변경하기

• attr()로 해당 요소의 지정된 속성을 변경하거나, 속성을 추가할 수도 있다.

 //속성 변경하기 
 //#test3의 type을 button으로 
	 $("#test3").attr("type","button");
 //#test4 type을 password로
	$("#test4").attr("type","password");

 //속성명이 뭔지 어떤 게 들어가는지 알면된다!
 //onclick="alert(ok!)" 추가하기 
 //속성명 : onclick 값 : alert
     $("#test3").attr("onclick","alert('OK!')");

• $(selector).val("변경 내용");
• $(selector).text("변경 내용");
• $(selector).html("변경 내용");

 

 

 

 

 

싱글쿼터 안에는 더블쿼터 ,더블쿼터 안에는 싱글쿼터 

1 예시 - 문자열을 더블쿼터로 감싸기

$("div").html('<input type="button" onclick="test("param")" value="CLICK"/>');

요소

 

: 브라우저는 속성 값을 무조건 더블쿼터로 인식 / 텍스트를 더블쿼터로 넣으면 꼬여버림 

요소를 보면 속성 값은 더블쿼터로 표현하는 것을 알 수 있다. (코드를 싱글쿼터로 작성해도 요소창에선 더블쿼터로 보임)

그래서 저렇게 문자열을 더블쿼터로 작성했더니 문자열을 구분하지 못하고 핑크색밑줄처럼 처리됨. 게다가 이벤트도 안먹힘

 

 

2예시- 문자열을 싱글쿼터로 감싸기

$("div").html('<input type="button" onclick="test('param')" value="CLICK"/>');

param만 싱글쿼터로 감싸고 싶었지만 앞 뒤로 문자열을 감싸는 싱글쿼터와 맞물려 꼬여버림 

 

 

해결방법

$("div").html('<input type="button" onclick="test(\'param\')" value="CLICK"/>');

\이스케이프 문자 싱글쿼터 앞에 붙이기

• 유용하게 쓰임
• \가 앞에 붙으면 뒤에 있는 문자는 특수한 기능을 하지 않는다고 인식 시켜줌 
• 여기부터 여기까지 문자열이야 하는 기능을 없애줌 (?-?)

 

 

 

초창기 기준으로 이벤트가 적용이 되서 새로만들어진건 적용이 안된다.  

 $("button").on("click",function(){
         
           $("#test3").attr("type","button");

           $("#test3").attr("onclick","alert('OK!')");

            $("#test4").attr("type","password");
        });

       
        $("div").html('<input type="button" onclick="test(\'param\')" value="CLICK"/>');

: div에 추가된 button은 위 button 이벤트가 적용되지 않는다. 

 

 

 

 

 

 

각 상자 클릭했을 때 구매 수 1씩 올라가기 - 코드 직접 작성해보기

 

 

//강사님이 하신 부분 
		$("div.item").on("click",function(){
			console.log(this);
			 var $elem = $(this).find(".cnt");
			console.log($elem.html());
			var cnt = $elem.html();
			cnt++;
			console.log(cnt);
			$elem.html(cnt);
		});

//내가 작성 		
		console.log($("div.item"));
		$("div.item").on("click",function(){
			var i = $(this).find("div.cnt").html();
			i++;
			$(this).find("div.cnt").html(i);
			
		});

- 차이점

1. console로 찍어서 내가 요소를 잘 가지고 왔는지 확인해봐야함. 이 부분을 많이 간과하는 것 같음 

2. 나는 변수를 한번 지정했지만, $elem과 cnt로 두번 변수를 선언해서 작성하는 것이 더 깔끔하고 보기 직관적이고 좋은 것 같다

 

+ item에 변수를 지정해서 할수도있는데, 아이템이 많아지면 변수명이 많아진다. 나중에 추가될 수 있는 점을 고려해야함