JavaScript 와 JQuery 프레임 워 크 기초 입문 강좌

7470 단어 JavaScriptJQuery기초
JS 대상

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>   js     </title>
		<script>
			//2.       2：
				var p2 = {
					//     
					name:"  ",
					age:19,
					//     
					eat:function(a){
						console.log(a);
					}
				}
				console.log(p2);
				p2.eat(10);//    
			//1.       1：
				//    
				function Person(){}
				//    
				var p = new Person();
				//      
				p.name="  " ;
				p.age=18 ;
				//      
				p.eat=function(){
					console.log("   ");
				}
				//  
				console.log(p);
				//    
				p.eat();
		</script>
	</head>
	<body>
	</body>
</html>
2,DOM
C1,역할
document 대상 의 다양한 방법 속성 을 사용 합 니 다.웹 페이지 의 각종 요 소 를 분석 하 다.
id 에 따라 요소 가 져 오기---getElementById("id 속성의 값")
name 에 따라 요소 가 져 오기---getElementsByName("name 속성의 값")
class 에 따라 요소 가 져 오기---getElementsByClassName("class 속성의 값")
태그 이름 에 따라 요소 가 져 오기---getElementsByTagName("태그 이름")
브 라 우 저 출력---write("보 여줄 내용")innerHtml innerText styleC2,테스트

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>   DOM      </title>
		<script>
			function method(){
				// 4.       p 
				var d = document.getElementsByTagName("p");
				d[0].innerHTML="hi...";
				console.log(d[0].innerHTML);
				// 3.    class="f"
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="hi...";
				console.log(c[0].innerHTML);
				// 2.   name="d"
				var b = document.getElementsByName("d");//      
				// b[0].innerHTML="test...";  //          
				b[0].style.color="blue";  //            
				console.log(b[0].innerHTML);//          
				// 1.   id="a1"
				var a = window.document.getElementById("a1");//      
				// a.innerText = "<h1>hello</h1>" ; //    
				// document.write( a.innerText ); //         
				// //innerText innerHtml   ？innerHtml   HTML  
				// a.innerHtml = "<h1>hello</h1>" ; //    
				// document.write( a.innerHtml ); //         
			}
		</script>
	</head>
	<body>
		<div name="d" onclick="method();">  div1</div>
		<div name="d">  div2</div>
		<div class="f">  div3</div>
		<a href="#" id="a1">  a1</a>
		<a href="#" class="f">  a2</a>
		<p class="f">  p1</p>
		<p>  p2</p>
	</body>
</html>
3,Jquery
C1,개술
JS 의 표기 법 을 간소화 하기 위해 종합 적 으로 사용 했다HTML css js.
문법:$(선택 기).이벤트
C2,사용 절차
jQuery 파일 먼저 가 져 오기:HTML 에서 script 태그 로 가 져 오기
jQuery 의 문법 으로 웹 페이지 의 요 소 를 수식 합 니 다.
C3,입문 사례

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>   jq  </title>
		<!-- 1.   jQuery   -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2.       JS   -->
		<script>
			//   p  ，    
				function fun(){
					//dom    
					var a = document.getElementsByTagName("p");//         
					a[0].innerHTML="   。。。";//    
					//jq     -- jq  ：  $(   ).  
					$("p").hide();//    
					$("p").text("   33333。。。");//    
				}
		</script>
	</head>
	<body>
		<p onclick="fun();">  p2</p>
	</body>
</html>
C4,jQuery 문서 준비 완료

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>   jq     </title>
		<!-- 1.   jq   -->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			//  1   ：   h1     ，     
					//     ：  h1     +         (   jq)
			// document.getElementsByTagName("h1")[0].innerHTML="   。。";
			//  2 ：        (   jq)--            
			$(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="   。。";//js dom  
				$("h1").text("   。。");//jq   
			});
		</script>
	</head>
	<body>
		<h1>  h1</h1>
	</body>
</html>
4.JQuery 의 문법
C1,선택 기
탭 이름 선택 기:$(“div”)C 선택 div
id 선택 기: $("#d1")C 선택 id=d1 요소
class 선택 기:$(".cls") C 선택 class=cls 요소
속성 선택 기:$("[href]")C href 속성 이 있 는 요 소 를 선택 하 십시오.
고급 선택 기:$(“div.d3”)C class=d3 의 div 선택
C2,상용 함수text() html() val()―가 져 오 거나 설정 값hide()C 숨 기기$(“p”).css(“background-color”,“yellow”);--설정 스타일show()―표시fadeIn() -페 이 드 인fadeOut()-페이드아웃
C3,상용 이벤트
이벤트 C 클릭click !!!더 블 클릭 이벤트 Cdblclick마우스 이동 이벤트 Cmouseenter마우스 이동 이벤트 Cmousleave마우스 서 스 펜 션 이벤트 Chover키보드 이벤트 Ckeydown keyup keypressC4,연습

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>   jq   </title>
		<!-- 1.   jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2.   jq        ：$(   ).   -->
		<script>
			// jq      ：：          ，        ，     
			$(function(){
				//   1：  id=d1   ，  id=p1 
				$("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				//   2：  class="dd"   ， div    
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
				//   3：     id="d1" div，   href     
				$("#d1").mouseenter(function(){
					$("[href]").hide();
				})
			});
		</script>
	</head>
	<body>
		<div id="d1">  div1</div>
		<div class="dd">  div2</div>
		<div>  div3</div>
		<div class="dd">  div4</div>
		<p id="p1">  p1</p>
		<p>  p2</p>
		<a class="dd">  a1</a>
		<a href="#">  a2</a>
		<a href="#">  a3</a>
	</body>
</html>
총결산
이 글 은 여기까지 입 니 다.당신 에 게 도움 을 줄 수 있 기 를 바 랍 니 다.또한 당신 이 우리 의 더 많은 내용 에 관심 을 가 져 주 실 수 있 기 를 바 랍 니 다!
면접 에서 가장 많이 묻 는 13 가지 Vue 액세서리
ES6 확장 연산 자 사용 방법 예시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage