Java Web-JQuery学習
14684 ワード
Java Web-JQuery学習
JQueryコンセプト
JSフレームワークで、JSの開発を簡略化することができ、設計の目的は「write less,do more」であり、より少ないコードを書き、より多くのことをすることである.JSでよく使われるコードをカプセル化し、ドキュメント操作(DOM)、イベント処理、アニメーション操作を最適化
フレームワークとは?理論的に言えば、私たちは自分でJSファイルを定義して、いくつかのJSの実現を中に入れて、それからHTMLの中で
クイックスタートダウンロードJQueryファイル プロジェクトにjsファイル をインポートする を使用
JQueryのバージョン:1.x:ie 678と互換性があり、最も広く使用されています.このバージョンは公式に機能を更新せず、バグメンテナンス のみを行います.2.x、ie 6/7/8対応ですが、 を使う人は少ないです.3.x、最新のブラウザ のみをサポート
ここでは最新のバージョンを使用しています.このサイトからJQueryのすべてのバージョンの参照方法を見つけることができます.圧縮版の参照は導入に使用できます.非圧縮版は開発デバッグと自分で読むことができます.
例を挙げます.
JQueryを使用しない場合は、JSデフォルトメソッドを使用してdivオブジェクトを直接呼び出します.
$で取得したオブジェクトはJQueryオブジェクトと呼ばれ、直接取得したJSオブジェクトとは異なります.
変換に関する内容はコードに書きました.
類似したフィーチャーを持つ要素をフィルタするには
基本文法学習イベントバインド エントリ関数エントリ関数は、DOMドキュメントのロードが完了した後にデフォルトで実行される方法であり、JSコマンドをこの方法に書き込む利点は、このようにして、bodyの一番下にJSを書く必要がない(JSコードの実行時にオブジェクトが作成されていないことによる実行失敗の問題が発生しないことを保証できる)か、上記の例か、JSセクションをbodyの前に書く場合は、window.onloadと$(function)の違いに注意するには、エントリ関数に書く必要があります. ページの場合、window.onload()は1回しか定義できません.複数のバインドは前のページを上書きします.一方、$(function)は、複数の を定義することができる.
CSSスタイル制御 セレクタの分類コンテンツ関連アクション html():要素のラベルボディコンテンツ を取得または設定する. text():要素のラベルボディ純テキスト内容 を取得または設定する. val():要素のvalue属性値 を設定または取得します.
取得または設定とは?パラメータを渡すのは設定であり、パラメータを渡さず、戻り値のみを受け入れるのはを取得する.プロパティ関連アクション 汎用属性アクション attr():要素の属性値 を取得または設定します. removeAttr():属性 を削除 prop():要素の属性値 を取得または設定します. removeProp():属性 を削除
attr()とprop()の違い:要素の固有属性が操作されている場合はprop()を使用することを推奨します.カスタム属性はattr() を使用することを推奨します.
なお、属性を取得する場合は、属性名のみを入力すればよい.属性を設定するときは、属性名と属性値を同時に入力する. classプロパティに対する操作 addClass():class属性値 を追加 removeClass():class属性値 を削除 toggleClass():class属性を切り替える操作はよく理解できません:概況的には、存在するか削除するか;存在しない場合に追加:たとえばtoggleClass(「one」)は、要素にclass=「one」が存在する場合に削除されます.存在しない場合は、追加します.アトリビュートの追加(Add Attributes)と現在のアトリビュートの削除(Delete Current Attributes)を組み合わせた操作を繰り返し実行できます. CRUD(添削改ざん)関連操作は、表などの操作に用いることができる append():親要素が末尾に子要素を追加する例:オブジェクト1.append(オブジェクト2):オブジェクト1の要素の内部末尾にオブジェクト2を追加することを示すオブジェクト1とオブジェクト2は一般的にセレクタであり、つまりセレクタが返すオブジェクトを使用するので、もちろんセレクタで取得してからこれらの方法に渡すこともできますが、ただ普通はそうする必要はありません prepend():親要素が子要素を追加する先頭 appendTo():たとえば、オブジェクト1.appendTo(オブジェクト2):オブジェクト2の内部の末尾にオブジェクト1を追加します.オブジェクト2は親要素 です. prependTo():同理 after():特定の要素の後に要素を追加する例:オブジェクト1.after(オブジェクト2)の場合、オブジェクト2はオブジェクト1の後に追加され、オブジェクト1とオブジェクト2は兄弟関係 である. before():特定の要素の前に要素を追加 insertAfter()たとえば、オブジェクト1.insertAfter(オブジェクト2)は、オブジェクト1をオブジェクト2の背面 に追加する. insertBefore():after()before()と区別して、誰が誰に加わるかの関係が異なる remove():削除要素例:remove(要素1)、削除要素1 empty():要素のすべての子孫要素を空にします.この要素は空でない であることに注意してください.
基本ケース隔行色替え
アニメーション(Animation) jquery標準のバインド方法jqオブジェクト.イベント方法(コールバック関数) onバインドイベント/off jqオブジェクトのバインド解除.on(「イベント名」、コールバック関数)jqオブジェクト.off(「イベント名」)は、イベント名を入力しないとデフォルトですべてのイベントのバインド解除例である イベント切替:jq.toggle(fn 1,fn 2)一度クリックしてfn 1を実行し、さらにクリックしてfn 2を実行する.もちろん2つのイベントしか例がないわけではない:
JQueryコンセプト
JSフレームワークで、JSの開発を簡略化することができ、設計の目的は「write less,do more」であり、より少ないコードを書き、より多くのことをすることである.JSでよく使われるコードをカプセル化し、ドキュメント操作(DOM)、イベント処理、アニメーション操作を最適化
フレームワークとは?理論的に言えば、私たちは自分でJSファイルを定義して、いくつかのJSの実現を中に入れて、それからHTMLの中で
クイックスタート
JQueryのバージョン:
ここでは最新のバージョンを使用しています.このサイトからJQueryのすべてのバージョンの参照方法を見つけることができます.圧縮版の参照は導入に使用できます.非圧縮版は開発デバッグと自分で読むことができます.
例を挙げます.
JQueryを使用しない場合は、JSデフォルトメソッドを使用してdivオブジェクトを直接呼び出します.
div1
div2
//1.
var div1 = getElementByID("div1");
var div2 = getElementByID("div2");
alert(div1.innerHTML);
alert(div2.innerHTML);
div1
div2
// JQuery div
//$
var div1=$("#div1");
alert(div1);
// , JS
alert(div1.html());
var div2=$("#div2");
$で取得したオブジェクトはJQueryオブジェクトと呼ばれ、直接取得したJSオブジェクトとは異なります.
変換に関する内容はコードに書きました.
div1
div2
// div
var divs = document.getElementsByTagName("div");
// ： divs div "aaa"
// JS ：
for (var i=0;i<divs.length;i++){
divs[i].innerHTML="aaa";
}
// JQuery
var $divs=$("div");
// JQuery， “bbb"
$divs.html("bbb");
/*
$divs.innerHTML="bbb";// ，
// JQuery JS
// JQuery JS ，
*/
/*
1.JQuery JS
JQuery ， ：
<JQuery >[ ], <JQuery >.get( )
*/
/*
2.JS JQuery :
$(<JS >)
*/
類似したフィーチャーを持つ要素をフィルタするには
基本文法学習
div1
div2
// b1
//1. b1
var $b1 = $("#b1");
//2.
$b1.click(function () {
alert("abc");
})
$(function(){
// b1
//1. b1
var $b1 = $("#b1");
//2.
$b1.click(function () {
alert("abc");
})});
div1
div2
JS ， :
window.onload=function(){
}取得または設定とは?パラメータを渡すのは設定であり、パラメータを渡さず、戻り値のみを受け入れるのはを取得する.
attr()とprop()の違い:
なお、属性を取得する場合は、属性名のみを入力すればよい.属性を設定するときは、属性名と属性値を同時に入力する.
基本ケース隔行色替え
// 1
$("#div1").css("background-color","red");
// 2
$("#div1").css("backgroundColor","red");1.
1. （ ）
* ： $("html ")
2. id
* ： $("#id ") id
3.
* ： $(".class ") class
JS
4. ：
* ： $(" 1, 2....")
2.
1.
* ： $("A B ")， A B
2.
* ： $("A > B") A B
： ， ，
3.
1.
* ： $("A[ ]")
2.
* ： $("A[ =' ']")
3.
* ： $("A[ =' '][]...")
4.
1.
* ： :first
2.
* ： :last
3.
* ： :not(selector)
， SQL
4.
* ： :even ， 0
（ ），
5.
* ： :odd ， 0
6.
* ： :eq(index)
7.
* ： :gt(index)
8.
* ： :lt(index)
9.
* ： :header （h1~h6） ，
5.
1.
* ： :enabled
2.
* ： :disabled
3.
* ： :checked /
4.
* ： :selected
3 4
// ： pink， yellow
$(function () {
//1. tr， pink
$("tr:gt(1):odd").css("backgroundColor","pink");
/*
:
1. tr
2.gt(1) index 1
3.odd index
*/
//2. tr, yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
// ：
function selectAll(obj){
//
$(".itemSelect").prop("checked",obj.checked);
}
body ：
ID
アニメーション(Animation)
// ： qq ，
$(function () {
//1. img onclick
$("ul img").click(function(){
//2. p 。
// append($(this).clone()),
$(".word").append($(this).clone());
});
});
// ：
$(function () {
//toRight
$("#toRight").click(function () {
// ，append( option)
//option:selected selected option,
$("#rightName").append($("#leftName > option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo option，
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
1.
1. show([speed,[easing],[fn]])：
1. ：
1. speed： 。 ("slow","normal", "fast") ( ：1000)
2. easing： ， "swing"， "linear"
* swing： ， ，
* linear：
3. fn： ， 。
2. hide([speed,[easing],[fn]])：
3. toggle([speed],[easing],[fn])：
2.
1. slideDown([speed],[easing],[fn])：
2. slideUp([speed,[easing],[fn]])：
3. slideToggle([speed],[easing],[fn]):
3.
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
// div
function hideFn(){
/*$("#showDiv").hide("slow","swing",function(){
alert(" ...")
});*/
//
$("#showDiv").toggle(1000,"swing");
/*//
$("#showDiv").slideToggle("slow");
*/
/*//
$("#showDiv").fadeOut("slow");*/
}
// div
function showFn(){
/*$("#showDiv").show("slow","swing",function(){
alert(" ...")
});*/
/*
//
$("#showDiv").show(5000,"linear");
*/
/*
//
$("#showDiv").slideDown("slow");
*/
//
$("#showDiv").fadeIn("slow");
}
// div
function toggleFn(){
/*
//
$("#showDiv").toggle("slow");
*/
/*
//
$("#showDiv").slideToggle("slow");
*/
//
$("#showDiv").fadeToggle("slow");
}
/*
1. js
* for( ; ; )
2. jq
1. jq .each(callback)
2. JQuery( $).each(object, [callback])， JQuery
， object JQuery ， JS
3. for..of:jquery 3.0
*/
$(function () {
//1. ul li
var citys = $("#city li");
/* //2. li
for (var i = 0; i < citys.length; i++) {
if(" " == citys[i].innerHTML){
//break;
//continue; // ，
}
//
alert(i+":"+citys[i].innerHTML);
}*/
//2. jq .each(callback)
// each 。
/*
callback
*/
/*
citys.each(function (index,element) {
// li
//3.1 li this，this li
//alert(this.innerHTML);
//alert($(this).html());
//
//3.2 li index（ ） element（ ）
// function ， .each function，index element each ，
//alert(index+":"+element.innerHTML);
// element JS ， JQuery ， JQuery ， ：
//alert(index+":"+$(element).html());
// ，
if(" " == $(element).html()){
// break ， .each API ：
// function false， (break)。
// true， ， (continue)
return true;
}
alert(index+":"+$(element).html());
});*/
//3 $.each(object, [callback])
/*
， this ，
*/
$.each(citys,function () {
alert($(this).html());
});
//4. for ... of:jquery 3.0
/*for(li of citys){
alert($(li).html());
}*/
});
$(function () {
//1. name ， click
/*$("#name").click(function () {
alert(" ...")
});*/
// name 。
/*$("#name").mouseover(function () {
alert(" ...")
});
$("#name").mouseout(function () {
alert(" ...")
});*/
/* // ，
$("#name").mouseover(function () {
alert(" ...")
}).mouseout(function () {
alert(" ...")
});*/
alert(" ...")
//$("#name").focus();//
// .submit();//
});