jQuery-학습day1

jQuery-기초 학습
jQuery란?
jQuery는 JS의 한 라이브러리로 원생 JS의 함수(방법)를 봉인하여 원생 JS의 코드량을 간소화하고 효율을 높이기 위한 것이다.jQuery의 취지: Write Less, Do More는 더 적게 쓰고 더 많이 한다!
jQuery 기본 사용
1. jQuery 다운로드
2가지 방법 제공

jQuery 홈페이지 홈페이지에 들어가서download를 클릭하여 다운로드

jQuery.min.js 이 링크를 클릭하여 바로 오른쪽 키로 들어가서 로컬로 저장하면 됩니다. 이름은 스스로 변경됩니다.

2. jQuery 도입
자체 편집기에 들어가서 태그에 script src로 경로를 입력하여 HTML 파일을 만듭니다.

3. jQuery 입구 함수

    //   jQuery         DOM       JS     JS  window.onload   
    // 1.                  。
    $(document).ready(function(){
        ...//       DOM       
    })
    // 2.                 ，       。
    $(function(){
        ...//       DOM       
    })

4.jQuery 최상위 객체 $

$ jQuery의 별칭으로 코드에서 서로 대체할 수 있으며 일반적으로 편의를 위해 &dollar를 직접 사용합니다.

$ jQuery의 최고급 대상입니다. 원생 JS의 window에 해당합니다. 원소를 $로 jQuery 대상으로 포장하면 jQuery 방법을 사용할 수 있습니다.

5.jQuery 객체 및 DOM 객체 변환

DOM 객체에서 jQuery 객체로 변환

$('DOM  ');

jQuery 객체에서 DOM 객체로 변환

$('DOM  ')[index]  index    
$('DOM  ').get(index)  index    

jQuery 공통 API(인터페이스)
1. jQuery 선택기
이름:
사용법
묘사
ID 선택기
$("#id")
지정된 ID 요소 가져오기
전체 선택기
$("*")
모든 요소 일치
클래스 선택기
$(".class")
같은 클래스class 요소 가져오기
태그 선택기
$("div")
같은 종류의 탭의 모든 요소 가져오기
통합 선택기
$("div,p,li")
여러 요소 선택하기
교차 선택기
$("li.current")
교차 요소
하위 선택기
$("ul>li")
>호를 사용하여 친아들 레벨 요소 획득하기;주의, 손자 등급 원소는 획득하지 못합니다
후대 선택기
$("ul li")
빈칸을 사용하면 l 아래의 모든 리 요소를 얻을 수 있습니다. 손자 등급을 포함합니다.
장자를 선별하다
$("li:first")
첫 번째 리 요소 가져오기
막내를 선별하다
$("li:last")
마지막 리 요소 가져오기
아들을 선별하다
$("li:eq(2)")
리 요소에서 인덱스 2의 요소를 가져옵니다. 인덱스 번호는 0에서 시작합니다
아버지를 찾다
$("li").parent();
상위 찾기
아들을 찾다
$("ul").children("li");
$("ul>li"), 최근 레벨 (친아들)
아들들을 찾다
$("ul").find("li");
$("ulli") 하위 선택기와 같습니다.
아들 하나를 버리다
$(".first").siblings("li");
형제 노드 찾기, 자신 포함하지 않음
암시적 교체(중요)
다음은 일치하는 모든 요소를 순환하고 응답을 실행하는 방법입니다. 우리가 순환하지 않는 과정을 스텔스 교체라고 합니다.

    

        
    
        
    
        
    
        
    
        
    
    

    
        $(function(){
            //     5 div，  css  ,      。
            $('.title div').css("backgroundColor","gray");
        })
    

2. jQuery 스타일 작업
조작 css 방법

    
   
    
   



    $(function(){
            //     css                     
            $('.title div:first').css('backgroundColor','blueviolet');
            $('.title div:last').css({
                //     css                 ： 2           
                "width":200,
                "height":200,
                "backgroundColor":"red"
            });
        })

조작class 방법

    

        
  
        
  
        
  
        
  
        
  
    
    
    
        $(function(){
            //       click 
            $('.title div').click(function(){
                //    ，  addClass        item        
                $(this).addClass('item1');
                //          removeClass                
                $(this).siblings().removeClass('item');
            })
        })
    

jQuery 효과
나타내다
미끄럼
페이드 인
사용자 정의 애니메이션
show()
sildeDown()
fadeIn()
animate()
hid()
sildeUp()
fadeOut()
toggle()
sildeToggle()
fadeToggle()
fadeTo()
전체적인 형세는 아래 코드를 복제하여 자신의 jQuery 파일에 도입하여 효과를 보십시오

    
    
    
    
    
    
    


      
      
      
    

      
      
      
    

      
      
      
       
    

      
    

    


    
        //        3         
        // speed   
        // easing      swing   linear
        // fn                         
        $(function(){
            //     
            $('button').eq(0).click(function(){
                $('.box').show(500);
            });
            $('button').eq(1).click(function(){
                $('.box').hide(500);
            });
            $('button').eq(2).click(function(){
                $('.box').toggle(500);
            });

            //     
            $('button').eq(3).click(function(){
                $('.box').slideDown(500);
            });
            $('button').eq(4).click(function(){
                $('.box').slideUp(500);
            });
            $('button').eq(5).click(function(){
                $('.box').slideToggle(500);
            });

            //       
            $('button').eq(6).click(function(){
                $('.box').fadeIn(500);
            });
            $('button').eq(7).click(function(){
                $('.box').fadeOut(500);
            });
            $('button').eq(8).click(function(){
                $('.box').fadeToggle(500);
            });
            $('button').eq(9).click(function(){
                $('.box').fadeTo(1000,0.5);
            });

            //                 params            
            //                       css  
            $('button').eq(10).click(function(){
                $('.box').animate({
                    height:200,
                    left:600,
                    top:300
                },1000);
            });
        })
    
    

총결산
jQuery를 배우기 전에 반드시 JS기초를 잘 배워야 합니다. 그때 당신은 코드의 세계가 정말 기묘하다고 느낄 것입니다!