简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  jQuery 기본 구문 요약

jQuery 기본 구문 요약

怪我咯
怪我咯원래의
2017-06-27 11:13:361662검색

jQuery 구문:

jQuery 구문은 HTML 요소 선택을 위해 컴파일되며 요소에 대해 특정 작업을 수행할 수 있습니다. 초보자는 배운 내용이 어떤 용도로 사용되는지 알아야 합니다.

기본 구문은 $(selector).action()입니다. 모든 jQuery는 이를 중심으로 페이지에서 요소를 선택한 다음 해당 요소에 대해 특정 작업을 수행합니다.

Example

$(this).hide() - 현재 요소 숨기기

문서 준비 기능:

문서가 완전히 로드(준비)되기 전에 jQuery 코드가 실행되는 것을 방지하는 것입니다. jQuery의 규칙으로 인해 모든 JavaScript 코드를 여기에 배치하는 것이 가장 좋습니다. 


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




j쿼리 요소 선택기 및 속성 선택기: 태그 이름, 속성 이름 또는 콘텐츠별로 HTML 요소를 선택할 수 있습니다. $(selector).action()의 전반부에 해당합니다.

jQuery 요소 선택기:

$("p")는 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.

$("p.intro")는 class="intro"가 있는 모든 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.

$("p#demo")는 id="demo"인 모든 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.

jQuery 속성 선택기:


$("[href]") href 속성이 있는 모든 요소를 ​​선택합니다.

$("[href='#']") href 값이 "#"인 모든 요소를 ​​선택합니다.

$("[href!='#']") href 값이 "#"과 같지 않은 모든 요소를 ​​선택합니다.


$("[href$='.jpg']")는 href 값이 ".jpg"로 끝나는 모든 요소를 ​​선택합니다.

jQuery CSS 선택기:

$("p").css("Background-color","red");

전체 jQuery 선택기 참조 매뉴얼: http://www.w3school. com.cn/jquery/jquery_ref_selectors.asp




jQuery 이벤트 함수: $(selector).action()의 후반부에 해당합니다.


이벤트 핸들러는 HTML에서 특정 이벤트가 발생할 때 호출되는 메서드를 참조합니다. 



<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>


이벤트 함수 함수를
$(document).ready(함수) 함수를 문서에 바인딩합니다. s 준비 이벤트(문서가 로딩이 완료되면)
$(selector).click(function) 함수를 트리거하거나 선택한 요소의 클릭 이벤트에 바인딩합니다.
$(selector).dblclick(function) 트리거 또는 바인딩 해당 함수는 선택한 요소의 더블 클릭 이벤트에 바인딩됩니다
$(selector).focus(function) 함수를 선택한 요소의 포커스 이벤트에 트리거하거나 바인딩합니다
$(selector ).mouseover( function) 선택한 요소의 마우스 오버 이벤트에 함수를 트리거하거나 바인딩합니다

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp



约定：


  • 把所有 jQuery 代码置于事件处理函数中

  • 把所有事件处理函数置于文档就绪事件处理器中

  • 把 jQuery 代码置于单独的 .js 文件中

  • 如果存在名称冲突，则重命名 jQuery 库




jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){

  $("p#id").show(function(){1000,alert('hello')});

  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e





jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()

  • fadeOut()

  • fadeToggle()       jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • fadeTo()           fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。




jQuery 滑动方法


通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()

  • slideUp()

  • slideToggle()




jQuery 动画 - animate() 方法


jQuery animate() 方法用于创建自定义动画。


$(selector).animate({params},speed,callback);


必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。


可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

animate() 메서드를 사용하면 모든 CSS 속성을 조작할 수 있습니다. 기억해야 할 중요한 사항: animate()를 사용할 때 모든 속성 이름을 작성하려면 Camel 표기법을 사용해야 합니다. 예를 들어 padding 대신 paddingLeft를 사용해야 합니다. . -left, margin-right 대신 marginRight를 사용합니다.


왼쪽 속성이 250픽셀이 될 때까지 e388a4556c0f65e1904146cc1a846bee 요소를 왼쪽으로 이동합니다.

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
0eb03d9751814e8456ceb258138fad15
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click( function(){
​ $("p").animate({left:'250px'});
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

< ;body> ;
bb9345e55eb71822850ff156dfde57c8애니메이션 시작65281c5ac262bf6d81768915a4a77ac0
d40448ba533d2b99da7987abd4fc69d2
94b3e26ee717c64999d7867364b1b4a3

< ; /body>

73a6ac4ed44ffec12cee46588e518a5e

jQuery는 애니메이션에 대한 대기열 기능을 제공합니다. 즉, 여러 animate() 호출을 차례로 작성하면 jQuery는 해당 메서드 호출을 포함하는 "내부" 대기열을 생성합니다. 그런 다음 이러한 애니메이션 호출을 하나씩 실행합니다.

$("버튼").click(function(){
var p=$("p");
p.animate({height:'300px',opacity:'0.4'},"slow");
p.animate({width:'300px',opacity:'0.8'},"느림");
p.animate({height:'100px',opacity:'0.4'},"느림");
p .animate({width:'100px',opacity:'0.8'},"slow");

});

다음 형식으로 대체할 수 있습니다

p.animate({height:'300px',opacity :'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow");



jQuery stop() 메서드는 애니메이션에 사용됩니다. 아니면 효과가 완료되기 전에 중지하세요.

$(selector).stop(stopAll,goToEnd);

선택적인 stopAll 매개변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며 활성 애니메이션만 중지하고 대기열에 있는 애니메이션이 뒤로 실행되도록 허용합니다.

선택적인 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0
< ;script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$ ("#stop").click(function(){
$("#panel").stop();
});
});
2cacc6d41bbb37262a98f745aa00fbf0

e3d5d1af3aac39b6826a89d5e42a6cf6
#panel,#flip
{
padding:5px;
text-align:center;
Background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609슬라이딩 중지65281c5ac262bf6d81768915a4a77ac0
< ; p id="flip">여기를 클릭하고 패널을 아래로 슬라이드하세요94b3e26ee717c64999d7867364b1b4a3
55a50214d3a0454ac595f64158e13d7eHello world!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

< ;/ html>



콜백 함수는 현재 애니메이션이 100% 완료된 후 실행됩니다.

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("이제 단락이 숨겨졌습니다");

});

전체 애니메이션: http://www.w3school.com.cn/jquery/jquery_ref_효과.asp



jQuery에는 HTML 요소와 속성을 조작하는 강력한 방법이 있습니다.

jQuery DOM 작업:

DOM = 문서 개체 모델, "W3C 문서 개체 모델은 프로그램과 스크립트가 문서의 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 업데이트할 수 있도록 하는 플랫폼 및 언어 독립적인 인터페이스입니다."



dom에서 값 가져오기:

DOM 작업을 위한 세 가지 간단하고 실용적인 jQuery 메서드:

  • text() - 선택한 요소의 텍스트 내용을 설정하거나 반환

  • html() - 선택한 요소(HTML 태그 포함)의 콘텐츠를 설정하거나 반환합니다.

  • val() - 양식 필드의 값을 설정하거나 반환합니다.

    $("#btn1").click(function() {
    경고("텍스트: " + $("#test").text());
    });
    $("#btn2").click(function(){
    경고("HTML: " + $ (" #test").html());
    });

    $("#btn1").click(function(){
    Alert("값: " + $("#test").val());
    });

    $("버튼").click (function(){
    Alert($("#w3s").attr("href"));
    });

DOM 값 설정:

$("#btn1"). click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2" ).html("a4b561c25d9afb9ac8dc4d70affff419안녕하세요!0d36329ec37a2cc24d42c7229b69747a");
});
$("#btn3").click(function(){
$("#test3").val( "Dolly Duck");

});

text(), html() 및 val() 콜백 함수, 콜백 함수에는 두 개의 매개변수가 있습니다: 선택한 요소 목록에 있는 현재 요소의 첨자 및 원본 (이전) 값. 그런 다음 함수 return의 반환 내용이 새 값으로 사용됩니다.

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "이전 텍스트: " + origText + " 새 텍스트: Hello world !
(색인: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function( i,origText){
return "기존 html: " + origText + " 새 html: Hello a4b561c25d9afb9ac8dc4d70affff419world!0d36329ec37a2cc24d42c7229b69747a
(색인: " + i + ")";
});

} );

$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
} ; pend() - 선택한 요소의 시작 부분에 콘텐츠 삽입

after() - 선택한 요소 뒤에 콘텐츠 삽입

before() - 선택한 요소 앞에 콘텐츠 삽입

$ ( "p").append("추가된 텍스트입니다.");

$("p").prepend("앞에 추가된 텍스트입니다.");
  • $("img").after("이후의 일부 텍스트 " ; 일반적으로 다음 두 가지 jQuery 메서드를 사용할 수 있습니다.

  • remove() - 선택한 요소(및 해당 하위 요소) 삭제

  • empty() - 선택한 요소에서 하위 요소 삭제

  • $( "#p1").remove();

    $("#p1").empty();


jQuery Remove() 메소드는 매개변수도 허용하므로 삭제된 항목을 필터링할 수 있습니다. 강요.

이 매개변수는 jQuery 선택기 구문일 수 있습니다.



100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a

$(문서 ).ready(function(){
$("버튼").click(function(){

$("p").remove(".italic");
});

});
3fa3f474cbb4b6d948eebecb1be5dde4

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeP에 있는 단락입니다.94b3e26ee717c64999d7867364b1b4a3

41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932이것은 p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932이것은 p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3

의 또 다른 단락입니다. bb9345e55eb71822850ff156dfde57c8class="italic"65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956
  • 73a6ac4ed44ffec12cee46588e518a5e

jQuery Manipulation CSS


로 모든 p 요소 삭제

jQuery에는 CSS 작업을 수행하는 여러 가지 방법이 있습니다. 다음 내용을 학습합니다.


addClass() - 선택한 요소에 하나 이상의 클래스 추가



removeClass() - 선택한 요소에서 하나 이상의 클래스 제거



toggleClass() - 추가/ 선택한 요소에 대한 클래스 전환 작업 삭제



css() - 스타일 속성 설정 또는 반환





8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e992cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("버튼").click(function(){
$("h1,h2,p").addClass("blue");
$("p" ).addClass("important");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
080b747a20f9163200dd0a7d304ba388
.important
{
font-weight:bold;
font -size:xx-large;
}
.blue
{
color:blue;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1title1473f0a7621bec819994bb5020d29372a c1a436a314ed609750bd7c7d319db4da제목 22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846bee문단입니다. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee이것은 또 다른 문단입니다. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee이 글은 매우 중요한 글입니다! 94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8요소에 클래스 추가65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

addClass() 메소드에서 지정할 수도 있습니다. 여러 클래스 :

$("button").click(function(){

$("#p1").addClass("important blue");
});


jQuery css() 메서드


css() 메서드는 선택한 요소의 하나 이상의 스타일 속성을 설정하거나 반환합니다.

지정된 CSS 속성의 값을 반환해야 하는 경우 다음 구문을 사용하세요.

$("p").css("Background-color");

지정된 CSS 속성을 설정해야 하는 경우, 다음 구문을 사용하세요.

$("p").css("Background-color","yellow");

여러 CSS 속성을 설정해야 하는 경우 다음 구문을 사용하세요.

$(" p").css({"Background -color":"yellow","font-size":"200%"});



jQuery 처리 요소 크기:

jQuery 사용 , 요소와 브라우저 창 크기를 쉽게 처리할 수 있습니다.


  • 너비()

  • 높이()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • 외부 높이()



width() 메서드는 요소의 너비(패딩, 테두리 또는 여백 제외)를 설정하거나 반환합니다.

height() 메서드는 요소의 높이(패딩, 테두리 또는 여백 제외)를 설정하거나 반환합니다.

$("button").click(function(){

var txt="";
txt+="너비: " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});


innerWidth() 메서드는 요소 너비(패딩 포함)입니다.

innerHeight() 메서드는 요소의 높이(패딩 포함)를 반환합니다.


outerWidth() 메서드는 요소의 너비(패딩 및 테두리 포함)를 반환합니다.

outerHeight() 메서드는 요소의 높이(패딩 및 테두리 포함)를 반환합니다.


outerWidth(true) 메소드는 요소의 너비(패딩, 테두리 및 여백 포함)를 반환합니다.

outerHeight(true) 메소드는 요소의 높이(패딩, 테두리 및 여백 포함)를 반환합니다.

다음 예에서는 지정된 e388a4556c0f65e1904146cc1a846bee 요소의 너비와 높이를 설정합니다.

$("button").click(function(){ $("#p1").width(500) .height(500); });




jQuery 이동:

jQuery 순회는 "이동"을 의미하며 다른 요소와의 관계를 기반으로 요소를 이동하는 데 사용됩니다. . HTML 요소를 "찾기"(또는 선택)합니다. 선택 항목으로 시작하여 원하는 요소에 도달할 때까지 이 선택 항목을 따라 이동하세요.

가계도에서 jQuery 순회를 사용하면 선택한(현재) 요소에서 시작하여 가계도에서 쉽게 위(조상), 아래(자손) 및 수평(형제)으로 이동할 수 있습니다. 이러한 움직임을 DOM 탐색이라고 합니다.

jQuery는 DOM을 탐색하기 위한 다양한 방법을 제공합니다. 순회 방법의 가장 큰 범주는 트리 순회입니다.


DOM 트리 탐색


다음 jQuery 메서드는 DOM 트리 탐색에 유용합니다.

  • parent()

  • parents()

  • parent 까지()

parent() 메서드는 선택한 요소의 직접 상위 요소를 반환합니다. 이 방법은 DOM 트리를 한 수준 위로만 탐색합니다.

$(document).ready(function(){

$("span").parent();
});

parents() 메소드는 선택한 요소의 모든 상위 요소를 반환하며, 이는 끝까지 진행됩니다. 문서까지 루트 요소(100db36a723c770d327fc0aef2ce13b1)입니다.


선택적 매개변수를 사용하여 조상 요소 검색을 필터링할 수도 있습니다.

다음 예에서는 ff6d136ddc5fdfeffaf53ff6ee95f185 요소인 모든 45a2772a6b6107b401db3c9b82c049c2 요소의 모든 상위 항목을 반환합니다.

$(document).ready(function(){
$("span").parents("ul" );
});


parentsUntil() 메서드는 시작이나 끝을 포함하지 않고 지정된 두 요소 사이의 모든 조상 요소를 반환합니다.

다음 예에서는 45a2772a6b6107b401db3c9b82c049c2 요소와 e388a4556c0f65e1904146cc1a846bee 요소 사이의 모든 상위 요소를 반환합니다.

$(document).ready(function(){
$("span").parentsUntil("p ");
});


DOM 트리 아래로 탐색


다음은 DOM 트리 아래로 탐색하는 두 가지 jQuery 메서드입니다.

  • children()

  • find( )


jQuery children() 메서드


children() 메서드는 선택한 요소의 모든 직접 하위 요소를 반환합니다. 이 방법은 DOM 트리를 한 수준 아래로만 탐색합니다.

선택적 매개변수를 사용하여 하위 요소 검색을 필터링할 수도 있습니다.


$(document).ready(function(){

$("p").children("p.1"); //클래스 1의 p 요소

});

find () 메소드는 선택한 요소의 하위 요소를 마지막 하위 요소까지 반환합니다.

다음 예에서는 e388a4556c0f65e1904146cc1a846bee의 하위 항목인 모든 45a2772a6b6107b401db3c9b82c049c2 요소를 반환합니다.

$(document).ready(function(){
$("p").find("span");
} );

다음 예에서는 e388a4556c0f65e1904146cc1a846bee의 모든 하위 항목을 반환합니다.

$(document).ready(function(){
$("p").find("*");

});


DOM 트리를 수평으로 탐색할 수 있는 유용한 메서드가 많이 있습니다:

  • siblings()

  • next()

  • nextAll()

  • nextUntil ()

  • prev()

  • prevAll()

  • prevUntil()

siblings() 메서드는 선택한 요소의 모든 형제 요소를 반환합니다. 자신을 포함하지 않습니다.

선택적 매개변수를 사용하여 형제 요소 검색을 필터링할 수도 있습니다.

$(document).ready(function(){
$("h2").siblings("p");
});

next() 메소드는 선택한 요소의 다음 형제 요소를 반환합니다. 이 메서드는 하나의 요소만 반환합니다.

$(document).ready(function(){
$("h2").next();
});

nextAll() 메서드는 선택한 요소의 다음 형제 요소를 모두 반환합니다. 모든 후속 요소를 반환합니다.

nextUntil() 메서드는 지정된 두 인수 사이에 있는 다음 형제 요소를 모두 반환합니다. 양쪽 끝의 요소를 제외합니다.

prev(), prevAll() 및 prevUntil() 메서드는 위 메서드와 유사하게 작동하지만 반대 방향으로 작동합니다. 즉, 이전 형제 요소를 반환합니다(앞으로가 아니라 DOM 트리의 형제 요소를 따라 뒤로 이동). .



가장 기본적인 세 가지 필터링 방법은 first(), last() 및 eq()이며, 이를 사용하면 요소 집합 내의 위치에 따라 특정 요소를 선택할 수 있습니다. filter() 및 not()과 같은 다른 필터링 방법을 사용하면 지정된 기준과 일치하거나 일치하지 않는 요소를 선택할 수 있습니다.

first() 메서드는 선택한 요소의 첫 번째 요소를 반환합니다.


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p p").first().css("Background-color","yellow");
});
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1내 홈페이지에 오신 것을 환영합니다473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee

e388a4556c0f65e1904146cc1a846beep에 있는 문단입니다. 94b3e26ee717c64999d7867364b1b4a3                                                                                                   ~                                                  . 94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3


e388a4556c0f65e1904146cc1a846bee이것도 문단입니다. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq() 메소드는 선택된 요소 중 지정된 인덱스 번호를 가진 요소를 반환합니다. 인덱스 번호는 0부터 시작하므로 첫 번째 요소의 인덱스 번호는 1이 아닌 0입니다. 다음 예에서는 두 번째 e388a4556c0f65e1904146cc1a846bee 요소(색인 번호 1)를 선택합니다.

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

12776a2c2b8484d909b1cf05a6e2ac6f
2cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a

$(document).ready(function(){
$("p").eq(1).css("배경색","노란색 " );
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1홈페이지에 오신 것을 환영합니다473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee나는 Tang Old duck입니다(index) 0). 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee도널드 덕(색인 1).

나의 가장 친한 친구는 미키 마우스입니다(색인 3). 94b3e26ee717c64999d7867364b1b4a3


36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

filter() 메소드를 사용하면 기준을 지정할 수 있습니다. 이 기준과 일치하지 않는 요소는 컬렉션에서 제거되고 일치하는 요소가 반환됩니다.


100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$( document).ready(function(){
$("p").filter(".intro").css("Background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
< ;/head>
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1제 홈페이지에 오신 것을 환영합니다473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846bee저는 도널드 덕입니다. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65저는 덕버그에 살아요. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65저는 덕버그를 좋아합니다.


나의 가장 친한 친구는 미키입니다. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

not() 메소드는 기준과 일치하지 않는 모든 요소를 ​​반환합니다. 팁: not() 메서드는 filter()와 반대입니다.

위 내용은 jQuery 기본 구문 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JQuery 지연 객체 분석다음 기사：JQuery 지연 객체 분석

관련 기사

더보기