jQueryで文字列を検索
jQuery のcontainsメソッドを。簡単な例を次に示します。
<div id="myDiv">This is some text.</div>
<button id="myButton">Find Text</button>
$(document).ready(function() {
$('#myButton').click(function() {
var searchText = 'some';
var matchingElements = $('#myDiv:contains(' + searchText + ')');
matchingElements.css('background-color', 'yellow');
});
});
この例では、ユーザーが「テキストの検索」ボタンをクリックすると、#myDiv要素見つかったすべての一致する要素の背景色が黄色に設定されます。
文字列内に文字列が存在するかどうかを判断する Jquery
JavaScript の文字列メソッドを使用して、文字列に別の文字列が含まれているかどうかindexOfを。jQuery を使用すると、オプションで$.inArray()または$.grep()メソッドを使用して同じチェック機能を実現でき、どちらもブール値を返します。
- 使用
indexOf方法:
var str = "Hello world!";
if (str.indexOf("world") !== -1) {
// 'world' 在 'Hello world!' 中存在
}
- 使用
$.inArray()方法:
var arr = ["Apple", " Banana", "Orange"];
if ($.inArray("Banana", arr) !== -1) {
// 'Banana' 在数组中存在
}
- 使用
$.grep()方法:
var arr = ["Apple", " Banana", "Orange"];
if ($.grep(arr, function(item) {
return item === "Banana";
}).length) {
// 'Banana' 在数组中存在
}
上記の 3 つの例はすべて、指定された文字列が文字列/配列に存在するかどうかをチェックし、存在するかどうかを判断するためのブール値を返します。
jqueryはクリックがタグかどうかを判断します
jQuery を使用して$(this).is("a")、現在のクリック イベントがaタグであるかどうかを確認できます。
クリックイベントを登録する場合は、$(this)クリックされた要素を参照しis()、その要素がaタグであるかどうかを メソッド で確認し、タグである場合は return true、そうでない場合は return を行いますfalse。
サンプルコードは次のとおりです。
$("body").on("click", function(event) {
if ($(event.target).is("a")) {
// 点击的是一个 a 标签
}
});
コードでは、body要素、event.target要素がaタグ確認することでタグがクリックされたかどうかを確認しますa。
jqueryはimgタグがクリックされたと判断します
jQuery を使用して$(this).is("img")、現在のクリック イベントがimgタグであるかどうかを確認できます。
クリックイベントを登録する場合は、$(this)クリックされた要素を参照しis()、その要素がimgタグであるかどうかを メソッド で確認し、タグである場合は return true、そうでない場合は return を行いますfalse。
サンプルコードは次のとおりです。
$("body").on("click", function(event) {
if ($(event.target).is("img")) {
// 点击的是一个 img 标签
}
});
コードでは、body要素、event.target要素がimgタグ確認することでタグがクリックされたかどうかを確認しますimg。
jqueryはimgのsrc値を取得します
jQuery のattr()メソッドimgタグのsrc属性の値を取得できます。サンプルコードは次のとおりです。
// 首先选择相应的 img 元素
var img = $("img");
// 使用 attr() 方法获取 img 的 src 属性
var src = img.attr("src");
// 输出 src 属性的值
console.log(src);
上記のサンプル コードでは、まずimg要素、次にattr()メソッドを使用して要素のsrc属性。最後に、取得したsrcプロパティ。
イベント ハンドラーでimg要素src。たとえば、クリック イベント ハンドラーでは、次のコードを使用してimg要素のsrc属性を取得できます。
$("img").on("click", function() {
var src = $(this).attr("src");
console.log(src);
});
上記のコードではclick、img要素がクリックされたときに実行されるイベント ハンドラー関数を登録しました。この関数は内部的$(this)にクリックされたimg要素を参照するために使用し、attr()メソッドをsrc要素の属性を取得します。最後に、取得したsrcプロパティ。
jqueryは文字列から左右のスペースを削除します
jQuery の$.trim()メソッド。サンプルコードは次のとおりです。
var str = " Hello, World! ";
// 使用 $.trim() 方法去掉左右两边的空格
var trimmedStr = $.trim(str);
// 输出去掉空格后的字符串
console.log(trimmedStr);
上記のサンプル コードでは、まず左右にスペースを含む文字列を定義しましたstr。次に、文字列の左側と右側からスペースを削除し、結果を変数に格納する$.trim()メソッドを使用します。trimmedStr最後に、trimmedStr変数を。
このメソッドを使用して、フォームを送信する前にユーザーが入力した文字列からスペースを削除することもできます。例えば：
$("form").submit(function() {
// 获取用户输入的字符串
var input = $("input[name='myInput']").val();
// 使用 $.trim() 方法去掉左右两边的空格
var trimmedInput = $.trim(input);
// 将去掉空格后的字符串重新赋值给 input 元素
$("input[name='myInput']").val(trimmedInput);
// 提交表单
return true;
});
上記のコードでは、フォーム送信イベント ハンドラーを登録しました。この関数内では、まず$()メソッド をユーザーが入力した文字列を取得し、次に$.trim()メソッド を使用して文字列の左側と右側のスペースを削除し、結果をtrimmedInput変数。最後に、$().val()メソッドをスペースを削除した後に文字列を入力要素に再割り当てし、trueフォームの送信に戻ります。