(JS-JQ)jQuery 기본 개념

jQuery, 하나의 JS 프레임워크, 또는 하나의 JS 라이브러리가 JS에서 DOM 대상을 설명했다고 할 수 있다
여기에 jQuery 대상을 도입합니다: jQuery를 통해 만들어진 대상을 말합니다. 일부 대상은 jQuery API 문서를 찾을 수 있습니다.
참고: DOM 객체와 jQuery 객체는 상호 호출할 수 없습니다.
jquery의 사용 절차: 1.jquery 파일 다운로드 2.웹 프로젝트에 대응하는 js 파일을 넣습니다.다음 코드를 통해 jquery 불러오기

<!--         jquery -->
	<script type="text/javascript" src="js/jquery-migrate-1.4.1.js">
	</script>

4. jquery 사용하기 시작

<!--         jquery -->
	<script type="text/javascript" src="js/jquery.js">
	</script>
	
	<!--     jquery -->
	<script type="text/javascript">
		$(
			function(){
				alert("    jQuery");
			}		
		)
	</script>

5. 페이지의 모든 요소를 불러온 후에야 jquery 코드를 실행할 수 있습니다
jquert 코드 형식 시작

$(
	function(){
	}
)

dom 대상을 jquery 대상으로 변환

$(
			function(){
				var t_don = document.getElementById("mytext");
				var t_jquery = $(t_don); // dom      jquery  
				alert(t_don.value);
				
				//     jquery    value(dom     )，    
				alert(t_jquery.value);
				//  jqueryAPI        
				alert(t_jquery.val());
			}		
		)

jquery 대상이dom 대상으로 변환

	$(
			function(){
				//jquery      
				var $jquery = $("#newtext");
				//jquery      ，             DOM  ，                  gu
				var dom = $jquery[0];
				
				alert($jquery.val());
				alert("dom"+dom.value)
			}		
		)

<input type="text" id="newtext" value="lisi"/>

선택기
선택기는 무엇입니까? 선택기는 페이지 요소를 얻는 문법(도구)입니다. jquery는 풍부한 요소 선택기를 제공하여 페이지에 있는 요소를 쉽게 얻을 수 있습니다. CSS와 같은 스타일을 얻는 방법을 선택하십시오.id 선택기는 탭의 id를 통해 원소 주의를 얻습니다: id는 중복될 수 없습니다. id가 중복되면 jquery에서 이 ID의 탭만 읽습니다.

<script type="text/javascript">
		$(
			function(){
				//    id，    
				alert($("#mytext").val());
			}		
		)
		
		)
	</script>
	<input type="text"  id="mytext"  value="zhangsna"/>

2. 요소 선택기

<script type="text/javascript">
$(
	function(){
	//           
		alert($("p")[0].innerText);
	}		
)
<script>
<p>gogogo</p>

3. class 선택기

<script type="text/javascript">
//class   ，  class    ，     jquery           
$(
	function(){
		//  class   
		alert($(".classname").length);
				
		//           ,.val()           DOM   value 
		$(".classname").val();
	}		
)
<script>
<input type="text"  class="classname"  value="wangwu"/>
<input type="text" 	 class="classname" value="zhaoliu"/>

4.parent-child 차원 선택기

<script type="text/javascript">
//parent-child     ，          
$(
	function(){
		alert($("div>.name").length); //  div    class  name    
		alert($("#di>.name").length); //  id di    class  name    
	}		
)
<script>
<div id="di">
	<input type="text"  class="name"  value="wangwu"/>
	<input type="text" 	 class="name" value="zhaoliu"/>
</div>

5.prev+next

//prev+next，  prev       
<script type="text/javascript">
$(
	function(){
		alert($("div+.name").length);//  div     class  name   ，     ，          ,       value  "ww1"
			}		
)
<script>
<div id="di">
		<input type="text"  class="name"  value="wangwu"/>
		<input type="text" 	 class="name" value="zhaoliu"/>
	</div>
		<input type="text"  class="name"  value="ww1"/>
		<input type="text" 	 class="name" value="xx1"/>

6.prev+siblings

//prev~sibling,  prev        
$(
	function(){
		alert($("div ~ .name").length);//  div      class   name   
	}		
)

7. 속성 선택기는 속성 이름을 통해 획득

$("[href]")        href      。

$("[href='#']")        href     "#"    。

$("[href!='#']")        href      "#"    。

$("[href$='.jpg']")      href    ".jpg"      。

$(".classname[value]")    class  classname   value    

jQuery 단순 필터
API 문서에 대한 학습