728x90
반응형
제이쿼리 JQuery
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
JQuery => JavaScript Library => 자바스크립트 함수 모임
$ -> JQuery의 약자
대상.함수()
$(document).ready(function(){
alert("동작");
});
jQuery(document).ready(function(){
alert("동작2");
});
$(function(){
alert("동작3");
});<script type="text/javascript" src="jquery-3.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert("동작");
// 대상.함수();
// 대상 전체대상 * , 태그대상 h1, id=표시(#표시), class=표시(.표시)
$('*').css('color','blue');
$('h1').css('color','red');
// p태그에 글자색 green 설정
$('p').css('color','green');
// id="hh" 대상으로 배경색 설정
$('#hh').css('background-color','pink');
//id="pp" 대상으로 배경색 yellow 설정
$('#pp').css('background-color','yellow');
// class="hhh" 대상으로 배경색 skyblue 설정
$('.hhh').css('background-color','skyblue');
// class="ppp" 대상으로 배경색 orange 설정
$('.ppp').css('background-color','orange');
// 태그[속성=값] 태그[조건]
$('input[type=text]').css('color','black');
$('input[type=password]').css('color','red');
$('a[href]').css('background-color','yellow');
});
</script>
</head>
<body>
<a>하이퍼링크1</a>
<a href = "test1.html">하이퍼링크2</a>
<input type="text">
<input type="password">
<h1>제목1</h1>
<h1 id="hh">제목2</h1>
<h1 class="hhh">제목3</h1>
<p>본문 내용1</p>
<p id="pp">본문 내용2</p>
<p class="ppp">본문 내용3</p>
</body>
태그[속성^=값] 속성에서 값으로 시작하는
태그[속성 $= 값] 속성에서 값으로 끝나는
태그[속성 *= 값] 속성에서 값 포함
$('a[href^=jquery]').css('background-color', 'pink');
$('a[href $= xls]').css('background-color', 'skyblue');
$('a[href *= cd]').css('background-color', 'green');
짝수 even 홀수 odd 첫번째 first 마지막 last 지정 eq (인덱스)
$('tr:even').css('background-color', 'pink');
$('tr:odd').css('background-color', 'yellow');
$('tr:first').css('background-color', 'skyblue');
$('tr:last').css('background-color', 'green');
대상 함수
-index h1 의 순서값
function 이 반복문이라서 return 값으로 나올 수 있는 것!
var c= $('h1').css('color');
alert(c);
$('h1').css('color','blue');
$('h1').css('background-color','skyblue');
$('h1').css({
'color' : 'red',
'background-color':'pink'
});
// index h1 대상의 순서값
$('h1').css('color', function(index){
alert(index);
if(index==0){
return 'red';
}else if(index==1){
return 'blue';
}else{
return 'green';
}
});
});
</script>
</head>
<body>
<h1>head-0</h1>
<h1>head-1</h1>
<h1>head-2</h1>
</body>
</html>
자바 스크립트 배열
var arr=['pink','yellow','skyblue'];
$('h1').css('background-color', function(index){
return arr[index];
});
});
.attr()
속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
<script type ="text/javascript" src ="jquery-3.6.1.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
//대상.함수() attr('태그 속성', '값')
var w = $('img').attr('width');
// alert(w);
$('#img1').attr('width', 300);
$('#img1').attr('height', 200);
$('#img1').attr('border', 30);
$('#img1').attr({
'width' : 500,
'height' : 300,
'border' : 30
});
});
</script>
</head>
<body>
<img src="../js2/1.jpg" width = "100" height="100" border ="10" id = "img1">
</body>
img 태그 대상으로 width 100 200 300
var arr =[100,200,300];
$('img').attr('width', function(index){
return arr[index];
});</script>
</head>
<body>
<img src="../js2/1.jpg" width = "100" height="100" border ="10" id = "img1">
<img src="../js2/2.jpg" width = "100" height="100" border ="10" >
<img src="../js2/3.jpg" width = "100" height="100" border ="10" >
</body>
append
대상.append() - 대상 뒤부분에 내용 추가
$('body').append('추가 내용');
$('div').append('<h1>추가</h1>');prepend
대상.prepend() - 대상 앞부분에 내용 추가
$('body').prepend('<h1>앞에 추가 내용</h1>');
$('div').prepend('앞에 추가');
대상.each() 반복문 함수()
대상.bind('이벤트종류', 기능)
대상.click(기능)
대상.val() value값 가져오기 함수
728x90
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| 1108 jQuery - jQuery의 기초 (0) | 2022.11.08 |
|---|---|
| 0916 JavaScript - jQuery, Ajax - DB연결 (2) | 2022.09.16 |
| 0901 JavaScript - 내장 객체 (2) (2) | 2022.09.01 |
| 0825 JavaScript - 내장 객체, Location (0) | 2022.08.25 |
| 0727 JavaScript - 내장 함수 (0) | 2022.08.25 |
