jQuery 구문:

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

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

Example

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

문서 준비 기능:

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

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

로그인 후 복사

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

jQuery 요소 선택기:

$("p")는

요소를 선택합니다.

$("p.intro")는 class="intro"가 있는 모든

요소를 선택합니다.

$("p#demo")는 id="demo"인 모든

요소를 선택합니다.

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 参数是隐藏或显示完成后所执行的函数名称。

这是一个段落。

这是另一个段落。

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

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

这是一个段落。

这是另一个段落。

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픽셀이 될 때까지

요소를 왼쪽으로 이동합니다.

< ; /body>

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 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.

< ;script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$ ("#stop").click(function(){
$("#panel").stop();
});
});

< ; p id="flip">여기를 클릭하고 패널을 아래로 슬라이드하세요

Hello world!

< ;/ 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("안녕하세요!");
});
$("#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 world!
(색인: " + 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 선택기 구문일 수 있습니다.

title1

제목 2

문단입니다.

이것은 또 다른 문단입니다.

이 글은 매우 중요한 글입니다!

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() + "
";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});

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

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

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

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

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

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

다음 예에서는 지정된

요소의 너비와 높이를 설정합니다.

$("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() 메소드는 선택한 요소의 모든 상위 요소를 반환하며, 이는 끝까지 진행됩니다. 문서까지 루트 요소()입니다.

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

다음 예에서는

요소의 모든 상위 항목을 반환합니다.

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

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

다음 예에서는 요소와

요소 사이의 모든 상위 요소를 반환합니다.

$(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 () 메소드는 선택한 요소의 하위 요소를 마지막 하위 요소까지 반환합니다.

다음 예에서는

의 하위 항목인 모든 요소를 반환합니다.

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

다음 예에서는

의 모든 하위 항목을 반환합니다.

$(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() 메서드는 선택한 요소의 첫 번째 요소를 반환합니다.