ほとんどのWEBサイトで利用されてます.
ブラウザがhtmlを読み込んでから,タグ要素を追加,削除,変更が生のjavascriptよりも1/3以下のコード量でできてしまいます.
また,ユーザーの操作をキャッチして状況に応じた処理を行うことができます
phpとの連携ができるので,DB操作を呼び出すことができる万能なライブラリです.
コードの書き方はCSSと共通した部分があるので馴染みやすいはずです.
jQueryを利用する方法は一般的に外部サイトからの読み込みで行います.このことをCDNといいます.
早速ファイルを作ってCDNで読み込んでみましょう
minified です
コピーして [jq–1.html]にペーストしてください
コンソールで読み込まれていることを確認しましょう
jQueryを使うとDOMの操作が簡単にできます
カラのbody内に<h1>要素を追加してみましょう
[jq-2.html]
<body>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('body').append('<h1>みだし</h1>');
</script>
文の書式は,常にこのパターンです
$(要素).関数名(引数) ;
[jq-3.html]
text メソッドは要素の中の文字列のみ付与,取得する事ができます.
<body>
<h1>最初の見出し</h1>
<input type="button" value="rewrite" onclick="changeText()">
<input type="button" value="getText" onclick="geteText()">
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function changeText(){
$('h1').text('書き換えた見出し');
}
function geteText(){
var text = $('h1').text();
console.log(text);
}
</script>
（）の中に引数があれば付与,なければ取得に自動的に切り替わります
[jq-4.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<body>
<div id="main"></div>
<input type="button" value="rewrite" onclick="changeText()">
<input type="button" value="getText" onclick="geteText()">
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function changeText(){
$('#main').html('<h2>埋め込んだ見出し</h2>');
}
function geteText(){
var text = $('#main').html();
console.log(text);
}
</script>
CSSを与えるメソッドは css()
クラスを与えるメソッドは addClass()
属性を操作するメソッドは attr()
そのたたくさん.
[jq-5.html]
jQueryでチェックボックスのチェック状態を取得する – JavaScript
<body>
<p>あなたの好きな動物は？（複数可）</p>
<input type="checkbox" value="イヌ">イヌ<br>
<input type="checkbox" value="ネコ">ネコ<br>
<input type="checkbox" value="ウサギ">ウサギ<br>
<input type="checkbox" value="ハムスター">ハムスター<br>
<input type="checkbox" value="熱帯魚">熱帯魚<br>
<input type="checkbox" value="他">この中には無い<br>
<input type="button" value="確認" onclick="boxCheck()">
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function boxCheck(){
//チェックされた項目を記録する変数
var str = "";
//eachメソッドでチェックボックスを１つずつ確認
$('[type="checkbox"]').each(function(index, elem){
//チェックされているか確認する
if($(elem).prop('checked')){
//変数strが空でない時、区切りのコンマを追加する
if( str != "" ) str = str + "," ;
//チェックボックスのvalue値を変数strに入れる
str += $(elem).val();
}
});
//strが空の時、警告を出す
if( str == "" ){
alert( "どれか選択してください。" );
}else{
alert( str + "が選択されました。" );
}
}
</script>
[jq-6.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<form name="radioB">
カナダの首都は？<br>
<input type="radio" name="Q1">オタワ<br>
<input type="radio" name="Q1">トロント<br>
<input type="radio" name="Q1">モントリオール<br>
<br>
スイスの首都は？<br>
<input type="radio" name="Q2">ジュネーブ<br>
<input type="radio" name="Q2">チューリッヒ<br>
<input type="radio" name="Q2">ベルン<br>
<br>
ドイツの首都は？<br>
<input type="radio" name="Q3">ハンブルク<br>
<input type="radio" name="Q3">ブレーメン<br>
<input type="radio" name="Q3">ベルリン<br>
<br>
スペインの首都は？<br>
<input type="radio" name="Q4">バルセロナ<br>
<input type="radio" name="Q4">マドリード<br>
<input type="radio" name="Q4">リスボン<br>
<br>
オーストラリアの首都は？<br>
<input type="radio" name="Q5">シドニー<br>
<input type="radio" name="Q5">メルボルン<br>
<input type="radio" name="Q5">キャンベラ<br>
<br>
<input type="button" value="採点" id="saiten" />
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('#saiten').click(function (){
var seikai=0; //正解数を入れる変数
//答えの番号を配列に入れる
var trueAns = [0,5,8,10,14];
//正解のラジオボタンがチェックされているか確認
$('[type="radio"]:checked').each(function(index, elem){
if( $('[type="radio"]').eq(trueAns[index]).prop('checked') ){
console.log(index, trueAns[index] );
seikai++;
}
});
alert("あなたは"+seikai*20+"点でした！");
});
</script>
[jq-8.html]
jqueryしか使いません
パスワード <input type="password" name="password" size="13" maxlength="13"> パスワード確認 <input type="password" name="password-c" size="13"> <button id="show">表示する</button> <input type="button" size="30" value="送信">
[jq-7.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<input type="text" id="datepicker">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('#datepicker').datepicker();
</script>
[
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<style>
/*------ スライダーの横幅 ------*/
.slider{
width:70%;
margin:0 auto;
}
/*------ スライダー画像 ------*/
.slider img{
width:100%;
}
/*-------- 高さ調整 ----------*/
.slider .slick-slide{
height:auto!important;
}
/*---------- 矢印 ----------*/
.slider .slick-next{
right:0!important;
}
.slider .slick-prev{
left:0!important;
}
.slider .slick-arrow{
width: initial!important;
height: initial!important;
z-index:2!important;
}
.slider .slick-arrow:before{
font-size: 30px!important;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div><img src="./image/index1.jpg"></div>
<div><img src="./image/index2.jpg"></div>
<div><img src="./image/index3.jpg"></div>
</div>
<script>
$('.slider').slick({
autoplay: true, //自動再生
autoplaySpeed: 2000, //自動再生のスピード
speed: 800, //スライドするスピード
dots: true, //スライド下のドット
arrows: true, //左右の矢印
infinite: true, //永久にループさせる
});
</script>
複数の画像をスライドするほうがいいです
カルーセルスライダー
[jq-7.html]
郵便番号から住所を引っ張ってきてくれる便利なライブラリです。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>
<input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
</form>
ユーザー登録の際に、AJAXを使用してログインアカウントが他のユーザーと重複していないか確認するサンプルコードを提供します。
以下のコードは、ユーザーがログインアカウントを入力した後、AJAXリクエストでサーバーにそのアカウントが既に使用されているかを問い合わせ、結果に応じてエラーメッセージを表示する例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザー登録</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>ユーザー登録フォーム</h2>
<form id="registrationForm">
<label for="username">ログインアカウント:</label>
<input type="text" id="username" name="username" required>
<span id="username-error" style="color: red; display: none;">このアカウントはすでに使用されています。</span>
<br><br>
<button type="submit">登録</button>
</form>
<script>
$(document).ready(function() {
// ユーザー名入力時にAJAXで重複チェック
$('#username').on('blur', function() {
var username = $(this).val();
if (username !== "") {
$.ajax({
url: 'check_username.php', // サーバー側で重複をチェックするPHPファイル
type: 'POST',
data: { username: username },
})
.done(function(response) { // AJAX成功時に実行される
if (response === 'exists') {
$('#username-error').show(); // 重複があればエラーメッセージを表示
} else {
$('#username-error').hide(); // 重複していなければエラーメッセージを非表示
}
})
.fail(function() { // AJAX失敗時のエラーハンドリング
alert('エラーが発生しました。');
});
}
});
});
</script>
</body>
</html>
check_username.php
<?php
$host = 'localhost';
$dbname = 'shop';
$user = 'root';
$password ='wert3333';
// 普通はこんな感じに変数にします
$pdo=new PDO("mysql:host=$host;dbname=$dbname;charset=utf8" , $user, $password );
// ユーザー名を受け取る
if (isset($_POST['username'])) {
$username = htmlspecialchars($_POST['username']);
// ユーザー名の重複チェック
$sql = "SELECT * FROM customer WHERE login = '$username'";
$result = $pdo->query($sql);
if ( !empty($result->fetch()) > 0) {
// 重複している場合
echo 'exists';
} else {
// 重複していない場合
echo $username;
}
}