- jQuery 속성 선택자


 선택자 형태

 설명 

 요소[속성] 

 특정 속성을 가지고 있는 문서 객체를 선택 

 요소[속성=값]

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

 요소[속성~=값]

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

 요소[속성^=값]

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

 요소[속성$=값]

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

 요소[속성*=값]

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

ex)

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

    <script>

        $(function () {

            $("input[type=text]").val('Hello Jquery');

        });

    </script>

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

JQuery_[ Scroll 이벤트 ]  (0) 2014.08.25
JQuery_[ $.extend() ]  (0) 2014.08.25
JQuery_[ li 리스트 항목 순서 변경하기 ]  (0) 2014.04.16
JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05
JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16

- 보통 자바스크립트에서 자료형을 검사할때 typeOf 를 사용한다.
   하지만, 생성자를 이용해서 숫자 객체를 생성하면 문제가 발생한다.


    <script>

        // 변수 선언

        var numberType = 273;               // 기본자료형

        var objectType = new Number(273);   // 객체형


        // 출력

        var outPut = '';

        outPut += 'numberType : ' + typeof (numberType) + '\n';

        outPut += 'objectType : ' + typeof(objectType);

        alert(outPut);

    </script>

- 결과


두 변수 모두 숫자이기는 하나 objectType 는 객체이므로 typeOf 으로 자료형을 검사하면 Object 로 나온다.

만약, typeOf 로 값을 숫자여부를 판별하여, 분기처리를 하게되면 정상적인 결과를 얻을 수 없다.

예를 들어,

if( tyoeOf (objetType) == 'number' ) {} 이렇게 해서 무언가 하고자 할 떄 정상적으로 처리할 수가 없게된다.


이러한 두 대상을 같은 자료형으로 취급하여 처리하고 싶을때는 constructor() 메서드를 사용해애한다.

( 기본자료형도 속성이나, 메서드를 사용하면 자동으로 객체로 변환된다. 그래서 Object 타입과 같은 속성, 메서드존재 )


EX) 같은 자료형으로 분류하기

    <script>

        // 변수 선언

        var numberType = 273;               // 기본자료형

        var objectType = new Number(273);   // 객체형


        // 출력

        var outPut = '';

        // Constructor 사용

        if (numberType.constructor == Number) {

            outPut += 'numberType : 숫자네요';

        }

        if (objectType.constructor == Number) {

            outPut += 'numberType : 숫자네요';

        }

alert(outPut);

    </script>

요렇게 '- ' 근데 하다보니 isNaN 써서 Flase 떨어지면 숫자 이걸로 하면 어떻게 될지 궁금해짐



        if (!isNaN(numberType)) {

            alert('numberType는 숫자입니다.');

        }

        if (!isNaN(objectType)) {

            alert('objectType는 숫자입니다.');

        }

이렇게 하니... 둘다 숫자라고 나옴.. 그럼 구지 constructor 쓰는 이유는 또 모지..? 어렵다 '- '

- 프로토타입

: 자바스크립트에서(모 JAVA도 같지만) 생성자를 통해서 객체를 생성할때

속성은 각기 다르지만, 속성값으로 실행되는 메서드(Method)는 처리구문은 같다.

만약 다루는 객체의 수가 1,000개의 객체라면 생성자 안에 있는 메서드도 1,000번을 생성해야 한다.

메모리를 쓸데없이 잡아먹는 굉장히 비효율적인 일이다.

EX)

    <script>

        // 생성자

        var Student = function (name, korean, math, english, science) {

            // 속성

            this.이름 = name;

            this.국어 = korean;

            this.수학 = math;

            this.영어 = english;

            this.과학 = science;

            // 메서드

            this.getSum = function () { return this.국어 + this.수학 + this.영어 + this.과학; };

            this.getAvg = function () { return this.getSum() / 4; };

            this.toString = function () { return this.이름 + '\t' + this.getSum() + '\t' + this.getAvg(); };

        };

</script>


getSum(), getAvg(), toString() 는 같은일을 하는 메서드인데 객체생성마다 발생하는문제를 해결하기위해

'프로토타입(Prototype)' 이라는 공간에 넣고 공통으로 사용하는 것이다.


EX)

        // 생성자

        var Student = function (name, korean, math, english, science) {

            // 속성

            this.이름 = name;

            this.국어 = korean;

            this.수학 = math;

            this.영어 = english;

            this.과학 = science;

        };

        Student.prototype.getSum = function () {

            return this.국어 + this.수학 + this.영어 + this.과학;

        };

        Student.prototype.getAvg = function () {

            return this.getSum() / 4;

        };

        Student.prototype.toString = function () {

            return this.이름 + '\t' + this.getSum() + '\t' + this.getAvg();

        };


        var student = new Student('최우철', 90, 90, 90, 90);

        alert(student.getSum());

        alert(student.getAvg());

        alert(student.toString());

    </script>


* 프로토타입은 우리가 만드는 것이 아니다. 함수 안에 자동으로 만들어지는 배열 arguments 와 마찬가지이다.

그냥 가져다 쓰면되는거...같다(?)


+ Recent posts