반응형

분류 전체보기 9031

jQuery 셀렉터 :button

jQuery 셀렉터의 :button은 button 타입의 컨포넌트들을 찾게 됩니다. 예제) Option Button 실행 모습) 설명)html 상단에서 style들을 선언하고 중간 부분에서는 각각의 컨포넌트들을 선언한 다음 하단부에서 자바스크립트로 처리를 했습니다.자바스크립트를 보면...우선 $( ":button" ).addClass( "marked" )는 모든 버튼 형식의 컨포넌트를 찾아 marked라는 클래스를 부여해라는 뜻이지요.input box의 type이 button이거나 태그 자체가 button 경우가 해당 되므로첫번째 컨포넌트인 와 마지막 컨포넌트인 이 해당 됩니다.그래서 .marked로 지정된 background-color: yellow;border: 3px red solid;이라는 스타일..

development/script 2018.03.09

jQuery 셀렉터 특정 문자열로 시작하는 요소 찾기

jQuery selector [name^=”value”]는 특정 문자열을 시작하는 요소들을 찾습니다. 예제) 적용 모습) attributeStartsWith demo 설명)프로젝트를 하다보면 흔하게 쓰는 경우인데, 주로 같은 input 박스에서 같은 그룹핑 이름들을 일괄로 찾아 처리를 할 때 사용을 하곤 합니다.예를들면 전화번호 같은 경우 input box를 3개를 둔다고 하고 이름이 각각 tel1, tel2, tel3이라면 한꺼번에 3개 이름을 지정하지 않고도name^=tel 이렇게 앞에 공통 접두사만 지정하면 tel로 시작하는 이름의 컨포넌트를 일괄로 찾아서 처리할 수 있지요. 위의 예제 같은 경우 input box가 3개이며 각각 newsletter, milkman, newsboy라고 되어 있는데자..

development/script 2018.03.09

jQuery All Selector

jquery selector 중에 ("*")는 document에서 모든 요소를 찾습니다.모든 요소에 무언가 일괄 적용하는 일을 극히 드물겠죠. 무튼 이것을 사용하는 경우 일괄 적용하므로 속도에 영향을 끼치니 주의해서 사용해야 합니다. 예제) DIV SPAN P Button 실제 적용 후) $( "*" ).css( "border", "3px solid red" ) 이 구문에서 모든 엘리먼트를 찾아 3px 두께의 빨간 선을 적용한 것인데빨간 선이 적용된 엘레먼트 수인 13을 body 앞에 태그로 추가하였습니다. 요소 부터 DIV SPAN P Button $( "#test" ) 구문으로 를 찾고 find()로 자손들에서 찾아라 뭐를? "*" 전체를 말이죠. 결과는? test 아이디를 가진 div 자식들인 태그..

development/script 2018.03.07

[jQuery] Selector 문자열 포함 찾기 [name*=”value”]

jQuery의 selector기능 활용하여 속성 값에 문자열이 포함 되어 있는 경우를 찾는 경우는 [name*=”value”] 이와 같이 사용하면 됩니다. java나 javascript에서 사용하는 indexOf > -1 와 동일한 기능이라고 보시면 됩니다. 예제) 결과) 설명) $( "input[name*='man']" ).val( "has man in it!" ); input 태그들 중에 name 속성 이름에 "man"이라는 문자열이 포함되어 있는 경우 value 값에 "has man in it!"을 넣어라. name이 newmilk인 경우 man 문자열이 포함되어 있지 않아 적용이 안 된 것입니다. 심플하쥬~?

development/script 2018.03.07

[jQuery] Selector 속성 값 접두사 일치 찾기 [name|=”value”]

jQuery Selector에서 흔하게 사용하는 [name=value]가 아닌 [name|=value]를 알아보도록 하겠습니다. 예제> Some text Some other text will not be outlined 결과> [name|=value]는 속성 값이 접두사 포함되어 있는 경우를 찾아 줍니다. $( "a[hreflang|='en']" ).css( "border", "3px dotted green" ); 이 예제를 예를 들면 a 태그 중에 hreflang라는 속성 값이 en인 값을 찾는데 값 중에 - (하이픈)이 있는 경우는 하이픈 기준으로 잘라서 앞쪽 이름을 보게 됩니다. 이러면 하이픈을 이용해서 그룹핑을 해서 사용 할 수 있겠죠.

development/script 2018.03.07

[MYSQL] n개 데이터 랜덤으로 뽑기

MySQL에서는 아래 예제처럼 0~1사이의 랜덤 수를 추출도 해주며, mysql> SELECT i, RAND() FROM t;+------+------------------+| i | RAND() |+------+------------------+| 1 | 0.35877890638893 || 2 | 0.28941420772058 || 3 | 0.37073435016976 |+------+------------------+3 rows in set (0.00 sec) 테이블 내에서 랜덤으로 특정 n개만 호출도 할 수 있는 편리한 기능입니다. 방법은 아래처럼 작성하시면 됩니다. SELECT [컬럼명] FROM [테이블명] ORDER BY RAND() LIMIT [개수] 아래 그림은 RAND()함수와 LIMIT..

development/db 2018.03.06

[jQuery] 나의 첫번째 부모/조상 찾기 - closest

closest은 selector로 찾은 요소 기준으로 부모를 포함한 모든 직계조상들 중에 찾고자 하는 요소를 찾아줍니다. 예를 들어 목록에서 깊숙히 정의한 어떤 링크를 클릭했을 때 그 행에 효과를 주고 싶을 경우나5레벨 정도 트리 구조의 형태에서 첫번째 1레벨만 펼침 효과를 주고 싶을 때 사용할 수 있습니다. 예를 들어 아래의 jQuery 코드를 정의한다면.. $("span").closest("ul").css({"color": "red", "border": "2px solid red"}); 아래 결과처럼 span 태그 기준으로 부모 포함 직계 조상들 중에 첫번째로 찾은 ul 태그에 효과를 주게 됩니다.한 단계 위에 ul 태그가 하나 더 있지만 span 태그 기준으로 첫 번째가 아니므로 적용이 안 된 것입..

development/script 2018.03.06

[jQuery] SELECTOR

jQuery에서 가장 흔하게(?) 많이 사용하는 기능 중에 하나 바로 셀렉터라고 해도 과언이 아니죠.그 중에서도 기초가 되는 몇 가지만 뽑아서 정의해 보겠습니다. 1. 요소 선택기 (태그 선택기) html 안에 있는 모든 P태그를 찾습니다. $("P") 2. ID 선택기 이와 같은 name이 같은 요소가 존재한다면 id attribute를 추가하여 유일한 ID값을 지정 후 아래와 같이 아이디 앞에 #을 추가하여 사용합니다. $("#abc1") 3. .class 선택기 CSS의 class값을 지정한 element만 찾고 싶다면 아래 같이 class명 앞에 .(마침표)를 추가하여 사용합니다.$(".text_box"); 4. 전체 선택기 html상에서 전체 요소를 찾기는 경우는 극히 드물다고 보는데 아무쪼록 ..

development/script 2018.03.05

[javascript] ActiveXObject를 이용한 텍스트 파일 읽기/쓰기

꽤 예전에 잘 썼었던 스크립트인데 블로그 정리하면서 발견되어 공유합니다.익스플로러 환경에서는 잘 돌았던 것으로 기억하네요. var fso=new ActiveXObject("Scripting.FileSystemObject"); var filename="C:\\text.txt"; var delim="\t"; function savefile() { if (!fso.FileExists(filename)) { fso.CreateTextFile(filename,true); } var f=fso.OpenTextFile(filename,2,true); f.Write(myarea.innerText); f.Close(); } function loadfile() { if (!fso.FileExists(filename)) {..

development/script 2018.03.05
반응형