jQuery-속성

DOM 요소와 관련하여 조작 할 수있는 가장 기본적인 구성 요소 중 일부는 해당 요소에 할당 된 속성과 속성입니다.

이러한 속성의 대부분은 JavaScript를 통해 DOM 노드 속성으로 사용할 수 있습니다. 더 일반적인 속성 중 일부는-

className
tagName
id
href
title
rel
src

이미지 요소에 대한 다음 HTML 마크 업을 고려하십시오.

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

이 요소의 마크 업에서 태그 이름은 img이고 id, src, alt, class 및 title의 마크 업은 요소의 속성을 나타내며 각 요소는 이름과 값으로 구성됩니다.

jQuery는 요소의 속성을 쉽게 조작 할 수있는 수단을 제공하고 요소에 대한 액세스를 제공하므로 속성도 변경할 수 있습니다.

속성 값 가져 오기

그만큼 attr() 메서드는 일치 된 집합의 첫 번째 요소에서 속성 값을 가져 오거나 일치하는 모든 요소에 속성 값을 설정하는 데 사용할 수 있습니다.

예

다음은 <em> 태그의 제목 속성을 가져오고 동일한 값으로 <div id = "divid"> 값을 설정하는 간단한 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

속성 값 설정

그만큼 attr(name, value) 메서드는 전달 된 값을 사용하여 래핑 된 집합의 모든 요소에 명명 된 속성을 설정하는 데 사용할 수 있습니다.

예

다음은 설정하는 간단한 예입니다. src 정확한 위치에 이미지 태그의 속성-

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

스타일 적용

그만큼 addClass( classes )메서드를 사용하여 일치하는 모든 요소에 정의 된 스타일 시트를 적용 할 수 있습니다. 공백으로 구분 된 여러 클래스를 지정할 수 있습니다.

예

다음은 설정하는 간단한 예입니다. class para <p> 태그의 속성 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

속성 방법

다음 표는 속성과 속성을 조작하는 데 사용할 수있는 몇 가지 유용한 방법을 나열합니다.

Sr. 아니.	방법 및 설명
1	attr (속성) 키 / 값 개체를 일치하는 모든 요소의 속성으로 설정합니다.
2	attr (키, fn) 일치하는 모든 요소에서 단일 속성을 계산 된 값으로 설정합니다.
삼	removeAttr (이름) 일치하는 각 요소에서 속성을 제거하십시오.
4	hasClass (클래스) 지정된 클래스가 일치하는 요소 집합 중 하나 이상에 있으면 true를 반환합니다.
5	removeClass (클래스) 일치하는 요소 집합에서 모든 또는 지정된 클래스를 제거합니다.
6	toggleClass (클래스) 지정된 클래스가없는 경우 추가하고 지정된 클래스가있는 경우 제거합니다.
7	html () 일치하는 첫 번째 요소의 html 콘텐츠 (innerHTML)를 가져옵니다.
8	html (발) 일치하는 모든 요소의 HTML 콘텐츠를 설정합니다.
9	텍스트 () 일치하는 모든 요소의 결합 된 텍스트 콘텐츠를 가져옵니다.
10	텍스트 (발) 일치하는 모든 요소의 텍스트 내용을 설정합니다.
11	발 () 첫 번째로 일치하는 요소의 입력 값을 가져옵니다.
12	발 (발) <input>에서 호출되면 일치하는 모든 요소의 값 속성을 설정하지만 전달 된 <option> 값으로 <select>에서 호출되면 전달 된 옵션이 선택되고 체크 박스 또는 라디오 박스에서 호출되면 전달 된 옵션이 선택됩니다. 일치하는 모든 확인란과 radiobox가 선택됩니다.

예

위의 구문 및 예제와 유사하게, 다음 예제는 다양한 상황에서 다양한 속성 메소드 사용에 대한 이해를 제공합니다.

다음은 다른 상황에서 속성 메소드의 전체 목록입니다.

Sr. 아니.	선택기 및 설명
1	$("#myID").attr("custom") 이것은 ID myID와 일치하는 첫 번째 요소에 대해 custom 속성 값을 리턴합니다 .
2	$("img").attr("alt", "Sample Image") 이것은 alt 모든 이미지의 속성을 새 값 "Sample Image"로 설정합니다.
삼	$("input").attr({ value: "", title: "Please enter a value" }); 모든 <input> 요소의 값을 빈 문자열로 설정하고 The jQuery Example을 문자열 Please enter a value 로 설정 합니다 .
4	$("a[href^=https://]").attr("target","_blank") https : //로 시작하는 href 속성이있는 모든 링크를 선택 하고 대상 속성을 _blank로 설정합니다 .
5	$("a").removeAttr("target") 이것은 모든 링크의 대상 속성을 제거 합니다.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); 제출 버튼을 클릭하는 동안 비활성화 된 속성을 "비활성화 됨"값으로 수정합니다.
7	$("p:last").hasClass("selected") 마지막 <p> 태그에 선택된 관련 클래스가 있으면 true를 반환합니다 .
8	$("p").text() 일치하는 모든 <p> 요소의 결합 된 텍스트 콘텐츠가 포함 된 문자열을 반환합니다.
9	$("p").text("<i>Hello World</i>") 이렇게하면 "<I> Hello World </ I>"가 일치하는 <p> 요소의 텍스트 콘텐츠로 설정됩니다.
10	$("p").html() 일치하는 모든 단락의 HTML 콘텐츠를 반환합니다.
11	$("div").html("Hello World") 그러면 일치하는 모든 <div>의 HTML 콘텐츠가 Hello World로 설정 됩니다.
12	$("input:checkbox:checked").val() 선택된 확인란에서 첫 번째 값을 가져옵니다.
13	$("input:radio[name=bar]:checked").val() 라디오 버튼 세트에서 첫 번째 값을 가져옵니다.
14	$("button").val("Hello") 일치하는 모든 요소 <button>의 값 속성을 설정합니다.
15	$("input").val("on") 이것은 값이 "on"인 모든 라디오 또는 확인란 버튼을 확인합니다.
16	$("select").val("Orange") 오렌지, 망고 및 바나나 옵션이있는 드롭 다운 상자에서 오렌지 옵션을 선택합니다.
17	$("select").val("Orange", "Mango") 그러면 오렌지, 망고 및 바나나 옵션이있는 드롭 다운 상자에서 오렌지 및 망고 옵션이 선택됩니다.