jquery의 주요 기능은 무엇입니까?

jquery의 주요 기능은 다음과 같습니다. 1. 페이지 프레임의 일부에 액세스합니다. 3. 페이지 콘텐츠를 변경합니다. 4. 페이지에 애니메이션을 추가합니다. 7. 일반적인 JavaScript 작업을 단순화합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, jquery3.2.1, Dell G3 컴퓨터.

jquery의 주요 기능은 무엇인가요?

jQuery의 주요 기능

1: 페이지 프레임의 일부에 액세스

jQuery는 페이지에서 노드 또는 특정 유형의 노드를 얻는 DOM의 고정 방법을 크게 단순화합니다.

2: 성능을 수정합니다.

브라우저마다 CSS3 표준을 지원하는 방식이 다르기 때문에 CSS3 스타일이 잘 반영되지 않는 경우가 많습니다. jQuery의 출현은 이 문제를 매우 잘 해결합니다. 다양한 브라우저가 CSS3 표준을 잘 사용할 수 있도록 JavaScript 코드를 캡슐화합니다.

3: 페이지 콘텐츠 변경

강력하고 포괄적인 API를 통해 jQuery는 페이지 콘텐츠는 물론 전체 페이지의 프레임까지 쉽게 수정할 수 있습니다.

4: 이벤트에 응답

필요 없음; 브라우저 호환성 문제를 고려하고 이벤트를 더 쉽게 처리할 수 있습니다.

5: 페이지에 애니메이션 추가

jQuery의 라이브러리는 사용자 정의 가능한 매개변수로 수많은 애니메이션 효과를 제공합니다.

6: 서버와의 비동기 상호 작용

jQuery는 완전한 애니메이션 효과를 제공합니다. Ajax 관련 작업 세트는 비동기식 상호 작용의 개발 및 사용을 크게 촉진합니다.

7: 일반적으로 사용되는 JavaScript 작업을 단순화합니다.

jQuery는 배열 작업, 반복 작업 등과 같은 일반적인 JavaScript 작업을 단순화하는 많은 추가 기능을 제공합니다.

jQuery

jQuery의 기본 기능은 DOM 기능을 캡슐화하여 DOM 기능 사용을 매우 간단하고 편리하게 만듭니다. 웹페이지 요소의 획득이든 "추가, 삭제, 수정 및 조회"이든 더욱 인간적인 방식으로 캡슐화되었습니다. jQuery의 기본 기능과 jQuery 디자인의 우수성을 간략하게 살펴보겠습니다. 1. 웹페이지 요소 가져오기

JQUERY의 결과는 객체

몇 가지 기본 메서드

• $(document); // 选择整个文档对象
  $("#myId"); // 选择id = 'myId' 的元素
  $(".myClass"); // 选择class = 'myClass' 的元素
  $("div.myClass"); // 选择class = 'myClass' 的div元素
  $("input[name=first]"); // 选择name = 'first' 的 input 元素

jqury 고유 표현

• $("a:first"); // 选择网页中第一个a元素
  $("tr:odd"); // 选择表格中的奇数行
  $("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
  $("div:visible"); // 选择可见的div元素
  $("div:gt(2)"); // 选择所有的div元素，除了前3个
  $("div:animated"); // 选择当前处于动画状态的div元素

DIV의 선택 결과 객체 추가 필터링

• rreee

div를 통해 다른 요소 선택

• $("div").has("p"); // 选择包含p元素的div元素
  $("div").not(".myClass"); //选择class != 'myClass' 的div元素
  $("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
  $("div").first(); // 选择第1个div元素
  $("div").eq(5); // 选择第6个div元素

2. 연쇄 연산

jQuery의 가장 칭찬할 점은

jQuery가 동일한 객체에 대해 연속적인 함수 연산을 수행할 수 있다는 점

예:

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

체인 연산은 jQuery의 가장 편리한 기능은 jQuery가 함수 작업을 실행할 때마다 반환 값이 여전히 원래 작업의 jQuery 개체이므로 나중에 작업을 직접 계속할 수 있기 때문입니다.

.end() 메소드

.end() 메소드는 이전 jQuery 객체에 반환 값을 반환합니다.

예:

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

3. 추가, 삭제, 수정 및 확인

1. 새 요소: HTML 형식을 준수하는 문자열을 jQuery

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

Copy 요소

.clone()

에 직접 전달합니다. 현재 jQuery 객체의 복제 복사본을 반환합니다.

모든 일치 요소, 일치 요소의 하위 요소, 및 텍스트 노드

2개 매개변수:

withDataAndEvents 해당 요소의 데이터 및 바인딩 이벤트를 동시에 복사할지 여부, 기본값은 false

deepWithDataAndEvents 모든 하위 요소의 데이터 및 바인딩 이벤트를 복사할지 여부 동시에, 기본값은 첫 번째 매개변수(withDataAndEvents)의 값입니다.

2.Delete

Delete elements

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

3.Change

Insert/Move elements

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

위의 두 가지 방법은 동일합니다. 효과

그러나 반환 값은 각각 $('div' ) 및 $('p') 이므로 후속 작업에 따라 선택해야 합니다

요소 삽입/이동의 다른 두 가지 방법

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

4. 검사를 하나의 getter/setter로 변경합니다

동일한 함수에 매개변수를 전달하여 변경/검사 기능을 다르게 구현

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

jQuery 공통 값/할당 함수

.html() html 콘텐츠 확인/변경

.text() 텍스트 내용 확인/변경

.attr() 특정 속성 값 확인/변경

.width() 요소 너비 확인/변경

.heigth() 높이 확인/변경 of an element

.val() 양식 요소의 값을 확인/변경합니다

참고:

결과 객체에 여러 요소가 포함된 경우 할당할 때 값이 모든 요소에 할당됩니다.

권장 학습: "

jQuery Video Tutorial

"

위 내용은 jquery의 주요 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!