jQuery
jQuery
HTMLの要素を処理するために便利なJavaScriptを事前に作成しています.ライブラリ!
jQueryは、あらかじめ作成されているJavascriptコードなので、インポートする必要があります.
https://www.w3schools.com/jquery/jquery_get_started.asp
document.getElementById("element").style.display = "none";$('#element').hide();jQueryアプリケーション
作成した例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DoDoPlus</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
.contents {
display: none;
}
</style>
<script>
function open_box() {
$('#post-box').show()
}
function close_box() {
$('#post-box').hide()
}
</script>
<body>
<div>
<h1>jQuery 공부하기!</h1>
<button onclick="open_box()">기록하러가기</button>
</div>
<div class="contents" id="post-box">
<p>jQuery는 편리한 javascript를 미리 모아둔 라이브러리다!</p>
<input type="text">
</div>
<div>
<button onclick="close_box()">닫기</button>
</div>
</body>
</html>
でも結局私が使えないと意味がないので骨格だけを作ります.
機能のみ実現しました.動画撮影の時に実施した時、jQueryがダメだったので
なぜダメなのかと思ったらCDNに繋がらずに回ってきました….機能の実現に集中する
jQueryテストの解答
1.空白チェック関数の作成
1-1. ボタンを押すときに入力した文字に何番を付けるか
[完成本]1-2ボタンを押すとセルに何も入っていない場合は、入力してください.フロートfunction q1() {
let val = $('#input-q1').val()
if ( val == '') {
alert('입력하세요');
} else {
alert(val);
}
}
これは比較的簡単な解題方法です.
2.電子メール判別関数の作成
2-1. ボタンを押すと、入力した電子メールで複数の文字が送信されます.
2-2. 電子メールでない場合(@がない場合)は、「電子メールではありません」と表示されます.
[完成本]2-3Eメールドメインのみ送信function q2() {
let val =$('#input-q2').val()
if(val.includes('@')) {
let domain = val.split('@')[1].split('.')[0]
alert(domain)
}else {
alert('이메일이 아닙니다.')
}
}
この問題ではsplitを使用して分離し、ドメインのみをオフセットできるように分割する必要があります.
私はまず必要なデータを受信し、spliteでインポートしたデータから@の基点を分割し、それからです.基準として、スライスdomain変数でalert(domain)として出力します.
実は前の第1集が粘り強い時解らないためビデオを見ても解答から少し遠いです...機能不全.
このような問題に対して、他の人のコードをもっと見て、多様性を養うべきだと思います.
ちょうど少し前、ある学生がミニメンターイベントに参加したときにこの問題について質問しました.
どう答えたらいいか分からない.
もしあなたがその学生がアップロードしたコードをコピーして確認するなら?このような考え方で、悩み、修正、助けた経験があります.
3.HTMLの貼り付け/削除練習
3-1. 名前を入力すると次の内容が表示されます.
[完了本]-2すべてクリアボタンを作成function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}
('#input-q3').入力値をval()とします.temp htmlには`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DoDoPlus</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
.contents {
display: none;
}
</style>
<script>
function open_box() {
$('#post-box').show()
}
function close_box() {
$('#post-box').hide()
}
</script>
<body>
<div>
<h1>jQuery 공부하기!</h1>
<button onclick="open_box()">기록하러가기</button>
</div>
<div class="contents" id="post-box">
<p>jQuery는 편리한 javascript를 미리 모아둔 라이브러리다!</p>
<input type="text">
</div>
<div>
<button onclick="close_box()">닫기</button>
</div>
</body>
</html>
function q1() {
let val = $('#input-q1').val()
if ( val == '') {
alert('입력하세요');
} else {
alert(val);
}
}function q2() {
let val =$('#input-q2').val()
if(val.includes('@')) {
let domain = val.split('@')[1].split('.')[0]
alert(domain)
}else {
alert('이메일이 아닙니다.')
}
}function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}idセレクタnames-q 3にあります.appendを追加し、temp htmlをonclickのたびに追加します.
remove()表示
names-q 3セレクタにあります.empty()メソッドを使用してonclick時に削除します.
Reference
この問題について(jQuery), 我々は、より多くの情報をここで見つけました https://velog.io/@suyong0697/jQueryテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol