문서 | 날짜 | 사용자 | 설명 |
|
2020/07/01 15:09 |
eleven |
Front-End 자주 하는 실수
1.스크립트 로드 순서
"스크립트 로드 순서와 $(document).ready(function(){ } 의 사용을 알 수 있는 코드미러 예제"
아래와 같이, <head> 태그 에 스크립트 작성 시 <head> 태그를 모두 읽은 후 <body> 태그의 내용을 읽기 때문에 |
|
2022/03/31 09:31 |
오션 |
How to load jQuery in Chrome DevTools
* description : Chrome console에서 jQuery 사용하기
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-03-31
Chrome console에서 jQuery 사용하기
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict(); |
|
2021/04/14 11:14 |
오션 |
JavaScript / jQuery CSS Styles
* description : JavaScript / jQuery CSS Styles
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-14
Ref
JavaScript / jQuery CSS Styles
Hiding HTML Elements
HTML 요소를 숨깁니다.
JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1 id="01">Hiding Text Content with JQuery</h1>
<h2 id="02">Hello World!</h2>
<h2 id="03"… |
|
2021/04/14 09:20 |
오션 |
JavaScript / jQuery DOM Selectors
* description : JavaScript / jQuery DOM Selectors
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-14
Ref
JavaScript / jQuery DOM Selectors
jQuery vs JavaScript
jQuery는 2006년 John Resig가 만들었습니다. |
|
2021/04/14 11:25 |
오션 |
JavaScript / jQuery HTML DOM
* description : JavaScript / jQuery HTML DOM
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-14
Ref
JavaScript / jQuery HTML DOM
Removing HTML Elements
HTML 요소를 제거합니다:
JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>Remove an HTML Element with JQuery</h2>
<h2 id="id01">Hello World!</h2>
<h2 id="id02">Hel… |
|
2021/04/14 10:14 |
오션 |
JavaScript / jQuery HTML Elements
* description : JavaScript / jQuery HTML Elements
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-14
Ref
JavaScript / jQuery HTML Elements
Set Text Content
HTML 요소의 내부 텍스트를 설정합니다. |
|
2020/08/14 11:29 |
주레피 |
jQuery
* description : jQuery 관련 내용 기술
* author : 주레피
* email : dhan@repia.com
* lastupdate : 2020-03-18
속성 변경
jquery onclick 속성 변경
Ajax
[Jquery] 제이쿼리, $.ajax() 함수 활용. 비동기 통신
Autocomplete
자동완성 기능
검색어 자동완성 - jQuery Autocomplete 사용법 - 삽질중인 개발자
[jQuery] 제이쿼리 Autocomplete(자동완성) 사용법 및 옵션 살펴보기
autocomplete 높이 고정
jQuery UI Autocomplete: Hightlight Matching Text in jQuery UI Autocomplete
Case Study
Button
값 가져오기… |
|
2021/06/02 13:03 |
오션 |
jQuery #id Selector
* description : jQuery #id Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery #id Selector
Example
id “intro”가 있는 요소를 선택합니다.
<body>
<h1>Welcometo My Homepage</h1>
<p id="intro">My name is Donald.</p>
<p>I live in Duckburg</p>
<script>
$(document).ready(function () {
$('#intro').css('color', 'blue');
});
/* id "intro"가 있는 My name is Donald의 텍스트 컬러를 변경합니다. */
… |
|
2021/06/02 11:47 |
오션 |
jQuery * Selector
* description : jQuery * Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery * Selector
Example
문서(document) 내부의 모든 요소들을 선택합니다. |
|
2021/04/16 16:52 |
오션 |
jQuery - Add Elements
* description : jQuery - Add Elements
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery를 사용하면 새로운 요소/콘텐츠를 쉽게 추가할 수 있습니다.
Add New HTML Content |
|
2021/04/19 16:32 |
오션 |
jQuery - Ajax get() and post() Methods
* description : jQuery - Ajax get() and post() Methods
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery - Ajax get() and post() Methods
jQuery get() 및 post() 메소드는 |
|
2021/04/19 16:25 |
오션 |
jQuery - Ajax load() Method
* description : jQuery - Ajax load() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery - Ajax load() Method
jQuery load() Method
jQuery load() 메서드는 간단하지만 강력한 |
|
2021/04/19 15:55 |
오션 |
jQuery - Ajax Method
* description : jQuery - Ajax Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-05-18 Wed
Source of the article
jQuery - Ajax Introduction
AJAX는 전체 페이지를 다시 로딩 하지 않고, 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다. |
|
2021/04/19 07:41 |
오션 |
jQuery - css() Method
* description : jQuery - css() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
jQuery를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다.
jQuery css() Method |
|
2021/04/19 08:31 |
오션 |
jQuery - Dimensions
* description : jQuery - Dimensions
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Ref
jQuery - Dimensions
jQuery를 사용하면 요소와 브라우저 창의 크기(dimensions, 치수)에 대해 쉽게 작업할 수 있습니다. |
|
2022/11/23 14:59 |
오션 |
jQuery - each() Method
* description : jQuery - each() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-11-23 Wed
Definition and Usage (w3schools)
each() 메소드는 각각의 요소에 대해 실행할 함수를 지정합니다. |
|
2021/04/19 18:20 |
오션 |
jQuery - Filters
* description : jQuery - Filters
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery - Filters
jQuery를 사용하여 특정 요소를 필터링/검색합니다.
Filter Tables |
|
2021/04/16 18:41 |
오션 |
jQuery - Get and Set CSS Classes
* description : jQuery - Get and Set Classes
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다. |
|
2021/04/16 13:18 |
오션 |
jQuery - Get Content and Atrributes
* description : jQuery Effects - Chaining
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery에는 HTML 요소 및 속성을 변경하고 조작하는 강력한 방법이 포함되어 있습니다. |
|
2021/04/16 18:10 |
오션 |
jQuery - Remove Elements
* description : jQuery - Remove Elements
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery를 사용하면 현재 사용되는 HTML 요소들을 쉽게 제거할 수 있습니다. |
|
2021/04/16 14:05 |
오션 |
jQuery - Set Content and Atrributes
* description : jQuery HTML - jQuery Set Content and Attributes
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
Set Content - text(), html(), and val()
이전 페이지와 동일한 세 가지 메서드를 사용하여 콘텐츠를 설정합니다. |
|
2021/04/19 18:16 |
오션 |
jQuery - The noConflict() Method
* description : jQuery - The noConflict() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery - The noConflict() Method
jQuery를 사용하면서 페이지에서 다른 프레임워크를 사용하려면 어떻게 해야 합니까? |
|
2021/04/19 10:50 |
오션 |
jQuery - Traversing
* description : jQuery - Traversing
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery - Traversing
What is Traversing?
“이동(move through)“을 의미하는 jQuery traversing |
|
2022/10/24 13:30 |
오션 |
jQuery :even Selector
* description : :even Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-10-24 Mon
The source of this article
jQuery :even Selector
Definition and Usage
:even 셀렉터는 짝수 인덱스 번호(예: 0, 2, 4 등)가 있는 각 요소를 선택합니다. |
|
2021/06/02 16:19 |
오션 |
jQuery :even Selector
* description : jQuery :even Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery :even Selector
Example
인덱스 넘버가 짝수인 모든 <tr> 요소를 선택합니다. |
|
2021/06/02 15:34 |
오션 |
jQuery :first Selector
* description : jQuery :first Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery :first Selector
Example
첫 번째 <p> 요소를 선택합니다.
<body>
<p>This is the first paragraph.</p> <!-- 이 p 요소만 변경됨. -->
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<script>
$(document).ready(function () {
$("p:first").css("background-color", "yellow");
});
</scr… |
|
2021/06/02 17:39 |
오션 |
jQuery :first-child Selector
* description : jQuery :first-child Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery :first-child Selector
Example
부모 요소의 첫 번째 자식인 모든 |
|
2021/06/02 15:54 |
오션 |
jQuery :last Selector
* description : jQuery :last Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery :last Selector
Example
마직막 <p> 요소를 선택합니다.
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p> <!-- 텍스트 컬러 변경됨 -->
<script>
$(document).ready(function () {
$("p:last").css("color", "crimson");
});
</script>
</body>… |
|
2021/06/02 16:28 |
오션 |
jQuery :odd Selector
* description : jQuery :odd Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery :odd Selector
Example
인덱스 넘버가 홀수인 모든 <tr> 요소를 선택합니다. |
|
2021/06/09 10:15 |
오션 |
jQuery addClass() Method
* description : jQuery addClass() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-09
The source of this article
jQuery addClass() Method
Example
첫 번째 <p> 요소에 클래스 이름을 추가합니다. |
|
2022/12/23 13:05 |
오션 |
jQuery before after prepend append
* description : jQuery before after prepend append
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-12-23 Fri
before, after, prepend, append
after()
The after() method inserts specified content after the selected elements. |
|
2021/06/02 13:43 |
오션 |
jQuery class Selector
* description : jQuery class Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery class Selector
Example
“intro” 클래스를 가진 모든 요소를 선택합니다. |
|
2022/10/24 10:55 |
오션 |
jQuery contents() Method
* description : jQuery contents() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-10-24 Mon
The source of this article
jQuery contents() Method
Definition and Usage
contents() 메서드는 선택한 요소의 텍스트 및 주석 노드를 포함한 모든 직계 자식을 반환합니다. |
|
2021/04/15 19:06 |
오션 |
jQuery Effects - Animation
* description : jQuery Effects - Animation
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery로 커스텀 애니메이션을 만들 수 있습니다.
jQuery Animations - The animate() Method |
|
2021/04/16 10:41 |
오션 |
jQuery Effects - Callback Functions
* description : jQuery Effects - Callback Functions
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
현재 효과가 100 % 완료된 후, 콜백 함수가 실행됩니다. |
|
2021/04/16 11:18 |
오션 |
jQuery Effects - Chaining
* description : jQuery Effects - Chaining
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery Chaining
jQuery를 사용하면 actions/methods를 연결할 수 있습니다. |
|
2021/04/15 17:04 |
오션 |
jQuery Effects - Fade
* description : jQuery Effects - Fading
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery Fading Methods
jQuery로, 요소를 시야에서 점점 또렷해지거나 점점 흐려지게 할 수 있습니다. |
|
2021/04/15 14:30 |
오션 |
jQuery Effects - Hide and Show
* description : jQuery Effects - Hide and Show
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다. |
|
2021/04/15 17:42 |
오션 |
jQuery Effects - Slide
* description : jQuery Effects - Sliding
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery 슬라이드 메서드는 요소를 위 아래로 미끄러지듯이 움직이게(slide) 합니다. |
|
2021/04/16 08:38 |
오션 |
jQuery Effects - Stop Animation
* description : jQuery Effects - Animation
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-16
jQuery stop() 메서드는 애니메이션이나 효과가 끝나기 전에 중지하는 데 사용됩니다. |
|
2021/06/02 14:16 |
오션 |
jQuery element Selector
* description : jQuery element Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery element Selector
Example
모든 p 요소를 선택합니다.
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald.</p> <!-- 배경색 변경 -->
<p>I live in Duckburg</p> <!-- 배경색 변경 -->
<p>My best friend is Mickey</p> <!-- 배경색 변경 -->
who is your favourite:
<ul id="choose">
<li>Goofy</li>
<… |
|
2021/04/15 12:07 |
오션 |
jQuery Event Methods
* description : jQuery Event Methods
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다.
What are Events? |
|
2022/10/24 12:31 |
오션 |
jQuery filter() Method
* description : jQuery filter() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-10-24 Mon
The source of this article
jQuery filter() Method
Definition and Usage
filter() 메소드는 특정 기준과 일치하는 요소를 반환합니다. |
|
2021/04/15 10:16 |
오션 |
jQuery Get Started
* description : jQuery Get Started
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
Adding jQuery to Your Web Pages
웹 사이트에서 jQuery를 사용하는 여러 방법이 있으며, 아래와 같이 할 수 있습니다. |
|
2022/12/23 13:37 |
오션 |
jQuery input checkbox checked
* description : jQuery input checkbox checked
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-12-23 Fri
jQuery Input Checkbox checked
input type=“checkbox”의 상태(checkec) 표시 |
|
2021/04/15 09:44 |
오션 |
jQuery Intro
* description : jQuery Introduction
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery Introduction
jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 더 쉽게 사용할 수 있도록 하는 것입니다. |
|
2021/06/02 13:56 |
오션 |
jQuery multiple classes Selector
* description : jQuery multiple classes Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery multiple classes Selector
Example
클래스 intro, demo 또는 end를 가지는 모든 요소를 선택합니다. |
|
2021/06/02 15:00 |
오션 |
jQuery multiple element Selector
* description : jQuery multiple element Selector
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery multiple element Selector
Example
모든 <h2>, <div>, <span> 요소들을 선택합니다. |
|
2022/12/12 16:52 |
주레피 |
JQuery Selector(셀럭터) 예제 자료
* description : jquery selector 예제 자료 모음
* author : 주레피
* email : dhan@repia.com
* lastupdate : 2022-12-12
Intro
Case Study
다중 속성 선택
$('form input[type="radio"][value="5"]').prop('checked', true);
$('form input[type="radio"][value="5"]').each(function(index, item){
var random = Math.floor(Math.random()*5+1);
// console.log(random);
$(this).parent().find('input[type="radio"][value="' + random + '"]').prop('checked', true);
});… |
|
2021/04/15 11:00 |
오션 |
jQuery Selectors
* description : jQuery Selectors
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery 셀렉터(selectors)는 jQuery 라이브러이의 가장 중요한 부분들 중 하나입니다. |
|
2021/04/15 10:42 |
오션 |
jQuery Syntax
* description : jQuery Syntax
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-15
jQuery를 사용하여, HTML 요소를 선택(query)하고 “작업(actions)“을 수행합니다.
jQuery Syntax |
|
2021/06/02 19:03 |
오션 |
jQuery text() Method
* description : jQuery text() Method
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-06-02
The source of this article
jQuery text() Method
Example
모든 <p> 요소들의 텍스트 내용을 설정합니다. |
|
2021/04/19 12:59 |
오션 |
jQuery Traversing - Ancestors
* description : jQuery Traversing - Ancestors
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery Traversing - Ancestors
jQuery를 사용하면 DOM 트리를 횡단하여 요소의 조상(ancestors)을 찾을 수 있습니다. |
|
2021/04/19 13:16 |
오션 |
jQuery Traversing - Descendants
* description : jQuery - Traversing Descendants
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery Traversing - Descendants
jQuery를 사용하면 DOM 트리 아래로 횡단하여 요소의 자손 요소들을 찾을 수 있습니다. |
|
2021/04/19 15:27 |
오션 |
jQuery Traversing - Filtering
* description : jQuery Traversing - Filtering
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery Traversing - Filtering
The first(), last(), eq(), filter() and not() Methods |
|
2021/04/19 14:10 |
오션 |
jQuery Traversing - siblings
* description : jQuery Traversing - Siblings
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-04-19
Source of the article
jQuery Traversing - Siblings
DOM 트리에서 옆으로 횡단하는 데 유용한 |
|
2022/07/05 15:02 |
오션 |
jQuery UI Sortable Widget
* description : jQuery UI Sortable Widget
* author : 오션
* email : shlim@repia.com
* lastupdate : 2022-07-05 Tue
jQuery UI's sortable Interactioin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<… |
|
2022/07/06 20:18 |
주레피 |
Ref
* jQuery-UI sortable 사용해보기
주레피 jquery jquery-ui jquerui |
|
2020/03/24 18:46 |
도봉산핵주먹 |
selector_feat.jsoup
* description :
* author : 도봉산핵주먹
* email : hylee@repia.com
* lastupdate : 2020-03-24
" selector란"
* Jquery나 Jsoup에서 같은 selector를 사용한다.
* 문서 구조에서 원하는 |
|
2020/03/14 14:38 |
도봉산핵주먹 |
부모태그_가져오기
* description :
* author : 도봉산핵주먹
* email : hylee@repia.com
* lastupdate : 2020-03-14
코드 예시
$(".mylink").click(function() { // 아래 4개는 모두 동일한 결과 반환
$(this).parent().siblings(".something1");
$(this).parent().prev(); // if you always want the parent's previous sibling
$(this).parents(".box").children(".something1");
$(this).closest('.box').children('.something1');
}); |
|
2020/06/02 18:01 |
도봉산핵주먹 |
클립보드_복사
* description :
* author : 도봉산핵주먹
* email : hylee@repia.com
* lastupdate : 2020-06-02
Code
* APPS에 구현한 클립보드 복사 (간소화)코드입니다.
<head>
<script>
$( document ).ready(function(){
$('#codeCopy').click(function(){
$('#RssCode').select()
document.execCommand("copy");
alert("imgSrc Code를 복사하였습니다.");
});
$('#onerrorCopy').click(function(){
$('#onerror').select()
document.execCommand("copy");
alert("onerr… |
|
2020/03/09 13:49 |
주레피 |
테이블 행(TR) 삭제하기
* description :
* author : 주레피
* email : dhan@repia.com
* lastupdate : 2020-01-31
코드 예시
<script>
function deleteLine(obj)
{
var tr = $(obj).parent().parent();
//라인 삭제
tr.remove();
}
</script>
<table border="1">
<tr>
<td>Hello Brother! 1번</td>
<td><button onclick="deleteLine(this);">삭제</button></td>
</tr>
<tr>
<td>Hello Brother! 2번</td>
<td><button onclick="deleteLine(this);">삭제</button></td>
</… |