[JQ]メモ1_JQ入門&セレクタ
26672 ワード
->クラスライブラリの概要->jQueryの概要->jQuery環境の構成->$(document).readyとwindow.onloadの違い->jQueryセレクタ基本セレクタ、階層セレクタ、フィルタセレクタコンテンツフィルタセレクタ、属性フィルタセレクタ、サブ要素フィルタセレクタ
一、クラスライブラリの簡単な説明
JavaScriptフレームワークの多くは、セレクタ(Selector)DOMがDOM操作ユーティリティ関数イベント処理Ajaxを巡回する機能を備えています.
フロントエンド開発フレームワーク:Prototype Dojo YUI Ext JS MooTools Bootstrap jQuery jQuery Mobile…
二、jQueryの紹介
1、jQueryは、JavaScriptとクエリー(Query)すなわちJavaScriptの開発を支援するクラスライブラリである.2、jQueryはマルチブラウザ対応のjavascriptライブラリであり、核心理念はwrite less、do more(より少なく、より多く)である.3、jQueryは2006年1月にアメリカ人John Resigがニューヨークのbarcキャンプで発表し、世界各地から多くのJavaScriptの達人が参加し、Dave Methvinがチームを率いて開発した.4、現在、jQueryは最も流行しているjavascriptライブラリとなっており、世界トップ10000のアクセスが最も多いサイトのうち、55%以上がjQueryを使用している.
三、jQuery環境の配置
1、jQueryクラスライブラリを取得してjQuery公式サイトまたは他のプラットフォームにアクセスしてjQueryファイルをダウンロードする通常各バージョン番号は2つのバージョンが生産版をダウンロードすることができる-実際のウェブサイトに使用され、開発版を簡素化し圧縮された-テストと開発に使用され、圧縮されていない、読み取り可能なコード2.0とその後のバージョンであり、IE 6 7 8と互換性がない
2、ページにjQueryを導入する
jsでjqクリックイベントをシミュレートする:
四、jQuery実行状況1、jQueryライブラリにおいて、jQueryの略語形式は、例えば、$("#nan")=jQuery("#nan")
2、ブラウザがDOMを解析した後、ready括弧内の関数を実行する
3、readyとonloadの簡単な区別実行タイミングは個数略記$(document)を書く.ready(function(){...})は、$(function(){...})と略記することができる.
五、jQuery優勢
軽量レベルの強力なセレクタ優れたDOM操作信頼性の高いイベント処理メカニズム完備したAjax優れたブラウザ互換性チェーン操作方式豊富なプラグインで完備したドキュメントオープンソースをサポート
六、jQueryセレクタ
1、jQueryセレクタの優勢簡潔な書き方はCSS 1からCSS 3セレクタの完備した処理メカニズム2、jQueryセレクタの分類基本セレクタ階層セレクタフィルタセレクタをサポートする
基本セレクタ:
("#test")idがtestの要素を選択-単一要素(".test")classがtestの要素をすべて選択-集合要素$("p")すべてを選択
要素-集合要素(∗)すべての要素を選択-集合要素(div,span,p.myClass)すべてを選択
,
classをmyClassと持つ
ラベルの一級グループ要素-集合要素
階層セレクタ:
$(「div span」)選択
のすべて
(子と孫のすべての要素を選択できます)要素-集合要素$(「div>span」)選択
要素の下の要素名は
のサブエレメント-コレクションエレメント$(.one+div)classをoneの次のエレメントとして選択
同世代要素-集合要素
$(「#two~div」)idがtwoの要素の後ろにあるすべてを選択
同世代要素-集合要素
基本フィルタセレクタ:
$(「div:first」)すべてを選択
要素の1番目
要素-単一の要素
$(「div:last」)すべてを選択
要素の最後
要素-単一の要素
("input:not(.myClass))classがmyClassではない要素を選択-集合要素(「input:even」)索引を選択(索引は0から0は偶数)偶数の要素-集合要素
(「input:odd」)選択インデックス(インデックスは0から)が奇数の要素-集合要素(「input:eq(1))選択インデックス(インデックスは0から)が1に等しい要素-単一要素
(「input:gt(1))索引(索引0から)を選択1より大きい要素-集合要素(「input:it(1))索引(索引0から)を選択1より小さい要素-集合要素
コンテンツフィルタセレクタ:
$('div:contains(「テスト」)テキスト「テスト」を含む
要素-集合要素
$(「div:empty」)サブ要素とテキストを含まないものを選択
空の要素-集合要素
$(「div:has(p))選択内容
エレメント
要素-集合要素
$(「div:parent」)サブエレメントまたはテキストエレメントを持つ
要素-集合要素
属性フィルタセレクタ:
(「div[id])属性idを持つdiv要素を選択-集合要素(「div[title=test])属性titleを「test」と選択)
要素-集合要素
$(「div[title!=test」)選択属性titleが「test」に等しくない
要素-集合要素
$(「div[title^=test」)属性titleを選択して「test」で始まる
要素-集合要素
(「div[title=test])属性titleを選択して「test」で終わる
要素-集合要素
$(「div[title*=test」)選択属性titleに「test」を含む
要素-単一の要素
(「div[id][title=‘test’」)属性idを持ち、属性titleが「test」で終わる
要素-集合要素
サブエレメントフィルタセレクタ:
(「div:nth−child(1))すべてのdivを選択し、親ラベルの最初のサブラベルであるdiv要素-集合要素(「ul li:first-child」)各ulの最初のli要素-集合要素(「ulli:last−child」)各ulの最後のli要素-集合要素(「ul li:only-child」)を選択するulで唯一のサブ要素であるli要素-集合要素を選択する
セレクタの例について(1つずつ試してもいい):
1、first-childと:firstの違い
2、nth-child(index)と:eq(index)の違いindex 1からindex 0から$(‘div:nth-child(1)’)すべて選択
で親ラベルの最初のサブラベルのdivです.
->それぞれ
親ラベル&親ラベルi番目のサブラベルは、
->選択される
$(‘div:eq(0)’);最初のdivを選択します.
nth-child(2 n)&nth-child(2 n+1)&nth-child(3 n+1)–nがどこから始まるかを理解します.
一、クラスライブラリの簡単な説明
JavaScriptフレームワークの多くは、セレクタ(Selector)DOMがDOM操作ユーティリティ関数イベント処理Ajaxを巡回する機能を備えています.
フロントエンド開発フレームワーク:Prototype Dojo YUI Ext JS MooTools Bootstrap jQuery jQuery Mobile…
二、jQueryの紹介
1、jQueryは、JavaScriptとクエリー(Query)すなわちJavaScriptの開発を支援するクラスライブラリである.2、jQueryはマルチブラウザ対応のjavascriptライブラリであり、核心理念はwrite less、do more(より少なく、より多く)である.3、jQueryは2006年1月にアメリカ人John Resigがニューヨークのbarcキャンプで発表し、世界各地から多くのJavaScriptの達人が参加し、Dave Methvinがチームを率いて開発した.4、現在、jQueryは最も流行しているjavascriptライブラリとなっており、世界トップ10000のアクセスが最も多いサイトのうち、55%以上がjQueryを使用している.
三、jQuery環境の配置
1、jQueryクラスライブラリを取得してjQuery公式サイトまたは他のプラットフォームにアクセスしてjQueryファイルをダウンロードする通常各バージョン番号は2つのバージョンが生産版をダウンロードすることができる-実際のウェブサイトに使用され、開発版を簡素化し圧縮された-テストと開発に使用され、圧縮されていない、読み取り可能なコード2.0とその後のバージョンであり、IE 6 7 8と互換性がない
2、ページにjQueryを導入する
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
jsでjqクリックイベントをシミュレートする:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> *{margin:0;} div{ width:300px; height: 300px; background: #eee; } </style>
</head>
<body>
<div id="box"> </div>
</body>
<script> (function(){ function $(targetID){ var str=targetID.substring(0,1);// 0 1 if (str=='#') { var ID=targetID.replace(/#/g,'') var obj=document.getElementById(ID); obj.click=function(fn){ this.onclick=fn; } return obj; } } window.Jquery=$;// window.$=window.Jquery;// })(); Jquery('#box').click(function(){ alert('box1'); }); $('#box').click(function(){ alert('box2'); }); </script>
</html>四、jQuery実行状況1、jQueryライブラリにおいて、jQueryの略語形式は、例えば、$("#nan")=jQuery("#nan")
2、ブラウザがDOMを解析した後、ready括弧内の関数を実行する
3、readyとonloadの簡単な区別実行タイミングは個数略記$(document)を書く.ready(function(){...})は、$(function(){...})と略記することができる.
五、jQuery優勢
軽量レベルの強力なセレクタ優れたDOM操作信頼性の高いイベント処理メカニズム完備したAjax優れたブラウザ互換性チェーン操作方式豊富なプラグインで完備したドキュメントオープンソースをサポート
六、jQueryセレクタ
1、jQueryセレクタの優勢簡潔な書き方はCSS 1からCSS 3セレクタの完備した処理メカニズム2、jQueryセレクタの分類基本セレクタ階層セレクタフィルタセレクタをサポートする
基本セレクタ:
("#test")idがtestの要素を選択-単一要素(".test")classがtestの要素をすべて選択-集合要素$("p")すべてを選択
要素-集合要素(∗)すべての要素を選択-集合要素(div,span,p.myClass)すべてを選択
,
classをmyClassと持つ
ラベルの一級グループ要素-集合要素
階層セレクタ:
$(「div span」)選択
のすべて
(子と孫のすべての要素を選択できます)要素-集合要素$(「div>span」)選択
要素の下の要素名は
のサブエレメント-コレクションエレメント$(.one+div)classをoneの次のエレメントとして選択
同世代要素-集合要素
$(「#two~div」)idがtwoの要素の後ろにあるすべてを選択
同世代要素-集合要素
基本フィルタセレクタ:
$(「div:first」)すべてを選択
要素の1番目
要素-単一の要素
$(「div:last」)すべてを選択
要素の最後
要素-単一の要素
("input:not(.myClass))classがmyClassではない要素を選択-集合要素(「input:even」)索引を選択(索引は0から0は偶数)偶数の要素-集合要素
(「input:odd」)選択インデックス(インデックスは0から)が奇数の要素-集合要素(「input:eq(1))選択インデックス(インデックスは0から)が1に等しい要素-単一要素
(「input:gt(1))索引(索引0から)を選択1より大きい要素-集合要素(「input:it(1))索引(索引0から)を選択1より小さい要素-集合要素
コンテンツフィルタセレクタ:
$('div:contains(「テスト」)テキスト「テスト」を含む
要素-集合要素
$(「div:empty」)サブ要素とテキストを含まないものを選択
空の要素-集合要素
$(「div:has(p))選択内容
エレメント
要素-集合要素
$(「div:parent」)サブエレメントまたはテキストエレメントを持つ
要素-集合要素
属性フィルタセレクタ:
(「div[id])属性idを持つdiv要素を選択-集合要素(「div[title=test])属性titleを「test」と選択)
要素-集合要素
$(「div[title!=test」)選択属性titleが「test」に等しくない
要素-集合要素
$(「div[title^=test」)属性titleを選択して「test」で始まる
要素-集合要素
(「div[title=test])属性titleを選択して「test」で終わる
要素-集合要素
$(「div[title*=test」)選択属性titleに「test」を含む
要素-単一の要素
(「div[id][title=‘test’」)属性idを持ち、属性titleが「test」で終わる
要素-集合要素
サブエレメントフィルタセレクタ:
(「div:nth−child(1))すべてのdivを選択し、親ラベルの最初のサブラベルであるdiv要素-集合要素(「ul li:first-child」)各ulの最初のli要素-集合要素(「ulli:last−child」)各ulの最後のli要素-集合要素(「ul li:only-child」)を選択するulで唯一のサブ要素であるli要素-集合要素を選択する
セレクタの例について(1つずつ試してもいい):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<style> *{margin:0;padding:0;list-style: none;font-size: 24px;color:#333;} #wrap{width:360px; border:1px solid #666;} </style>
</head>
<body>
<div id="wrap">
<span> span1 </span>
<p> p1 </p>
<p id="p2"> p2 </p>
<p class="bg3 bgpink"> p3 </p>
<div>
<p> p4 </p>
<p> p4 </p>
</div>
<p class="bgblue"> p5 </p>
<p> p6 </p>
<p class="bgpink bg7"> p7 </p>
<div>
<h5> h5 </h5>
<p> p4 </p>
<span>2132</span>
</div>
<p class="bgblue bg8"> p8 </p>
<p style="height:20px;width:360px;"></p>
<p>
<span> span2 </span>
<span> span3 </span>
</p>
<p>
<a href="#"> a </a>
</p>
</div>
<span> span4 </span>
</body>
<script src="jquery-1.8.3.js"></script>
<script> /* */ /*$('#p2').css({'background':'blue'}); $('.bgpink').css({'background':'pink'}); $('p').css({'background':'red'}); $('*').css({'background':'green'}); // $('#p2,.bgpink,span').css({'background':'orange'});*/ /* */ // <div> <span> /*$('div span').css({'background':'blue'}); // <div> <span> $('div>span').css({'background':'green'}); // .bgpink p $('.bgpink+p').css({'background':'pink'}); // id p2 bgpink $('#p2~.bgpink').css({'background':'orange'});*/ /* */ /*$('p:first').css({'background':'blue'}); $('div:last').css({'background':'green'}); $('p:not(.bgpink)').css({'background':'pink'}); // ， 0 $('p:even').css({'background':'orange'}); // ， 0 $('p:odd').css({'background':'blue'});*/ // index <p> (index 0 ) /*$('p:eq(3)').css({'background':'blue'}); // index <p> (index 0 ) $('p:gt(3)').css({'background':'pink'}); // index <p> (index 0 ) $('p:lt(3)').css({'background':'orange'});*/ /* */ // “2” <p> // $('p:contains(2)').css({'background':'blue'}); // <p> // $('p:empty').css({'background':'green'}); // <span> <p> // $('p:has(span)').css({'background':'pink'}); // <p> ( ) // $('p:parent').css({'background':'orange'}); /* */ // $('p[class]').css({'background':'pink'}); // $('p[class=bgblue]').css({'background':'blue'}); // class bgpink <p> // $('p[class!=bgpink]').css({'background':'green'}); // class bgpink <p> // $('p[class^=bgpink]').css({'background':'red'}); // class bgpink <p> // $('p[class$=bgpink]').css({'background':'yellow'}); // class bgblue <p> // $('p[class*=bgblue]').css({'background':'blue'}); // <p> ????? // $("p[class$=bgpink][class=bgblue][id]").css({'background':'yellow'}); /* */ // 2 <p> (index 1 ) $('p:nth-child(2)').css({'background':'pink'}); // <p> (index 1 ) /*$('p:nth-child(even)').css({'background':'blue'}); // <p> (index 1 ) $('p:nth-child(odd)').css({'background':'yellow'}); // <div> <h5> $('div h5:first-child').css({'background':'orange'}); // <div> <p> $('div p:last-child').css({'background':'red'}); // ， 。 $('p a:only-child').css({'background':'green'});*/ </script>
</html>
<!-- 1、first-child ：first $(“ul li: first-child”) <ul> <li> -> <ul> -> <li>-> -> $(‘div:first’) div 。 2、nth-child(index) ：eq(index) index 1 index 0 $(‘div:nth-child(1)’) <div> div； -> <div> & i <div>-> $(‘div:eq(0)’); div； -->
1、first-childと:firstの違い
$(“ul li: first-child”) <ul> <li>
-> <ul> -> <li>-> ->
$(‘div:first’) div 。
2、nth-child(index)と:eq(index)の違いindex 1からindex 0から$(‘div:nth-child(1)’)すべて選択
で親ラベルの最初のサブラベルのdivです.
->それぞれ
親ラベル&親ラベルi番目のサブラベルは、
->選択される
$(‘div:eq(0)’);最初のdivを選択します.
nth-child(2 n)&nth-child(2 n+1)&nth-child(3 n+1)–nがどこから始まるかを理解します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> ul{ overflow: hidden; list-style: none; } ul li{ float: left; width:70px; height:70px; border-radius: 50%; background: red; } </style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script> $(function(){ // $('ul li:nth-child(2n)').css('background','blue');// 1 // $('ul li:nth-child(2n+1)').css('background','blue');// 0 // $('ul li:nth-child(3n)').css('background','blue');// 1 // $('ul li:nth-child(3n+1)').css('background','blue');// 0 $('ul li:nth-child(3n+2)').css('background','blue');// 0 }); </script>
</html>