2019/08/30 JQuery

2019년 08월 30일

조별하
작성자
2019.08.30.:24

JQuery 기본 사용 문법

1. $(document).ready(function(){
alert("jQuery 시작");
});

2. $(function(){
alert("jQuery 시작");
});

3. alert($)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>00_jquery.html</title>
</head>
<body>
 <!--jQuery import  외부 라이브러리 추가하는 방식-->
 <script src="js/jquery.js"></script>

 <!--사용자가 작성하는 코드-->
 <script>
 /*1)		
 $(document).ready(function(){
		alert("jQuery 시작");
	});
 */
 /*2)
 $(function(){
	 alert("jQuery 시작");
 });
 */
 //3) jquery() 축약형 $
 alert($);
 </script>

</body>
</html>

Click 을 이용한 이벤트 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_jquery시작.html</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" />
<style>
    body {
        font-family: 'Noto Sans KR', sans-serif;
        text-align: center;
    }
    
    #txt {
        font-size: 50px;
        font-weight: 700;
        transition: .4s ease;
        width: 400px;
        margin: 30px auto;
        color:#424242;
        transform:scale(1) rotate(0deg);
    }
    
    #btn {
        padding: 12px 16px;
        border: none;
        cursor: pointer;
        font: 500 20px 'Noto Sans KR', sans-serif;
        background: #26C6DA;
        color: #fff;
    }
    
    #btn:hover {
        background: #00B8D4;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        transition: .2s ease;
    }
    
</style>
</head>
<body>
    <h1 id="txt">버튼을 눌러보세요.</h1>
    <!-- 내부속성이 submit 
    	 <button> 요소 element
    	 id=""    속성 orioerty, attribute-->
    <button id="btn">난 버튼</button>
    <!-- 내부속성이 submit
    <input type="image" src="">
      -->
      
<script src="js/jquery.js"></script>
 <script>
  //jquery장점
 //->자바스크립트 사용시 편리함을 위해서
 //->요소선택이 간단하다 
 //$("#btn").on("click",function(){});
  $("#btn").click(function(){
	  $("#txt").text("눌러버렸군요??");
  });
 </script>
</body>
</html>

>>컬러는 핫핑크로, 사이즈는 두배, 회전을 360도 돌려서 출력하겠다

 #txt.emphasis{/*css추가*/
    	color:deeppink;
    	transform:scale(2) rotate(360deg);
    }

$("#btn").click(function(){
	  $("#txt").text("눌러버렸군요??").toggleClass("emphasis");
	  
  });

>>css 에 txt.emphasis 의 속성을 추가한뒤 Script에 function 기능을 설정해 보았다.

click을 이용하여 CSS 넣어보기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS의 선택자의 활용</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" />
<style>
	
	body {
		font-family:'Noto Sans KR',sans-serif;
		margin:0;
	}
	
	#wrap {
		width:1000px;
		border:1px solid #333;
		margin:auto;
		box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	}
	
	#header {
		width:1000px;
		height:99px;
		border-bottom:1px solid #333;
		position: relative;
		text-align: center;
		line-height:99px;
	}
	
	button {
		padding:12px 16px;
		border:none;
		cursor: pointer;
		font:700 20px 'Noto Sans KR',sans-serif;
		background: #26C6DA;
		color:#fff;
	}
	button:hover {
		background: #00B8D4;
		box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
		transition: .2s ease;
	}	
	button:active {
		background: #00ACC1;
		transform:scale(.8);
	}
	
	#content ul {
		margin:20px auto;
		padding:0;
		list-style: none;
		width:960px;
	}
	
	
	#content ul:after {
		content:"";
		clear: both;
		display: block;
	}
	
    /*CSS추가*/
	
		
</style>
</head>
<body>
	<div id="wrap">
		<header id="header">
			<button><i class="fa fa-instagram"></i> 색상 변경</button>
		</header><!-- //header -->
		<div id="content">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
			</ul>
		</div><!-- //content -->
	</div><!-- //wrap -->
<script src="js/jquery.js"></script>
<script>

	/*header 안에있는 button을 찾아라  */
	$("#header>button").click(function(){
		 alert("Test"); 
	
    //자바스크립트
    //->document.getElementByid("").style
		
	//jQuery css 접근
	//$("#").css()
	 $("li").css("color","red");//본문에 있는 li를 찾으라는 뜻
	
    });//click end
</script>
</body>
</html>

jquery 에서 selector(선택자) 접근

>id=btn =>$("#btn")
>class=btn =>#(".btn")

> $("<button>") =>본문에 button 요소생성
> $("button") =>본문에 있는 button 요소선택

※css추가해주어 크기를 보기 좋게 변경해 주었다.

/*CSS추가*/
	#content li {
		width: 278px;
		height: 200px;
		margin: 20px;
		float: left;
		font-size: 100px;
		font-weight: 700px;
		text-align: center;
		line-height: 200px;
		border: 1px solid #333;
		transition: .5s ease;
	}

=> $("#header>button").click(function(){
$("li").css("color","red");
});//click end

=> $("li:first-child").css("color","red");
$("li:nth-child(2)").css("color","yellow");
$("li:eq(2)").css("color","blue");
$("li:last-child").css("background","deeppink");

jQuery 4번 예제 css 메소드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>css메서드</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" />
<style type="text/css">
	body {
		font-family: 'Noto Sans KR', sans-serif;
	}
	button {
		font:16px 'Noto Sans KR', sans-serif;
		padding:8px 16px;
	}
	#box {
		width:400px;
		height:300px;
		border:1px solid #000;
	}
</style>
</head>
<body>
		
	<p>
		<button>색상입력</button>
		<button>높이얻기</button>
		<button>여러개의 속성을 한번에 변경</button>
	</p>
	<div id='box'></div>
<script src="js/jquery.js"></script>
<script>

</script>

</body>
</html>

>>getter와 setter함수
>>jquery 는 대부분 getter setter함수 이름을 같이 사용한다
>>jQuery에서 css()함수
1) css(속성명,속성값) : setter
2) css(속성명) : getter
3) css(속성명,속성값 속성명,속성값 속성명,속성값)

$("button:nth-child(1)").click(function(){
  $("#box").css("background","deepskyblue");
})//click end
$("button:nth-child(2)").click(function(){
   var height=$("#box").css("height");
 		alert(height);
})//click end
$("button:nth-child(3)").click(function(){
  var width=800;
  $("#box").css({"width":width,
 				 "height":600,
             "background":"url(img/b_ryan.png)",
 				 "border":"50px dotted red"
 				       });
})//click end

jQuery text_HTML 의 이용

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>text_html메서드</title>
<style type="text/css"> 
	#text,#html {
		width:250px;
		height:100px;
		border:1px solid #333;
		margin-bottom:40px;
	}
</style>
</head>
<body>
	<p>
		<button>입력!</button>
	</p>
	<div id="text"></div>
	<div id="html"></div>
<script src="js/jquery.js"></script>
<script>
</script>
</body>
</html>

$("button").click(function(){
	var txt="<img src='img/k7.png'>";
	
	  $("#text").text(txt);
	  $("#html").html(txt);
});//click end

속성관련 메소드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta  charset="utf-8"/>
<title>속성관련메서드</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" />
<style>

	body {
		font-family: 'Noto Sans KR', sans-serif;
	}
	button {
		font:16px 'Noto Sans KR', sans-serif;
		padding:8px 16px;
	}
</style>

</head>
<body>
	<p>
		<button>title얻기</button>
		<button>src변경</button>
        <button>속성여러개 변경</button>
	</p>
	<img src="img/b_ryan.png" alt="라이언" title="라이언"/>

</body>
</html>

jQuery를 넣어서 이벤트를 설정해 보았다

<script src="js/jquery.js"></script>
<script>	
	//css() text() html()
	//prop() attr()
	//ajax() ->댓글관련해서 많이 사용
	
	$("button:nth-child(1)").click(function(){
		var title=$("img").attr("title");
		alert(title);
	});
	$("button:nth-child(2)").click(function(){
		$("img").attr("src","img/b_muzi.png");
	});
	$("button:nth-child(3)").click(function(){
		var obj={ "width":"400",
					"height":300,
					"src":"img/b_con.png",
					"alt":"콘",
					"title":"CON"};
		$("img").attr(obj);
	});
</script>

this 와 index

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>우리가 클릭한 요소와 인덱스 얻기</title>
</head>
<body>
    <button>버튼</button>
    <button>버튼</button>
    <button>버튼</button>
</body>
</html>

this 사용자가 선택한 요소 자신을 가리킴
1) javascript
>>this.style.color="red"

2) jQuery
>>this.css("color","red") 적용안됨
>>순수자바스크립트 요소 객체 this를
>>jQuery 객체 $(this)로 변경한 후 사용한다

>>$(this) ->jQuery 에서 this객체 접근
>>$("this") ->본문에서 요소 선택
>>$("") ->본문에 요소를 만들어 내라

//사용자가 클릭한 버트의 글자색 변경
		$(this).css("color","tomato");
		
		});
		//사용자가 선택한 요소의 인덱스 얻어오기
		$("button").click(function(){
			var idx=$(this).index();
			alert(idx);
		});

'JAVA 교육 > Jquery' 카테고리의 다른 글

Jquery 사용법 (0)	2019.11.22

다음 글이 없습니다.

이전 글이 없습니다.