js11_Query

신기한 쿼리의 세계,,,

$(function(){

$('h1').css('color','red'); // getElementTagName('h1').css()

$('p').css('color', 'green');

$('#target').css('color', 'orange');

$('h1#target').css('color', 'mediumseagreen');

});

</script>

<!-- <style>

h1{color: red;}

h1#target{color: green;}

</style> -->

</head>

<body>

<h1>"Try it Yourself" 편집기.</h1>

<p>"Try it Yourself" 편집기를 사용하면 jQuery를 쉽게 배울 수 있습니다.

코드를 편집하고 브라우저에서 결과를 볼 수 있습니다.</p>

<p id="target">W3Schools에서 제공하는 무료 "내 학습" 프로그램으로 진행 상황을 추적하세요.

계정에 로그인하고 포인트 적립을 시작하세요!

이것은 선택적 기능입니다.

My Learning을 사용하지 않고 W3Schools를 공부할 수 있습니다.</p>

<h1 id="target">"Try it Yourself"</h1>

</body>

// 속성 선택자

// 1. input 태그의 속성 type이 text의 val을 'Hello jQuery'입력

// 2. select태그의 선택된 옵션의 값을 3초마다 alert으로 출력

// - 3초마다

$(function(){

$('input[type=text]').val('Hello jQuery');

setInterval(()=>{

let value = $('select > option:selected').val();

alert(value);

},3000);

})

</script>

</head>

<body>

<option value="Apple">Apple</option>

<option value="Horse">Horse</option>

</select>

//위치선택자->요소:odd, 요소:even, 요소:first, 요소:last

//함수선택자->요소:eq(n), 요소:gtn(n), 요소: nth-child(3n+1)

//요소:odd, 요소:even, 요소:first, 요소: last

$(() => {

$('tr:odd').css('background','orange');

$('tr:even').css('background','lightgrey');

$('tr:eq(0)').css('background','black').css('color','white');

$('tr:nth-child(3n)').css('background','green').css('color','white');

$('tr:nth-child(3n+1)').css('background','purple').css('color','blue');

})

</script>

</head>

<body>

</colgroup>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr><tr>

</tr><tr>

</tr><tr>

</tr><tr>

</tr>

</table>

</body>

</script>

$(()=>{

// h1을 선택해서 홀수인 요소의 배경색 = green, 글자색 = white

// chain method를 이용해서 작성해보기

//filter(위치선택자).css()

$('h1').filter(':odd')

.css('color','white')

.css('background','green');

$('h1').filter(':even')

.css('color','white')

.css('background','red');

$('h1').filter((index)=>{

return index % 3 === 0

}).css({background:'yellow',color:'black'})

$('h1').filter(index=>

index % 3 === 0

).css({background:'blue',color:'black'})

})

</script>

</head>

<body>

<h1>header-1</h1>

<h1>header-2</h1>

<h1>header-3</h1>

<h1>header-4</h1>

<h1>header-5</h1>

<h1>header-6</h1>

</body>

</script>

<style>

h1.item{color:red;}

h1.selected{color:blue;}

</style>

// 문서객체에 속성추가 addClass(), 삭제는 removeClass()

$(()=>{

$('h1').removeClass('item');

$('h1').addClass('selected');

})

</script>

</head>

<body>

<h1 class="item">header-3</h1>

</body>

</script>

$(()=>{

// A. attr 추가 or 읽기

let src = $('img').attr('src'); // 배열이 아니라 첫 번째 객체의 속성만

// alert(typeof src);

let wd = $('img').attr('width');

alert(wd);

alert(typeof wd);

// 1. 값

// $('img').attr('width', 300);

// $('img').attr('height', 300);

// 2. function

$('img').attr('width',(index)=>{

return (index+1) * 100;

})

// 3. object

$('img').attr({

// width: 400,

// width: function(inex) {return(index+1)*100;}

width: index => (index+1)*100,

height:100,

})

// B. 속성삭제 removeAttr()

$('h1').removeAttr('data-index');

})

</script>

</head>

<body>

<h1 data-index = "1">Header-1</h1>

<h1 data-index = "2">Header-2</h1>

<h1 data-index = "3">Header-3</h1>

</body>

</script>

// html(), text(), remove(), empty()

$(()=>{

// 1. html() : 문서객체

let h1 = $('h1').html()

// alert(h1);

// alert(typeof h1); // string1

// 2. text() : 문서객체의 내부 문자열

let h1_text = $('h1').text(); // 전체 h1태그의 문자열을 가져오시오

alert(h1_text)

// 3. html() : 문서객체에 추가하기

$('div.html').html('<h3>$().html()매서드</h3>');

// 4. text() : 문서객체 내부에 문자열 추가

$('div.text').text('<h3>$().text()매서드</h3>');

// 5. remove() : 문서객체 삭제

$('h1').first().remove();

// 6. empty() : 문서객체 내부문자열을 비움

$('div.text').first().empty();

})

</script>

</head>

<body>

<h1>header-1</h1>

<h1>header-2</h1>

<h1>header-3</h1>

</body>

// $('tag') -> 선택자

// $('<tag>') -> 생성자

$(()=>{

// 1. appendTo

$('<h1></h1>').html('Hello jQuery(1)').appendTo('body');

$('<h1>Hello jQuery(2)</h1>').appendTo('body');

// 2. attr().appenTo()

$('<img>').attr('src','./img/지수.jpg').appendTo('body');

// 3. 객체 $('<img>', {})

$('<img>', {

src: './img/지수2.jpg',

width: 300,

height: 300,

}).appendTo('body');

// 4. append : 문자열 형태의 태그를 문서객체로 추가

let h1 = '<h1>hello World(1)</h1>'

let h2 = '<h1>hello World(2)</h1>'

$('body').append(h1,h2,h1,h2);

})

</script>

// 움직이기 효과

$(()=>{

// img 크기 조정

$('img').css({'width':300, 'height':200})

// 1초마다 객체를 이동

setInterval(() => {

$('img').first().appendTo('body');

}, 1000);

})

</script>

</head>

<body>

</body>

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

min-height: 100vh;

}

#container {

position: absolute;

width: 600px;

height: 300px;

border: 5px solid black;

display: flex;

justify-content: space-between;

align-items: center;

}

.arrow{

z-index: 100;

font-size: 2em;

padding: 10px;

background-color: black;

color: white;

opacity: 0.2;

}

.arrow:hover{

opacity: 1;

}

const container = document.querySelector('#container');

const pics = ['지수jpg','지수2.jpg','지수3.jpg' ];

container.style.backgroundImage = `url(./img/${pics[0]})`;

const arrows = document.querySelectorAll('.arrow');

let i = 0;

arrows.forEach(arrow => {

arrow.addEventListener('click', e=>{

if(e.target.id === "left"){

i--;

if(i<0) i = pics.length - 1;

}else if(e.target.id === "right"){

i++;

if(i>=pics.length) i = 0;

}

container.style.backgroundImage = `url(./img/${pics[i]})`

})

</head>

<body>

</div>

</body>

'일 > javascript' 카테고리의 다른 글

js13_effect (0)	2023.06.01
js12_events (0)	2023.06.01
js10_exception (0)	2023.06.01
js09_builtin (0)	2023.06.01
js08_events (1)	2023.06.01

DASHBOARD

js11_Query

'일 > javascript' 카테고리의 다른 글

티스토리툴바

js11_Query

'일 > javascript' 카테고리의 다른 글

'일/javascript' Related Articles

티스토리툴바