jQuery의 attr() 및 prop() 함수 사용 예에 대한 자세한 설명(사용법 차이 있음)_jquery
- WBOY원래의
- 2016-05-16 15:22:501415검색
이 기사의 예에서는 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 ff6d136ddc5fdfeffaf53ff6ee95f185에서 두 번째 25edfb22a4f469ecb59f1190150159c6의 설정 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()函数更改d5fd7aea971a85678ba271703566ebfd和bb9345e55eb71822850ff156dfde57c8元素的type属性，在多数浏览器上将会抛出一个错误，因为该属性一般不允许在后期更改。
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方法。上面的描述也许有点模糊，举几个例子就知道了。
a6443d4e73fb56505e4fe5afe0f45048百度5db79b134e9f6b82c0b36e0489ee08ed
这个例子里3499910bf9dac5ae3c52d5ede7383485元素的DOM属性有“href、target和class"，这些属性就是3499910bf9dac5ae3c52d5ede7383485元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
ddec45da1f9fc3d73ad4ec9e6cfd94cb删除5db79b134e9f6b82c0b36e0489ee08ed
这个例子里3499910bf9dac5ae3c52d5ede7383485元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，3499910bf9dac5ae3c52d5ede7383485元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
4bdf8ad58f944d2707b679ce3fbf035c是否可见
5c7c8b9482dd4c5245d65c5e97d6f9d3是否可见像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked"希望本文所述对大家jQuery程序设计有所帮助。
- 를 가져와 스타일을 설정합니다.
- 설정 수업을 받으세요.