jQuery の基本フィルター selector_jquery の使用の概要-jsチュートリアル-php.cn

コードをコピー コードは次のとおりです。 1. 単純なフィルター セレクター: 特定の種類のフィルター ルールに従って要素を照合し、コロン (:) 初めに; 単純なフィルター セレクターは最も広く使用されているタイプのフィルター セレクターです jQuery セレクターの詳細な説明 取得されたページ内のさまざまな要素に従って、jQuery セレクターは次のように分類できます。セレクター、階層選択 セレクター、フィルター セレクター、フォーム セレクターの 4 つのカテゴリがあります。このうち、フィルタ セレクタには、単純フィルタ セレクタ、コンテンツ フィルタ セレクタ、可視性フィルタ セレクタ、属性フィルタ セレクタ、子要素フィルタ セレクタ、フォーム オブジェクト属性フィルタ セレクタの 6 種類があります。 title>jQuery 基本フィルター セレクターを使用する タグを設定します。ユーザーはテーマを表示し、 タグを作成し、その中に 4 つの を配置し、アニメーション効果を実行する タグを作成します。単純なフィルター セレクターを通じて要素を取得し、選択した要素のクラス名を変更して、その選択状態を強調表示します。 ; body{font-size:12px;text-align:center;} div{width:240px ;height: 83px;border:solid 1px #eee} 彼{font-size:13px;} ul{list-style-type:none;padding:0px} .DefClass,.NotClass{ height:23px ;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee} .GetFocus{width:58px;border:solid 1px #666;背景色:#eee} #spnMove{幅:234px;高さ:23px;line-height:23px;} ; $(function () { //最初の要素のカテゴリを追加します $('li:first').addClass('GetFocus'); }) $ (function ( ) { //最後の要素のカテゴリを追加します $('li:last').addClass('GetFocus') }) $(function () { //すべての要素を削除します指定されたセレクターに一致するカテゴリ $('li:not(.NotClass)').addClass('GetFocus') }) $(function () { //偶数のすべての要素カテゴリを追加します0 から数えてインデックス値 $('li:even').addClass('GetFocus'); }) $(function () { //奇数のインデックス値を持つすべての要素カテゴリを追加します。 0 から数えます $('li:odd').addClass('GetFocus'); }) $(function () { //指定されたインデックス値の要素カテゴリに 1 を追加します、 0 から数えます $('li:eq(1)').addClass('GetFocus'); }) $(function () { //指定されたインデックスより大きいすべての要素カテゴリを追加します0 から数えて値 $('li:gt(1)').addClass('GetFocus') }) $(function () { // 0 から数えて指定されたインデックス値 $('li:lt(4)').addClass('GetFocus') }) $(function () { //タイトル要素カテゴリを追加します。 🎜>$('div h1').css('width', '238'); $(':header').addClass('GetFocus'); $(関数) () { animateIt(); //アニメーション効果要素カテゴリを追加 $('#spnMove:animated').addClass('GetFocus'); }) function animateIt() { //アニメーション効果 $('#spnMove').slideToggle('slow', animateIt); ; > アイテム 1 アイテム 2 3 スパン> >