###
<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery( document ).ready(function( $ ) {
$('body').prepend('<h1>Hello world</h1>');
});
</script>
</body>
</html>Jquery 파일을 다운해서 넣어줘도된다
아니면 불러오면 된다 src 를 사용해서 말이다
jQuery.com 으로 가면 된다
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
여기서 $가 무엇인가???
변수명이다 이걸 만들때 짧게 만들기 위해 $라는 이름을 쓴것이다
jQuery( document ).ready(function( $ ) {
$('body').prepend('<h1>Hello world</h1>');
});
$('body').prepend('<h1>Hello world</h1>');
압축한것이 있고
압축이 안되있는것도 있다 압축이 안된게 보기는 편하나 압축된것이 효과적으로 쓸수 있다
lib 에 들어가 JQuary 안에 jquery - 버전 을 찾아 들어가서 불러와야한다
<script src ="../liv/jQury/jquert-버전이름"></script>
이렇게 만들어 지는 것은 내가 파일을 저장하여 쓸때이다
<!DOCTYPE html>
<html>
<head>
<style>
#demo{width:200px;float: left; margin-top:120px;}
#execute{float: left; margin:0; font-size:0.9em;}
#execute{padding-left: 5px}
#execute li{list-style: none}
#execute pre{border:1px solid gray; padding:10px;}
</style>
</head>
<body>
<ul id="demo">
<li class="active">HTML</li>
<li id="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<ul id="execute">
<li>
<pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
lis[i].style.color='red';
</pre>
<pre>
$('li').css('color', 'red') </pre>
<input type="button" value="execute" onclick="$('li').css('color', 'red')" />
</li>
<li>
<pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}</pre>
<pre>
$('.active').css('color', 'red')</pre>
<input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
</li>
<li>
<pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
<pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
</pre>
<input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
</li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>id 는 # 으로 표연하고
$는 jquery불러오는거고
.은 클레스 불러오고 좀 중요하다
'.active' == document.getElementsByClassName('active');
'#active' == document.getElementsById('active');
이렇게 다르다
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 11.JavaScript Collection (0) | 2020.04.14 |
|---|---|
| 10. JavaScript Element (0) | 2020.04.14 |
| 8. JavaScript 제어대상 찾기 (0) | 2020.04.12 |
| 7. JavaScript 창제어 (0) | 2020.04.12 |
| 6. JavaScript Navigator (0) | 2020.04.12 |
Or71nH