jQuery를 이용한 페이지 요소의 효율적인 동작 예시에 대한 자세한 설명

jQuery는 페이지 요소를 효율적으로 운영할 수 있습니다.

---

DOM 및 CSS 페이지 요소 선택 정보:

　$("span"); //모든 범위 요소

　$("#elem") //id가 elem인 요소

　$(" .classname "); //클래스 이름이

인 요소 $("div#elem"); //dc6dce4a544fdca2df29d5ac0ea9906b ID가 elem인 요소

$("ul li a.menu"); //클래스 3499910bf9dac5ae3c52d5ede7383485 tag of "menu"

　　$("p>span"); //p의 직접 하위 요소span

　 $("input[type=password]"); //지정된 유형의 입력 요소

$("p:first"); //페이지의 첫 번째 문단

　$("p:even"); //모든 짝수 문단

　$(":header"); 요소(h1 ~ h6)

　$(":button"); //모든 버튼 요소

　$(":radio");

　$(":checkbox");　

　$(":checked") ; //선택된 상태 선택 상자 또는 세그먼트 선택 상자

• html() 모든 HTML(텍스트 포함)을 가져오는 JavaScript의 innerHTML과 유사하게 요소 또는 요소 그룹의 HTML 콘텐츠를 가져옵니다.

var htmlContent=$("#elem").html();

$("#elem").html("e388a4556c0f65e1904146cc1a846beeHere is some new content.94b3e26ee717c64999d7867364b1b4a3");/*修改内容*/

• text()는 요소의 텍스트 콘텐츠만 가져오고 다음과 같이 콘텐츠를 가져와 수정합니다.

var textContent=$("#elem").text();
$("#elem").text("new content");     //修改内容
$("#elem").append("<p>Here is some new content.</p>")   //添加文本内容

• attr()은 요소별 텍스트 콘텐츠를 반환합니다. 속성 값(사용 시) 그룹에 있을 때 첫 번째 요소의 값을 반환합니다.

var title=$("#elem").attr("title");    //返回属性值

$("#elem").attr("title","new title");    //修改属性值

• show() //요소 표시 $("div").show();

• hide() // 요소 숨기기, 느린 값은 약 600밀리초

$("#elem").hide("slow",function(){

　　　　　　　　///숨긴 후 작업

　　　})

　 $("#elem").fadeOut("slow",funtion(){

---

　　　　 // 페이드 아웃 후 작업 　｝);　　

　 $("#elem").fadeIn(500,function( ; 불투명도, 최종 불투명도가 0.5

　로 페이드 인 또는 아웃됨을 나타냄 });

　2. 슬라이드, 페이드 인 및 아웃과 유사

　slideDown();

　slideUp();

　slideToggle();

3. 애니메이션

　animate() 적용 가능 많은 CSS에 스타일. 예를 들어 요소의 높이와 너비를 변경한 다음 페이드 아웃하고 숨깁니다.

$("#elem").animate(
    {
        width:400px;
        height:400px;
       },1500,function(){
               $(this).fadeOut("slow");
                }
  );

명령 체인

jQuery 명령 체인의 길이에는 제한이 없습니다. 동일한 요소 집합에 대해 여러 작업을 연속적으로 수행할 수 있습니다.

　$ ("#elem") .text("Hello from jQuery").fadeOut().fadeIn();

위 내용은 jQuery를 이용한 페이지 요소의 효율적인 동작 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!