jQuery의 attr() 및 prop() 함수 사용 예에 대한 자세한 설명(사용법 차이 있음)

집

웹 프론트엔드

JS 튜토리얼

jQuery의 attr() 및 prop() 함수 사용 예에 대한 자세한 설명(사용법 차이 있음)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

jquery기능

이 기사의 예에서는 jQuery에서 attr() 및 prop() 함수의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. jQuery의 attr() 메소드

attr() 메서드는 jquery에서 요소 속성을 가져오고 설정하는 데 사용됩니다. attr은 속성의 약어입니다. Attr()은 jQuery DOM 작업에서 자주 사용됩니다.

1. attr(속성 이름) //속성 값 가져오기(첫 번째로 일치하는 요소의 속성 값을 가져옵니다. 이 방법을 사용하면 첫 번째로 일치하는 요소에서 속성 값을 쉽게 가져올 수 있습니다. 요소가 그렇지 않은 경우) 해당 속성이 있으면 정의되지 않은 값을 반환합니다. )

2. attr(속성 이름, 속성 값) //속성 값을 설정합니다. (일치하는 모든 요소에 대해 속성 값을 설정합니다.)

3. attr(속성명, 함수값) //속성의 함수값을 설정합니다. (일치하는 모든 요소에 대해 계산된 속성값을 설정합니다. 값을 제공하지 않고 함수를 제공하며, 이에 의해 계산된 값은 함수는 속성 값입니다. )

4.attr(properties) //지정된 요소에 대해 여러 속성 값을 설정합니다. 즉, {속성 이름 1: "속성 값 1", 속성 이름 2: "속성 값 2", … … }입니다. (이것은 일치하는 모든 요소에 걸쳐 많은 속성을 일괄적으로 설정하는 가장 좋은 방법입니다. 객체의 클래스 속성을 설정하려면 'className'을 속성 이름으로 사용해야 합니다. 또는 'class'를 직접 사용할 수 있습니다. 또는 '아이디' )

샘플 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

1.attr(name)//속성 값 가져오기

1.1 attr(name)을 사용하여 제목 값을 가져옵니다.

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

결과:

1.2 attr(name)을 사용하여 대체 값을 가져옵니다.

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

결과:

2.attr(name,value) //속성값 설정

2.1 attr(name,value)를 사용하여 제목 값을 Don't eat oranges

로 수정합니다.

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

결과:

3. attr(name,fn) //속성의 함수값을 설정합니다

3.1 alt 속성의 값을 title 속성의 값으로 설정합니다.

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

결과:

4.attr(properties) //"이름/값" 형태의 객체를 일치하는 모든 요소의 속성으로 설정

4.1

를 가져오고 제목과 Alt 속성을 설정합니다.

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

결과:

4.2

설정 수업을 받으세요.

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

결과:

4.3

의 설정 ID를 가져옵니다.

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

결과:

4.4

를 가져와 스타일을 설정합니다.

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

결과:

li에 alt를 추가하는 것은 잘못되었습니다. img, 영역 및 입력 요소(애플릿 요소 포함)에서만 사용할 수 있습니다. 입력 요소의 경우 alt 속성은 제출 버튼 이미지를 대체하기 위한 것입니다. 여기서는 attr() 메소드를 자세히 설명하기 위해 적합한 속성이 없으므로 alt를 예시로 사용합니다. attr() 메소드 사용법을 학습하고 참고하기 위한 용도로만 사용됩니다.

alt와 tite의 차이점은 다음과 같습니다.

alt: 그래픽을 설명하는 데 사용되는 텍스트입니다. 이미지를 표시할 수 없는 경우 이미지 대신 이러한 텍스트가 표시됩니다. 마우스를 이미지 위로 이동하면 텍스트도 표시됩니다.
title : 마우스를 올렸을 때 표시될 텍스트입니다.

그럼 속성을 삭제하는 방법은 무엇인가요?

jquery에서 속성을 삭제하는 키워드는 다음과 같습니다. A는 대문자로 표시됩니다.
사용법 1과 동일한 html 코드입니다. li의 제목 속성을 삭제하고 싶습니다.

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

간단합니다. attr은 실제로 네이티브 js에서 getAttribute를 단순화한 구현이고, RemoveAttr은 RemoveAttribute의 약어입니다.

그럼 attr()과 비슷한 속성이 있나요?

jquery의 val()은 ,
과 유사합니다. $(this).val(); $(this).attr("value")에 해당하는 요소 노드의 값을 가져옵니다.
$(this).val(value); $(this).attr("value",value);

에 해당하는 요소 노드의 값을 설정합니다.

2. jQuery의 prop() 메소드:

prop() 함수는 현재 jQuery 객체와 일치하는 요소의 속성 값을 설정하거나 반환하는 데 사용됩니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다. DOM 요소의 속성을 제거해야 하는 경우에는 RemoveProp() 함수를 사용하세요.

문법

이 기능은 jQuery 1.6에서 추가되었습니다. prop() 함수는 다음 두 가지 용도로 사용됩니다.

용법 1:

jQueryObject.prop( propertyName [, value ] )
지정된 속성 propertyName의 값을 설정하거나 반환합니다. value 매개변수가 지정되면 propertyName 속성의 값이 value로 설정된다는 의미이고, value 매개변수가 지정되지 않으면 propertyName 속성의 값이 반환된다는 의미입니다.

매개변수 값은 함수일 수도 있습니다. prop()은 일치하는 모든 요소를 기반으로 함수를 탐색하고 실행합니다. 함수의 this 포인터는 해당 DOM 요소를 가리킵니다. prop()은 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 요소의 인덱스이고 두 번째 매개변수는 요소의 propertyName 속성의 현재 값입니다. 함수의 반환 값은 요소의 propertyName 속성에 설정된 값입니다.

용법 2:

jQueryObject.prop(객체)
여러 속성의 값을 동시에 객체로 설정합니다. 객체 객체의 각 속성은 propertyName에 해당하고, 속성의 값은 value에 해당합니다.

참고: prop() 함수의 모든 "속성 설정" 작업은 현재 jQuery 개체와 일치하는 각 요소에 대한 것입니다. 모든 "속성 읽기" 작업은 첫 번째 일치하는 요소에 대해서만 수행됩니다.
매개변수

이전 구문 섹션에 정의된 매개변수 이름을 기반으로 해당 매개변수를 찾아보세요.

매개변수	설명
속성이름	문자열 유형 은 속성 이름을 지정합니다.
가치	옵션/객체/함수 유형은 속성 값을 지정하거나 속성 값을 반환하는 함수를 지정합니다.
객체	유형으로 지정된 개체로, 여러 키-값 쌍을 캡슐화하고 동시에 여러 속성을 설정하는 데 사용됩니다.

参数value可以是包括对象和数组在内的任意类型。

返回值

prop()函数的返回值是任意类型，返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。

如果prop()函数执行的是"设置属性"操作，则返回当前jQuery对象本身；如果是"读取属性"操作，则返回读取到的属性值。

如果当前jQuery对象匹配多个元素，返回属性值时，prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。

prop()和attr()的主要区别：prop()函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。

注意事项

1、如果通过prop()函数更改和

2、如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。

3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。

4、在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。

示例&说明

以下面这段HTML代码为例：

<div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

我们编写如下jQuery代码：

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/
// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附：jquery中attr和prop的区别

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

百度

这个例子里元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

删除

这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

是否可见
是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

希望本文所述对大家jQuery程序设计有所帮助。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.