JQuery
JQuery
* HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것
* JQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드
* 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이므로 쓰기 전에 '임포트' 해야 함
* 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 함
* <head> 와 </head> 사이에 jQuery CDN을 넣어 사용해야 함
* css에서는 선택자로 class를 썼지만, JQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킴
ex) 특정 인풋박스의 값을 → 가져와줘!
ex) 특정 div를 → 안보이게 해줘!JQuery値(クロム)のインポート
* # 뒤에 적용할 id를 넣어주면 됨
$('#id').val('수박');
id : $('#id')
명령값 : .val('수박');JQueryベース(クロム)
* 실행시키려면 id가 있어야 함
1. 숨기기 : $('#id').hide()
2. 나타내기 : $('#id').show()
3. px값보기 : $('#id').css('width')
4. px 변경 : $('#id').css('width','700px')
5. 디스플레이 값 : $('#id').css('display')
- block : 보이는 상태
- none : 있는데 안보이는 것
6. 태그 내 텍스트 입력 : $('#id').text('~')
7. 버튼 넣어보기
let temp_html = '<button>버튼 추가!</button>';
$('#cards-box').append(temp_html);
8. 카드 넣어보기
* 카드를 넣을때는 html = 뒤에 `(backtick)으로 입력
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);Reference
この問題について(JQuery), 我々は、より多くの情報をここで見つけました https://velog.io/@grppl/JQueryテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol