Day 37 - jQuery(selector 표현식)

jQuery는 다 함수다

템플릿 만드는 방법 계속 script 올리기 귀찮으니까

window preferencte web html files editor template 추가하면 된다

값을 입력하는 것 ${}사용 (encoding)이 여기에 들어갔다.

context New HTML로 하면 된다.

 

eGovFrame 전자정부표준프레임워크

7월 9일 7월 30일 신청

 

JDBC

오라클 메이븐에서 내려받아서 jar 파일 사용하는 것

pom.xml ojdbc6 repository 검색해서 찾아서 사용해야한다(사용할 버전이 ojdbc6여서 ojdbc6검색)

repository url이 나와있는데 접속해봐서 페이지 나오면 사용 가능하다

repository pom.xml에 추가한다 dependencies위에 추가

dependency에 입력해줄것

ex)

<groupId> com.oracle </groupId> <artifactId>ojdbc6</artifactId> <version>12.1.0.2</version>을 입력해준다

	<dependency>
 		<groupId>com.oracle</groupId>
 		<artifactId>ojdbc6</artifactId>
 		<version>12.1.0.2</version>
 	</dependency>

	<repository>
			<id>oracle</id>
			<name>ORACLE JDBC Repository</name>
			<url>http://maven.jahia.org/maven2</url>
		</repository>

 

jar 파일 확인

 

마지막에 오른쪽버튼 테스트 필요 build success 확인

 

---

 

 jQuery selector 표현식

 jQuery는 list 형태여도 알아서 처리해준다(index로 처리하지 않아도 됨)

만약에 필요하면 속성:eq(index); 혹은 $().eq(index); 이렇게 사용 가능

jQuery 에서 text()는 javascript의 textContent와 같다

jQuery 에서 html()는 javascript의 innerHTML과 같다 

jQuery 에서 val()는 javascript의 value와 같다

 

1. 태그로 선택하기

$("span").css("color","blue");
jQuery("span").css("color","blue");

var span = document.getElementsByTagName("span");
for(var c in span){
	span[c].style.color = "blue";
}

 

---

2. 아이디로 선택하기

$("#id명").css("color","blue");
jQuery("#id명").css("color","blue");

var id = document.getElementById("t1");

id.style.color = "blue";

 

3. 클래스로 선택하기

$(".class명").css("color":"blue","width":"300px");
jQuery(".class명").css("color":"blue","width":"300px");

var class1 = document.getElementsbyClassName("t2")[0];

	class1.style.color = "blue";

4. Parent Child로 선택하기 : li 하위에 있는 span 다 선택

$("li span").css("color","green");
jQuery("li span").css("color","green");

	var parent = document.getElementsByTagName("li")[3];
	var child = parent.childNodes[0];
	child.style.color = "green";

5. Parent > Child로 선택하기 : li 바로 하위에 있는 span 선택

$("li>span").css("color","red");
jQuery("li>span").css("color","red");

var parent = document.getElementsByTagName("li")[3];
var childli = parent.childNodes[0];

childli.style.color = "red";

6. nth-child 선택

$("li:nth-child(odd)").css("color","blue");
$("li:nth-child(even)").css("color","blue");
$("li:nth-child(5)").css("color","blue");
$("li:nth-last-child(3)").css("color","blue");

odd : 홀수 child 선택

even: 짝수 child 선택

child(5) : 5번째 child 선택

last-child(3) : 뒤에서부터 3번째 child 선택

()에 직접 숫자를 넣어서 찾는 방법은 table 생성시 thead, tbody를 설정하지 않고 작업하였을 경우 찾기 어려우니 이렇게 찾는다.

 

7. first-child 선택

$("li:first-child").css("color","blue");
jQuery("li:first-child").css("color","blue");

var doc = document.getElementsByTagName("li")[0];
doc.style.backgroundColor ="skyblue"

8. last-child 선택

$("li:last-child").css("color","blue");
jQuery("li:last-child").css("color","blue");

var doc = document.getElementsByTagName("li");
doc[doc.length-1].style.backgroundColor = "skyblue";