1. jQuery 배열 표현
<HTML>
<HEAD>
<TITLE> jQuery에서 배열사용법 </TITLE>
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var names=new Array("김연아","슈앤찡","배열~");
$('p').html(names.join("<br/>"));
//$("p").text(names.join("<br/>"));
////태그이름
});
</script>
</HEAD>
<BODY>
배열의 값들을 화면에 출력해보기<br/>
<p></p>
</BODY>
</HTML>
2. 화면에 리스트의 값을 배열로 받기
<HTML>
<HEAD>
<TITLE> jQuery에서 배열처리(화면값을 받아 배열) </TITLE>
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//화면에 있는 리스트의 값을 배열로 받기!!
//같은 이름이 여러개 있으면 배열로 인식한다. li가 여러개 -> 배열로 인식
var movies=$("ul").get();
// li: 6 // ul li : 5 // ol li : 1
//var movies=$("ul li").get();
//var movies=$("ol li").get();
//var movies=$("#test li").get();
//띄어쓰기로 하위 개체로 접근
$('p').text("리스트의 길이 : "+movies.length);
});
</script>
</HEAD>
<BODY>
<ul>
<li>역린</li>
<li>표적</li>
<li>스파이더 맨</li>
<li>그랜드 부다페스트 호텔</li>
<li>캡틴 아메리카</li>
</ul>
<ol type="A">
<li>슈앤찡!</li>
</ol>
<p></p>
</BODY>
</HTML>
3. 배열 숫자 정렬
<HTML>
<HEAD>
<TITLE> 배열 숫자 정렬 </TITLE>
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//화면단의 ol을 id값으로 접근하기
var movieList=$("#movies");
alert(movieList);
////객체이다.
//var movieNames=new Array("역린","겨울왕국","스파이더맨");
//var movieNames=new Array("test","abc","dept");
var movieNames=new Array(90,78,100,57);
//정렬하기(DB에서 정렬기본)기능 추가
//기본적으로 sort는 ASCII코드값 기준정렬!!
movieNames=movieNames.sort(function(a,b){
return a-b;
});
//숫자의 경우 정렬시 추가기능 구현
$.each(movieNames,function(index,value){
//반복문
movieList.append($("<li>"+value+"</li>"));
});
});
</script>
</HEAD>
<BODY>
<ol id="movies">
<!-- jQuery에서 값을 처리시에 화면단으로 보냄 -->
</ol>
</BODY>
</HTML>
4. 버튼 마우스 오버 , 색상 변경
<HTML>
<HEAD>
<TITLE> 어느 마우스 버튼을 눌렀는지 확인 </TITLE>
<style>
.buttons{
width:100px;height:30px;text-align:center;
margin:5px;border:1 solid black;
font-size:9pt;background-color:#00FF33;
vertical-align:middle;
display:table-cell;
}
</style>
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".buttons").mousedown(function(event){
//alert(event.button);
//왼쪽버튼:1, 오른쪽버튼:2
if(event.button==2){
alert("오른쪽 금지");
}
});
$(".buttons").mouseout(function(){
$(this).css({'background-color':'#FF33FF',
'font-weight':''});
});
$(".buttons").mouseover(function(){
$(this).css({'background-color':'#0066FF',
'font-weight':'bold'});
});
//mouseover,mouseout등을 추가지정 가능
});
</script>
</HEAD>
<BODY>
<span class="bold buttons"> 굵게 </span>
<span class="italic buttons"> 이텔릭 </span>
</BODY>
</HTML>
5. jQuery에서 유효성 체크
<HTML>
<HEAD>
<TITLE> jQuery에서 유효성 체크하기</TITLE>
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//에러를 감춘다!!
$('.error').hide();
$('.submit').click(function(event){
var id=$('.id').val();
if(id.length<1){
alert("아이디를 입력!!");
$('.error').show();
event.preventDefault();
//입력이 되지 않았으므로 자동서브밋 방지
}else{
$('.error').hide();
}
});
});
</script>
</HEAD>
<BODY>
<form name="testForm" action="a.jsp">
아이디<input type="text" name="id" class="id">
<span class="error">아이디가 입력되지 않았습니다</span>
<br/>
<input type="submit" class="submit" value="제출">
</form>
</BODY>
</HTML>
'JQUERY > 소스코드' 카테고리의 다른 글
| [ jQuery ] 업로드 파일 확장자 체크 (1) | 2016.10.05 |
|---|---|
| [jQuery] file폼 확장자 체크하기. (0) | 2016.10.05 |
| jQuery의 each(return false, return true, append, innerHTML, 반복문) (0) | 2016.05.03 |
| jQuery Array 다루는 function 들 (0) | 2016.05.02 |
| [Jquery] Array를 활용한 SelectBox Item 추가 (0) | 2016.05.02 |
| [Jquery] 부모창 제어/접근 (0) | 2016.05.02 |
| [jQuery] jQuery form submit target 지정 (팝업 submit) (0) | 2015.12.11 |
| jQuery class제거, 적용 removeClass(), addClass() [속성] (0) | 2015.11.18 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!