jquery 와 javascript 의 차이(상용 방법 비교)

jquery 는 자바 script 에 대한 확장,패키지,즉 자바 script 을 더욱 잘 사용 하고 간단 하 게 하 는 것 입 니 다.사람들 이 뭐라고 그 랬 지?jquery 는 더 적은 코드 로 더 많은 기능 을 예 쁘 게 완성 해 야 한 다 는 거 야.JavaScript 와 JQuery 의 일반적인 방법 비교
1.로드 DOM 차이
JavaScript：
window.onload
function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
//두 번 째 window.onload 만 실행 합 니 다.그러나 다음 과 같은 방법 으로 개선 할 수 있다.
window.onload = function(){
first();
second();
}
Jquery：
$(document).ready()
$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}
$(document).ready(function(){
first();
}
$(document).ready(function(){
second();
}
//두 가지 모두 실 행 됩 니 다.
}
2.ID 가 져 오기
JavaScript：
document.getElementById('idName')
JQuery：
$('#idName')
3.클래스 가 져 오기
JavaScript：
JavaScript 는 기본적으로 class 를 가 져 오 는 방법 이 없습니다.
JQuery：
$('.className')
4,TagName 가 져 오기
JavaScript：
document.getElementsByTagName('tagName')
JQuery：
$('tagName')
5.대상 을 만 들 고 문서 에 추가
JavaScript： 
var para = document.createElement('p');
//p 요 소 를 만 듭 니 다.
document.body.appendElement(para);
//p 요 소 를 body 의 lastchild 서브 노드 에 추가 합 니 다.새로 만 든 p 요 소 를 존재 하 는 요소 에 삽입 하기 전에 insert Before()방법 을 사용 할 수 있 습 니 다.
JQuery：
JQuery 는 기 존 요소(내부)에 새 요 소 를 삽입 하기 전이 나 그 후의 방법 4 가 지 를 제공 합 니 다:append(),appendTo(),prepend(),prependTo().
형식:$(html);
eg,html 코드:

World!

$('p').append('Hello!');
//출력:

World!Hello!

$('Hello!').appendTo('p'); //출력:동상
$('p').prepend('Hello!');
//출력:

Hello!World!

$('Hello!').prependTo('p');
//출력:동상
6.새로운 요소 삽입
JavaScript：
insertBefore()문법 형식:
parentElement.insertBefore(newElement,targetElement)
eg,한 단락 에 img 요 소 를 삽입 하기 전에.
html 코드:

이것 은 텍스트 입 니 다

JavaScript 코드:
var imgs = document.getElementById('imgs');
var para = document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);
JQuery：
JQuery 는 기 존 요소(외부)에 새 요 소 를 삽입 하기 전이 나 그 후의 방법 4 가 지 를 제공 합 니 다:after(),insert After(),before(),insert Before().
형식:$(html);
eg,html 코드:

World!

JQuery 코드
$('p').after('Hello!');
//출력:

World!

Hello!
$('Hello!'). insertAfter ('p');
//출력:동상
$('p').before('Hello!');
//출력:Hello!

World!

$('Hello!').insertBefore('p');
//출력:동상
7.복제 노드
JavaScript：
reference = node.cloneNode(deep)
이 방법 은 불 형의 매개 변수 만 있 고 취 할 수 있 는 값 은 true 나 false 일 수 있 습 니 다.이 매개 변 수 는 복 사 된 노드 의 하위 노드 도 새 노드 에 함께 복사 할 지 여 부 를 결정 합 니 다.
JQuery：
clone()//노드 를 복사 한 후 복 제 된 새 요 소 는 아무런 행동 도 하지 않 습 니 다.
clone(true)//노드 내용 및 바 인 딩 이벤트 복사
비고:이 방법 은 보통 appendTo(),prependTo()등 방법 과 결합 하여 사용 합 니 다.
8.노드 삭제
JavaScript：
reference = element.removeChild(node)
removeChild()방법 은 주어진 요소 에서 하위 노드 를 삭제 합 니 다.
JQuery：
remove();
reove()방법 은 DOM 에서 일치 하 는 모든 요 소 를 삭제 하 는 것 입 니 다.reove()방법 은 다른 필터 선택 기와 결합 하여 사용 할 수 있어 서 매우 편리 합 니 다.
eg,얼 리 의 title 을"Hello"가 아 닌 li 를 제거 합 니 다:
$('ul li').remove(li[title!='Hello']);
empty();
empty()방법 은 노드 를 비 우 는 것 입 니 다.
9.패키지 노드
JavaScript：
자 바스 크 립 트 없 음
JQuery：
wrap()//일치 하 는 요 소 를 다른 요소 의 구조 화 태그 로 따로 감 싸 줍 니 다.
wrapAll()/일치 하 는 모든 요 소 를 하나의 요소 로 감 싸 줍 니 다.
wrapInner()//일치 하 는 요소 의 하위 내용 을 다른 구조 화 된 태그 로 감 싸 줍 니 다.
10.속성 조작:속성 노드 설정,속성 노드 찾기
JavaScript：
document.getElementsByTagName('tagName')
JQuery：
JQuery 에서 속성 노드 를 설정 하고 찾 습 니 다:attr().
$('p').attr('title'); //p 요소 의 title 속성 가 져 오기;
$('p').attr('title','My title'); //p 요소 의 title 속성 설정
$('p').attr('title':'My title','class':'myClass'); //여러 속성 을 추가 해 야 할 때'이름:값'이 맞 는 형식 으로 중간 에 쉼표 로 구분 할 수 있 습 니 다.
11.교체 노드
JavaScript：
reference = element.replaceChild(newChild,oldChild)
이 방법 은 주어진 부모 요소 의 키 노드 를 다른 노드 로 바 꾸 는 것 이다.
JQuery：
replaceWith()、replaceAll()
eg:

hello

다음으로 바 꾸 려 면:

Hi

JQuery 코드:
$('p') .replaceWith('

Hi

');
또는 다음 과 같이 쓸 수 있 습 니 다:
$('

Hi

').replaceAll('p');
12.CSS-DOM 작업
JavaScript：
형식:element.style.property
CSS-DOM 은 style 대상 의 속성 을 읽 고 설정 할 수 있 습 니 다.부족 한 점 은 외부 CSS 가 설정 한 스타일 정 보 를 추출 할 수 없다 는 것 입 니 다.JQuery 의.css()방법 은 가능 합 니 다.
주의 점:CSS 에 있 는"font-size"와 같이"-"가 있 으 며,font Size 와 같은 이니셜 소문 자 낙타 봉 식 으로 표시 해 야 합 니 다.
JQuery：
형식:$(selector).css()
css()방법 으로 요소 의 스타일 속성 가 져 오기
이 밖 에 JQuery 는 height()와 width()를 제공 하여 요소 의 높이 와 너비(모두 단위 가 없 음)를 가 져 오고 css(height),css(width)는 높이 와 너비 로 되 돌아 가 며 단 위 를 가 져 옵 니 다.
다음은 다른 네티즌 들 의 보충 을 보 여 드 리 겠 습 니 다.
jQuery 는 자바 script 프로그램의 작성 을 크게 간소화 할 수 있 습 니 다.저 는 최근 에 jQuery 에 대해 알 아 보 았 습 니 다.제 가 시작 하 는 과정 에서 의 필 기 를 여러분 과 공유 하 는 데 도움 이 되 었 으 면 합 니 다.
jQuery 를 사용 하려 면 먼저 HTML 코드 맨 앞 에 jQuery 라 이브 러 리 에 대한 인용 을 추가 해 야 합 니 다.예 를 들 어:

라 이브 러 리 파일 은 로 컬 에 놓 을 수도 있 고 유명 회사 의 CDN 을 직접 사용 할 수도 있 습 니 다.장점 은 이런 대기업 의 CDN 이 비교적 유행 하기 때 문 입 니 다.사용자 가 사 이 트 를 방문 하기 전에 다른 사 이 트 를 방문 할 때 이미 브 라 우 저 에 캐 시 되 어 있 기 때문에 사이트 의 오픈 속 도 를 가속 화 할 수 있 습 니 다.또 다른 장점 은 사이트 의 데이터 대역 폭 을 절약 한 다 는 것 이다.
Google 제공
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
jQuery 공식
http://code.jquery.com/jquery-1.6.min.js
나 는 키 도 메 인 이름 을 직접 만 들 었 는데,실제로 도 구 글 의 CDN 으로 넘 어 갔다.
http://cdn.akcms.com/js/jquery.js
jQuery 코드 의 구체 적 인 쓰기 와 원생 의 Javascript 쓰기 가 일반적인 작업 을 수행 할 때 다음 과 같은 차이 가 있 습 니 다.
1.포 지 셔 닝 요소
JS
document.getElementById("abc")
jQuery
$("\#abc")id 로 찾 음
$(".abc")클 라 스 를 통 해 위치 추적
$("div")탭 으로 찾기
주의해 야 할 것 은 JS 가 돌아 온 결 과 는 이 요소 이 고 jQuery 가 돌아 온 결 과 는 JS 의 대상 입 니 다.다음 예 에서 요소 abc 를 찾 았 다 고 가정 합 니 다.
2 원소 의 내용 변경
JS
abc.innerHTML = "test";
jQuery
abc.html("test");
3 숨겨 진 요소 보이 기
JS
abc.style.display = "none";
abc.style.display = "block";
jQuery
abc.hide();
abc.show();
abc.toggle();
//표시 와 숨 김 사이 전환(2012.4.21 업데이트)
4 초점 획득
JS 와 jQuery 는 똑 같 습 니 다.모두 abc.focus()입 니 다.
5.폼 할당
JS
abc.value = "test";
jQuery
abc.val("test");
6 폼 의 값 획득
JS
alert(abc.value);
jQuery
alert(abc.val());
7 설정 요소 사용 불가
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);
8 요소 스타일 수정
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);
JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");
9 Ajax
JS
자신 이 대상 을 만 들 고 브 라 우 저 호환성 등 난잡 한 문 제 를 스스로 처리 하 며 생략 합 니 다.
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);
function recall(result) {
alert(result);
//json 으로 돌아 오 면 다음 과 같이 처리 합 니 다.
//result = eval('(' + result + ')');
//alert(result);
}
10.체크 상자 가 선택 되 었 는 지 판단 합 니 다.
jQuery
if(abc.attr("checked") == "checked")
메모:인터넷 에서 말 하 는.attr("checked")==true 는 실제로 사용 할 수 없습니다.위 에 있 는 이 테스트 는 사용 할 수 있 습 니 다.