jQueryのデータ型まとめ(14)_jquery

May 16, 2016 pm 03:21 PM

ネイティブ JS の組み込みデータ型に加えて、jQuery にはセレクター、イベントなどのいくつかの拡張データ型 (仮想型) も含まれています。

1. 文字列

文字列は最も一般的で、ほぼすべての高級プログラミング言語とスクリプト言語でサポートされています。たとえば、「He​​llo world!」は文字列です。文字列の型は文字列です。たとえば

var typeOfStr = typeof "hello world";//typeOfStr は "string"

1.1 文字列組み込みメソッド

"hello".charAt(0) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "こんにちは"
"hello".replace(/e|o/g, "x") // "hxllx"
"1,2,3".split(",") // ["1", "2", "3"]

1.2 length 属性: 文字の長さを返します。たとえば、「hello」。length は 5

を返します。

1.3 文字列をブール値に変換します:

空の文字列 ("") のデフォルトは false ですが、空でない文字列 ("hello" など) のデフォルトは true です。

2. 番号

数値タイプ (3.1415926 または 1、2、3... など)

typeof 3.1415926 は「数値」を返します

2.1 ブール値に変換された数値:

数値が 0 の場合、デフォルトは false になり、それ以外の場合は true になります。

2.2 Number は倍精度浮動小数点数を使用して実装されているため、次の状況は妥当です:

0.1 + 0.2 // 0.30000000000000004

3. 数学

次のメソッドは、Java の Math クラスの静的メソッドに似ています。

Math.PI // 3.141592653589793
Math.cos(Math.PI) // -1

3.1 文字列を数値に変換する: parseInt メソッドと parseFloat メソッド:

parseInt("123") = 123 (10 進数変換を使用)
parseInt("010") = 8 (8 進数変換を使用)
parseInt("0xCAFE") = 51966 (16 進数変換を使用)
parseInt("010", 10) = 10 (10進数変換を指定)
parseInt("11", 2) = 3 (バイナリ変換を指定)
parseFloat("10.10") = 10.1

3.2 数値を文字列に変換

文字列に Number を追加すると、文字列が取得されます。
"" + 1 + 2 // "12"
"" + (1 + 2) // "3"
; "" + 0.0000001 // "1e-7"
または、強制的な型変換を使用します:
文字列(1) + 文字列(2) //"12"
; 文字列(1 + 2) //"3"
;

4. NaN と無限大

数値以外の文字列に対して parseInt メソッドが呼び出された場合、NaN (Not a Number) が返されます。NaN は、次のように、変数が数値型であるかどうかを検出するために使用されます。

isNaN(parseInt("hello", 10)) // true

Infinity は、1 / 0 // Infinity など、無限に大きい値または無限に小さい値を表します。

NaN と Infinity の両方で typeof 演算子を呼び出すと、「numuber」が返されます。

また、NaN==NaN は false を返しますが、Infinity==Infinity は true を返します。


5. 整数と浮動小数点数

整数型と浮動小数点型に分かれます。

6. ブール値

ブール型、true または false。


7. オブジェクト

JavaScript のすべてはオブジェクトです。オブジェクトに対して typeof 操作を実行すると、「object」が返されます。

var x = {}; 
var y = { name: "Pete", age: 15 };
ログイン後にコピー
上記の y オブジェクトの場合、ドットを使用して属性値を取得できます。たとえば、y.name は「Pete」を返し、y.age は 15 を返します。

7.1 配列表記 (オブジェクトにアクセスするための配列アクセス方法)

var operations = { increase: "++", decrease: "--" } 
var operation = "increase"; 
operations[operation] // "++"; 
operations["multiply"] = "*"; // "*"
ログイン後にコピー
上記のoperations["multiply"]="*"; は、キーと値のペアを操作オブジェクトに追加します。

7.2 オブジェクトループアクセス: for-in

var obj = { name: "Pete", age: 15}; 
for(key in obj) { 
alert("key is "+[key]+", value is "+obj[key]); 
}
ログイン後にコピー

7.3 属性や値があるかどうかに関係なく、オブジェクトはデフォルトで true になります

7.4 オブジェクトのプロトタイプ属性

jQuery で fn (Prototype のエイリアス) を使用して、オブジェクト (関数) を jQuery インスタンスに動的に追加します


var form = $("#myform"); 
form.clearForm; // undefined 
form.fn.clearForm = function() {
return this.find(":input").each(function() { this.value = ""; }).end();
}; 
form.clearForm() // works for all instances of jQuery objects, because the new method was added
ログイン後にコピー

8. オプション

ほとんどすべての jQuery プラグインは、OPTIONS に基づいた API を提供します。OPTIONS は JS オブジェクトです。つまり、オブジェクトとそのプロパティはオプションです。カスタマイズを許可します。

たとえば、Ajax を使用してフォームを送信すると、

$("#myform").ajaxForm();//デフォルトでは、フォームの Action 属性値が Ajax URL として使用され、メソッド値が送信タイプ (GET/POST) として使用されます。

$("#myform").ajaxForm({ url: "mypage.php", type: "POST" }); // 送信された URL と送信タイプをカバーします

9. 配列

var arr = [1, 2, 3];

ARRAY は変数リストです。 ARRAY もオブジェクトです。

次のメソッドを使用して、ARRAY 内の要素の値を読み取るか、設定します:

var val = arr[0];//val为1
arr[2] = 4;//现在arr第三个元素为4
ログイン後にコピー

9.1 配列ループ (トラバーサル)

for (var i = 0; i < a.length; i++) { // Do something with a[i] }
但是当考虑性能时,则最好只读一次length属性,如下:
for (var i = 0, j = a.length; i < j; i++) { // Do something with a[i] }
jQuery提供了each方法遍历数组:
var x = [1, 2, 3]; 
$.each(x, 
function(index, value) { 
console.log("index", index, "value", value); 
});
ログイン後にコピー

9.2 配列に対して Push メソッドを呼び出すことは、x.push(5) と x.[x.length] = 5 などの要素を配列の末尾に追加することを意味します。

9.3 配列のその他の組み込みメソッド:

9.4 数组为对象,所以始终为true

10. MAP

The map type is used by the AJAX function to hold the data of a request. This type could be a string, an array<form elements>, a jQuery object with form elements or an object with key/value pairs. In the last case, it is possible to assign multiple values to one key by assigning an array. As below:
{'key[]':['valuea','valueb']}
ログイン後にコピー

11. FUNCTION:匿名和有名两种

11.1 Context、Call和Apply

In JavaScript, the variable "this" always refers to the current context. 
$(document).ready(function() { 
// this refers to window.document}); 
$("a").click(function() { // this refers to an anchor DOM element
});
ログイン後にコピー

12. SELECTOR

There are lot of plugins that leverage jQuery's selectors in other ways. The validation plugin accepts a selector to specify a dependency, whether an input is required or not:
emailrules: { required: "#email:filled" }
This would make a checkbox with name "emailrules" required only if the user entered an email address in the email field, selected via its id, filtered via a custom selector ":filled" that the validation plugin provides.

13. EVENT

DOM标准事件包括:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, andkeyup

14. JQUERY

JQUERY对象包含DOM元素的集合。比如$('p')即返回所有

...


JQUERY对象行为类似数组,也有length属性,也可以通过index访问DOM元素集合中的某个。但是不是数组,不具备数组的某些方法,比如join()。

许多jQuery方法返回jQuery对象本身,所以可以采用链式调用:
$("p").css("color", "red").find(".special").css("color", "green");
但是如果你调用的方法会破坏jQuery对象,比如find()和filter(),则返回的不是原对象。要返回到原对象只需要再调用end()方法即可。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

jQueryマトリックス効果 jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

シンプルなjQueryスライダーを構築する方法 シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化 JavaScriptによる構造マークアップの強化 Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。 高度なJavaScriptテクノロジーを使用できます(

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles