- 속성 선택자

 선택자 형태

 설명

 요소[속성]  특정 속성을 가지고 있는 문서 객체 선택 

 요소[속성=값]

 속성 안의 값이 특정 값과 같은 문서 객체 선택

 요소[속성~=값]

 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체 선택 

 요소[속성^=값]

 속성 안의 값이 특정 값으로 시작하는 문서 객체 선택 

 요소[속성$=값]

 속성 안의 값이 특정 값으로 끝나는 문서 객체 선택 

 요소[속성*=값]

 속성 안의 값이 특정 값을 포함하는 문서 객체 선택 

 

- 속성 선택자 예)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("input[type=text]").val("Hello JQuery");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <input type="text"/>
        <input type="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="file"/>
    </div>
</body>
</html>

 

- 자식 선택자( " 부모 태그명 > 자식 태그명" ) : 자식으로 범위를 한정해 전체가 선택

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("body > *").css("color", "Red");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <ul>
            <li>Aplle</li>
            <li>Bag</li>
            <li>Cat</li>
            <li>Dog</li>
            <li>Elephant</li>
        </ul>
    </div>
</body>
</html>

 

- 후손 선택자( "부모 태그명 후손 태그명") "요소A 요소B" : 요소A의 후손으로 범위를 지정 모든 후손 선택

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("body  *").css("color", "Red");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <ul>
            <li>Aplle</li>
            <li>Bag</li>
            <li>Cat</li>
            <li>Dog</li>
            <li>Elephant</li>
        </ul>
    </div>
</body>
</html>

 

※ 각 JQuery 실행 후 크롬에서 요소검사(F12) 로 확인 하면 확연한 차이를 알 수 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("*").css("color", "Red"); // 태그 전체 선택자
            J("h1").css("color", "Yellow"); // 태그 선택자
            J("h1,p").css("background", "Red"); // 태그 다중 선택자
            J("#target").css("color", "Blue"); // id 선택자 ('#' 로 지정)
            J("h1#target").css("background", "Pink"); // 태그 + id 선택자(id = #)
            J("h1.item").css("color", "Green"); // 태그 + class 선택자(class = .)
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <h1>Lorem ipsum</h1>
    <p>consectetur adipiscing elit.</p>
    <h1 id="target">Header-0</h1>
    <h1 class="item">Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

'공부 > JQuery' 카테고리의 다른 글

JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07
JQuery_[JQuery 이란?]  (0) 2013.01.07

- JQuery 이란?

모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리.

2006년 1월 존 레식 이 BarCamp NYC에서 발표했으며, 무료로 사용 가능한 오픈소스 라이브러리

- JQuery 기능

● DOM과 관련된 처리를 쉽게 구현

● 일괄된 이벤트 연결을 쉽게 구현

● 시각적 효과를 쉽게 구현

● Ajax 애플리케이션을 쉽게 개발

 

- JQuery 다운로드와 CDN 방식

1. 다운로드 ( http://jquery.com )

2. CDN 방식 ( 스크립트 태크에 src 속성에 CDN 호스트 입력 )

- CDN 입력 예

<script src="http://code.jquery.com/jquery-1.7.js"></script>

<script>

$(document).ready(function() { // 문서가 준비가 완료되면, 매개 변수로 전달된 함수를 실행하라는 의미

-- JQuery 실행 함수 --

});

</script>

 

※ JQuery 파일명 .js 파일과 .min.js 파일로 나누워진다.

- .js 파일은 Uncompressed 버전

- .min.js 파일은 Minified 버전

- 두 파일은 용량이 다섯 배 이상 차이가 난다. Minified 파일은 용량을 최소화 하려고 지핑한 파일

두 파일을 직접 확인해 보면 차이를 쉽게 알 수 있다.

거의 .js 파일을 사용한다.

- 오프라인에서는 JQuery 를 사용해야 한다면 꼭 1번 다운로드 방식으로 사용해야 한다.

- JAVASCRIPT 가변인자함수 만들기.

  자변인자 함수를 만들려면 함수 내부에 arguments 변수를 넣어야 한다. (※ 함수의 매개변수의 값은 아무것도 읍다.)

  예) 합을 구하는 가변인자 함수
    <script>
        function sumAll() {
            var sum = 0;
            for(var i=0; i<arguments.length; i++){
                sum += arguments[i];
                }
                return sum;
        }
        alert(sumAll(1, 3, 4, 5, 1, 5, 6));
    </script>



     만약 매개변수의 개수가 다를때 마다 다른것을 리턴하는 함수를 만들고 싶다면 ?

     예) arguments 요소의 갯수에 따라 조건을 설정하면 된다.

    <script>
        function 함수이름() {
            var length = arguments.length;
                // 조건설정

    if( length = 0 ) {

}

else if( length = 1 ) {

}

else {

}

        }
        alert(sumAll(1, 3, 4, 5, 1, 5, 6));
    </script>


    자바스크립트 공부는 생각해보면 처음인듯 싶다...

        몰랐던 함수 2개
        prompt(); -> 사용자의 입력 값을 받아옴.(return var)
        confirm(); -> 사용자에게 true & false 값 받아옴(return boolean)

- Spring  HandlerMapping 을 이용한 Controller 설정방법

   1. BeanNameUrlHandlerMapping 클래스(HandlerMapping 설정을 하지않으면 기본으로 적용되는 클래스)

   dispatcher-servlet.xml Controller 등록 예

        <!-- Controller -->
    <bean id="indexController" name="/index.html" class="controller.IndexController"
        p:shopService-ref="shopService">
    </bean>

    ※ Controller : 브라우져에서 URL요청이 오면 처리해야할 비지니스로직을 맵핑해주는 클래스

        위의 예제를 보면 name="/index.html" 요청이오면 indexController 클래스에 정의된 서비스조직으로 넘긴다(shopService)

        밑에 p:shopService-ref="shopService" 가 무조건 서비스를 처리한다는 것은 아니다.(거의 대부분 맞지만..)

        Controller 클래스에서 인스턴스를 직접 생성하지않고, 스프링이 제공하는 객체를 받아서 사용할 때 설정하는 부분

        Controller 클래스를 열어보면 아마도...

        private Shop shopService;

        public void setShopService(Shop shopService) {

            this.shopService = shopService;

        }

        이 Setter 이 있을 것이고, 스프링이 자동으로 객체를 넘겨주는 역할을 한다.

        즉 프레임워크 사용전에 Shop shopService = new Shop(); 를 안해도 사용이 가능케 하준다는 말!!!

        위의, 1번 Controller 클래스(BeanNameUrlHandlerMapping) 를 사용하면 요청 URL 마다 일일이 컨트롤러 클래스를 맵핑을

        해주어야 하는 번거로움이 심각하다. 걍 이런게 있다고 알고만 있자..


   2. SimpleUrlHandlerMapping

   dispatcher-servlet.xml Controller 등록 예

    <!-- HandlerMapping -->
    <bean id="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">

<property name="mappings">

<value>

/index.html=indexController

/detail.html=detailController

</value>

</proerty>

    </bean>

      <!-- Controller -->
    <bean id="indexController" name="/index.html" class="controller.IndexController"
        p:shopService-ref="shopService">
    </bean

    ※ /index.html 이 요청이 오면 indexController 클래스로 맵핑


3. 한가지 더 있는데 그건 아직.. 공부중 나중에 올리자.

- web.xml 스프링 MVC의 DispatcherServlet 클래스를 서블릿으로 정의

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>spring_Web</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
 
  <!-- spring DispatcherServlet -->
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
 
</web-app>

※ 확장자 'html' 에 대한 요청은 모두 DispatcherServlet 클래스로 맵핑하여 처리한다라고 설정하는 것이다.



- dispatcher-servler.xml 스프링 MVC 설정파일

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:p="http://www.springframework.org/schema/p"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
   
    <!-- HandlerMapping 생략 ( 요청URL 과 Controller 맵핑 ) -->
   
    <!-- Controller -->
    <bean id="indexController" name="/index.html" class="controller.IndexController"
        p:shopService-ref="shopService">
    </bean>
   
    <!-- ViewResolver 생락 ( Controller 에서 반환받은 뷰이름과 출력할 뷰페이지 맵핑 ) -->
   
    <!-- dataSource -->
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
            <!-- JDBC 드라이버 클래스 이름 설정 -->
            <property name="driverClassName">
                <value>oracle.jdbc.OracleDriver</value>
            </property>   
            <property name="url">
                <value>jdbc:oracle:thin:@localhost:1521:orcl</value>
            </property>
            <property name="username">
                <value>scott</value>
            </property>
            <property name="password">
                <value>scott</value>
            </property>
    </bean>
   
    <!-- Shop -->
    <bean id="shopService" class="logic.ShopImpl" p:itemCatalog-ref="itemCatalog">
    </bean>

    <!-- ItemCatalog -->
    <bean id="itemCatalog" class="logic.ItemCatalogImpl"
        p:itemDao-ref="itemDao">
    </bean>

    <!-- ItemDao -->
    <bean id="itemDao" class="dao.ItemDaoImpl" p:dataSource-ref="dataSource">
    </bean>
   
</beans>
※ DispatcherServlet 클래스 의 이름은 web.xml 에 설정한 <servlet-name> 의 명칭과 동일한 이름으로 정의하여야 한다.

    (<servlet-name> 의 동일한 이름-servlet.xml 로하고, 그 파일은 WEB-INF 폴더에 있으면 자동으로 컨테이너가 적재한다)

    예 : /WEB-INF/dispatcher-servlet.xml

◈ Java Editor 단축키
Ctrl + Shift + M : 특정 클래스 Import 시키기
Ctrl + Shift + O : 자동으로 Import 시키기
 
Ctrl + L : 특정 줄 번호로 가기
Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버를 상세 검색
ALT + Left , ALT + Right : 이전, 이후 작업 화면
Ctrl + Shift + G : 특정 메소드나 필드를 Reference하고 있는 곳을 검색
Ctrl + , or  : 다음 annotation(에러, 워닝, 북마크 가능)으로 점프
Ctrl + T : hierarchy 팝업 창 띄우기(인터페이스 구현 클래스간 이동 시 편리)
F4 : hierachy view 퍼스펙티브 생성
Ctrl + O : 메소드나 필드 이동하기
Ctrl + Shift + Down : 클래스 내에서 다음 멤버로 이동
F2 : 컴파일 에러의 빨간 줄에 커서를 가져다가 이 키를 누르면 에러의 원인에 대한 힌트를 제공
Ctrl + 0 : 클래스 구조를 트리로 보기
Ctrl + Shift + T : 클래스 찾기
Ctrl + Shift + Space : 메소드의 파라미터 목록 보기

(메소드의 괄호 안에 커서를 놓고 이 키를 누르면 파라미터 타입 힌트를 볼 수 있음)
 
Ctrl + K : 찾고자 하는 문자열을 블럭으로 설정한 후 키를 누른다
Ctrl + Shift + K : 역으로 찾고자 하는 문자열을 찾아간다
Ctrl + J : Incremental find 이클립스 하단 상태 표시줄에 Incremental find 라고 표시되어 한 글자자씩 누를 때 마다 코드내의 일치하는 문자열로 이동, 다시 Ctrl + J 를 누르면 그 문자열과 일치 하는 부분을 위/아래 방향키로 탐색이 가능
Ctrl + PageUp , Ctrl + PageDown : Edit 창 좌우 이동 (Edit 창이 여러 개 띄워져 있을 경우 Edit 창간의 이동)
 
Ctrl + Shift + F : 코드 자동 정리
Ctrl + 1 : Quick Fix 에러가 발생했을 경우 Quick Fix를 통해 쉽게 해결이 가능함
Ctrl + Shift + / : 블록 주석(/* */)
Ctrl + Shift + \ : 블록 주석 제거
Ctrl + / : 여러 줄이 한꺼번에 주석 처리됨 (주석 해제하려면 반대로 하면 됨)
Alt + Up(Down) : 위(아래)줄과 바꾸기
Alt + Shift + UP : 커서를 기준으로 토큰단위 블럭지정
Alt + Shift + DOWN : 커서를 기준으로 토큰단위 블럭해제
Alt + Shift + 방향키 : 블록 선택하기
Alt + Shift + R : Refactoring (이름변경) - Refactoing 으로 전체 소스에서 이름변경에 의한 참조 정보를 변경해 준다
Alt + Shift + J : 자동으로 주석 달기 (메소드나 멤버변수에 포커스 두고 실행)
Alt + Shift + Z : Surround With 메뉴 (try / catch 문이나 for , do , while 등을 해당 블록에 감싸주는 메뉴가 나타남)
Ctrl + Space : 입력 보조장치(Content Assistance) 강제 호출 → 입력하는 도중엔 언제라도 강제 호출 가능함
Ctrl + D : 한 줄 삭제
Ctrl + W : 파일 닫기
Ctrl + I : 들여쓰기 자동 수정
Ctrl + Shift + X : 대문자로 변환
Ctrl + Shift + Y : 소문자로 변환
Ctrl + Shift + L : 모든 단축키의 내용을 표시
Ctrl + Shift + B : 현재 커서 라인에 Break point 설정
 
Ctrl + F6 : 창간 전환, UltraEdit 나 Editplus 의 Ctrl + Tab 과 같은 기능
Ctrl + Shift + F4 : 열린 파일 모두 닫기
Ctrl + M : 전체화면 토글
Ctrl + Alt + Up(Down) : 한 줄(블럭) 복사
 
템플릿 수정 → 환경설정/자바/편집기/템플릿
 
◈ Window 이동
F10 : 메뉴창을 활성화
Ctrl + F8 : 다음 Perspective로 이동
Ctrl + N : 새로운 파일 및 프로젝트 생성
Ctrl + Shift + Down : Java Editor에서 다음 member로 이동
Ctrl + F7 : 다음 View로 이동
Ctrl + Shift + F7 : 이전 View로 이동
Alt + ← : 이전 작업 화면
Alt + → : 다음 작업 화면
F12 : 컴파일 중 에러 등으로 포커스가 다른 곳으로 갔을 때 Editor 로 커서 이동
Ctrl + 1 : 컴파일 에러가 발생한 곳에서 Ctrl + 1을 누를 경우 컴파일 에러에 대한 해결책을 제시
 
◈ 디버깅 단축키
Ctrl + Shift + B : 현 커서의 위치에 브레이크 포인터 설정/해제
F11 : 디버깅 시작
F8 : 디버깅 계속
F6 : 한 줄씩 실행(Step Over)
F5 : 한 줄씩 실행하되 함수일 경우 그 함수 내부로 들어감(Step Into)
Ctrl + R : 현재 라인까지 실행(Run to Line)
Ctrl + F11 : 이전에 실행되었던 Run 파일 실행
 
◈ 메소드 쉽게 생성하기
Ctrl + Space 하면 템플릿 (환경설정/자바/편집기/템플릿 에서 편집 가능)
클래스의 멤버를 일단 먼저 생성한다
override 메소드를 구현하려면, 소스→메소드대체/구현 에서 해당 메소드를 체크한다
기타 클래스의 멤버가 클래스의 오브젝트라면, 소스→위임메소드 생성에서 메소드를 선택한다
 
◈ Organize import
자바파일을 여러 개 선택한 후 소스→가져오기 체계화 해주면 모두 적용됨
 
◈ 소스 코드 형식 및 공통 주석 설정
환경설정 → 자바 → 코드 스타일 → 코드 포맷터 → 가져오기 → 프로파일.xml
환경설정 → 자바 → 코드 스타일 → 코드 템플릿 → 가져오기 → 템플릿.xml
다수의 자바파일에 프로파일을 적용하려면 패키지 탐색기에서 패키지를 선택한 후 소스 → 형식화를 선택하면 됨
 
◈ 에디터 변환
에디터가 여러 파일을 열어서 작업 중 일 때 Ctrl + F6 키를 누르면 여러 파일명이 나오고 F6키를 계속 누르면 아래로 Ctrl + Shift + F6 키를 누르면 위로 커서가 움직임
Ctrl + F7 : 뷰간 전환
Ctrl + F8 : 퍼스펙티브간 전환
F12 : 에디터로 포커스 위치


- XML(Bean) 설정 ( Autowired 사용전 적용법)

<?xml version="1.0" encoding="UTF-8" ?>


<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

    <bean id="messageBean" class="sample1.MessageBeanImpl" >

        <constructor-arg>  // 설정된 bean 의 생성자 파라미터 초기값 세팅

            <value>Spring</value>

        </constructor-arg>

        <property name="outputter">// 설정된 bean 의 갑 세팅(해당 클래스의 Setter 이 존재해야함)

            <ref local="outputter" />

        </property>

    </bean>

    <bean id="outputter" class="sample1.FileOutputter">

        <property name="filePath">

            <value>out.txt</value>

        </property>

    </bean>

</beans>


- XML(Bean) 설정 ( Autowired 사용후 적용법)

<?xml version="1.0" encoding="UTF-8" ?>


<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

    <bean id="messageBean" class="sample1.MessageBeanImpl" >

        <constructor-arg>  // 설정된 bean 의 생성자 파라미터 초기값 세팅

            <value>Spring</value>

        </constructor-arg>

    </bean>

    <bean id="outputter" class="sample1.FileOutputter" autowire="byType">

        <property name="filePath">

            <value>out.txt</value>

        </property>

    </bean>

</beans>



- xml 변경 후 해당 클래스 sample1.MessageBeanImpl 에서 <property> 값 세팅을 위한 Setter 은 없어도 된다.

  ex)

      (변경 전)

       private Outputter outputter;

       public void setOutputter(Outputter outputter) {

           this.outputter = outputter;

       }


        (변경 후)

        @Autowired

        private Outputter outputter;

    

- XML(Bean) 설정

<?xml version="1.0" encoding="UTF-8" ?>


<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

    <bean id="messageBean" class="sample1.MessageBeanImpl" >

        <constructor-arg>  // 설정된 bean 의 생성자 파라미터 초기값 세팅

            <value>Spring</value>

        </constructor-arg>


        <property name="greeting"> // 설정된 bean 의 갑 세팅(해당 변수의 Setter 이 존재해야함)

            <value>Hello, </value>

        </property>

        

        <property name="outputter">// 설정된 bean 의 갑 세팅(해당 클래스의 Setter 이 존재해야함)

            <ref local="outputter" />

        </property>

    </bean>

    <bean id="outputter" class="sample1.FileOutputter">

        <property name="filePath">

            <value>out.txt</value>

        </property>

    </bean>

</beans>

+ Recent posts