반응형
반응형

 

function setDatePicker(){
	
	$("input.start_date").datepicker({
		 dateFormat: 'yy-mm-dd' //달력 날짜 형태
		,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
		,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
		,changeYear: true //option값 년 선택 가능
		,changeMonth: true //option값  월 선택 가능                
		,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
		,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
		,buttonImageOnly: true //버튼 이미지만 깔끔하게 보이게함
		,buttonText: "선택" //버튼 호버 텍스트              
		,yearSuffix: "년" //달력의 년도 부분 뒤 텍스트
		,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
		,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip
		,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 텍스트
		,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
		,minDate: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
		,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)  


	});
	$("input.end_date").datepicker({
		 dateFormat: 'yy-mm-dd' //달력 날짜 형태
		,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
		,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
		,changeYear: true //option값 년 선택 가능
		,changeMonth: true //option값  월 선택 가능                
		,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
		,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
		,buttonImageOnly: true //버튼 이미지만 깔끔하게 보이게함
		,buttonText: "선택" //버튼 호버 텍스트              
		,yearSuffix: "년" //달력의 년도 부분 뒤 텍스트
		,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
		,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip
		,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 텍스트
		,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
		,minDate: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
		,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)  

	});

	$('.start_date').datepicker("option", "maxDate", new Date());
	$('.end_date').datepicker("option", "minDate", $(".start_date").val());
	$('.end_date').datepicker("option", "maxDate", new Date());

	$("#end_date").on("change", function() { // sel02 정렬순서
		$('.start_date').datepicker("option", "maxDate", $(".end_date").val());
		$('.end_date').datepicker("option", "minDate", $(".start_date").val());
		$('.end_date').datepicker("option", "maxDate", new Date());
	});

	$("#start_date").on("change", function() { // sel02 정렬순서
		$('.start_date').datepicker("option", "maxDate", $(".end_date").val());
		$('.end_date').datepicker("option", "minDate", $(".start_date").val());
		$('.end_date').datepicker("option", "maxDate", new Date());
	});

	// $('#start_date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
	// $('#end_date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)       
	
}

$(document).ready(function() {
	setDatePicker();
})

date.js

 

<!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">
    <title>Document</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript" src="./date.js"></script>

</head>
<body>
    <div class="start">
        <div class="date_picker">
            <input class="start_date" type="text" id="start_date"
                name="start_date" />
        </div>
    </div>
    <div class="end">
        <div class="date_picker">
            <input class="end_date" type="text" id="end_date" name="end_date" />
        </div>
    </div>
</body>
</html>

datepicker.html

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] Ajax통신으로 체크된 체크박스값 보내기  (0) 2022.03.19
[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
반응형

 

$(function() {
	$("#dump_inc_delete_btn").on("click", function() {

		var checked = [];
		$("input[name='inc_no']:checked").each(function(i) {
			checked.push($(this).val());
		});

		$.ajax({
			type: "GET",
			url: "deleteIncDump",
			data: {
				No: checked
			},
			success: function(data) {

				makeDumpTableAndPagination(currentDumpPageNumStorage);
			}
		}); // ajax 종료
	})
})

 

@RequestMapping(value = "/deleteIncDump", method = RequestMethod.GET)
public void deleteIncDump(@RequestParam(value="No[]") ArrayList dumpParams, 
        HttpServletRequest request, HttpServletResponse response,
        HttpSession session) throws IOException, JSchException {

    ArrayList<String> dumpNames = new ArrayList<String>();

    dumpNames = dumpParams;
    Dump dump = new Dump();

    String dumpPath = linuxRootPath + "dump/data/inc/";
    dump.deleteBulk(dumpNames, dumpPath);

}

체크된 inc_no 체크박스를 파악해 배열에 담아 ajax로 보냅니다. 받을 때는 ArrayList로 받아야합니다. (키[] 이렇게 값을 받아야 한다.)

 

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 datepicker 달력 구현 (시작일자 ~ 종료일자)  (0) 2022.09.12
[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
반응형

📝Ajax 통신

 $.ajax({
     url:_search_url,
     //dataType:"JSON",
     type: 'POST',
     data: {
         search  : search,
         offset  : offset,
         limit   : limit,
         startDate : startDate,
         endDate : endDate,
         searchType : searchType
     },
     success: function( data ) {

                 .....


        $("#data_uniq1").html(tag); //새롭게 프로젝트 list를 생성한다.
         ....
     },//success
     error : function(xhr, status, error) {
         alert("에러 발생");
     }
 }); //ajax end

ajax에 대해서 먼저 이야기 하겠습니다.

 

📝type

어떤 통신방식을 이용할지에 대해 적어주시면 됩니다.

종류 : GET, POST

 

📝url

통신할 URL입니다.

 

📝data

보낼 데이터입니다. json 형식이라고 생각하시면 됩니다.

예) search (키) search(값)

 

📝dataType

보낼 데이터에 대한 정의입니다.

종류 : "html", "xml", "json", "text"

 

📝success : function(data)

통신에 성공했을 시 작동할 콜백함수입니다.

성공시 반환해주는 return값이 data라는 변수에 들어가게 되어서 data라는 이름으로 이용하게 됩니다.

(data가 아니라 abc 이런식으로 바꿔도 상관 없음 → success : function(abc) )

 

📝error : function()

전송에 실패하면 실행될 코드입니다.

 

 

ajax통신할 때 장점은 화면이 깜빡 거리지 않는다는 장점이 있습니다. (SPA)

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 datepicker 달력 구현 (시작일자 ~ 종료일자)  (0) 2022.09.12
[jQuery Code] Ajax통신으로 체크된 체크박스값 보내기  (0) 2022.03.19
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
반응형

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
        .circle{
            position : absolute;
            left : 100px; top :100px;
            width : 100px ; height :100px;
            background : #99c; color: white;
            border-radius :50%;
            text-align : center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <button id ="btn1">click</button>
    <button id ="btn2">hover</button>

    <script>
        $('#btn1').click(function(){
            $(this).css('border-radius', '10px');
        });

        $('#btn2').hover(function(){
            $(this).css('box-shadow','3px 3px 3px #666');
        },
        function(){
            $(this).css('box-shadow','0px 0px 0px #666');
        });
    </script>
</body>
</html>
$('#btn1').click(function(){

            $(this).css('border-radius', '10px');

        });

이거는 클릭했을 때 둥글게 바뀌는 것이고

$('#btn2').hover(function(){
            $(this).css('box-shadow','3px 3px 3px #666');
        },
        function(){
            $(this).css('box-shadow','0px 0px 0px #666');
        });

 

이거는 호버했을 때  box-shadow가 3px씩 주게 되고 땠을 땐 밑에 함수가 실행됩니다.

 

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>

<body>
    <h3> 그래프를 클릭 </h3>
    <progress min = 0 max = 100 value = 0></progress>
    <span id = "info"></span>
    <script>

        
        var val = 0;
        $('progress').on('click',function(){
            $(this).val(val);
            $('#info').html(val);
            if (val <100) { val += 10; }
        })
    </script>
</body>
</html>

클릭하면 10씩 올라갑니다.

 

그냥 click으로 만들어도 되는 거 아닌가요? 라고 할 수 있는데요

on 메소드는 여러 복수 이벤트를 동시에 연결 할 수 있는 장점이있습니다.

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>

<body>
    <button id ="btn" style="padding: 10px">click</button>
    <script>
        $(function(){
            $('#btn').on('mouseenter mouseleave',function(e){
                if(e.type == 'mouseenter'){
                    $(this).css('border-radius','10px');
                }
                if(e.type == 'mouseleave'){
                    $(this).css('border-radius','0px');
                }
            });
        });
    </script>
</body>
</html>

hover로 구현할 경우 때면 밑에 함수가 계속 적용 됩니다. 위에 hover로 구현하신 0px을 15px로 줘보세요

처음 상태랑 버튼에서 벗어났을 때랑 다르게 보입니다.

mouseenter와 mouseleave를 통해서 완벽한 hover가 구현이 가능합니다.

 

e.type이라는 건 function 안에 매개변수를 e라고 했을 때

그 값이 mouseenter일 경우  mouseleave일 경우를 구분하기 위해 사용했습니다.

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] Ajax통신으로 체크된 체크박스값 보내기  (0) 2022.03.19
[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
[jQuery Code] 제이쿼리 DOM 탐색메소드 (부모, 조상, 자식, 후손, 형제, 앞태그, 뒤태그 인덱스, 조건접근, 다양한 접근방법) parent, parents, children, find, sibilings, prev, next, eq, .filter, .first, .last, .has, appen..  (0) 2021.06.30
반응형

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
        .circle{
            position : absolute;
            left : 100px; top :100px;
            width : 100px ; height :100px;
            background : #99c; color: white;
            border-radius :50%;
            text-align : center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class ="circle" onclick ="anim()">animation</div>


    <script>
        function anim(){
            $('.circle').animate({
                width: '300px',
                height: '300px',
                lineHeight: '300px',
                fontSize : '3em'

            }, 1000)
        }
    </script>

</body>
</html>

animate(속성, 재생시간,속도 변화 옵션, 콜백함수)

 

$('.circle').animate({
                width: '300px',
                height: '300px',
                lineHeight: '300px',
                fontSize : '3em'

            }, 1000)

 

눌렀을 때 원이 animate에 정의한대로 애니메이션 처리가 됩니다.

 

 

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
[jQuery Code] 제이쿼리 DOM 탐색메소드 (부모, 조상, 자식, 후손, 형제, 앞태그, 뒤태그 인덱스, 조건접근, 다양한 접근방법) parent, parents, children, find, sibilings, prev, next, eq, .filter, .first, .last, .has, appen..  (0) 2021.06.30
[jQuery Code] 제이쿼리 선택자(TAG명[태그명], ID명[아이디명], CLASS명[클래스명])로 CSS[Style] 추가하기  (0) 2021.06.29
반응형

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .select{background:red;}
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>Process</li>
        <li>About</li>
        <li class="select">Contact</li>
    </ul>    

    <script>
        $(function(){
            // 첫 번째 li에 클래스 속성 추가
            $('li').first().addClass('select');
            
            // 두번째 li의 클래스 제거
            $('li').last().removeClass('select');
        })
    </script>
</body>
</html>

📝addClass('클래스명')

클래스를 추가합니다.

 

📝removeClass('클래스명')

클래스를 제거합니다.

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
</head>
<body>
    <ul>
        <li>Home</li>
        <li>Process</li>
        <li>About</li>
        <li class="select">Contact</li>
    </ul>    

    <script>
        $(function(){

            var attr = $('li').last().attr('class');
            console.log(attr); // select

            $('li').first().attr('style','border: 3px solid');
            
        });
    </script>
</body>
</html>

📝attr(속성)

요소 내 속성을 읽어옵니다.

 

📝attr(속성, 값)

요소 내 속성과 값을 추가합니다.

 

📝removeAttr(속성)

요소 내 속성을 제거합니다.

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
</head>
<body>
    <ul>
        <li>Home</li>
        <li>Process</li>
        <li>About</li>
        <li class="select">Contact</li>
    </ul>    

    <script>
        $(function(){
            $('li').first()
                .css('border','3px dashed')
                .css('background','pink');

            $('li').last().css({
                'border' : '3px dashed',
                'background' : 'azure'
            });

            var bgcolor = $('li').last().css('backgroundColor');
            console.log(bgcolor); // "rgb(240,255,255)"
        });
    </script>
</body>
</html>

📝css(속성)

css 속성을 읽어옵니다.

 

📝css(속성, 값)

css 속성을 변경합니다.

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
</head>
<body>
    <ul>
        <li>Home</li>
        <li>Process</li>
        <li>About</li>
        <li class="select">Contact</li>
    </ul>    

    <script>
        $(function(){

            $('li').first().html('<h1>HTML 추가</h1>');
            $('li').last().text('<h1>HTML 추가</h1>');

            var html = $('li').first().html();
            var text = $('li').first().text();
            console.log(html); // "<h1>HTML 추가</h1>"
            console.log(text); // "HTML 추가"
        });
    </script>
</body>
</html>

📝html()

요소 내의 HTML을 읽어옵니다. (태그는 태그 취급을 해준다)

 

📝html(값)

요소 내 HTML을 추가합니다. (태그는 태그취급을 해준다)

 

📝text()

요소 내 텍스트를 읽어옵니다. (그냥 오로지 텍스트)

 

📝text(값)

요소 내 텍스트를 추가합니다. (그냥 오로지 텍스트)

 

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 DOM 탐색메소드 (부모, 조상, 자식, 후손, 형제, 앞태그, 뒤태그 인덱스, 조건접근, 다양한 접근방법) parent, parents, children, find, sibilings, prev, next, eq, .filter, .first, .last, .has, appen..  (0) 2021.06.30
[jQuery Code] 제이쿼리 선택자(TAG명[태그명], ID명[아이디명], CLASS명[클래스명])로 CSS[Style] 추가하기  (0) 2021.06.29
반응형
<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
</head>
<style>

</style>
<body>
    <div class="parent">
        
        <div class="parent2">
            <div class="parent1">
                <h1> heading 1 </h1>
                <h2> heading 2 </h2>
                <p> 손자 p </p>
            </div>
        </div>
        <p class="child"> 자식 p1 </p>
        <p> 자식 p2 </p>
    </div>
    <script>
        $(document).ready(function(){
            $('.parent').children().css('font-style','italic');
            // parent라는 클래스의 후손을 선택해 적용 (여기선 전체적용 됨)
            $('h1').parent().css('border','3px solid');
            // h1의 부모요소를 선택해 적용 (parent1을 의미)
            $('h1').parents('.parent').css('border','6px orange double');
            // h1의 조상 parent를 탐색 (아빠는 parent1 조상은 그 위로 전부 parent2와 parent둘다 조상)
            $('.parent').children('.parent2').css('background','black');
            // parent 클래스의 바로 아들인 parent2를 찾아서 적용시킴 (후손x)
            $('.parent').find('h2').css('background','gray');
            // .parent의 하위 후손 h2를 검색한다('parent밑에 있는 애들은 다 후손이 됨')
            $('h1').next().css('font-size','50px');
            // h1태그의 다음 거 즉 h2의 크기를 바꾸도록 적용
            $('p').prev().css('color','blue');
            // p태그가 있는 곳에 전에 거를 파란색으로 바꾸게한다.여기선(parent2와 h2와 .child가 바뀐다.)
            $('.child').siblings().css('background','red'); 
            //child클래스 있는곳 왼쪽 오른쪽으로 css적용 (prev + next)하지만 자기자신은 적용x 여기선(parent2와 자식p2가 적인 p태그)
        });
    </script>
</body>
</html>

📝parent()

자신바로 위(부모)를 선택합니다.

 

📝parents()

매개변수에 지정한 이름의 조상을 선택합니다.

 

📝children()

매개 변수에 지정한 자식을 선택(후손x)

 

📝find()

그 밑에 있는 모든 자식 + 후손을 찾아 선택합니다.

 

📝sibilings

매개 변수에 지정한 형제요소(왼쪽 1개 오른쪽 1개)태그를 선택합니다.

 

📝prev()

이전 형제 요소를 선택합니다. 자기 바로 위에 있는 태그 선택합니다.

 

📝next()

다음 형제 요소를 선택합니다. 자기 바로 아래 있는 태그를 선택합니다.

 

 

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
</head>
<style>

</style>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li class="fourth">fourth</li>
        <li><em>fifth</em></li>
        <li>sixth</li>
    </ul>
    <script>
        $(document).ready(function(){
            $('li').eq(1).css('font-size','2em'); 
            // li중 1번째 인덱스 속성값 바꿈 (배열취급)
            $('li').filter('.fourth').css('font-style','italic');
            // fourth라는 클래스 이름에 적용시킴
            $('li').first().css('background-color','orange');
            // li의 첫번째 요소 (0번째 인덱스)
            $('li').last().css('border','3px solid');
            // li의 마지막 요소에 적용
            $('li').has('em').css('border','3px dotted');
            // li안에 em이라는 자식태그가 있는 곳에 적용
        });
    </script>
</body>
</html>

📝eq()

인덱스로 지정하는 것입니다.

 

📝.filter()

id나 클래스 등으로 적용시키는 것입니다.

 

📝.first()

첫번째 요소를 적용시키겠다는 의미입니다.

 

📝.last()

li의 마지막 요소에 적용시킵니다.

 

📝.has()

안에 어떤 지정된 요소가 있을 경우 그 요소에 적용시킵니다.

 

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
</head>
<body>
    <ul>
        <li>Home</li>
        <li>Process</li>
        <li>About</li>
        <li class="select">Contact</li>
    </ul>    

    <script>
        $(function(){
            
            $('ul')
                .append('<li>append</li>')
                .children('li').last().css('border','3px solid');
        
            $('ul')
                .prepend('<li>prepend</li>')
                .children('li').first().css('border','3px solid');

            $('ul')
                .after('<div>안녕하세요 끝입니다.</div>');

            $('ul')
                .before('<div>안녕하세요 앞입니다.</div>');
        });
    </script>
</body>
</html>

📝append(추가할 태그)

선택자 안의 요소중 맨 뒤에 추가합니다.

 

📝prepend(추가할 태그)

선택자 안의 요소중 맨 앞에 추가합니다.

 

📝after(추가할 태그)

선택자의 뒤에 추가합니다 (형제)

 

📝before(추가할 태그)

선택자의 앞에 추가합니다 (형제)

 

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
</head>
<body>
    <figure>
        <img src ="1.jfif" width ="200" height="200">
        <img src ="2.jfif" width ="200" height="200">
        <img src ="3.jfif" width ="200" height="200">
        <img src ="4.jfif" width ="200" height="200">
    </figure>

    <button onclick ="img_move()">appendTo</button>
    <button onclick ="img_prepend()">prependTo</button>
    <script>
        function img_move(){
            $('img').first().appendTo('figure');
        }            

        function img_prepend(){
            $('img').last().prependTo('figure');
        }
    </script>
</body>
</html>

 

📝appendTo(요소명)

지정한 선택자(요소) 안의 뒤에 추가합니다.

 

📝prependTo(요소명)

지정한 선택자(요소) 안의 앞에 추가합니다.

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
[jQuery Code] 제이쿼리 선택자(TAG명[태그명], ID명[아이디명], CLASS명[클래스명])로 CSS[Style] 추가하기  (0) 2021.06.29
반응형
<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
</head>
<style>

</style>
<body>
    <span>A</span>
    <h1>A</h1>
    <span id ="myId">A</span><br>
    <span class="myClass">A</span>
    <script>
        $(document).ready(function(){
            $('*').css('font-size','32px')// 전체 요소 선택
            $('h1').css('color','red');
            $('#myId').css('color','blue');
            $('.myClass').css('color','green');
        });
    </script>
</body>
</html>

jQuery의 선택자(태그명, ID명, 클래스명)를 선택해 속성을 변경하는 예시입니다.

$('선택자').css('속성', '속성값'); 

 

반응형

'[JavaScript] > [jQuery Code]' 카테고리의 다른 글

[jQuery Code] 제이쿼리 Ajax 기본 사용법  (0) 2022.02.13
[jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너)  (0) 2021.07.01
[jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate)  (0) 2021.07.01
[jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text)  (0) 2021.06.30
[jQuery Code] 제이쿼리 DOM 탐색메소드 (부모, 조상, 자식, 후손, 형제, 앞태그, 뒤태그 인덱스, 조건접근, 다양한 접근방법) parent, parents, children, find, sibilings, prev, next, eq, .filter, .first, .last, .has, appen..  (0) 2021.06.30

티스토리툴바