Jquery attr() 메소드 속성 할당 및 속성 획득에 대한 자세한 설명

Jquery attr() 메소드 속성 할당 및 속성 획득에 대한 자세한 설명_jquery

WBOY

풀어 주다： 2016-05-16 15:05:19

원래의

2608명이 탐색했습니다.

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>

로그인 후 복사

결과:

123개 표시

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>

로그인 후 복사

결과:

123개 표시

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>
```
로그인 후 복사
결과:

2를 보는데, 123이 아니라 오렌지 주스를 마시지 마세요

4.2
- 설정 클래스를 받으세요.
```
<script>

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

</script>
```
  로그인 후 복사
  결과:
- 사과
- 오렌지
- 파인애플