직무교육 15일차(jQuery)

봄봄이ㅤ 2017. 8. 2. 09:02

2017. 8. 2. 09:02

[jQuery]

· 자바스크립트 라이브러리

- 자바스크립트를 사용하기 쉽게 포장해놓은 것이다.

- cross browser - 브라우저 종류 상관없이 자바스크립트를 지원하기 위한 목적이다.

- DOM을 쉽게 다루도록 포장해놓은 것이다.

- chane식 메소드 방식이다. (DOM객체(객체).함수.함수.함수)

· jQuery 사용 방법

1) cdm 방식

https://code.jquery.com/jquery-3.2.1.min.js

2) 설치 방식

http://jquery.com/download/

Download the compressed, production jQuery 3.2.1

<!DOCTYPE html>

<head>

<title>Title</title>

function $(sel) {

domObj = document.querySelector(sel);

return domObj;

}

function fn() {

$('#mydiv').innerText="korea";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function $(sel) {

domObj = document.querySelector(sel);

domObj.text = function (txt) {

this.innerText=txt;

}

return domObj;

}

function fn() {

$('#mydiv').text('korea2');

}

</script>

</head>

<body>

</body>

</html>

· jQuery 문장의 구조

- $('선택자').메소드

- $(객체).메소드

- $('태그').메소드

· jQuery cheat sheet

https://oscarotero.com/jquery/

<!DOCTYPE html>

<head>

<title>Title</title>

function fn(){

$('#mydiv').text('korea');

s=$('#mydiv').text();//id가 mydiv인 div의 값을 받아온다.

alert(s);

$('#mydiv').css('color', 'blue').text('하하하').css('background-color', 'yellow');

//체인방식으로 여러가지 함수를 사용할 수 있다.

$('#mydiv').css({'color':'red', 'background-color':'yellow'})

//속성을 여러가지 주고 싶을 경우에는 JSON 형식으로!

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('*').css('color', 'red');

$('div').css('color', 'red');

$('.myp').text('korea');

$('p, div').css('color', 'red');

$('p.myp').css('color', 'red');

$('div li').css('color', 'red');

$('ul>li').text('korea');

}

</script>

</head>

<body>

<h1>Title</h1>

<div>

<ul>

</ul>

</div>

<ul>

</ul>

<button onclick="fn()">check</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('#myli + li').css('color', 'red');//id가 myli의 오른쪽 옆 형제만

$('#myli ~ li').css('color', 'red');//id가 myli의 오른쪽 형제 모두

$('[src]').css('border', '2px solid red');//src 속성이 있는 것

$('[src="image/a.jpg"]').css('border', '2px solid red');//src 속성이 image/a.jpg인 것

$('[src*="jpg"]').css('border', '2px solid red');//src 속성에 jpg가 있는 것

$('[src^="image"]').css('border', '2px solid red');//src 속성이 image로 시작하는 것

$('[src$="jpg"]').css('border', '2px solid red');//src 속성이 jpg로 끝나는 것

$('p[class]').css('color', 'red');//p태그에 class 속성이 있는 것

}

</script>

</head>

<body>

<ul>

</ul>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('li:even').css('color', 'red');

$('li:odd').css('color', 'red');

$('li:first').css('color', 'red');

$('li:last').css('color', 'red');

$('li:eq(8)').css('color', 'red');

$('li:gt(2)').css('color', 'red');//inded2보다 큰 것->index3부터

$('li:lt(3)').css('color', 'red');//index3보다 작은 것 ->index0~2

$('li:not(:first)').css('color', 'red');//first가 아닌 것

$('li:not(:eq(2))').css('color', 'red');//index2가 아닌 것

$('li:contains("hello")').css('color', 'red');//li에 text가 hello인 것

$('div:has(span)').css('color', 'red');//div태그에서 span태그를 가지고 있는 것

$('li:nth-child(2n)').css('color', 'red');

}

</script>

</head>

<body>

<ul>

<li>fruit0</li>

<li>fruit1</li>

<li>hello</li>

<li>fruit3</li>

<li>fruit4</li>

<li>fruit5</li>

<li>fruit6</li>

<li>fruit7</li>

<li>fruit8</li>

<li>fruit9</li>

</ul>

<button onclick="fn()">check</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

num1=$('#num1').val();//id num1의 값 받아오기

num2=$('#num2').val();//id num2의 값 받아오기

result = Number(num1)+ Number(num2);//문자이기때문에 숫자로 변환 후 덧셈

$('#mya').text(result);//값 입력할 때 text

}

</script>

</head>

<body>

숫자1 : <input id="num1" type="number"><br>

숫자2 : <input id="num2" type="number"><br>

결과 : <a id="mya"></a><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

arr=[10,20,30,40];

arr.forEach(function (v, i) {

console.log(v, i);

})

$.each(arr,function (i, v) {

console.log(i, v);

})

j={'name':'홍길동', 'age':20}

$.each(j, function (i, v) {

console.log(i, v);

})

function fn() {

liarr = document.querySelectorAll('li')

for(n=0; n<liarr.length; n++){

console.log(liarr[n].innerText);

}

$('li').each(function (i, v) {

console.log(i, v);

console.log(v.innerText);

console.log($(v). text());

console.log($(this).text());

})

}

</script>

</head>

<body>

<ul>

</ul>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn1() {

a = $('[name="hobby"]:checked').val();

$('#mydiv1').text(a);

}

function fn2() {

var s=""

s = $('[type="checkbox"]:checked').each(function (i, v) {

//console.log($(v).val());

s += $(v).val();

$('#mydiv2').text(s);

});

}

function fn3() {

b = $('[name="job"]>option:selected').val();

$('#mydiv3').text(b);

}

</script>

</head>

<body>

hobby1 : <a id="mydiv1"></a>

수영 : <input type="radio" value="수영" name="hobby"><br>

낚시 : <input type="radio" value="낚시" name="hobby"><br>

영화 : <input type="radio" value="영화" name="hobby"><br>

</fieldset>

<button onclick="fn1()">button1</button><br><br>

hobby2 : <a id="mydiv2"></a>

수영 : <input type="checkbox" value="수영"><br>

낚시 : <input type="checkbox" value="낚시"><br>

영화 : <input type="checkbox" value="영화"><br>

</fieldset>

<button onclick="fn2()">button2</button><br><br>

company : <a id="mydiv3"></a><br>

</select>

<button onclick="fn3()">button3</button><br><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('img').attr('src', 'image/b.jpg');

s = $('img').attr('src');//img태그의 src가 어떤 값인지 궁금할 때

alert(s);

s = $('#mycheck').attr('checked');

alert(s)

$('#mycheck').prop('checked', false);//버튼누르면 체크됨

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('#mydiv1').html('<h1>korea</h1>');//id mydiv1 내용을 korea로 변경

/*추가*/

$('#mydiv1').append('<h1>korea</h1>');//버튼 누를 때마다 id mydiv1 다음에 korea 추가

//$('<h1>korea</h1>').appendTo('#mydiv1');

/*h1 = document.createElement('h1');

h1.innerText='korea';

mydiv1.appendChild(h1);*/

$('#mydiv1').prepend('<h1>korea</h1>');//버튼 누를 때마다 id mydiv1 앞쪽에 korea 추가

/*삭제*/

$('<h1>korea</h1>').prependTo('#mydiv1');

$('#mydiv2').remove();//id mydiv2 DOM 삭제

$('div').remove();//div 전체 삭제

$('#mydiv2').empty();//id mydiv2의 내용 삭제

$('#mydiv2').hide();//style="display:none;" 다시 나타나게 하려면 $('#mydiv2').show();

}

</script>

</head>

<body>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

name = $('[type = "text"]').val();

age = $('[type = "number"]').val();

if(name !="" && age != "") {//입력칸 공백 아닐 경우에만 테이블에 추가

$('#mytable').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>')

}else{

alert("입력해주세요.");

}

$('[type = "text"]').val("");

$('[type = "number"]').val("");

}

function rfn() {

$('tr:gt(0)').remove();//index 0보다 큰 row 삭제

}

</script>

</head>

<body>

이름 : <input type="text"><br>

나이 : <input type="number"><br>

<tr>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('li:first').css('color', 'red');

//$('li').first().css('color', 'red');

$('li:eq(1)').css('color', 'red');

//$('li').eq(1).css('color', 'red');

$('div.mydiv').css('color', 'red');

//$('div').filter('.mydiv').css('color', 'red');

$('div:not(.mydiv)').css('color', 'red')

//$('div').not('.mydiv').css('color', 'red')

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

/*id mydiv의 자식인 p*/

$('#mydiv > p').css('color', 'red');

//$('#mydiv').children('p').css('color', 'red');

/*id mydiv의 자식+후손인 p*/

$('#mydiv p').css('color', 'red');

//$('#mydiv').find('p').css('color', 'red');

/*id myp의 형제들*/

$('#myp').next().css('color', 'red');//id myp의 다음에 있는 것

$('#myp').next().next().css('color', 'red');//id myp의 다음다음에 있는 것

$('#myp').nextAll().css('color','red');//id myp의 다음에 있는 전부

$('#myp').prev().css('color', 'red');//id myp의 이전에 있는 것

/*id myp의 부모*/

$('#myp').parent().css('color', 'red');

}

</script>

</head>

<body>

test1

<div>

<p>KOREA</p>

</div>

<p>check1</p>

<p id="myp">check2</p>

<p>check3</p>

<p>check4</p>

</div>

</body>

</html>

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 17일차(jQuery) (0)	2017.08.04
직무교육 16일차(jQuery) (0)	2017.08.03
직무교육 14일차(HTML5 API) (0)	2017.08.01
직무교육 13일차(HTML5 API) (0)	2017.07.26
직무교육 12일차(DB연동) (1)	2017.07.25

동그리동동닷컴

직무교육 15일차(jQuery)

'SK고용디딤돌' 카테고리의 다른 글

+ Recent posts

티스토리툴바