>  기사  >  웹 프론트엔드  >  jquery 코드 작성과 기본 js 작성의 차이점에 대한 자세한 설명

jquery 코드 작성과 기본 js 작성의 차이점에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-06-19 11:19:391656검색

jQuery를 사용하려면 먼저 HTML 코드 시작 부분에 다음과 같이 jQuery 라이브러리에 대한 참조를 추가해야 합니다.

<script language="javascript" src="/js/jquery.min.js"></script>

라이브러리 파일은 로컬에 배치하거나 잘 알려진 회사의 CDN을 직접 사용할 수 있습니다. 장점은 이러한 대기업의 CDN이 상대적으로 인기가 있다는 것입니다. 사용자가 귀하의 웹사이트를 방문하기 전에 다른 웹사이트를 방문할 때 브라우저에 캐시되어 있을 가능성이 높기 때문에 웹사이트 열기 속도를 높일 수 있습니다. 또 다른 이점은 웹 사이트 트래픽 대역폭을 절약한다는 점입니다.

jquery 코드 작성과 기본 js 작성의 차이점은 다음과 같습니다.

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 = " 없음";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle()
//표시 및 숨기기 전환

4. 포커스 가져오기

JS와 jQuery는 동일합니다. 둘 다 abc.focus();

5.
JS
abc.value = "test"; 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(&#39;(&#39; + result + &#39;)&#39;); 
//alert(result);
}

10.

checkbox

가 선택되었는지 확인합니다jQueryif(abc.attr("checked") == "checked")

위 내용은 jquery 코드 작성과 기본 js 작성의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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