23. (jquery/제이쿼리) attr 사용해 특정 객체 속성 (attribute) 값 확인 및 변경 실시 - a 태그 href 변경

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>       



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. $("#객체") : 특정 객체 id 를 설정합니다 
    	3. attr : 특정 객체의 속성 값을 확인 및 변경할 수 있습니다
    	4. 속성값 : 특정 객체가 사용하는 고유 속성 ex) 이미지 : src / a 태그 : href ..
    	*/

   	
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	$(window).load(function(){
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		//이벤트 함수 호출 
    		main();
    	});



    	/* [이벤트 수행 함수] */
    	function main(){
    		console.log("");
    		console.log("[main] : [start]"); 
    		console.log("");

    		// a 태그 id 지정 실시
    		var a_tag = $("#a_one");

    		// 기존 a 태그 속성값 확인
    		var beafore_href = a_tag.attr("href");
    		console.log("");
    		console.log("[main] : [beafore_href] : " + beafore_href); 
    		console.log("");

    		// a 태그 속성값 변경해서 로드 실시
    		var after_href = "https://www.google.com";    		
    		a_tag.attr("href", after_href); // 경로 속성 변경
    		a_tag.attr("target", "_blank"); // 타겟 속성 변경 (새창 열기)    		
    		a_tag[0].click(); // 강제 클릭 이벤트
    		console.log("");
    		console.log("[main] : [after_href] : " + after_href); 
    		console.log("");

    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. $("#객체") : 특정 객체 id 를 설정합니다

3. attr : 특정 객체의 속성 값을 확인 및 변경할 수 있습니다

4. 속성값 : 특정 객체가 사용하는 고유 속성 ex) 이미지 : src / a 태그 : href ..

*/

/* =========================== */