https://jquery.com とは,・・・.
Web サーバは使わずに,パソコンにファイルを置いていろいろと試してみる.
展開すると,jquery-starterkit という名前でディレクトリができる.
これで,「スターターキット」の準備ができた.
これでダウンロードはうまくいったことが確認できる.
■ 最初,custom.js は次のようになっています(つまり空です). この custom.js を書き換えて,jQuery のいろいろな機能を試してみます.
例えば,a 要素のクリック時に,アラート (alert) 表示
jQuery(document).ready(function() {
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
})
});
■ 実行結果の例
どこでもいいのでリンクをクリックすると,アラートが出る.
「#orderedlist」と記述しているので,idがorderedlistであるものが対象になる.
■ 要するに,タグの中で「id="orderedlist"」と書いている部分にマッチするということ.
それを,スタイルシートに記述された クラス「red」に変化させる(だから赤く表示される).starterkit のファイル screen.css にすでにクラス「red」が記述済みであることに注意.
jQuery(document).ready(function() {
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
});
■ 実行結果の例
今度は「blue」も追加.
jQuery(document).ready(function() {
$(document).ready(function() {
$("#orderedlist").addClass("red");
$("#orderedlist > li").addClass("blue");
});
});
■ 実行結果の例
「li:last」なので,li の最終要素
jQuery(document).ready(function() {
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
});
■ 実行結果の例
「3. Third element」にマウスカーソルを合わせると色が変わる
まずは,繰り返し処理の例。
「.find("li").each(function(i)」なので,繰り返し処理
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});
■ 実行結果の例
「BANG ...」のような文字列が追加されている.
ある文字をクリックすると,フォームデータが消えるような処理.
jQuery(document).ready(function() {
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
});
■ 実行結果の例
「Reset!」をクリックするとデータが消える.
not を使い処置対象を除外.下記の例では,ul 要素を子に持つもの除外している。
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});
■ 実行結果の例
「Li with child ul」は除外ざれている.
XPath を書いて要素を指定.「[name]」の部分が XPath
$(document).ready(function() {
$("a[name]").css("background", "#f00" );
});
■ 実行結果の例
「Go to button」の行のみが色が変わる.
$(document).ready(function(){
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
■ 実行結果の例
<script src="jquery.tablesorter.js"></script>
$(document).ready(function(){
$("#large").tablesorter();
});
$(document).ready(function() {
$("#large").tablesorter({
// striping looking
widgets: ['zebra']
});
});