jQuery の基礎学習ガイド_jquery

Web ページを開きます。HTML が完全にロードされていない場合、ページ上の要素を操作するのは安全ではありません。しかし、HTML がロードされているかどうかを監視する場合はどうでしょうか。 jQuery には $(document).ready() メソッドが用意されており、ready 内のコードは HTML が完全にロードされるまで実行されません。

$(document).ready(function() {
  console.log('ready!');
});

また、略記法もあります

$(function() {
  console.log('ready!');
});

$(document).ready() は匿名メソッドを実行するだけでなく、名前付きメソッドも実行します:

function readyFn() {
  // code to run when the document is ready
}


$(document).ready(readyFn);

要素を選択

jQuery の最も基本的な概念は、「いくつかの要素を選択し、それらを使って何かを行う」というものです。 jQuery は、ほとんどの CSS3 セレクターといくつかの非標準セレクターをサポートしています。詳細については、http://api.jquery.com/category/selectors/ を参照してください。

$('#myId');         // 此 ID 在页面中必须唯一
$('div.myClass');      // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');     // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');       // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');      // 所有正在执行动画的 DIV

注意事項

:visible や :hidden などの疑似セレクターを使用する場合、jQuery は CSS 内の表示値ではなく、それらがページ上に表示されるかどうかを実際に検出します。つまり、ページ上の要素の物理的な幅と高さが両方とも 0 より大きい場合、その要素は表示されます。ただし、

は例外で、要素が表示されるかどうかは 要素の CSS に基づいて決定されます。

jQuery の具体的な実装については、コードを参照してください:

jQuery.expr.filters.hidden = function( elem ) {
  var width = elem.offsetWidth, height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";

  // does the element have 0 height, 0 width,
  // and it's not a <tr>&#63;
  return width === 0 && height === 0 && !skip &#63;

    // then it must be hidden
    true :

    // but if it has width and height
    // and it's not a <tr>
    width > 0 && height > 0 && !skip &#63;

      // then it must be visible
      false :

      // if we get here, the element has width
      // and height, but it's also a <tr>,
      // so check its display property to
      // decide whether it's hidden
      jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
  return !jQuery.expr.filters.hidden( elem );
};

セレクターの結果セットに要素が含まれるかどうか

セレクターを実行した後、セレクターが要素を選択したかどうかを判断するには、次のように書くとよいでしょう。

if ($('div.foo')) { ... }

実際、これは書き方が間違っています。セレクターが要素を選択するかどうかに関係なく、セレクターはオブジェクトを返し、オブジェクトのブール値は true でなければならないため、このメソッドは機能しません。実際、セレクターによって返されるオブジェクトには length 属性があり、この属性によって、要素が選択されていない場合は 0-false が返されます。実際の要素数が返されます。

if ($('div.foo').length) { ... }

セレクターをキャッシュします

セレクターを作成するたびに、jQuery は大量のコードを実行する必要があります。同じセレクターを複数回使用する必要がある場合は、セレクターを繰り返し実行しないようにセレクターをキャッシュするのが最善です。

var $divs = $('div');

このコードでキャッシュ変数として使用されている変数名は $ で始まることに注意してください。このドル記号は JavaScript の単なる文字であり、ここでの $ の使用は単なる一般的な習慣ではありません。必須。

セレクターが変数にキャッシュされると、セレクターを呼び出すのと同じように、変数に対して jQuery メソッドを呼び出すことができます。

セレクターが選択できるのは現在ページ上の要素のみであることにも注意してください。セレクターの実行後に要素がページに追加された場合、明後日に追加された要素は前のセレクターには含まれません。セレクターは、ページに要素を追加した後に再度実行されます。

フィルター機能付きセレクター

セレクターの実行後、結果セット内のすべての要素が必要なものではない場合があるため、結果セットを再度フィルターする必要があります。

$('div.foo').has('p');     // 所有包含有 <p> 的 div.foo
$('h1').not('.bar');      // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first();       // 无序列表中的第一个元素
$('ul li').eq(5);        // 第六个

フォーム要素を選択

jQuery には、フォーム要素を選択するための非常に便利な疑似セレクターがいくつか用意されています。

:ボタン選択ボタン
:チェックボックス 複数のチェックボックスを選択
:チェックすると、選択したフォーム要素が選択されます
:disabled は無効なフォーム要素を選択します
:enabled は有効なフォーム要素を選択します
:file は type="file" のフォーム要素を選択します
:image は type="image" のフォーム要素を選択します
… …

$('#myForm :input'); // 选择所有可输入的表单元素

セレクターの使用方法

セレクターを実行した後、セレクター内のメソッドを呼び出すことができます。これらのメソッドは、ゲッターとセッターの 2 つのカテゴリに分類されます。ゲッターは結果セットの最初の要素のプロパティを返し、セッターは結果セットのすべての要素のプロパティを設定できます。

チェーン操作

jQuery セレクターのほとんどのメソッドは jQuery オブジェクト自体を返すため、メソッドを呼び出した後は、コンボのように、このメソッドで他のメソッドを引き続き呼び出すことができます。

$('#content').find('h3').eq(2).html('new text for the third h3!');

連鎖操作の場合、コードを読みやすい状態に保つことが重要です:

$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

チェーン操作中にセレクター内の要素が変更された場合は、$.fn.end メソッドを使用して元の結果セットに戻すことができます。

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
  .end() // 返回最初的结果集
  .eq(0)
    .html('new text for the first h3!');

链式操作非常好用，以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

jQuery 对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用 jQuery 方法对元素赋值的时候，它称为 setter，取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值，getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();  // getter

setter 返回的是 jQuery 对象，可以继续在这个对象上调用 jQuery 方法（链式操作），getter 仅放回我们想要的值，返回值不是 jQuery 对象，所以不能继续链式操作了。
jQuery 操作 CSS

jQuery 可以很方便的设置或取得元素的 CSS 属性。

    CSS 属性如果要想在 JavaScript 中使用，多要转换成骆驼命名法（camel cased），例如 CSS 中的 font-size 属性，在 JavaScript 中对应的是 fontSize，但是 jQuery 的 $.fn.css 方法对此做了特殊处理，无论使用哪种写法都可以。

例如：

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px');   // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值

上面可以看到，一次性给多个属性赋值的时候，实际上传入的是一个对象，这个对象中包含了一些可以表示 CSS 属性的键-值对，在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性

作为一个 getter，$.fn.css 确实很好用，但是应该尽量避免将其作为 setter 使用，因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类（class），然后用 JavaScript 将类应用到元素上即可：

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。

$('h1').width('50px');  // 设置所有 h1 元素的宽度
$('h1').width();     // 得到第一个 h1 元素的宽度

$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height();    // 得到第一个 h1 元素的高度

$('h1').position();   // 返回第一个 h1 元素
             // 的位置信息，此返回值是一个对象
             // 此位置是相对其父元素的位置的偏移量

这里只是对 jQuery 操纵元素大小及位置信息的简单举例。