var
let
const
ajax json ... 두개 다 할거임
jQuery
기존의 자바스크립트 : document.getElementById()을
$('#result')
$기호가 제이쿼리쓰겠다는 표시임
jQuery.com에서 제이쿼리 다운로드
안되는디..?
우클릭해서 다른이름으로 저장하면된다
구글이나 마이크로소프트에서 제공하는 CDN 이용하는 방법
프젝새로만들자
$(...)안에 선택자를 넣어서 원하는 요소를 선택하고, 선택된 요소에대하여 여러가지 조작.
$(Selector).action();
ex ) $('h2').css("background","blue")
메소드체이닝도 가능하다. 물고물고해서 계속호출하기..
스크립트는 head에 붙이는게 일반적.. 그럼 요소들이 바디에 있기때문에 실행이안됨
페이지가 로드 된 후에 수행되게 ㅎ바꿔줄거임
거의 모든페이지에 있게될 함수임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 배우기</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//자바스크립트 기본방식
// var ele = document.getElementById("demo");
// ele.style.color = "red";
function initPage(){
//jquery사용방식
$('#demo').css("background-color","violet");
$('#demo').css("color","green");
$('#demo').css("font-size","2em");
$('#demo').css("font-family","Georgia");
//이렇게 아이디로 찾는 방식
$("h1").css("color","red");
$("h1").css("font-family","Georgia");
}
$(document).ready( function(){
alert("레디완료");
$("h1").css("background-color","#CECEF6");
});
//document는 예약어고, 객체니까 이 페이지 전체를 이야기하는거임. 이걸 jquery로 객체화시킨거임
</script>
</head>
<body onload="initPage()">
<p id="demo">Jquery 합시다</p>
<h1>This is h1 tag.</h1>
</body>
</html>
document랑 ready뺴구
선택자
선택자를 잘쓰는사람이 제이쿼리를 잘한다
전체선택자 : $('*')
현재 HTML요소 선택자 $(this)
여러개태그선택 $('h1,p')
class선택자 $('.name') class를 선택자로 마니씀
id : $('#name')
www.w3schools.com/js/js_jquery_selectors.asp
$('p.intro') 는 p태그고르고, class가 intro인것만
$('p:first') p태그중 첫번쨰요소
:으로 조건을 더 붙일수있음
$('ul li:first') 한칸띄면 자식이라는 뜻임 ul의 자식중 li의 첫번째자식만
=$('ul li:first-child')
$('[href]') []는 속성임 속성중 href가 잇는것만 뽑음
$("a[target='_blank']")
$("input[name='userAge']")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//페이지로드 후 수행
$(document).ready(function(){
$("body").css("background-color","#00fa9a");
$("h1").click(
function(){
// this.remove();
//hide()써보기위해 this를 제이쿼리 객체로 만들자
$(this).hide();
}
);
});
</script>
</head>
<body >
<h1>클릭하면 사라집니다1</h1>
<h1>클릭하면 사라집니다2</h1>
<h1>클릭하면 사라집니다3</h1>
<h1>클릭하면 사라집니다4</h1>
<h1>클릭하면 사라집니다5</h1>
<h1>클릭하면 사라집니다6</h1>
</body>
</html>
this를 잘써야한다
뭔가 작업하고싶은데 페이지가 쪼개져있음
| div1 p p p |
div2 p p p |
div1의 p에만 css주고싶다면?
div1의 모든요소에 class 같이 줄수도있따.
다른방버은?
p태그를 div1d에있는 것만 뽑헤해줘
$(선택자,[컨택스트])
$("p",document.forms[2]); 이런식으루
컨택스트는 검색의 시작점을 지정. 영역에 제한을 주는거임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//페이지로드 후 수행
$(document).ready(function(){
$("body").css("background-color","#00fa9a");
$("h1").click(
function(){
// this.remove();
//hide()써보기위해 this를 제이쿼리 객체로 만들자
$(this).hide();
}
);
//컨택스트이용
var d = $("div");
$('p',[d[0]]).css("color","red");
$('p',[d[1]]).css("font-size","3em");
});
</script>
</head>
<body >
<h1>클릭하면 사라집니다1</h1>
<h1>클릭하면 사라집니다2</h1>
<h1>클릭하면 사라집니다3</h1>
<h1>클릭하면 사라집니다4</h1>
<h1>클릭하면 사라집니다5</h1>
<h1>클릭하면 사라집니다6</h1>
<div >
<p>이렇게</p>
<p>이렇게</p>
<p>이렇게</p>
</div>
<div>
<p>저렇게</p>
<p>저렇게</p>
<p>저렇게</p>
</div>
</body>
</html>
많이쓰는것
hide(), show(), css(), .html() <<innerHTML이랑 똑같음 .html(이안에내용이 이너HTMl이됨)
.html() < get 이고괄호안에 내용쓰면 set
text() 도 많이씀
$("html요소"), $("html요소",{propertis})
인수로 전달된 html문자열로 새로운 엘리먼트를 직접 생성
생성된 엘리먼트를 DOM트리의 원하는 부분에 삽입하여 실행 중에 문서를 만들 수 있음
propertis 는 새로 만들어진 요소의 속성, 이벤트 함수등을 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//페이지로드 후 수행
$(document).ready(function(){
$("body").css("background-color","#00fa9a");
$("h1").click(
function(){
// this.remove();
//hide()써보기위해 this를 제이쿼리 객체로 만들자
$(this).hide();
}
);
//컨택스트이용
var d = $("div");
$('p',[d[0]]).css("color","red");
$('p',[d[1]]).css("font-size","3em");
///p요소 생성해서 body에 추가하기
});//ready
function addElement(){
//p요소 생성해서 body에 추가하기
//1.jquery로 p요소 생성
var greet = ["안녕하세요","반갑습니다","안녕히계세요"];
var ran = Math.floor(Math.random()*3);
var ele = $("<p id='p1' onclick='proc1()'>"+greet[ran]+" </p>");
//2.생성한 p요소를 body에 추가
$(ele).css("color","red");
ele.appendTo("body");
}
function proc1(){
alert("하이");
}
</script>
</head>
<body >
<h1>클릭하면 사라집니다1</h1>
<h1>클릭하면 사라집니다2</h1>
<h1>클릭하면 사라집니다3</h1>
<h1>클릭하면 사라집니다4</h1>
<h1>클릭하면 사라집니다5</h1>
<h1>클릭하면 사라집니다6</h1>
<div >
<p>이렇게</p>
<p>이렇게</p>
<p>이렇게</p>
</div>
<div>
<p>저렇게</p>
<p>저렇게</p>
<p>저렇게</p>
</div>
<button type="button" onclick="addElement()">클릭</button>
</body>
</html>
// var ele = $("<p id='p1' onclick='proc1()'>"+greet[ran]+" </p>");
//더 이쁘게적기
var ele = $('<p>',{
"id":"p1"
,"onclick":"proc1()"
,"text" :greet[ran]
});proc()으로 안가고 바로 fuction주려면
,"click" : function(){showMessage()};하면 됨
,"style" : "color:red;"스타일은 이렇게
컴마는 앞에 넣기
var ele = $('<p>',{
"id":"p1"
,"click":function(){
$(this).css("font-size", "4em");
$(this).css("color", "blue");
}
,"text" :greet[ran]
});클릭이벤트 줘보자
$(this).css("font-size", "+=10px");폰트사이즈 저렇게 해두 됨
화면이 로딩되면 body안에 이미지 추가버튼 만들어지기
버튼클릭시 동적으로 이미지 추가하기 (w, h 지정)
이미지 클릭 시 이미지 테두리 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지동적추가하기</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready( function(){
//이미지추가버튼 생성
var newButton = $("<button type='button' onclick='addImg()'>이미지추가</button>");
newButton.appendTo("body");
});
function addImg(){
var w = prompt("가로길이를 입력하세요");
var h = prompt("세로길이를 입력하세요");
var newbr = $('<br>');
var newImg = $('<img>',{
"src" : "../../images/pig.jpg"
,"style" : "width:"+w+"px; height: "+h+"px;"
,"click" : function(){
$(this).css("border","10px solid #CECEF6");
}
});
newbr.appendTo("body");
newImg.appendTo("body");
}
</script>
</head>
<body>
<h1>Jquery 예제 3 - 이미지 동적 추가하기 </h1>
</body>
</html>
// var newbr = $('<br>');
// newbr.appendTo("body");
// newImg.appendTo("body");
$("body").append('<br>').append(newImg);
br 추가안하구 이렇게 해두 된다 !! br 다음에 들어가는것!!!
$().text()
랑 $().html() 의 차이?
.html은 태그안에꺼 싹다가져옴
text()는 모든 선택태그의 문자
html()은 선택태그가 여러개인 경우 첫번째 태그만
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery text와 html</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function proc(){
var len = $("p").length;
var arr = $("p");
for(var i = 0; i<arr.length; i++){
console.log(arr[i]);
$("p").each(function(){
console.log(this);
})
}
}
</script>
</head>
<body>
<p>jQuery 재밌다.. <strong>진짜?</strong></p>
<p>jQuery 재밌다</p>
<button type="button" onclick="proc()" >클릭</button>
</body>
</html>
'Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| jquery (0) | 2020.12.11 |
|---|---|
| jquery (0) | 2020.12.10 |
| JS HTML 이벤트 (0) | 2020.12.07 |
| dom (0) | 2020.12.04 |
| BOM DOM (0) | 2020.12.03 |