[Develop] 23.06.09 개발 공부 일지

요약: 제이쿼리 문법, kinfa 수정

일시: 23.06.09

장소: 더휴먼컴퓨터아트아카데미, 집

배운 점:

Jquery

// preventDefault() 메서드
// 1
$('.btn6').on('click', function(e){
    e.preventDefault();
    $('.txt1').css({background: 'red'})
})

// 2
$('.btn7').on('click', function(){
    $('.txt2').css({background: 'yellow'});
    return false;
})

// 3
{/* <p><button class="btn8"><a href="javascript:">버튼3</a></button></p>
<p class="txt3">내용3</p> */}

//click
$('.clickTest').click(function(){
    $(this).text('클릭 되었습니다.')
})

const div1 = $('#div1')
const div1Width = div1.width();
const div1Height = div1.height();
const div1FontSize = div1.css('fontSize');
const div1Back = div1.css('background-color');

$('.div1-1').text(div1Width);
$('.div1-2').text(div1Height);
$('.div1-3').text(div1FontSize);
$('.div1-4').text(div1Back);

// 1
$('.sub').hide();

$('.title').click(function(){
    $('.sub').hide();
    $(this).next().show();
})

// 2
let a = 0;

$('.sub').hide();

$('.title').click(function(){
    if(a == 0){
        a = 1;
        $(this).next().slideDown();
    }else{
        a = 0;
        $(this).next().slideUp();
    }
})

// 3
$('.sub').hide();

$('.title').click(function(){
    if($('this').next().css('display') == 'none'){
        $('.sub').slideUp();
    }
    $(this).next().slideDown();
})

const menu = $('.title')

menu.click(function(){
    $(this).next().slideToggle();
})

const menu=$('.title');

menu.on('mouseover', function(){
    const th = $(this).next();
    $('.sub').slideUp();

    if(th.is(':visible')){
        th.slideUp();
    }else{
        th.slideDown();
    }
})

 

부족한 점:

메뉴 만들기 너무 어렵다....