bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptjQueryの基本的なセレクターを適当に試してみるJavaScript2011.12.13jQueryの基本的なセレクターを適当に試してみる自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセレクター構文です。セレクターは自分が取り出したいHTMLの要素を取り出して、メソッドなどを利用して好きなように操作できるのでまずはここからっすね。[ads_center]jQueryを始めるための基本からセレクター操作までまずはjQueryを読み込みます。APIを利用して常に最新のjQueryを読み込むようにしてみます。'1')</script>これで常に最新のjQueryを読み込むことができます。次にjQueryの基本的な書き方です。$('セレクター').メソッド});例えば以下のように記述すると。'#ccc');});HTML<p>サンプル</p>p要素の背景色を操作できます。idやクラスが指定された要素もcssを書くように指定することで自由に取得できます。<li>リスト</li></ul>これでlistというクラスがついている要素を操作できます。してみるとCSSを理解していることが前提になりますね。ちなみに上記のcssメソッドの基本構文はこんな感じ。値)親要素の配下を取り出す場合と親要素の直下を取り出す場合ちょっと注意が必要な要素の指定です。親要素の直下を取り出すには親要素の配下すべてを取り出す場合と間違えそうなので気をつけなきゃいけないですね。</div></div>この場合はdiv#parent配下にあるすべてのp要素を取り出します。次にdiv#parentの直下のみを取り出す場合です。pという指定で#parentの直下にある要素を取得することができます。最初と最後の要素を取得するfirst/lastとfirst-child/last-childの違いこれもちょっと混乱しそうな感じです。具体的には以下のような違いになります。<li>リスト</li></ul>上記ではli要素にfirst/lastを指定しています。この場合、実際にブラウザで確認してみるとこのように適用されます。要素全体に対しての最初と最後のli要素が取得されます。次にfirst-child/last-childを見てみます。<li>リスト</li></ul>first-child/last-childを指定してブラウザで確認してみるとこのようになります。この場合は各ul単位のli要素の最初と最後に適用されます。n番目の要素を取得してみる最初と最後の要素は取り出すことができたので次はn番目の要素を取得してみます。n番目の要素を取得するにはeq(index)を使います。<li>リスト</li></ul>ブラウザで見るとこんな感じです。ここで注意が必要なのは指定するindexは0から開始されることです。1を指定すれば視覚的には2番目の要素に適用されます。ちなみに2つ目のulの子要素を取り出す場合は以下のようにすると取得できます。'#ccc');});idやクラスを指定がない場合には活用できそうですね。他にもたくさん数があるので今日はここまでにしときます。時間があったら他のも試してみます。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。