2분 안에 jQuery, JavaScript, JS의 차이점을 이해하세요

jQuery, JavaScript, JS의 차이점을 이해하는 데 2분

JavaScript, jQuery, JS가 우리 삶에 자주 등장합니다. 아래에서 2분 동안 이에 대해 알아보겠습니다.

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定位 
$("p") 通过标签定位

참고: 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);

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 확인란이 선택되어 있는지 확인하세요.
jQuery

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

참고: 인터넷에서 언급된 .attr("checked") == true는 실제로 작동하지 않습니다. 테스트가 성공했습니다

JS와 JQUERY

1. ID를 기반으로 요소 가져오기
JS: 얻는 것은 DOM 개체입니다.
예:

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

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

var p = $("#one");

2. 클래스에 따라 요소 가져오기 [배열에서 DOM 개체를 가져오려면 index 메서드를 사용하고, JQUERY 개체를 가져오려면 eq() 사용]
JS : 얻는 것은 배열입니다
예:

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

JQUERY:
예:

var p = $(".test");

3. 이름을 기반으로 요소 가져오기
JS: 배열을 반환합니다
예:

var bd = document.getElementsByName(uid);

JQUERY: 방법은 사각형을 사용하는 것입니다. 대괄호, 속성 = 값, 비 제한 사항 없음 이름을 기반으로 값을 가져오기 위해 JQUERY는 속성을 기반으로 요소를 가져옵니다
예:

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

4 태그 이름을 기반으로 요소 가져오기
JS: 또한 배열을 반환합니다
예:

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

JQUERY: 스타일 시트의 모든 요소 p 스타일을 추가하는 방법은 동일하며 큰따옴표 안에 태그 이름을 직접 작성합니다
예:

$("p");

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

작업 내용

1. 비형식 요소(텍스트인 경우 텍스트 메서드를 사용하고 html 코드인 경우) , html 메소드 사용)

예:
1.1. 매개변수가 없는 경우 값은
p.text(
2.1. Get value
p.value;
2.2. 값 할당
p.value = ' xxx';
JUQERY: 2.3. 값 가져오기 p.val();
3.4. 값 할당
p.val('xxx') ;


작업 속성



JS 작업 속성

설정| 속성 수정:

p.setAttribute("","");

속성 삭제

p.removeAttribute("");

속성 가져오기

p.getAttribute();

JQUERY에서 속성을 조작하는 데 사용되는 방법

속성 추가:

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

속성 제거:

p.removeAttr("width");

속성 가져오기:

p.attr("width");

操作样式
JS操作样式-关键字是[style]
例：

p.style.backgroundColor = "red";

JQUERY里面操作样式的关键字是css
例：

p.css("background-color","yellow");

——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程：《JS教程》

 

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