js novices_jquery에 적합한 jQuery 기본 튜토리얼 노트

내가 작성한 기본 jquery 튜토리얼을 읽어본 후, 그 노트가 모든 사람에게 적합하지 않다고 생각되면 읽어도 됩니다. 그들을.

1, : eq() 및 nth-child()
아래 코드를 살펴보세요.
🎜>

대신 :nth-child(2)를 사용해야 합니다. 2, :odd 및 :even
:odd : 홀수 행
:even : 짝수 행
초보자들은 우리가 하는 것과 반대인 것 같다고 자주 말하죠?
사실 :eq() 선택자와 동일합니다. 첨자는 0부터 시작합니다.
즉, 테이블의 첫 번째 행 번호는 0(짝수)입니다. 두 번째 행의 번호는 1(홀수)입니다. . .


3, $("tr:odd").addClass()
는 $("tr").filter(":odd").addClass()
4, $('td:contains("cssrain")') // 문자열 cssrain을 포함하는 모든 td 가져오기

5, jquery to dom:
$("td").get (0).tagName 또는 $("td")[0].tagName

6, load():
jquery의 load()에는 2가지 수준의 의미가 있습니다.
첫 번째 수준은 의미는 dom의 window.onload와 동일할 수 있습니다
두 번째 레이어는 (url)을 로드할 수 있다는 의미입니다.

7: 준비 약어:
1;
$(document).ready(function(){  
 ///뭔가
})
2; > $().ready(function(){
//뭔가를 한다
})
3
$(function(){
//뭔가를 한다
})


8. 이벤트 버블링:
일반적으로 B를 클릭하면 a가 클릭됩니다.
A를 트리거하지 않으려면 stopPropagation()을 사용하여 버블링을 중지할 수 있습니다.
구체적인 예:

aaaaaaa

aaaaaa

;SCRIPT LANGUAGE=" JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$(' #b').click(function(e){
alert("B")
e.stopPropagation();//버블링을 방지하고 "A"를 출력하지 않습니다. 제거할 수 있습니다.
})
})



9, hide()show()는 마지막 dipslay 상태를 기억합니다

a

b

10, hide() show() 및 시간 매개변수

a

b

11, 효과:
show(), hide()는 여러 스타일 속성(높이, 너비 및 불투명도)을 동시에 수정합니다. .
fadeIn() fadeOut() : Opacity
fadeTo() : Opacity
slideDown(), SlideUp() : Height

만족스럽지 않으면 animate만 사용할 수 있습니다. ()
animate()는 더욱 강력하고 복잡한 효과를 제공합니다.

12, animate():
before .show('slow'); // 느림은 0.6초 이내에 높이, 너비 및 투명도가 동시에 변경됨을 나타냅니다. 시간으로 표현하면 600입니다. === .show(600);
그럼 animate()를 살펴보겠습니다.

animate({heigth : 'slow' ,width : 'slow' }, 'slow' )
여기서 height를 사용할 수 있는 이유: 'slow'는 실제로 .show('slow')와 유사합니다. 물론 이전에 height를 지정했습니다. .

13. 애니메이션을 하기 전에 위치를 결정하세요.
🎜>


< p id="a" >a

14, 너비( ) 및 css('width')

a< ;/p>



15: animate()가 애니메이션 효과를 주면 애니메이션이 순서대로 실행됩니다.
🎜>

a

//위 이벤트가 순서대로 실행됩니다. 먼저 왼쪽으로 변경한 다음 위쪽으로 변경


대비:
;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

a

//위는 함께 실행됩니다. 즉, 왼쪽과 주요 변경사항을 함께 확인하세요.

차이점을 아시나요?


16. 마찬가지로 또 다른 예를 살펴보겠습니다.



top:100px;Background:red;">a

//animate()가 뒤따를 때 다른 애니메이션 효과도 실행을 위해 대기합니다. 즉, 하나씩 오십시오.

비교: css()

a

<입력 유형="버튼" id="test" value="test" />

요약:
애니메이트에서 여러 속성으로 적용하면 효과가 동시에 발생합니다.
연속적으로 적용하면 순서대로 적용됩니다.
.css() 메서드와 같은 비효과 메서드는 순서가 없습니다. 해결 방법은 콜백 함수에 넣는 것입니다.


17, 예를 들어보세요: Paragraph
"http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">