私とJSのあれらの古い事(3)
10646 ワード
JQueryの概要
// CSS ：
div{ background-color:red }
// jQuery ：
$("div").css("background-color","red");
// CSS ：
#d1{ background-color:red }
// jQuery ：
$("#d1").css("background-color","red");
1.x–一般的なブラウザ、およびIE 6+以上のバージョンをサポートします.x–共通ブラウザ、およびIE 9+以上のバージョン3をサポートする.x–共通ブラウザをサポートし、IE 9+以上のバージョンjQueryの欠点:jQueryの高バージョンは低バージョンと互換性がありません.これは、jQueryがアップグレード時に内部最適化を行うほか、いくつかの方法を追加または削除するためです.高バージョンにアップグレードすると、以前のコードの一部が実行できない可能性があります.
1.JQuery
$
** JQuery**は、 び し()が び しjQuery()と である、この は、 のhtml を むjQueryオブジェクトを し、jQueryで するメソッドまたは を び してこれらの を することができる.
$(function(){...}) Windowsに です.onloadイベント
$(function(){
//
});
JQuery JS
なぜ が なのかjQueryはjsの なフレームワークである、 に$()で1つのjQueryオブジェクトを すことができ、jQueryが する やメソッドでその を することができるが、jQueryオブジェクトでjsの やjsのメソッドを び すことはできない. にJSオブジェクトからjQueryの やjQueryメソッドを び すこともできません.そうしないと び しが ってしまいます!!
JQuery
//
$(function(){
//JQuery div
alert($('#hello').html());
//========== JS JQuery =========//
var div = document.getElementById("hello");
alert($(div).html());
//========== JQuery JS =========//
var info = $('#hello');
alert(info.html());
});
Hello JQuery!
2.JQueryセレクタ
きほんセレクタ
1.エレメント名セレクタ:エレメント名に基づいて指定した名前のエレメントフォーマットを選択します:$('エレメント名')
//1、 #FF69B4" id="b1"
/* b1 , b1 */
$('#b1').click(function(){
//css(" "," ")
$("div").css("background","#FF69B4");
});
2. ： class , class
：$('.class ')
//3、 class mini #FF0033" id="b3"
/* b3 , b3 */
$('#b3').click(function(){
$('.mini').css("background","#FF0033");
});
3.IDセレクタ: のid に づいて、 のidを つ フォーマット:$("#id ")を させる//2、 id one #9ACD32" id="b2"
/* b2 , b2 */
$('#b2').click(function(){
$('#one').css("background","#9ACD32");
});
4.マルチエレメントセレクタ: のセレクタで したエレメントのフォーマットに する$(「セレクタ1,セレクタ2,...セレクタn」)//4、 id two ,id one ，class mini #006400" id="b4"
/* b4 , b3 */
$("#b4").click(function(){
$("span,#two,#one,.mini").css("background-color", "#006400");
});
レベルセレクタ
1. セレクタ :$(「 」)//1、 div span #FF0000" id="b1"
/* b1 , b1 */
$("#b1").click(function(){
$("div span").css("background-color", "#FF0000");
});
2.サブエレメントセレクタ :$(「 エレメント」>「サブエレメント」)//2、 body div #D8C93B" id="b2"
/* b2 , b2 */
$("#b2").click(function(){
$("body>div").css("background-color","#D8C93B");
});
3. の セレクタ :$(「 + 」)//3、 id two div #0000FF" id="b3"
/* b3 , b3 */
$("#b3").click(function(){
$("#two+div").css("background-color","#0000FF");
});
4.$("#two~div"):idがtwo の ろにあるすべての div に する//4、 id two div #76AA0F" id="b4"
/* b4 , b4 */
$("#b4").click(function(){
$("#two~div").css("background-color","#76AA0F");
});
5.いくつかの
siblings()
する のすべての を します.
next/prev
する の ろ/ に する を します.
nextAll/prevAll
する の ろ/ のすべての を します.//5、 id two div #FF6347" id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css("background-color", "#FF6347");
});
きほんフィルタセレクタ
(フィルタについては )フォーマット:== :フィルタ ==
フィルタリング
$("div:first")
すべてのdivの のdiv を させる
$("div:last")
すべてのdivの のdiv に
$("div:not(.one)")
すべてのdivのclass がoneでないdiv を させる
$("div:eq(3)")
すべてのdivのインデックス が3のdiv に
$("div:lt(3)")
すべてのdivのインデックス が3 のdiv を させる
$("div:gt(3)")
すべてのdivのインデックス が3より きいdiv を させる
$("div:even")
すべてのdivのインデックス が のdiv に
$("div:odd")
すべてのdivのインデックス が のdiv に
baseFilter.gif /* --------- --------- */
$(function() {
//1、 div #FF6347" id="b1"
$("#b1").click(function(){
$("div:first").css("background-color","#FF6347");
//$("div:eq(0)").css("background-color","#FF6347");
});
//2、 div #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background-color", "#9ACD32");
});
//3、 class one div #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background-color", "#FF0033");
});
// 3 div #006400" id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background-color", "#006400");
});
})
コンテンツセレクタ
セレクタ
:contains
したテキストを む の
:empty
サブエレメントまたはテキストを まないすべての のエレメントを させます.
:has
セレクタで する を む を させる
:parent
サブエレメントまたはテキストを むエレメントの
:parents
するすべての を セレクタ
セレクタ
:hidden
すべての 、またはtypeがhiddenの を させます.
:visible
すべての に
content_visible_selector.gif $(function() {
/* --------- --------- */
//1、 'one' div #FF6347" id="b1"
$('#b1').click(function() {
$("div:contains('one')").css({
background: '#FF6347'
});
});
//2、 div ( ) #9ACD32" id="b2"
$("#b2").click(function() {
$("div:empty").css({
background: '#9ACD32'
});
});
//=================================
/* --------- --------- */
//1、 div , #FF69B4" id="b3"
$("#b3").click(function() {
var $div = $("div:hidden");
$div.show();
$div.css({
background: '#FF69B4'
});
});
//2、 div #F08080" id="b4"
$("#b4").click(function(){
$("div:visible").css("background-color", "#F08080");
});
})
フォームセレクタ
セレクタ
:input
すべてのinput、textarea、select、button を させる
:text
すべての テキスト・ボックスに
:password
すべてのパスワードボックスに
:radio
すべてのラジオボタンに
:checkbox
すべてのチェックボックスに
:submit
すべてのコミットボタンに
:reset
すべてのリセットボタンに
:image
すべてのイメージフィールドに
:checked
したすべての された を させる(selectのoptionを くチェックボックス、ラジオボックスなど)
:disabled
できないすべての を させる
:selected
したすべてのoption を させる
form_selector.gif $(function() {
/* --------- --------- */
//1、 :input id="b1"
/* :input (input、select、textarea) */
$("#b1").click(function(){
$(":input").each(function(){
console.log( this );
});
});
//2、 :password " id="b2"
/* :password */
$("#b2").click(function(){
$(":password").each(function(){
console.log(this);
});
});
//3、 :radio " id="b3"
/* :radio */
$("#b3").click(function(){
$(":radio").each(function(){
console.log(this);
});
});
//4、 :checked " id="b4"
/* :checked 、 、option
* :selected option
*/
$("#b4").click(function(){
$(":checked").each(function(){
console.log( this );
});
/*$("input:checked").each(function(){
console.log( this );
});*/
/*$("input[type='radio']:checked").each(function(){
console.log( this );
});*/
/*$("input[type='checkbox']:checked").each(function(){
console.log( this );
});*/
});
})