jQuery 학습

jQuery는 js 프로그래밍을 간소화할 수 있는 자바스크립트 라이브러리입니다.
All jQuery functions start with a $ , usually referred to as a dollar sign operator, or as bling. jQuery often selects an HTML element with a selector, then does something to that element. 저희가 JQuery를 다시 사용할 때는 그런 게 있어요. 이런 거를 하나 세워놓고.

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

Without your document ready function, your code may run before your HTML is rendered, which would cause bugs.
요소 속성 추가
For example, let's make all of your button elements bounce. Just add this code inside your document ready function: $("button").addClass("animated bounce");
현재 우리는 이미 이런 코드가 있다.

  
jQuery Playground
  

    

      
#left-well
      

        #target1
        #target2
        #target3
      
    
    

      
#right-well
      

        #target4
        #target5
        #target6
      
    
  

앞에 이런 몇 줄의 코드만 추가하면 모든 button에 아날로그 효과를 추가할 수 있습니다.(하지만 여기에 숨겨진 것이 하나 있다. 바로 jQuery library와 Animate. css library의 도입이다)

  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });

위의 예에서 jQuery의 사용은 selector(즉button)를 통해 이루어졌고 우리도class를 사용하여 실현할 수 있다.

  $(".well").addClass("aniimated shake");

이 안에 있는class명칭은 마침표를 띠고 있으며, 우리가 스타일에 표시한 클래스와 같습니다.물론입니다. 저희도 id를 사용하여 조작할 수 있습니다.

  $("#target1").addClass("animated fadeOut");

요소 속성 삭제
우리는 완전히 같은 방식으로Class를 제거할 수 있다는 것을 알 수 있다. 방법은 .removeClass, 예를 들어 $("#target2") 이다.removeClass("btn-default");·
jQuery를 사용하여 요소 스타일 바꾸기(css 수정)
We can also change the CSS of an HTML element directly with jQuery.
jQuery has a function called .css() that allows you to change the CSS of an element.
Here's how we would change its color to blue: $("#target1").css("color", "blue");
This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.
요소 억제(예: button)
jQuery에는 요소의 속성을 수정할 수 있는 .prop()라는 방법이 있습니다.jQuery는 css를 제외한 속성을 수정할 수 있습니다. 예를 들어 button을 억제하면 억제된 button이 회색으로 변하고 더 이상 클릭할 수 없음을 볼 수 있습니다. $("button").prop("disabled", true);jQuery.html 방법은 HTML 태그를 직접 조작할 수 있습니다.jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here's how you would rewrite and emphasize the text of our heading: $("h3").html("jQuery Playground");
jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
요소 삭제.remove()위에서 알 수 있듯이 jQuery가 원소 속성에 대한 조작은 원소에 속성을 추가하거나 삭제하거나 심지어 어떤 원소를 억제할 수 있다. 사실 jQuery는 원소를 직접 삭제할 수 있다. 사용하는 방법은.remove()이다. 예를 들어 위 코드의 # target4를 삭제하고 싶다.이 줄 코드가 있을 수 있습니다. $("#target4").remove() 우리 안에 있는remove 함수는 인자가 필요하지 않습니다. 그러면 이 요소를 직접 삭제할 수 있습니다.
요소 위치 이동.appendTo()jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element. For example, if we wanted to move target4 from our right well to our left well, we would use: $("#target4").appendTo("#left-well");
요소 복제.clone()위의 .remove() 방법과 마찬가지로 이 안에서 우리도 매개 변수를 필요로 하지 않는다. 문법은 $("xxx")이다.remove();`
체인 방정식function chaining
여러 가지 방법은 연결할 수 있다. 예를 들어 우리가 target5를left-well에 복사하면 이렇게 쓸 수 있다. $("#target5").clone().appendTo("#left-well");상위/하위 세트 요소.parent()/.children()이 방법을 사용하면 현재 선택한 요소의 부모 요소를 얻을 수 있습니다. 예를 들어 #target5를 통해 #right-well의 배경색을 설정합니다. $("#target5").parent().css("backgroung-color","green");#right-well의 모든 요소에 주황색 글꼴을 사용하도록 설정합니다. $("#right-well").children().css("color","orange");서브셋 요소의 정확한 지정.target:nth-child(xx)