이 기사의 예에서는 jQuery의 DOM 조작 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. 여기서 설계된 주요 DOM 작업에는 DOM 객체 생성(JS 메서드 및 jquery 메서드), 속성 수정, 스타일 수정, 이벤트 동적 바인딩이 포함됩니다. 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. http://www. w3.org /1999/xhtml"> 동적으로 생성된 개체 테스트 레이어 <입력 유형=텍스트 id=inputTest 읽기 전용=true /> 맞춤 데이터 가져오기-1 맞춤 데이터 가져오기-2 <br> //document.getElementById("testDiv").innerHTML = "<div style="border:solid 1px #FF0000">동적으로 생성된 div</div>";<br> var testDiv = document.getElementById("testDiv");<br> var select = document.createElement("select");<br> select.options[0] = new Option("추가 기능1", "값1");<br> select.options[1] = new Option("추가 기능2", "value2");<br> select.size = "2";<br> var 객체 = testDiv.appendChild(select);<br> $("img").each(함수(색인) {<br> this.alt = "changed";//dom 속성 정보 수정<br> //alert("index:" index ", id:" this.id ", alt:" this.alt);<br> });<br> $("#inputTest").removeAttr("readonly");<br> //alert($("#inputTest").attr("읽기 전용"));<br> $(함수()<br> {<br> Alert("attr("너비"):" $("#testDiv").attr("너비"));//정의되지 않음<br> Alert("css("너비"):" $("#testDiv").css("너비"));//auto(ie6) 또는 1264px(ff)<br> Alert("width():" $("#testDiv").width()); //올바른 값은 1264<br> Alert("style.width:" $("#testDiv")[0].style.width ) //null 값<br> })<br> //동적 바인딩 클릭 이벤트<br> $("#testDiv5").bind("클릭", function(event)<br> { 경고($(event.target).attr("고객")) });<br> //한 번만 실행되는 클릭 이벤트 바인딩 <br> $("#testDiv6").one("click", { 고객: "고객 데이터 2",a:"aaa" }, function(event)<br> { 경고(event.data.customer) });<br> <br> </본문><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
