jQueryオワコン説などもありますが、WordPressとかただのHTMLの静的サイトの制作ならまだまだｊQueryの使用率は高いです。
長く愛されているだけあってちょっと書けばすぐに実装できてしまうのがいいですよね。
ここでは、制作でよく使用する機能をまとめてコピペで実装してしまおうぜという僕得のページです。（
他にももし使いたい方がいればお使いください。
では早速行きます！！
よく利用するｊQuery
スムーススクロール
「jquery-easing」で、強弱のついたいい感じのスムーススクロールを実装します。
必要ない場合は、とっても可。
<div id="page-top"><a href="#">Page TOP</a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> function smoothScroll() {
$('a[href^="#"]').click(function () {
var speed = 1500;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({
scrollTop: position
}, speed, "easeInOutQuart");
return false;
});
}
メニュー実装
「#header-btn」をクリックすることで、メニュー「#header-menu」が開き、ボタン2「#header-btn_close」をクリックで閉じるメニューを実装できます。
function spMenu() {
let btn = $('#header-btn');
let close = $('#header-btn_close');
let menu = $('#header-menu');
btn.click(function () {
menu.slideToggle();
});
close.click(function () {
menu.slideToggle();
});
}
文字数制限
PHPなどで制御してしまうことが多いですが、JSでも文字数を制御できます。
新着情報などJSを使用して指定の文字数以上の場合最後に「…」をつけて省略します。
function textCat() {
// SP時
if (window.matchMedia("(max-width: 640px)").matches) {
let count = 17;
$('.text_limit').each(function () {
var thisText = $(this).text();
var textLength = thisText.length;
if (textLength > count) {
var showText = thisText.substring(0, count);
var insertText = showText += '…';
$(this).html(insertText);
};
});
} else {
//PC時
let count = 50;
$('.text_limit').each(function () {
let thisText = $(this).text();
let textLength = thisText.length;
if (textLength > count) {
var showText = thisText.substring(0, count);
var insertText = showText += '…';
$(this).html(insertText);
};
});
}
}
タブ切り替え
タブをいくら増えても対応可能で、index()で取得して切り替えます。
function tabSelect() {
let tabs = $(".tab");
$(".tab").on("click", function () {
$(".active").removeClass("active");
$(this).addClass("active");
const index = tabs.index(this);
$(".tab-content").removeClass("show").eq(index).addClass("show");
})
}
クリックで展開するコンテンツ
ボタンをクリックすると、内容が出てくるコンテンツです。
<ul>
<li>
<div class="btn">ボタン</div>
<div class="content">
<p>テストテストテストテストテストテストテストテストテストテストテストテスト</p>
</div>
</li>
</ul>CSS
ul li .content{
display: none;
}function btnDown() {
$(".btn").on("click", function () {
$(this).next().slideToggle();
});
}
お問い合わせフォームの実装
メールアドレスの一致
メールアドレスが一致しているかどうか判定します。
メールが一致しない場合は、「メールアドレスが一致しません。」と表示し、再入力を促します。
<form>
<input class="color-gray" id="mail01" type="email" name="email1" required>
<input class="color-gray" id="mail02" type="email" name="email2" required>
<input type="submit" value="内容を確認する" onClick="return CheckMail()">
</form>function CheckMail() {
// 入力値取得
let input1 = $("#mail01").val();
let input2 = $("#mail02").val();
// メール比較
if (input1 !== input2) {
window.alert("メールアドレスが一致しません。");
return false;
} else {
return true;
}
}
コレがあると便利では？など何かあればコメントください！
ABOUT ME
