Jquery学習ノート(一)
最近、本を読んでいるうちにメモをなくしやすいことに気づきました.いっそネットに記録しておくと便利です.
しかし、先に説明しなければなりません.本を読んでいる間のメモなので、多くのものは本の内容を抜粋して、自分で覚えやすいだけです.
JQueryは何ができますか?
ページの内容の一部を取得し、ページの外観を修正し、ページの内容を修正し、ページの中で相応のユーザーのインタラクションを行い、ページにアニメーションを加え、サービス側に戻る情報(つまりAJAX)をリフレッシュせず、共通のJavaScriptタスクを簡素化する.
JQueryは拡張をサポートし、大部分の流行しているブラウザのfeatureを抽象化することで、ブラウザ間での操作時の問題をある程度回避し、常に集合で操作する、すなわち暗黙的な反復であり、また最大の特徴はjqueryが実現するチェーン操作であり、1行で複数のオブジェクトを操作することができることである.
$()関数は実際にJQueryの工場であり、DOMの要素をJQueryオブジェクトにカプセル化し、JQuery操作を容易にする.$()関数はforループをして要素のセットにアクセスする必要はなく、括弧の中に入れたものは自動的にループしてJQueryオブジェクトとして格納されます
Jqueryセレクタ
A tag name:$('p') gets all paragrphs in the document.
An Id:$('#some-id') gets the single element in the document that has the corresponding some-id
A class:$('.some-class') gets all elements in the document that hava a class of some-class.
$('#slected-plays > li ') find each list item (li) that is a child (>) of an element with an ID of selected-plays
.addClass() .removeClass()
$(document).ready()(function(){})構造は、匿名関数であるページロード上で実行するコードを開始するために使用される.
XPathセレクタ
XMLドキュメントで異なる要素またはその値を指定する言語で、CSSがHTMLドキュメントで要素を指定する方法と似ています.JQueryライブラリは基本的なXPathセレクタをサポートしています.
$('a[@title]') select all the anchor with a title attribute
$('div[ol]') select all the div contain nothing but ol.
プロパティセレクタの解手は、正規表現の構文と同様に、文字列の開始(^)と終了($)を指定します.もちろん、asteris(*)は文字列の任意の位置を表すためにも使用されます.
$('a[@href^="mailto:"]') start with
$('a[@href$=".pdf"]') end with
$('a[@href*="mysite.com"]') contain
カスタムセレクタ
ほとんどのカスタムセレクタでは、キューの外で要素を選択できます.この構文はCSS擬似クラス構文,すなわちセレクタとコロンで始まる.
$('div.horizontal:eq(1)') Choose the second item {:gt :lt :not() :first :last}
$('tr:odd') $('tr:even')
Here,you should pay attention,the first item is 0,not 1,so even goes first.
$('td:contains("**")') this is obvious.
DOM遍歴方法
セレクタ式では、ほとんど同じ方法があります.
$('tr:odd').addClass('odd')
$('tr').filter(':odd').addClass('odd')
こまごましたものもあります
$('tr:not([th]):odd)')
#those tr which are not the ones only contain th and are odd in the sequence.
$('tr:not([th]):even')
#those tr which are not the ones only contain th and are even in the sequence.
.parent() .next() .find() .get()
$('#my-element').get(0) = $('#my-element')[0]