'JQUERY' 카테고리의 글 목록 (2 Page)

JQUERY

text()/ html() 2022.08.28
each(), addClass(), toggleCalss() 2022.08.28
each(), addClass(), toggleCalss() 2022.08.28
조상, 후손, 동위 선택자 2022.08.28
순서 관련 선택자 2022.08.28
select option change 2022.08.28
checkbox 관련 2022.08.28
css, val, attr, mouseenter 이벤트까지. 2022.08.28
선택자, CSS, VAL, ATTR 2022.08.28
축약형 2022.08.28

text()/ html()

나이많은 초보 2022. 8. 28. 18:46

2022. 8. 28. 18:46

<body>

</h2>

</h2>

//text()/ html()

//text(): html요소를 배제하고 문자열만 저장하건, 가져오는 함수

//html(): html요소를 태그로 올바르게 인식하는 함수

var temp=$('.test1').html();//getter의 역활

console.log(temp);

$('.test2').html(temp); //setter 의 역활

$('.test2').css('color','blue');

</script>

<hr>

</h1>

</h1>

$(function(){

var temp=$('#test3').text();//getter의 역할

console.log(temp);

$('#test4').text(temp); //setter 의 역할

//만약 HTML 코드를 문자열로 받는다면?

var str="<a https://www.google.com'>구글로 이동하기</a>";

$('#test4').text(str);

})

</script>

</body>

'JQUERY > 함수' 카테고리의 다른 글

요소추가. append, prepend, before, after (0)	2022.08.28
요소 추가...appendTo, prepentTo, insertBefore..Afert (0)	2022.08.28
each(), addClass(), toggleCalss() (0)	2022.08.28
each(), addClass(), toggleCalss() (0)	2022.08.28
select option change (0)	2022.08.28

each(), addClass(), toggleCalss()

나이많은 초보 2022. 8. 28. 18:40

2022. 8. 28. 18:40

<title>Document</title>

<style>

.high_light_0{background: red; color: white;}

.high_light_1{background: orange; color: black;}

.high_light_2{background: green; color: white;}

.high_light_3{background: blue; color: white;}

.high_light_4{background: purple; color: white;}

</style>

</head>

<body>

<p>

$.each(객체(배열), function(index,item){. . .}); <br>

index:배열에 해당하는 반복 순번, 특정 객체의 경우 해당 객체의 각 키들 <br>

item: 해당 순번에 맞는 값

</p>

var arr=[

{name : '네이버',address : 'https://www.naver.com'},

{name : '다음', address: 'https://www.daum.net'},

{name : '구글', address : 'https://www.google.com'}

];

$.each(arr,function(index,item){

var outHTML = "";

console.log(index + "/" + item);

console.log(item);

outHTML +='<a href="'+item.address+ '"target="_blank">';

outHTML +='<span>'+item.name+'</span>';

console.log(outHTML);

//text()/ html()

//text(): html요소를 배제하고 문자열만 저장하건, 가져오는 함수

//html(): html요소를 태그로 올바르게 인식하는 함수

// $('#wrap1').text(outHTML);

$('#wrap1').html($('#wrap1').html()+outHTML);

});

</script>

</div>

console.log($('#wrap2').children());

$('#wrap2 h1').each(function(index,item){

$(this).addClass('high_light_'+index);

//addClass()<---> removeClass();

//선택한 요소에 클래스값을 추가할수 있는 addClass.

});

$('#sw').click(function(){

$(this).toggleClass('high_light_4');

//toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다.

//클릭할때 마다 넣다 뺏다 할수 있음

});

</script>

</body>

'JQUERY > 함수' 카테고리의 다른 글

요소 추가...appendTo, prepentTo, insertBefore..Afert (0)	2022.08.28
text()/ html() (0)	2022.08.28
each(), addClass(), toggleCalss() (0)	2022.08.28
select option change (0)	2022.08.28
checkbox 관련 (0)	2022.08.28

each(), addClass(), toggleCalss()

나이많은 초보 2022. 8. 28. 18:37

2022. 8. 28. 18:37

<title>Document</title>

<style>

.high_light_0{background: red; color: white;}

.high_light_1{background: orange; color: black;}

.high_light_2{background: green; color: white;}

.high_light_3{background: blue; color: white;}

.high_light_4{background: purple; color: white;}

</style>

</head>

<body>

<p>

$.each(객체(배열), function(index,item){. . .}); <br>

index:배열에 해당하는 반복 순번, 특정 객체의 경우 해당 객체의 각 키들 <br>

item: 해당 순번에 맞는 값

</p>

var arr=[

{name : '네이버',address : 'https://www.naver.com'},

{name : '다음', address: 'https://www.daum.net'},

{name : '구글', address : 'https://www.google.com'}

];

$.each(arr,function(index,item){

var outHTML = "";

console.log(index + "/" + item);

console.log(item);

outHTML +='<a href="'+item.address+ '"target="_blank">';

outHTML +='<span>'+item.name+'</span>';

console.log(outHTML);

//text()/ html()

//text(): html요소를 배제하고 문자열만 저장하건, 가져오는 함수

//html(): html요소를 태그로 올바르게 인식하는 함수

// $('#wrap1').text(outHTML);

$('#wrap1').html($('#wrap1').html()+outHTML);

});

</script>

</div>

console.log($('#wrap2').children());

$('#wrap2 h1').each(function(index,item){

$(this).addClass('high_light_'+index);

//addClass()<---> removeClass();

//선택한 요소에 클래스값을 추가할수 있는 addClass.

});

$('#sw').click(function(){

$(this).toggleClass('high_light_4');

//toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다.

//클릭할때 마다 넣다 뺏다 할수 있음

});

</script>

</body>

'JQUERY > 함수' 카테고리의 다른 글

text()/ html() (0)	2022.08.28
each(), addClass(), toggleCalss() (0)	2022.08.28
select option change (0)	2022.08.28
checkbox 관련 (0)	2022.08.28
css, val, attr, mouseenter 이벤트까지. (0)	2022.08.28

조상, 후손, 동위 선택자

나이많은 초보 2022. 8. 28. 18:19

2022. 8. 28. 18:19

<div style="width:500px;"> div(great-grandparent)

<ul> ul(grandparent)

<li> li(parent)

</li>

</ul>

</div>

<div style="width:500px"> div(great-grandparent)

<p> p(parent)

</p>

</div>

$('span:eq(0)').parent().css({

color:'red',

border:'2px solid red'

});

//$('span:eq(0)').parent().praret().parent()

$('span:eq(0)').parents('ul').css({

//ul->div로 표기하면 div 2개가 파란색이됨.

//미기재하면 전체 부모가 모두 변경됨.

color:'blue',

border : '2px solid blue'

});

$('span:eq(1)').parentsUntil('.wrap1').css({ //모든 부모모

color:'green',

border:'2px solid green'

})

---------------------------------------------------------------------------

div.wrap2>div[style="width 500px;"] ch.div(chind)

<div style="width:500px"> div(child)

<ul> ul(grandchild)

<li>(gerat-drandchiod)

<span>

span

</span>

</li>

</ul>

</div>

<div style="width:500px;"> div(child)

<p> p(grandchild)

<span>

span

</span>

</p>

</div>

$('.wrap2').children().css({

//children()한번더 기재하면 자식자식

color : 'blue',

border : '2px solid blue'

});

</script>

$('.wrap2').find('ul').css({

//특정자식찾기가 가능해짐 //자식은 너무 많아서 find로 직접 찾기

color:'red',

border : '2px solid red'

});

</script>

///////////////////////////////////////////////////////////////////////////////////////////

div(parent)

<span>2번 span태그</span>

</div>

// side 옆에있는

$('h2').siblings().css({

color:'red',

border :'2px solid red'

});

$('h2').siblings('p').css({

color:'blue',

border :'2px solid blue'

});

// prev 앞에

$('h2').prev().css({

background:'lightblue'

});

$('h2').prevAll().css({

background : 'gold'

});

$('h2').prevUntil('p').css('color','black');

// next 다음에

$('h2').next().css({

color:'plum',

border:'2px solid plum'

});

$('h2').nextAll().css('background', 'wheat');

$('h2').nextUntil('p').css('border','2px solid darkgreen');

</script>

'JQUERY > 기초' 카테고리의 다른 글

순서 관련 선택자 (0)	2022.08.28
선택자, CSS, VAL, ATTR (0)	2022.08.28
축약형 (0)	2022.08.28

순서 관련 선택자

나이많은 초보 2022. 8. 28. 18:06

2022. 8. 28. 18:06

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

$('tr:first').css('background','yellow');

$('tr:last').css('background','lawngreen');

$('tr:odd').css('background','cyan'); //홀수 인덱스

$('tr:even').css('background','wheat'); //짝수 인덱스

$('table tr:eq(3)').css('color','red');

$('table tr:nth-child(2n+1)').css('color','yellow')

//ntn-child(n)은 부모 안의 모든 요소중 n번째 요소

//n은 0,1,2,3~~정수를 의미// 5n은 5의 곱하기로 보면 되고 n+5은 5번째 이후 모든 요소로 보면됨.

//an+b== a증감수, b는 오프셋, n은 정수///3n+1...n=0이면 1....1이면 4, 2이면 7....1부터 3번째마다 선택됨

//ntn-child(2n+1)은 첫번째 요소로부터 2번째 마다 선택

</script>

</table>

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자 (0)	2022.08.28
선택자, CSS, VAL, ATTR (0)	2022.08.28
축약형 (0)	2022.08.28

select option change

나이많은 초보 2022. 8. 28. 17:57

2022. 8. 28. 17:57

<h3>select와 option태그 상태 선택자</h3>

이메일 입력 : <br>

</select>

function getEmail(){

var userId=$('#email').val();

var domain=$('option:selected').val();

$('#result').html(userId+domain);

}

$('#domain').change(getEmail);

</script>

'JQUERY > 함수' 카테고리의 다른 글

each(), addClass(), toggleCalss() (0)	2022.08.28
each(), addClass(), toggleCalss() (0)	2022.08.28
checkbox 관련 (0)	2022.08.28
css, val, attr, mouseenter 이벤트까지. (0)	2022.08.28
input의 속성값 가져오기 (0)	2022.08.25

checkbox 관련

나이많은 초보 2022. 8. 28. 17:37

2022. 8. 28. 17:37

선호 영화 장르 : <br>

<input type="checkbox" name="genre" id="sf">SF

<input type="checkbox" name="genre" id="ani"> 애니메이션

<input type="checkbox" name="genre" id="thriller">스릴러

<br>

<input type="checkbox" name="genre" id="romentic"> 로멘틱코메디

<input type="checkbox" name="genre" id="action">액션

//onchange: 값이 변경될 때를 감지하는 이벤트 리스너

$('input:checkbox').change(checkGenre);

function checkGenre(){

console.log($(this).attr('id'));

console.log($(this).prop('checked'));

//attr()/prop()

//attr()은 id, class와 같이 속성값이 문자열일 경우 사용하고,

//prop()는 checked, disabled,required와 같이 속성값이

//true/false 로 나뉘는 속성을 확인 할때 사용한다.

if($(this).prop('checked')){

$(this).css({

width:'30px',

height:'30px'

});

} else{

$(this).css({

width:'15px',

height: '15px'

})

}

'JQUERY > 함수' 카테고리의 다른 글

each(), addClass(), toggleCalss() (0)	2022.08.28
select option change (0)	2022.08.28
css, val, attr, mouseenter 이벤트까지. (0)	2022.08.28
input의 속성값 가져오기 (0)	2022.08.25
마우스 포인트 위치할때와 잃었을때 focus()/ bulr() (0)	2022.08.25

css, val, attr, mouseenter 이벤트까지.

나이많은 초보 2022. 8. 28. 17:33

2022. 8. 28. 17:33

<body>

텍스트 상자: <input type="text"> <br>

버튼 : <input type="button" value="버튼"> <br>

체크박스 : <input type="checkbox" name="" id=""> <br>

파일선택 : <input type="file" name="" id=""><br>

이미지 : <input type="image"

src="../FRONT_HTML_CSS/WebContent/img/dog-g559b26e85_1920.jpg"

alt="" width="500px" height="300px"> <br>

$(function(){

$('input:text').css('background','lemonchiffon');

$('input:button').val('짱크게!')

.css({width : '100px',

'height':'100px'});

$('input:checkbox').attr('checked',true);

$('input:file').css('background','yellow');

$('input:image').mouseenter(function(){

$(this).attr('src','#');

});

$('input:image').mouseout(function(){

$(this).attr('stc','#');

});

</script>

'JQUERY > 함수' 카테고리의 다른 글

select option change (0)	2022.08.28
checkbox 관련 (0)	2022.08.28
input의 속성값 가져오기 (0)	2022.08.25
마우스 포인트 위치할때와 잃었을때 focus()/ bulr() (0)	2022.08.25
toggle 이란 (0)	2022.08.25

선택자, CSS, VAL, ATTR

나이많은 초보 2022. 8. 28. 17:22

2022. 8. 28. 17:22

<body>

<h1>jQuery 선택자</h1>

$(function(){

$('*').css('background','green')

});

</script>

$(function(){

$('h4').css('color','orangered')

$('h5,h6').css('background','white')

});

</script>

$(function(){

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

$('.g1.g2').css('color','indianred');

$('.g1, .g2').css('border','3px solid blue')

})

</script>

$(function(){

$('#choco').css('color','chocolate')

})

</script>

<ul>

<li>

</li>

<ol>

</ol>

</ul>

$(function(){

$('li>h4').css('color','white');

$('ul li').css('background','plum');

});

</script>

<p>

요소[속성]: 해당 속성을 가진 요소를 선택 <br>

ex)>input type = "text"--> $('input[type]'); <br>

요소[속성=속성값]: 해당 속성의 값을 가진 요소를 선택 <br>

ex) div[name=daniel]: div 중 name 속성의 값이 'daniel'인 div <br>

요소[속성~=속성값]: 해당 속성의 특정 값을 단어로써 포함하는 요소 <br>

ex) div class="hello whoami" -->; $('div[class~=hello]'); <br>

요소[속성 $=속성값]:속성 안의 값이 특정 단어로 끝나는 경우 <br>

ex) div class="prisonbox"-->;$('div[class$=box]'); <br>

요소[속성 *=속성값]: 속성값 들 중 특정 값이 존재하면 선택 <br>

ex)div class="applefox" -->; $('div[class*=lef'); <br>

</p>

</body>

script로 변경

$(function(){

$('input[type=text]').val('야 곧 점심시간이다!');

$('input[class~=test1]').val(12345);

$('input.test1').val(123456789);

$('input[type*=ad]').attr('checked',true); //checked속성을 넣어준다.

/* $('input[type$=box]').css('width','25px');

$('input[type$=box]').css('height','25px') */

/* $('input[type$=box').css('width','25px')

.css('height','25px');*/

$('input[type$=box]').css({

width:'25px',

height:'25px'

});

})

</script>

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자 (0)	2022.08.28
순서 관련 선택자 (0)	2022.08.28
축약형 (0)	2022.08.28

축약형

나이많은 초보 2022. 8. 28. 17:04

2022. 8. 28. 17:04

// -JS-

// window.onload=function(){

// alert("웹 문서 로드 직후 실행 됩니다.");

// }

//jQuery

// jQuery(document).ready(function(){

// alert("제이쿼리 실행 확인!");

// });

// 축약형 1차

// jQuery == $

// $(document).ready(function(){

// alert("제이쿼리 축약형 1차");

// });

// 축약형 2차 document 생략

$(function(){

alert("최종 축약 형태입니다.");

});

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자 (0)	2022.08.28
순서 관련 선택자 (0)	2022.08.28
선택자, CSS, VAL, ATTR (0)	2022.08.28

PREV 이전 1 2 3 NEXT 다음

미치게힘든코딩

JQUERY

text()/ html()

'JQUERY > 함수' 카테고리의 다른 글

each(), addClass(), toggleCalss()

'JQUERY > 함수' 카테고리의 다른 글

each(), addClass(), toggleCalss()

'JQUERY > 함수' 카테고리의 다른 글

조상, 후손, 동위 선택자

'JQUERY > 기초' 카테고리의 다른 글

순서 관련 선택자

'JQUERY > 기초' 카테고리의 다른 글

select option change

'JQUERY > 함수' 카테고리의 다른 글

checkbox 관련

'JQUERY > 함수' 카테고리의 다른 글

css, val, attr, mouseenter 이벤트까지.

'JQUERY > 함수' 카테고리의 다른 글

선택자, CSS, VAL, ATTR

'JQUERY > 기초' 카테고리의 다른 글

축약형

'JQUERY > 기초' 카테고리의 다른 글

+ Recent posts

티스토리툴바