JS와 JQuery 사이에서 DOM을 조작하는 방법
이 기사에서는 주로 코드를 사용하여 JS 및 JQuery로 DOM을 작동하는 방법을 공유합니다.
쿼리 노드:
js: 1. ID 기반 쿼리, 2. 태그 이름 기반 쿼리, 4. 레벨 기반 쿼리, 세부 사항은 다음과 같습니다.
<script>
//1.根据ID查询节点
var ul = document.getElementById("city");
var cd = document.getElementById("cd");
console.log(ul);
console.log(cd);
//2.根据标签名查询节点
//2.1在整个文档（document）内查询
console.log(document.getElementsByTagName("li"));
//2.2在某个元素节点（element）内查询
console.log(ul.getElementsByTagName("li"));
//3.根据name查询节点（基本都是给表单控件用的）
console.log(document.getElementsByName("sex"));
//4.根据层次查询节点
//获取已得到的节点的父亲、孩子和兄弟
//4.1获取父亲,返回的是单个值
console.log(cd.parentNode);
//4.2获取孩子，返回的是多个值
//这种方式返回的节点是个数组，并且会把空格当做孩子放入数组中
console.log(ul.childNodes);
//不带空格的获取孩子的节点
console.log(ul.getElementsByTagName("li"));
//标准API中没有直接查询兄弟的方法，
//必须通过查询父亲、查询孩子来实现查询兄弟,
//下面的语句输出：上海
console.log(cd.parentNode.getElementsByTagName("li")[1]);
</script>jQuery: 직접 사용 요소를 선택하는 jQuery 선택기, 작업을 수행하기만 하면 됩니다. 다른 문서를 확인하세요: jQuery 선택기 https://blog.csdn.net/huang_yx/article/details/79686975(링크를 열려면 클릭)
노드 읽기 및 쓰기:
js: 대략 다음과 같이 나뉩니다. 1. 노드의 이름과 유형을 읽고 씁니다. 2. 노드 내용을 읽고 씁니다. 4. 양식 컨트롤의 값을 읽고 씁니다. 세부 사항은 다음과 같습니다:
<script>
//1.读取节点的名称和类型
//获取p1
var p1 =document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//2.读写节点的内容（<p>内容</p>）
//innerHTML:支持子标签
console.log(p1.innerHTML)
console.log(p1.innerHTML = '单标签试一试')
console.log(p1.innerHTML)
//innerText:不支持子标签
var p2 = document.getElementById("p2");
console.log(p2.innerText);
p2.innerText = "2.<u>查询</u>节点";
//3.读写节点的属性
//3.1.标准的API是下面的三个
//先取到这个节点
var img = document.getElementById("li");
console.log(img.getAttribute("src"));
img.setAttribute("src", "../img/add.png");
img.removeAttribute("src");
//3.2.新的API(低版本浏览器不支持)
//节点.属性名（class除外，要写成className）
//注意点：.style和.className是标准的
var a = document.getElementById("baidu");
console.log(a.href);
a.href = "undifined";
//4.读写表单控件的值
//input.value/input.value=""
</script>jQuery:
노드의 HTML 콘텐츠를 읽고 씁니다(하위 태그 지원): 위 js
obj.html()/obj.html("<의 2번 항목에 해당) ;span>123")
노드의 텍스트 내용을 읽고 씁니다(하위 태그는 지원되지 않음) : 위 js
obj.text()/obj.text의 두 번째 지점에 해당합니다. ("123")
읽기-쓰기 노드의 속성 값: 위 js
obj.attr("속성 이름") /obj.val("속성 이름", "속성 값의 세 번째 지점에 해당) ")
노드의 value 속성 값을 읽고 씁니다. 위 js
obj.val()/obj.val("abc")
주의: obj는 jQuery 객체를 나타냅니다
의 4번째 지점에 해당합니다. 노드 추가 및 삭제: js는 상위 노드를 통해서만 노드를 추가하고 삭제할 수 있으며 jQuery가 훨씬 더 편리하며 해당 API가 많이 있습니다
js:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script>
function add(){
//创建新节点
//相当于在内存中创建了一个<li></li>
var li = document.createElement("li");
//相当于在<li>中创建了一个内容
li.innerHTML = "天津";
//追加新节点,可以通过父亲的孩子获取，也可以直接通过ID获取
var ul = document.getElementById("city");
ul.appendChild(li);
}
//插入到节点中间
function insertion(){
//创建新节点
var li = document.createElement("li");
li.innerHTML = "成都";
//插入新节点,到广州之前
var ul = document.getElementById("city");
var gz = document.getElementById("gz");
ul.insertBefore(li, gz)
}
//删除节点,必须通过父亲来删除
function del(){
//获取要删除的节点
var sz = document.getElementById("sz");
//必须通过父亲才能取删除孩子的节点
sz.parentNode.removeChild(sz);
}
</script>
</head>
<body>
<p>
<input type="button" value="增加"
onclick="add();"/>
<input type="button" value="插入"
onclick="insertion()"/>
<input type="button" value="删除"
onclick="del()"/>
</p>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
</body>
</html>jQuert:
Create node:
$( "노드 내용 ");
$("Hello")
삽입 노드: 공통 API
parent.append(obj): 마지막 하위 노드로 추가됨
parent .prepend(obj): 첫 번째 자식 노드로 추가
brother.after(obj): 다음 형제 노드로 추가
brother.before(obj): 이전 형제 노드로 추가
Delete 노드: 자주 사용되는 API
obj.remove( ): 노드 삭제
obj.remove(selector): 선택기를 만족하는 노드만 삭제
obj.empty(): 노드 지우기
Traverse 노드: jQuery에 해당하는 일부 API, 편리한 Node 작업
children()/ children(selector): 직계 자식 노드
next()/next(selector): 다음 형제 노드
prev()/prev(selector): 이전 형제 노드
siblings( )/siblings(selector): 모든 형제
find(selector): 선택기를 만족하는 모든 자손을 찾습니다.
parent(): 부모 노드
요약:
JS와 jQuery의 노드 작업은 추가, 삭제, 수정, 확인에 불과하지만 jQuery는 js 프레임워크이며 핵심 개념은 다음과 같습니다. 적게 작성하고 더 많이 수행하여 코드 작성을 크게 단순화합니다. JS, CSS, DOM을 캡슐화하여 일관되고 간단한 API를 제공하므로 사용이 더 편리하고 빠르며 해당 작성 방법도 더 간단합니다.
관련 권장사항:
위 내용은 JS와 JQuery 사이에서 DOM을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7677
15
1393
52
1207
24
91
11
73
19
Linux Deploy 작업 단계 및 주의사항
Mar 14, 2024 pm 03:03 PM
LinuxDeploy 작업 단계 및 주의 사항 LinuxDeploy는 사용자가 Android 장치에 다양한 Linux 배포판을 신속하게 배포하여 모바일 장치에서 완전한 Linux 시스템을 경험할 수 있도록 도와주는 강력한 도구입니다. 이 기사에서는 LinuxDeploy의 작동 단계와 주의 사항을 자세히 소개하고 독자가 이 도구를 더 잘 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 작업 단계: Linux 설치배포: 먼저 설치
Huawei Mate60 Pro 스크린샷 작업 단계 공유
Mar 23, 2024 am 11:15 AM
스마트폰이 대중화되면서 스크린샷 기능은 일상적인 휴대폰 사용에 필수적인 기술 중 하나로 자리 잡았습니다. Huawei의 주력 휴대폰 중 하나인 Huawei Mate60Pro의 스크린샷 기능은 자연스럽게 사용자로부터 많은 관심을 끌었습니다. 오늘은 모두가 더욱 편리하게 스크린샷을 찍을 수 있도록 Huawei Mate60Pro 휴대폰의 스크린샷 작업 단계를 공유하겠습니다. 우선, Huawei Mate60Pro 휴대폰은 다양한 스크린샷 방법을 제공하며, 개인 습관에 따라 자신에게 맞는 방법을 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 차단에 대한 자세한 소개입니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
PHP 문자열 조작: 공백을 효과적으로 제거하는 실용적인 방법
Mar 24, 2024 am 11:45 AM
PHP 문자열 작업: 공백을 효과적으로 제거하는 실용적인 방법 PHP 개발 시 문자열에서 공백을 제거해야 하는 상황에 자주 직면하게 됩니다. 공백을 제거하면 문자열이 더 깔끔해지고 후속 데이터 처리 및 표시가 쉬워집니다. 이 기사에서는 공백을 제거하는 몇 가지 효과적이고 실용적인 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 방법 1: PHP 내장 함수인 Trim()을 사용합니다. PHP 내장 함수인 Trim()을 사용하면 문자열 양쪽 끝의 공백(공백, 탭, 개행 등 포함)을 제거할 수 있어 매우 편리하고 쉽습니다. 사용.
Astar 스테이킹 원칙, 수입 해체, 에어드랍 프로젝트 및 전략 및 운영 보모 수준 전략
Jun 25, 2024 pm 07:09 PM
목차 Astar Dapp 스테이킹 원리 스테이킹 수익 잠재적 에어드랍 프로젝트 해체: AlgemNeurolancheHealThreeAstar Degens DAOVeryLongSwap 스테이킹 전략 및 운영 "AstarDapp 스테이킹"이 올해 초 V3 버전으로 업그레이드되었으며 스테이킹 수익에 많은 조정이 이루어졌습니다. 규칙. 현재 첫 번째 스테이킹 주기는 종료되었으며 두 번째 스테이킹 주기의 "투표" 하위 주기가 막 시작되었습니다. '추가 보상' 혜택을 받으려면 이 중요한 단계(6월 26일까지 지속 예정, 5일 미만 남았음)를 파악해야 합니다. 아스타 스테이킹 수익을 자세하게 분석해보겠습니다.
Ele.me에서 WeChat을 연결하는 방법
Apr 01, 2024 pm 03:46 PM
Ele.me는 다양한 종류의 음식을 온라인으로 선택하고 주문할 수 있는 소프트웨어입니다. 판매자는 주문을 받은 후 즉시 주문을 처리합니다. 사용자는 소프트웨어를 통해 WeChat을 연결할 수 있습니다. 작동 방법을 알아보려면 PHP 중국어 웹사이트를 확인하세요. Ele.me를 WeChat에 바인딩하는 방법: 1. 먼저 Ele.me 소프트웨어를 열고 홈페이지에 들어간 후 오른쪽 하단에 있는 [내]를 클릭합니다. 2. 그런 다음 내 페이지에서 [계정]을 클릭합니다. ] 왼쪽 상단에 있는 3. 그런 다음 휴대폰, WeChat, Alipay 및 Taobao를 연결할 수 있는 개인 정보 페이지로 이동합니다. 4. 마지막 클릭 후 필요한 WeChat 계정을 선택합니다. WeChat 인증 페이지에 접속하고 [허용]을 클릭하세요.
Win8 컴퓨터 시작 비밀번호를 잊으셨나요? 이 작업을 수행하면 즉시 복원됩니다!
Mar 27, 2024 pm 10:12 PM
Win8 컴퓨터 시작 암호를 잊어버리는 것은 많은 사람들이 매일 컴퓨터를 사용할 때 직면하는 문제입니다. 로그인 비밀번호를 잊어버리면 정상적으로 시스템에 진입할 수 없어 일상적인 사용에 불편을 겪게 됩니다. 이 문제가 발생하더라도 걱정하지 마십시오. 아래에서는 Win8 컴퓨터의 시동 암호를 신속하게 복원하는 데 도움이 되는 몇 가지 간단한 작업을 소개합니다. 방법 1: Microsoft 계정 비밀번호 사용 Microsoft 계정을 사용하여 Win8 컴퓨터에 로그인하는 경우 해당 계정의 비밀번호를 사용해 볼 수 있습니다.
