jQuery 초급 학습 노트 및 소스 code_jquery

jQuery는 정말 훌륭하고 일부 효과는 나를 비명을 지르게 만들기도 합니다. 다양한 플러그인을 통해 원하는 효과를 얻을 수 있습니다. 이 방법은 악어 신발처럼 jQuery의 인기를 끌 수 있는 기반을 마련했습니다. jQuery의 또 다른 장점은 구조에서 동작을 분리하는 목적을 달성한다는 것입니다.

내용 요약:
1. 설치
2. Hello jQuery
3. 찾기: 선택기 및 이벤트 사용하기
4. AJAX 사용하기
5. Animate me(나를 살아나게 하라): FX(jQuery FX, jQuery UI 다음으로 두 번째 하위 라이브러리로, UI의 모양 모듈보다는 객체의 사라짐과 모양, 색상, 크기, 색상 등을 포함하여 애니메이션 효과를 강조함)를 사용합니다. 위치 변환.)
6. Sort me: tablesorter 플러그인 사용(테이블 정렬)

custom.js

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() { //## 약식 방법: (document).ready를 제거할 수 있습니다.
## 클릭하면 ""가 모두 채워지도록 합니다. hello world"
$("a").click(function() {
alert("Hello world");
});

## ID는 "orderedlist"로 추가됨 클래스 이름은 core.css에 정의된 "red"입니다.
$("#orderedlist").addClass("red")

## id는 "orderedlist" 아래의 마지막 li입니다. , 마우스가 그 위로 지나가면 색상이 변경됩니다
$("#orderedlist li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green")
}
)

## find()를 사용하면 다음을 수행할 수 있습니다. 선택한 요소 Find에 대한 조건이므로 $("#orderedlist).find("li")는 $("#orderedlist li")와 같습니다. Each() 메서드는 모든 li에 대해 반복하고 이를 기반으로 더 많은 처리를 수행할 수 있습니다. .
## addClass()와 같은 대부분의 메소드는 자체적인 Each()를 사용할 수 있습니다. 이 예에서 html()은 각 li의 html 텍스트를 가져와서 일부 텍스트를 추가하고 html로 설정하는 데 사용됩니다. li의 텍스트
$("#orderedlist").find("li").each(function(i) {
$(this).html($(this).html() " BAM! " i);
}
);

## 모든 입력 값 지우기 ​​
$("#reset").click(function() {
$ (" input").attr("value", "");
});

## 이 코드는 모든 li 요소를 선택한 다음 ul 하위 요소가 있는 li 요소를 제거합니다. 브라우저를 새로 고친 후 , ul 하위 요소의 li 요소를 제외한 모든 li 요소에는 테두리가 있습니다.
## 매우 편리한 CSS() 메서드에 주의하고 실제로 테스트하고 관찰해야 한다는 점을 다시 한 번 상기시켜주세요. 예를 들어 CSS 스타일 변경과 같은 효과는 무엇입니까? 다른 CSS 스타일을 추가하는 것은 어떻습니까?
$("li").not("[ul]").css("border", "1px solid black").css("color", "red")

# # 이 코드는 name 속성이 있는 모든 링크에 배경색을 추가합니다. [참고: jQuery1.2 이상에서는 @ 기호를 제거해야 합니다.]
$("a[@name]").ground("#eee")

## 특징적인 href 속성이 있는 링크를 선택하세요. href에 대한 이해가 브라우저마다 일치하지 않을 수 있으므로 전체 일치("=") 대신 부분 일치("*=")를 사용합니다.
$ ("a[@href *=bot]").click(function() {
alert("hello world 2");
});

## 여기서는 몇 가지 Chain 표현식을 사용하여 코드 양을 줄입니다. 더욱 직관적이고 이해하기 쉬워 보입니다. '#faq'가 한 번만 선택되는 것처럼 end() 메서드를 사용하면 첫 번째 find() 메서드가 종료(실행 취소)됩니다.
## 따라서 나중에 필요 없이 find('dt')를 계속할 수 있습니다. $('#faq').find('dt') 를 다시 작성하세요.
## 클릭 이벤트에서는 $(this).next()를 사용하여 dt 바로 아래의 dd 요소를 찾아 클릭한 질문 아래의 답변을 빠르게 선택할 수 있습니다.
$('#faq').find('dd').hide().end().find('dt').click(function() {
var 답변 = $(this). next();
if (answer.is(':visible')) {
answer.slideUp()
} else {
answer.slideDown()
});

## 동일한 수준의 요소를 선택하는 것 외에도 상위 수준의 요소를 선택할 수도 있습니다. 사용자가 마우스를 움직일 때 기사의 특정 단락에 있는 링크의 상위 요소를 강조 표시하고 싶을 수도 있습니다.
$("a").hover(function () {
$(this ).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass ("highlight"); });

## AJAX 첫 시도. 먼저 몇 가지 서버 측 코드가 필요합니다. 이 예에서는 ASPX 파일을 사용하여 등급 매개변수를 읽고 총 등급 수와 평균을 반환합니다.
// 마크업 생성
var ratingMarkup = [" 평가해 주세요: "]
for (var i = 1; i <= 5; i ) {
ratingMarkup[atingMarkup.length] = "" i " "; //ratedMarkup은 배열입니다
}
// 컨테이너에 마크업을 추가하고 앵커에 클릭 핸들러를 적용합니다.
$ ( "#ating").append(atingMarkup.join('')).find("a").click(function(e) { //join 메소드를 사용하여 배열의 모든 요소를 ​​연결하는 문자를 반환합니다. 지정된 기호 String
e.preventDefault(); //이 메소드는 이벤트와 관련된 기본 작업을 수행하지 않도록 웹 브라우저에 알립니다(해당 작업이 있는 경우)
// 요청 보내기
$ .post(" rate.aspx?ating=" $(this).html(), {}, function(xml) { //여기서 공백을 차지하려면 {}를 사용해야 합니다
// 결과 형식 지정
var result = [
"평가해 주셔서 감사합니다. 현재 평균: ",
$("average", xml).text(),
", 투표 수: ",
$( "count", xml).text()
];
// 결과 출력
$("#rated").html(result.join(''))
});
});

## 일부 동적 효과는 show() 및 hide()를 사용하여 수행할 수 있습니다. 망원 효과.
$("a").toggle(function() { //양방향 스위치 전환
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
})

## 슬라이딩 효과와 같은 일부 효과를 생성하기 위해 animate()와 결합할 수 있습니다. fade
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
} , '느림')
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
} , 'slow');
});

## tablesorter 플러그인 사용(테이블 정렬)
## 거의 모든 특수 항목이 다음과 같이 사용됩니다. 먼저 js 파일을 포함합니다. 그런 다음 특정 요소에 대해 플러그인에서 정의한 메서드를 사용합니다. 물론 구성할 수 있는 몇 가지 매개 변수 옵션도 있습니다.
$("#large").tableSorter(); >
## 이 테이블에 일부를 추가할 수도 있습니다. 효과를 강조하기 위해 인터레이스 배경색(얼룩말 교차) 효과를 만들 수 있습니다.
$("#large").tableSorter({
stripingRowClass : ['odd', 'even'], // 배열로 제공되는 스트라이프용 클래스 이름
stripRowsOnStartUp: true // tableSorter init에서 행 제거

}) ;

jquery- starterkit.rar