jQuery, JavaScript, JS의 차이점에 대해 이야기해 보겠습니다.

JavaScript: 웹 페이지의 역학과 백엔드(데이터베이스)와의 상호 작용을 구현하는 데 사용되는 브라우저의 일반적인 스크립팅 언어입니다.

jQuery: JavaScript가 통합된 클래스 라이브러리입니다. jQuery를 작동하면 기본 JavaScript 문 사용을 줄여 효율성을 높일 수 있습니다.

JS: JavaScript의 약어입니다.

차이점 요약:

1. JQuery는 JavaScript를 크게 단순화하고 최소한의 코드로 더 많은 기능을 완성하는 힘든 작업을 최대한 수행합니다.

2. JavaScript는 DOM을 한 번만 로드하는 반면 JQuery는 DOM을 여러 번 로드합니다.

3. JQuery는 DOM 조작이 더 편리합니다. 노드 획득 등. 예: $()

설명: 기본 JavaScript 및 캡슐화된 JQuery에 대한 이해를 높이는 가장 직접적인 방법은 페이지에 JQuery를 도입하지 않고 기본적인 프런트엔드 및 백엔드 상호 작용을 달성하는 것입니다.

다음 내용은 jQuery와 JS의 이해를 구별하기 위해 편집한 요약입니다.

jQuery 및 기본 Javascript 작성:

1 위치 지정 요소

JS:

document.getElementById("abc")

jQuery:

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位

참고: 반환된 결과 by 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();         //在显示和隐藏之间切换、

4 포커스 가져오기

JS 및 jQuery는 모두 동일합니다. abc.focus()

5 양식에 값 할당

JS:

abc.value = "test";

jQuery:

abc.val("test");

6 양식의 값 가져오기

JS:

alert(abc.value);

jQu ery:

alert(abc.val());

7 Set 요소를 사용할 수 없습니다.

JS:

abc.disabled = true;

jQuery:

abc.attr("disabled", true);

8 요소 스타일 Modify

JS:

abc.style.fontSize=size;

jQuery

rr: reee

JS:

abc.css('font-size', 20);

JQuery：

abc.className="test";

9 확인란이 선택되어 있는지 확인

jQuery

abc.removeClass(); 
abc.addClass("test");

참고: 온라인에서 언급된 .attr("checked") == true는 실제로 사용할 수 없습니다. and works

JS와 JQUERY의 차이점

1. ID를 기반으로 요소 가져오기

JS: 얻는 것은 DOM 개체입니다.

예:

if(abc.attr("checked") == "checked")

JQUERY: 얻은 것은 JQUERY 개체입니다.

예:

var div = document.getElementByID("one");

2. 클래스에 따라 요소 가져오기 [배열에서 DOM 개체를 가져오려면 index 메서드를 사용하고, JQUERY 개체를 가져오려면 eq() 사용]

  JS : 얻는 것은 배열입니다

예 ：

var div = $("#one");

 JQUERY:

 예:

var div = document.ElementsByClassName("test");

3. 이름을 기준으로 요소 가져오기

 JS: 반환되는 것은 배열입니다

 예:

var div = $(".test");

 JQUERY: 대괄호를 사용하는 방법입니다. 속성은 값이 아닙니다. 제한은 이름을 기준으로 해야 합니다. 예:

var bd = document.getElementsByName(uid);

4. name.JS: 반환된 값도 배열입니다. 예:

$("[name='uid']");

. JQUERY: 모든 div에 스타일을 추가하는 방법은 동일합니다. 큰따옴표 안에 태그 이름을 직접 입력합니다.

var div = document.getElementsByTagName("div");

예: 하위 디렉터리 요소 객체 획득 지정: var div = $("divspan") - 조합이 많습니다. 방법

작업 내용

1. 비양식 요소(텍스트인 경우 텍스트 방법 사용) , html 코드라면 html 메소드를 사용하세요)

예:

1.1. 매개변수가 없을 때 값을 가져옵니다

$("div");

1.2 매개변수가 있으면 할당

div.text();
div.html();

2. 양식 요소

JS:

2.1. 값

div.text("aaaa");
div.html("aaaa");

2.3. 값

div.value;

3.4. 작업 속성

속성 수정:

div.value = 'xxx';
JUQERY：

속성 삭제

div.val();

속성 가져오기

div.val('xxx');

JQUERY에서 속성을 조작하는 데 사용되는 메서드

속성 추가:

div.setAttribute("","");

속성 제거:

div.removeAttribute("");

속성 가져오기:

div.getAttribute();

작업 스타일

JS 작업 스타일 - 그 키워드는 [style]

예:

div.attr("width","20%");

JQUERY의 작업 스타일에 대한 키워드는 css

예:

div.removeAttr("width");

——이 div의 배경색을 노란색으로 변경합니다. 여기 CSS의 모든 스타일은 정확히 다음과 같습니다. 내장 및 외부 변경 없이 CSS 스타일 시트의 스타일과 동일합니다. ! ! ! !

　 JQUERY의 작동 스타일 방식은 인라인 또는 임베디드일 수 있습니다

읽어주신 모든 분들께 감사드리며, 많은 혜택을 누리시길 바랍니다

이 기사의 출처는 다음과 같습니다: https://blog.csdn.net/dalei9243/article/details/ 79804789

추천 튜토리얼: "JS Tutorial"

위 내용은 jQuery, JavaScript, JS의 차이점에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!