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();
속성 추가:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!