1. 선택자(selector) 연습하기
- 연습 사이트 : http://www.hgjung.pe.kr/jquery/SelectorExample.aspx

* : 모든 엘리먼트
e : 태그 명이 e인 모든 엘리먼트
  
$('#아이디') : 아이디 선택
$('.클래스') : 클래스 선택
$('태그') : 태그 선택 ex) p, div, span...


$('<p>test</p>')  : 태그 묶기
$('<p>test</p>') .appendTo('body') : 도큐먼트 끝에 추가

$("input[name='name_val']") : input태그의 name이 "name_val"인 것 선택

$request.getContextPath()
$(function(){코드 작성});  시작과 동시에 이루어짐.
$("#아이디").val(넣을값);




.attr(name) : 해당 속성과 매핑되는 값을 들고 온다.
.attr(name, value) : 해당 속성의 값을 설정해준다.

.show() : 보여주기
.hide() : 감추기

.addClass('클래스명') : 클래스 추가

1. 로딩시 바로 시작

window.onload = function(){ alert("welcome"); }

$(document).ready(function(){
    $("a").click(function(event){
       alert("Thanks for visiting!");

       //event.preventDefault();

    });

});

2. css 클래스 추가 / 삭제

1. checkbox

- 선택된 값 : $("input[name=objname]:checked").val()

- 선택 : $("input[name=objname]").filter("input[value=objvalue]").attr("checked", "checked");

- 해제 : $("input[name=objname]").filter("input[value=objvalue]").attr("checked", "");

- 선택된 갯수: $("input[name=objname]:checkbox:checked").length

2. selectbox

- 선택된 값: $("#objname option:selected").val()

http://jqueryui.com/

이제부터 jqueryui를 사용하자.! 더 편하다.

태그 객체에 접근하기도 훨씬 편하고

페이지가 로딩되는 동시에 이벤트를 등록하여 동적인 화면에 사용하기에는 편하다

ajax도 훨씬 편하게 사용하는 메소드들을 많이 제공하고 있다.

이메일 정규식
"^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$


전화번호 정규식
$('#htel').val().trim().match(/^0[0-9]{1,2}-[1-9]{1}[0-9]{2,3}-[0-9]{4}$/)

휴대폰 정규식
$('#hp').val().trim().match(/^01[016789]{1}-[1-9]{1}[0-9]{2,3}-[0-9]{4}$/)

window.resizeTo(너비,높이);

window.onload = function() {

function 안에 넣지 말고
</body>직전에 <script></script >안에 실행을 원하는 스크립트를 넣는다. 

ellipsis
잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용
<nobr style="text-overflow:ellipsis; overflow:hidden; width:200px" title="말풍선에 나올 내용">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>

ellipsis-word
잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden; white-space: nowrap; width:200px" title="말풍선에 나올 내용">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>

clip
잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용
<nobr style="text-overflow:clip;overflow:hidden;width:200px">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>

inherit
잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용
<nobr style="text-overflow:inherit;overflow:hidden;width:200px">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>

링크에 넣을 경우
잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용
<nobr style="text-overflow:ellipsis;overflow:hidden;width=280px;cursor:Hand">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>

ex)))테이블에 넣었을 경우

200px로 잘리는 테이블에 넣었을시 보이는

<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'>
 <tr>
  <td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden"> 200px로 잘리는 테이블에 넣었을시 보이는</nobr>
  </td>
 </tr>
</table>

ex)))링크에 걸기 예2
<%=SUBJECT%>
<nobr class="nobr" style="width:120px;"><a href="javascript:goView(<%=BBS_SEQ%>);"><%=SUBJECT%></a></nobr>

------------------------------------------------------------------------------------

#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }

 

------------------------------------------------------------------------------------

 

 

[ white-space ]

요소 안에서의
띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.


white-space에 사용되는 값

normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.

예제

H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.  

[출처] text-overflow|작성자 알사장

[참고 사이트] http://kais.tistory.com/96

Prototype Framework에서는 Element에 css가 아닌 자바스크립트로 스타일을 적용할 수 있게 하는 setStyle()이라는 메서드를 제공하고 있다. 물론 Element.style.display 같은 식으로 스타일에 접근하거나 할 수 있지만 setStyle()의 좋은 점은 css에서 적용하는 것처럼 스타일을 한꺼번에 적용할 수 있다.

Element의 Selector는 당연히 이것저것 있지만 가장 기본적인 getElementById를 가지고 설명하자.

(Language : javascript)

1. $("elementID").setStyle({
2.     'position': 'relative',
3.     'width':    '100px',
4.     'height':     '100px',
5.     'overflow': 'hidden',
6.     'border':   'solid 1px #808080'
7. });

마치 CSS를 사용한 것처럼 익숙한 스타일로 한꺼번에 스타일을 적용할 수 있다. px를 사용할 때 100px처럼 붙혀서 쓰는 것이 좋다. px앞에 공백이 있으면 브라우저에 따라 안 먹을 수 있다.

스타일 프로퍼티쪽은 꼭 홑따옴표(')로 묶어주지 않아도 상관없기는 하지만 float처럼 reserved word와 겹치는 경우에는 문제가 생길 수 있기 때문에 이런 충돌은 홑따옴표로 묶어서 해결할 수 있다.

근데 setStyle()을 사용할 때 주의할 점은 -가 붙는 CSS 프로퍼티에 대한 부분이다.

CSS에서도 내부 스타일과 외부 <style>태그로 할때 프로퍼티의 이름이 다른 경우들이 좀 있는데 그것처럼 여기서도 주의해야 할 부분이 있다.

background-color 이나 font-size처럼 CSS 프로퍼티가 - 가 붙는 경우에는 backgroundColor 나 fontSize 처럼 카멜방식으로 - 가 없이 작성해 주어야 동작을 한다. 모든 - 가 붙는 프로퍼티가 다 그런지 까지는 확인하지 못했지만 위의 2가지는 확실히 - 없이 작성해 주어야 한다. 대소문자를 가리기 때문에 반드시 위와같은 카멜방식이어야 한다.

이것때문에 한참 해맸다. 처음에는 동적으로 생성한 엘리먼트에는 setStyle이 안 먹나 해서 이것저것 했었는데 결국 스타일이 적용 안된게 저 문제 때문이었다.


덧) 각 스타일은 콤마(,)를 이용해서 구분하는데 마지막에도 콤마를 붙혀주는 실수를 할 경우 Firefox에서는 잘 돌아가지만 IE에서는(내 경우는 7) 에러가 난다. 더군다나 콤마때문에 렌더링 오류가 나는데 생뚱맞은 곳에서 오류메시지가 나기 때문에 디버깅 하기도 쉽지 않다. 콤마에 주의!!

덧) (2008.3.6) CSS의 프로퍼티를 -를 쓰지 않고 대신 카멜방식처럼 대문자로 이어붙히는 것은 자바스크립트 자체의 특징으로 특정 프로퍼티에 대시(-)를 사용할 수 없게 되어있다고 한다. 프로토타입의 특징은 아니었다.

[출처] http://blog.outsider.ne.kr/114

onClick = 말 그대로 클릭 했을때 발생하는 이벤트 입니다.

마우스를 눌렀다가 땠을때(완료)... 발생하져..

onmouseup = 마우스를 눌렀다가 뗄때(진행)...

onmousedown = 마우스를 누를때(진행)...

마우스 클릭을 이벤트 진행 과정으로 나열해 보면..

(마우스 누르기 : 딸깍 )onmousedown -> (마우스 떼기 : 딸깍)onmouseup -> onclick(순서상 onmouseup 이후에 발생)

위와 같은 순서로 진행 됩니다.

그리고 키 이벤트는...

onKeyDown = 키를 누르고 있을때...
onKeyPress = 키를 누르고 있을때...

key 이벤트는 이벤트 발생 시점이 동일 하지만...

onKeyPress는 특수키에는 이벤트가 발생하지 않습니다.(방향키, home, end, pageup...등등)

onKeyDown 과 onKeyPress 모두 누르고 있는 동안 계속 이벤트가 발생 합니다...