jQuery を始めるにあたって知っておくべきことのまとめ

今回は、jQuery の入門手順の概要を説明します。jQuery を始めるにあたって知っておくべき 注意事項 について説明します。以下は実際のケースです。

jQueryオブジェクト

•jQueryオブジェクトは、DOMオブジェクトをjQueryでラップすることで生成されるオブジェクトです。

•jQuery オブジェクトは jQuery に固有のものです。

•jQuery オブジェクトのみが jQuery メソッドを使用できます。DOM オブジェクトのメソッドを jQuery オブジェクト内で使用することはできません。逆に、DOM オブジェクトは jQuery メソッドを使用できません。

•慣例: jQuery オブジェクトを取得する場合は、変数の前に $

を追加します•jQuery オブジェクトは複数の DOM オブジェクトをカプセル化し、jQuery オブジェクトは配列のようなオブジェクトです

•配列と配列のようなオブジェクトの違い

1. 配列の型はArray

2. 配列のようなオブジェクトの型はObject

DOMオブジェクトからjQueryオブジェクト

• $を使用します。 ()でDOMオブジェクトをラップします 上でjQueryオブジェクトに変換できます

var item = document.getElementsByTagName('ul')[0], // DOM对象
  $item = $(item); // jQuery对象

jQueryオブジェクトはDOMオブジェクトに変換されます

jQueryオブジェクトは、jQueryが提供するget(index)メソッドを使用して、対応するオブジェクトを取得しますDOM オブジェクト

var $ul = $('ul'),
  ul = $ul.get(0);

jQuery オブジェクトは配列のようなオブジェクトであり、[] メソッドを通じて対応する DOM オブジェクトを取得できます。

配列のようなオブジェクト

配列のようなオブジェクトは本質的にはオブジェクトですが、その格納方法は配列の構造に似ています

•arguments オブジェクト----関数の引数の数を受け取ります
•jQuery オブジェクト-- --最下層は dom オブジェクトです

属性

•length 属性 (配列の長さ | 要素数)

メソッド

•get(index):インデックスに従って対応する dom を戻す オブジェクト
•eq(index): インデックスに従って対応する jQuery オブジェクトを返す
•index(): 要素のインデックス値を見つける

ready と onlaod の違い

ready

1. 略語あり
2. 1つのHTMLページ内に複数の
を許可 3. DOM構造をロードしてから実行
4. 高速実行

onload

1. 略語はありません
2. HTML ページで使用できるのは 1 つだけです
3. 実行する前にページのすべてのリソースが読み込まれるまで待つ必要があります

jQuery アニメーション

エフェクト

•show()/hide()

$('p').show(1000).hide(1000);

合っていれば 同じjQueryオブジェクトを使って連鎖操作が可能です。

スライドアニメーション効果

•slideDown()/slideUp()

$('p').slideUp(1000).slideDown(1000);

フェードインおよびフェードアウト

•fadeIn() フェードイン

•fadeOut() フェードアウト

$('p').fadeIn(1000).fadeOut(1000);

同時およびキューに追加されたエフェクト

•同時エフェクト:複数のアニメーションを設定すると同時に実行されます

• キュー効果：複数のアニメーションを設定し、順番に実行します

jQueryプラグイン

jQueryプラグインの役割

• の機能を拡張しますjQuery

•現在のコンポーネント化機能

Dateプラグイン -layDateプラグイン

•layDateの予備使用

1.laydate.jsの導入
2.laydate(options)

プラグインの開発

グローバル関数

グローバル関数、実際にはjQuery自体のメソッド。

jQuery の組み込み関数の一部は、グローバル関数を通じて実装されます。

•比如$.ajax（）就是典型的全局函数

向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){
  // todo...
};

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用

当需要添加多个函数可以使用$.extend（）函数

$.extend({
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
});

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
};

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();
$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。

方法连缀

通过 return this 来实现链式操作

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery上传表单样式

jQuery解析xml文件详解

以上がjQuery を始めるにあたって知っておくべきことのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。