jQuery 요소 작업 및 이벤트 바인딩

1. 요소 속성 조작:

①attr 읽기: ("selector").attr ("속성 이름") =>getAttribute ("속성 이름"); ) .attr("속성 이름"); =>getAttribute("속성 이름"); 변경: ("selector").attr("속성 이름", value) =>setAttribute("속성 이름", value); * (*시작 태그에 더 이상 존재하지 않는 prop 속성에 액세스할 수 없습니다. 예: 선택됨, 선택됨, 비활성화됨)

　②prop 읽기: ("selector").prop("property name"); elem.속성 이름; 변경: ("selector").prop ("속성 이름"); elem.속성 이름; 변경: ("속성 이름", 값); 🎜> ③속성 제거: $("selector").removeAttr("속성 이름") =>removeAttribute("속성 이름")

2. 조작 요소의 내용:

　①html 원본 텍스트: ("selector").html(); =>elem.innerHTML; 변경: ("selector").html() =>elem.innerHTML; ("html 조각"); =>elem.innerHTML="html 조각"; 요소 지우기: $("selector").empty() =>elem.innerHTML="";

　②일반 텍스트: 읽기: ("selector").text(); =>elem.textContent/innerText; 변경: ("selector").text() =>elem.textContent/innerText( "text ");

③양식 요소의 값: 읽기: ("selector").val(); 변경: ("selector").val(); val(value );

3. 요소 스타일 조작:

　① CSS 속성 직접 조작: ("selector").css("CSS 속성 이름"); ); (" 선택기").css("CSS 속성 이름"); 값; 동시에 수정 여러 속성 값: $("selector").css({속성 이름 1: 값 1, 속성 이름 2: 값 2,...}) * (css()는 모든 속성을 읽을 수 있습니다. , 그러나 연결 스타일만 수정할 수 있습니다. 속성 이름은 대소문자를 구분해야 합니다.

② 클래스 속성 수정: a. 전체 수정: ("selector").attr("class", "클래스 이름"); b. 추가: ("selector").addClass("클래스 이름"); "selector").removeClass("클래스 이름") d. 지우기: ("selector").removeClass("클래스 이름") d. 지우기: ("selector").attr("class","") ; 또는 ("selector") .removeClass(); e. 다음을 포함하는지 확인합니다: ("selector").removeClass(); f. 지정된 클래스 이름 포함 또는 제외: $("selector").toggleClass("class name")

4. 노드 탐색:

　①상위 요소 가져오기: $ ("selector").parent( ); =>elem.parentNode; 또는 elem.parentElement;

　②동위 요소 가져오기: 다음 형제 ("selector").next([selector]); nextElementSibling; 이전 형제: ("selector").next([selector]); =>elem.nextElementSibling; 이전 형제: ("selector").prev([selector]); ("selector" ).siblings([selector]);

　 ③하위 요소: 직접 하위 요소: ("selector").children([selector]) 모든 하위 요소: ("selector").children ([ selector]); 모든 하위 요소: ("selector").find(selector) * (find()는 선택기를 추가해야 함)

　①노드 생성: var elem=elem=("Complete html element code snippet");

　②Add: 상위 아래의 모든 하위 노드 끝에 추가: (parent).append((parent).append(elem); parent 첫 번째 하위 노드가 삽입됩니다: (parent).prepend((parent).prepend(elem); child 뒤에 삽입: (child).after((child).after(elem); child 앞에 삽입: (child ). before((child).before(elem);

6. 기타 작업:

　①Delete: $(삭제할 요소).remove();

　②바꾸기: (기존).replaceWith(새 요소); 또는 (새 요소).replaceAll(old)

　 ③Copy: var clone=clone= ("selector") .clone([true]); * (true: 심층 복제를 위한 이벤트 처리 기능 포함);

7. 이벤트 바인딩 바인딩:

　①$(… ).bind("이벤트 이름 ", fn)=>addEventListener; 여러 함수 객체를 동일한 요소의 이벤트 처리 함수에 바인딩;

　②$(...).unbind("이벤트 이름", fn) =>removeEventListener; if 이벤트 핸들러 함수를 제거할 수 있으며 바인딩 시 실제 이름 함수 바인딩을 사용해야 하며 익명 함수를 사용할 수 없습니다. 오버로드: a, 매개변수 없이: 요소에서 모든 이벤트 핸들러 함수 바인딩을 제거합니다. 하나의 이벤트 이름 매개변수만 사용: 요소에서 지정된 이벤트 이름에 바인딩된 모든 함수 개체를 제거합니다. c. 두 개의 매개변수 사용: 이벤트 요소에서 지정된 이벤트 이름에 바인딩된 실행된 함수 개체만 제거합니다. 8. 이벤트 바인딩 위임:

①이벤트 프록시: 지정된 상위 요소 아래의 모든 적격 하위 요소가 이벤트 처리 기능(생성 포함)을 사용하도록 허용합니다. 원칙: 이벤트 버블링 사용: a. b. 대상 요소를 얻습니다. e.target c. 조건을 충족하는 요소에만 응답합니다.

　②이벤트 프록시 사용: 이벤트를 부모에 바인딩합니다(버블링 사용). 선택기 조건을 충족하는 요소만 이벤트에 응답할 수 있습니다(부모).delegate("selector", "event name", function(e) ) e.target); 바인딩 제거: (parent).delegate("selector", "event name", function(e)e.target) 바인딩 제거: (parent).undelegate("selector"," Event name" , function(e){e.target});

9. 기타 바인딩:

　①일회성 이벤트: $(...).one("이벤트 이름", fn) ; 이벤트 처리 기능은 한 번만 실행할 수 있으며 실행 후 자동으로 해제됩니다.

　② 요소의 모든 이벤트를 문서에 바인딩합니다: (...).live("event name", fn); (...).live("이벤트 이름", fn); (...).die("이벤트 이름", fn)

　 ③ 이벤트 처리 기능을 하나의 요소에만 바인딩합니다. ("target").on( "이벤트 이름", fn)

④버블링 사용: $("parent").on("이벤트 이름", "selector", fn); 🎜>