JQuery, 스타일 지정 / 파일 내용 출력 / 파일 활성화, 비활성화

스타일 지정

 

속성값 읽기
var 변수명 = $("요소").css("CSS 속성이름");

속성값 변경 및 추가하기
$("요소").css("속성이름", "값");

$("요소").css({
    "속성1이름": "값",
    "속성2이름": "값",
    "속성3이름": "값"
});

$(this).css("background-image",'none')

 

---

 

클래스 속성 지정

 

속성 지정	특징
.hasClass	css 클래스 적용 여부 확인
.addClass	클래스 추가
.removeClass	클래스 삭제
.toggleClass	적용 해제 자동 반복 클래스 있음 -> 삭제 클래스 없음 -> 추가

 

CSS 클래스의 적용 여부 알기
var 변수 = $("요소").hasClass("클래스이름");

클래스의 적용과 해제
$("요소").addClass("클래스이름");
$("요소").removeClass("클래스이름");

addClass는 추가가 되는것이다 원래 있던거는 건들지 않고.
box1 box2로 추가된다.

클래스의 적용과 해제의 반복 처리
HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복
$("요소").toggleClass("클래스이름");

---

.not()
제이쿼리로 선택한 선택자(요소)들 중에서, 특정 선택자(요소)만을 제외하는 함수

 

예시

 

파일 내용 읽어오기

 

<div id="container">
	<ul class="tab">
		<li><a href="../txt/html5.txt" class="selected">HTML5</a></li>
		<li><a href="../txt/jquery.txt">jQuery</a></li>
	</ul>
		
	<p class="panel">파일로부터 읽어드린 내용 출력</p>
</div>

$(function(){
	$('p.panel').load($('.tab li a').attr('href'))

	$('ul.tab li a').click(function(){
		$('ul.tab li a').not(this).removeClass('selected')
		$(this).addClass('selected')

		$('p.panel').load($(this).attr('href'))

        return false;//파일로 못가게 막음
	})
})

 

클릭한 요소를 뺀 나머지에서 class="selected" 속성을 제거한다.
.not을 활용해서 한거 this는 $(this)를 쓰면 안됨
$('ul.tab li a').not(this).removeClass('selected')

 

클릭한 요소에 class="selected" 속성을 추가
$(this).addClass('selected')

 

파일의 내용을 읽어오기
-> load() 함수 사용

 

클릭한 요소의 href 속성을 가져와서 파일을 로드한다.
$('p.panel').load($(this).attr('href'))

 

---

파일 활성화 / 비활성화

 

disabled : 활성화(true) / 비활성화(false)

<input type="checkbox" id="upload_file_check" value='Y'/>
<input type="file" id="file_finder" disabled="disabled" />

$('#upload_file_check').change(function(){
	let isChk = $(this).is(':checked')

	$('#file_finder').prop('disabled', !isChk)
})