기본코드

버튼이 다중일때 원하는 버튼의 값을 취득하는법

	$(document).on("click", "#answerBtn", function () {
	alert( $("#answerText").val() );

 

 

getter css를 통해 값을 취득

		let color = $('p').css('background');

 

 

p 태그에 id추가

		$('p').attr('id', 'ptagid');

 

setter로 태그에 class추가하기

$('p').attr('class', 'mycss');
$('p').addClass('mycss');

 

태그의 class 지우기

$('p').removeClass('mycss');

 

 

 

 

 

//입력받은 문자열 getter

	let value = $("#text").val();

------------>문자열 setter

	$("#text").val("hi hello");

 

 

 

 

 

//docu속 text가져오기

	$("#btnText").click(function() {
		let text = $("#demo").text();
	});

--------->html로 가져오기

	$("#btnHtml").on("click", function() {
		let html = $("#demo").html();
	});

 

 

 

p태그 class명 바꾸기 setter

	$('p').attr('class', 'newclass');	//setter
			//attribute명, 값

p태그 class명 받아오기

 

	let c = $('p').attr('class');	//getter
	alert(c);	=

p태그에 class (이름 mycss생성)

p태그에 class (이름 mycss생성)

 

 

 

 

<select>에 앞/뒤 추가

$("#food").append("<option value='스테이크'>스테이크</option>");

$("#food").prepend("<option value='떡볶이'>떡볶이</option>");

---

radio

 

 

선택 값 얻어오기

let radioVal = $("input[name='radio_test']:checked").val();

 

클릭하면 "배"로 옮겨가기(input type=radio)

$('input[name="radio_test"]').val(["배"]);

 

---

checkBox

 

 

선택된 값 가져오기 방법1

let check = $("#che1").is(":checked");

------>방법 2

let check = $("input:checkbox[id='che1']").is(":checked");

 

 

(버튼누르면)설정하기

$("#che1").prop("checked", true);

 

 

 

---

 

CSS 테두리 넣기

	$('img').css({'border' : "4px solid navy"});

//위와 동일
	$('img').css('border','solid 3px');
	$('img').css('border-color','#ff0000');

 

 

 

 

---

attr

속성값 가져오기

let val= $("#web").attr("href");

속성값 셋팅하기

$("#web").attr("href", "http://www.daum.net");

 

이미지 삽입

$("#frm").append("<img src='./image/photo_8.jpg'>");

 

 

 

ex1 ) 링크 속성 셋팅

1. 네이버 링크 만들고

2. 버튼을 누르면 속성(attr)의 값을 받아

3. alert확인 후 새로 셋팅됨

<p>
	<a href="http://www.naver.com" id="web">Naver Link</a>
</p>
<button type="button" id="btnAttr">Attribute(속성)</button>
<script type="text/javascript">
$(function () {
	$("#btnAttr").click(function() {
		//getter
		let val= $("#web").attr("href");

		//setter
		//주소 바꾸기
		$("#web").attr("href", "http://www.daum.net");
		//text가 바꾸기
		$("#web").text("다음 홈페이지");
	});
});
</script>

 

 

ex2) 사진 클릭하면 이미지 속성 새로 셋팅

	let num = 0;	
	$("#pic").click(function() {
		if(num == 0){
			$(this).attr("src", "./images/b_pic1.jpg");
			num = 1;
		}
		else{
			$(this).attr("src", "./images/b_pic2.jpg");
			num = 0;
		}		
	});

 

 

 

 

---

append(앞)

 

text추가 ------> 방법1(html)

	let txt3 = $("<p></p>").text("JQuery p tag append");
	$("body").append(txt3);

------------->방법2(Java Script)

		let txt2 = document.createElement("h3");
		txt2.innerHTML = "JS h3 tag append";
		$("body").append(txt2);

------------>방법3(JQuery)

		let txt3 = $("<p></p>").text("JQuery p tag append");
		$("body").append(txt3);

 

---

 

 

 

 

 

 

p태그 추가

$("p").append("<br>append 추가요소(element)입니다");

list추가 

$("ol").append("<li>포도</li>");

select에 추가

$("#food").append("<option value='스테이크'>스테이크</option>");

 

text 추가

		let txtf = "<br>답글:<input type='text' id='answerText'>";
		$("#answerForm").append(txtf);

 

button 추가 

		let btn = "<br><br><button type='button' id='answerBtn'>답글작성완료</button>";
		$("#answerForm").append(btn);	

 

 

---

 

 

 

prepend(뒤)

 

 

ptag

$("p").prepend("<br>prepend 추가 요소(element)입니다")

list

$("ol").prepend("<li>오렌지</li>");

select

$("#food").prepend("<option value='떡볶이'>떡볶이</option>");

 

 

---

 

list(ul, il 가져오기)

 

해당 문자열 클릭하면 창띄우기

	$("ul#list li").click(function() {
		alert('click');
	});

 

해당 문자열 클릭하면 text입력란(id choice)에 값이 채워짐

1번

	$("ul#list li").click(function() {
	//	alert('click');
		$("#choice").val( $(this).text() );
	});

-----> 2번

	$("ul#list").children().click(function() {
		//	alert('click');
		$("#choice").val( $(this).text() );
	});

 

 

 

추가 후 다시 읽어오기

	$(document).on("click", "#list li", function() {
		//	alert('click');
		$("#choice").val( $(this).text() );
	}); 
	 

 

li 개수세기

		let len = $("ul#list").children().length;
		$("#len").text(len + "개의 element가 있습니다");

li 추가하기

		let appendObj = $("<li></li>").text( $("#col").val() );
		$("#list").append( appendObj );

 

 

 

---

slider

-> 생성은 div로 

<div id="slider1" style="width: 250px"></div>
<p id="opacity"></p>	//투명도 숫자 출력되는 태그

 

$(function () {
	//슬라이더 생성
	$('#slider1').slider({
		animate: true,
		range: "min",
		value: 100,
		slide: function (event, ui) {
			
			//투명도 조절
			$("img").css("opacity", ui.value/10);
			
			//투명도 조절에 따른 숫자 0~100까지
			$("#opacity").text(ui.value);
		}
	});
});