jquery의 CSS 메소드 및 이벤트 메소드 사용법에 대한 자세한 설명

CSS 메소드

.hasClass(calssName)는 요소에 특정 클래스가 포함되어 있는지 확인하고 true/false를 반환합니다.

$( "#mydiv" ).hasClass( "foo" )

.addClass(className) / .addClass(function(index,currentClass))는 클래스를 요소를 덮어쓰지 않고 원본 클래스를 추가하고 중복 여부를 확인하지 않습니다

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {  return "item-" + index;
});

removeClass([className]) / ,removeClass(function(index,class)) 요소의 단일/다중/모든 클래스 제거

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {  return $( this ).prev().attr( "class" );
});

.toggleClass (className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) 토글은 스위치를 의미하며, 메서드는 스위치에 사용되며 스위치는 bool 유형 값, 예제를 보면 이해할 수 있습니다

<div class="tumble">Some text.</div>

첫 번째 실행

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>

두 번째 실행

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

$( "#foo" ).toggleClass( className, addOrRemove );// 两种写法意思一样if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

$( "div.foo" ).toggleClass(function() {  if ( $( this ).parent().is( ".bar" ) ) {    return "happy";
  } else {    return "sad";
  }
});

.css(propertyName) / .css(propertyNames) 요소 스타일의 특정 속성 값을 가져옵니다.

var color = $( this ).css( "background-color" ); 
var styleProps = $( this ).css([    "width", "height", "color", "background-color"
  ]);

.css(propertyName, value) / .css( propertyName, function(index, value) ) / .css( PropertiesJson ) 요소 style

$( "div.example" ).css( "width", function( index ) {  return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
   $( this ).css({      "background-color": "yellow",      "font-weight": "bolder"
    });

이벤트 메서드

의 특정 속성 값을 설정합니다. 바인딩( eventType [, eventData ], handler(eventObject) ) 바인드 정의된 이벤트 처리프로그램, 자주 사용되는 내용이라 별다른 설명은 없습니다

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

.delegate( selector, eventType, handler(eventObject) ) 공식 설명을 보겠습니다

특정 루트 요소 세트를 기반으로 현재 또는 미래에 선택기와 일치하는 모든 요소에 대해 하나 이상의 이벤트에 핸들러를 연결합니다.

$( "table" ).on( "click", "td", function() {//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( "chosen" );
});

.on( events [, selector ] [, data ], handler( eventObject) ) 1.7 이후 권장, 교체 바인딩, 라이브, 위임

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

.trigger( eventType [, extraParameters ] ) JavaScriptTrigger 요소 바인딩 event

$( "#foo" ).trigger( "click" );

.toggle( [기간 ] [, 완료 ] ) / .toggle( 옵션 ) 요소 숨기기 또는 표시

$( ".target" ).toggle();
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {    // Animation complete.  });
});

위 내용은 jquery의 CSS 메소드 및 이벤트 메소드 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!