jQuery学習ノート--冒頭(一)
6124 ワード
メリット
前に書いた前端についてのものが少なく、ここ数日Jqueryについて書きたいと思っていたので、前のノートをめくり始め、次は重要だと思っていたものを断続的に整理し、jQueryを書き終わったら、逆戻りしてJavascriptを書きます.フロントフレームワークは多く、優れていますが、jQueryは絶対に理解する必要があります.そのメリットは以下の点です.
1.軽量級:大きさが30 KB未満;
2.強力なセレクタ:css 1からcss 3までのほとんどのセレクタをサポートする.
3.優れたDOM操作のパッケージ:多くのDOM操作を提供する;
4.信頼できるイベント処理メカニズム:後で紹介する;
5.完全なAjax:すべてのAjax操作を1つの$にカプセル化する.ajax()に;
6.トップレベルの変数を汚染しない:jQueryオブジェクトを1つだけ確立し、そのすべての関数方法はこのオブジェクトの下にあり、その別名$はいつでも制御権を渡し、他のオブジェクトを汚染しない.プロジェクトでは後期の衝突問題を考慮する必要はない.
7.優れたブラウザ互換性;
8.チェーン操作方式:同一のjQueryオブジェクト上で発生した一連の動作に対して、重複してオブジェクトを取得することなく、直接連写することができ、コードは優雅である.
9.暗黙反復:jQueryで「.myClass」クラスを持つすべての要素を見つけて非表示にすると、戻ってきた各要素をループする必要はありません.逆に、jQueryの方法は、単独のオブジェクトではなくオブジェクトの集合を自動的に操作するように設計されており、これにより、大量のループ構造が不要になり、コード量を大幅に減少させる.
10.動作層と構造層の分離:開発者はjQueryセレクタを使用して要素を選択し、要素に直接イベントを追加することができます.このような行為層と構造層を完全に分離する思想は、jQuery開発者とHTMLまたは他の開発者をそれぞれ担当させる.
11.豊富なプラグインサポート:誰が誰を使うか知っています.
12.完璧な文書:確かに少なくない.
13.オープンソース:誰が好きではありませんか.
次の文章では、これらのメリットを一つ一つ体得します.
コードスタイル
JQueryの優位性を話し終わって、コードのフォーマットの書く規範について話して、統一的なコードの編纂
習慣的なスタイルは、後日コードのメンテナンスに非常に有利です.次の2つの重要な記述仕様を示します.
一.チェーン操作スタイル
たとえば、次のナビゲーションバーがあります.HTMLコードは次のとおりです.
プロジェクト要件は、ナビゲーションバーを作成し、異なる章名リンクをクリックして、対応する内容を表示し、現在選択されている章をハイライト表示することです.このニーズに対してjQueryで記述されたコードは以下の通りである.
このコードの役割は、マウスをクリックしてclassにhas_を含めることです.childrenのエレメントにhightlightのclassを追加し、内部表示萨布埃莱曼,被克里克制的class上has_包含了children要素的同世代要素删除hightlight的class,同世代要素的内部萨布要素全部是非表示的。这是jQuery的强力检查操作,1行的コード完成了纳比赛车的功能。我们读了这个栏目,像读了一张文章,从前到后面,明白了他的意义。为了加强读书体验,我们写文章,需要通过不使用的意义进行评判化.因此,上述jQuery代码,可以再次改善如下。<script type="text/javascript"> //dom要素のロードが完了するのを待つ. $(document).ready(function(){ $(".has_children").click(function(){ $(this).addClass("highlight") //現在の要素にhighlightクラスを追加 .children("a").show().end() //サブノードのa要素を表示し、最後に操作した要素に再配置します。 .siblings().removeClass("highlight") //要素の兄弟要素を取得し、highlightクラスを削除します。 .children("a").hide(); //兄弟要素の下のa要素を隠す }); }); </script>在上述的分法中,有必要掌握4个情况的情况.1)如果不进行3个以上操作的话,可以直接写在1行中.科德如下。("li").show().unbind("click"); 2)关于同样的办法的很多操作,我推荐每次去写一个操作。コード如下所示.$(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast",0.6) .fadeTo("fast",1) .unbind("click") .click(function(){ //dosomething }); 如果进行过多的场合,按照功能分开支店,可以柔软变化3)关于复数的办公室的少量操作,每个办公室都能写一行.如果包含萨布要素的话,可以考虑适当的印度.科德如下。(this).addClass("hightlight") .children("li").show().end() .siblings().removeClass("hightlight") .children("li").hide(); }); 4)待遇复数对象的操作が多い场合,提案(2)(3)条目。二.没有说是在线路上追加评论,而是开发者每个人都很深。jQuery Object和DOM Object区别的DOM可以将各DOM作为1本的木制表现,作为1个DOM系列的DOM系列,在DOM系列上有什么词,这是DOM要素之一.JavaScript的getElementsTagName或getElementById可以取得要素ノード.如下所述,得到DOM要素是DOM办公室.DOM办公室可以使用JavaScript的电脑.var domObj = document.getElementById("id"); //DOMオブジェクトを取得 var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法JQuery Object,是jQuery用DOM Object拉皮的。jQuery Object是jQuery独自的.1件Object是jQuery Object,jQuery的メソド如下使用.("#foo").html(); //idがfooの要素内のhtmlコードを取得します。html()はjQueryの中の方法です。このコードは次のようなものです。document.getElementbyId("foo").innerHTML; jQuery办公室不能使用DOM办公室的电脑.例如$("#id").innerHTMLと$("#id").checked等的写法都错了,可以使用$("#id").html()と$("#id").可以换成像attr("checked")这样的jQueryメソード.因为泛用,即使是DOM橄榄球也不能使用jQuery的电脑.DOM ObjectとjQuery Objectの間の変更の一般的な習慣は、jQuery Objectが変数名の前に$記号を付け、var$cr=$("#cr")などのDOM Objectの違いを示す.在DOM办公室的情况下,没有付$记号。将jQuery办公室换成DOM办公室,有以下2种方法.1.jQuery Object在配列Object的情况下[index]可以取得.var $cr = $("#cr"); //jQueryオブジェクト var cr = $cr[0]; //DOMオブジェクト alert(cr.checked) //このcheckboxが選択されているかどうかを検出します。也有利用jQuery自身提供的get(index)电脑的方法.var $cr = $("#cr"); //jQueryオブジェクト var cr = $cr.get(0); //DOMオブジェクト alert(cr.checked) //このcheckboxが選択されているかどうかを検出するDOMオプションをjQueryオプションに変更するには、次の手順に従う.关于DOM办公室,首先用$()包围的话,如下就可以得到jQuery办公室.var cr = document.getElementById("cr"); //DOMオブジェクト var $cr = $(cr); //jQuery对象这个转换很重要,但有问题是面接的确率很高.
前に書いた前端についてのものが少なく、ここ数日Jqueryについて書きたいと思っていたので、前のノートをめくり始め、次は重要だと思っていたものを断続的に整理し、jQueryを書き終わったら、逆戻りしてJavascriptを書きます.フロントフレームワークは多く、優れていますが、jQueryは絶対に理解する必要があります.そのメリットは以下の点です.
1.軽量級:大きさが30 KB未満;
2.強力なセレクタ:css 1からcss 3までのほとんどのセレクタをサポートする.
3.優れたDOM操作のパッケージ:多くのDOM操作を提供する;
4.信頼できるイベント処理メカニズム:後で紹介する;
5.完全なAjax:すべてのAjax操作を1つの$にカプセル化する.ajax()に;
6.トップレベルの変数を汚染しない:jQueryオブジェクトを1つだけ確立し、そのすべての関数方法はこのオブジェクトの下にあり、その別名$はいつでも制御権を渡し、他のオブジェクトを汚染しない.プロジェクトでは後期の衝突問題を考慮する必要はない.
7.優れたブラウザ互換性;
8.チェーン操作方式:同一のjQueryオブジェクト上で発生した一連の動作に対して、重複してオブジェクトを取得することなく、直接連写することができ、コードは優雅である.
9.暗黙反復:jQueryで「.myClass」クラスを持つすべての要素を見つけて非表示にすると、戻ってきた各要素をループする必要はありません.逆に、jQueryの方法は、単独のオブジェクトではなくオブジェクトの集合を自動的に操作するように設計されており、これにより、大量のループ構造が不要になり、コード量を大幅に減少させる.
10.動作層と構造層の分離:開発者はjQueryセレクタを使用して要素を選択し、要素に直接イベントを追加することができます.このような行為層と構造層を完全に分離する思想は、jQuery開発者とHTMLまたは他の開発者をそれぞれ担当させる.
11.豊富なプラグインサポート:誰が誰を使うか知っています.
12.完璧な文書:確かに少なくない.
13.オープンソース:誰が好きではありませんか.
次の文章では、これらのメリットを一つ一つ体得します.
コードスタイル
JQueryの優位性を話し終わって、コードのフォーマットの書く規範について話して、統一的なコードの編纂
習慣的なスタイルは、後日コードのメンテナンスに非常に有利です.次の2つの重要な記述仕様を示します.
一.チェーン操作スタイル
たとえば、次のナビゲーションバーがあります.HTMLコードは次のとおりです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-5-1</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
</head>
<body>
<div id="menu">
<div class="has_children">
<span> 1 - jQuery</span>
<a>1.1-JavaScript JavaScript </a>
<a>1.2- jQuery</a>
<a>1.3- jQuery </a>
<a>1.4-jQuery DOM </a>
<a>1.5- jQuery </a>
<a>1.6-jQuery </a>
<a>1.7- </a>
</div>
<div class="has_children">
<span> 2 -jQuery </span>
<a>2.1-jQuery </a>
<a>2.2-jQuery </a>
<a>2.3-jQuery </a>
<a>2.4- jQuery </a>
<a>2.5- </a>
<a>2.6- —— </a>
<a>2.7- ？</a>
<a>2.8- </a>
</div>
<div class="has_children">
<span> 3 -jQuery DOM </span>
<a>3.1-DOM </a>
<a>3.2-jQuery DOM </a>
<a>3.3- —— </a>
<a>3.4- </a>
</div>
</div>
</body>
</html>プロジェクト要件は、ナビゲーションバーを作成し、異なる章名リンクをクリックして、対応する内容を表示し、現在選択されている章をハイライト表示することです.このニーズに対してjQueryで記述されたコードは以下の通りである.
<script type="text/javascript">
// dom .
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>このコードの役割は、マウスをクリックしてclassにhas_を含めることです.childrenのエレメントにhightlightのclassを追加し、内部表示萨布埃莱曼,被克里克制的class上has_包含了children要素的同世代要素删除hightlight的class,同世代要素的内部萨布要素全部是非表示的。这是jQuery的强力检查操作,1行的コード完成了纳比赛车的功能。我们读了这个栏目,像读了一张文章,从前到后面,明白了他的意义。为了加强读书体验,我们写文章,需要通过不使用的意义进行评判化.因此,上述jQuery代码,可以再次改善如下。<script type="text/javascript"> //dom要素のロードが完了するのを待つ. $(document).ready(function(){ $(".has_children").click(function(){ $(this).addClass("highlight") //現在の要素にhighlightクラスを追加 .children("a").show().end() //サブノードのa要素を表示し、最後に操作した要素に再配置します。 .siblings().removeClass("highlight") //要素の兄弟要素を取得し、highlightクラスを削除します。 .children("a").hide(); //兄弟要素の下のa要素を隠す }); }); </script>在上述的分法中,有必要掌握4个情况的情况.1)如果不进行3个以上操作的话,可以直接写在1行中.科德如下。("li").show().unbind("click"); 2)关于同样的办法的很多操作,我推荐每次去写一个操作。コード如下所示.$(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast",0.6) .fadeTo("fast",1) .unbind("click") .click(function(){ //dosomething }); 如果进行过多的场合,按照功能分开支店,可以柔软变化3)关于复数的办公室的少量操作,每个办公室都能写一行.如果包含萨布要素的话,可以考虑适当的印度.科德如下。(this).addClass("hightlight") .children("li").show().end() .siblings().removeClass("hightlight") .children("li").hide(); }); 4)待遇复数对象的操作が多い场合,提案(2)(3)条目。二.没有说是在线路上追加评论,而是开发者每个人都很深。jQuery Object和DOM Object区别的DOM可以将各DOM作为1本的木制表现,作为1个DOM系列的DOM系列,在DOM系列上有什么词,这是DOM要素之一.JavaScript的getElementsTagName或getElementById可以取得要素ノード.如下所述,得到DOM要素是DOM办公室.DOM办公室可以使用JavaScript的电脑.var domObj = document.getElementById("id"); //DOMオブジェクトを取得 var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法JQuery Object,是jQuery用DOM Object拉皮的。jQuery Object是jQuery独自的.1件Object是jQuery Object,jQuery的メソド如下使用.("#foo").html(); //idがfooの要素内のhtmlコードを取得します。html()はjQueryの中の方法です。このコードは次のようなものです。document.getElementbyId("foo").innerHTML; jQuery办公室不能使用DOM办公室的电脑.例如$("#id").innerHTMLと$("#id").checked等的写法都错了,可以使用$("#id").html()と$("#id").可以换成像attr("checked")这样的jQueryメソード.因为泛用,即使是DOM橄榄球也不能使用jQuery的电脑.DOM ObjectとjQuery Objectの間の変更の一般的な習慣は、jQuery Objectが変数名の前に$記号を付け、var$cr=$("#cr")などのDOM Objectの違いを示す.在DOM办公室的情况下,没有付$记号。将jQuery办公室换成DOM办公室,有以下2种方法.1.jQuery Object在配列Object的情况下[index]可以取得.var $cr = $("#cr"); //jQueryオブジェクト var cr = $cr[0]; //DOMオブジェクト alert(cr.checked) //このcheckboxが選択されているかどうかを検出します。也有利用jQuery自身提供的get(index)电脑的方法.var $cr = $("#cr"); //jQueryオブジェクト var cr = $cr.get(0); //DOMオブジェクト alert(cr.checked) //このcheckboxが選択されているかどうかを検出するDOMオプションをjQueryオプションに変更するには、次の手順に従う.关于DOM办公室,首先用$()包围的话,如下就可以得到jQuery办公室.var cr = document.getElementById("cr"); //DOMオブジェクト var $cr = $(cr); //jQuery对象这个转换很重要,但有问题是面接的确率很高.