JS基礎六(jQuery入門)

jQuery入門

初認識jQuery

1.jQuery概要

2.jQueryの特徴

3.jQuery動作原理

jQuery

に導入

jQuery基本規則

1.jQueryセレクタ

JQuery操作DOM

1.属性アクション

2.コンテンツ操作

3.スタイル操作

4.取得要素

5.移動要素

6.新しい要素のコピーと削除を作成する

7.イベントアクション

8.一般的な取値および賦値関数

アニメーション効果

初識jQuery
1.jQueryの概要
jQueryはマルチブラウザ対応のJavaScriptフレームワークです.ユーザーがHTML、イベントを簡単に処理し、アニメーション効果を実現し、サイトに便利なAjaxインタラクションを提供することができます.
2.jQueryの特徴
ユニークなチェーン構文と短くて明確な多機能インタフェースを備えています.効率的で柔軟なcssセレクタを有し、CSSセレクタを拡張することができる.便利なプラグイン拡張メカニズムと豊富なプラグインを備えています.jQueryは、IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+など、さまざまな主流ブラウザに対応しています.
3.jQuery動作原理
jQueryのモジュールは,エントリモジュール,下位サポートモジュール,機能モジュールの3つの部分に分けられる.
jQueryの導入

1.先にjqueryを導入するのはjsの導入方式

を用いる.

<script src="jquery  "></script>

は学習中に開発版を使用することができ、コードは圧縮されず、読み取り可能な

である.

生産版は、圧縮された生産環境用バージョンであり、使用に影響しないコード、スペース、改行などをすべて取り除き、jQueryファイルの最小化を保証しています.

jQuery基本ルール

jqueryは、jquery

という名前のオブジェクトを提供します.

Jqueryは$を使用して私たちが使用する要素$(「セレクタ」)を取得し、得られた要素をjqオブジェクトと呼ぶ.

Jqが提供するすべての方法は、jqオブジェクトによってのみ呼び出すことができる.jqメソッド()

1.jQueryセレクタ
きほんセレクタ

タグセレクタ(要素セレクタ)構文:$(「htmlタグ名」)タグ名を取得する要素

idセレクタ構文:$("#idの属性値")idの属性値が一致する要素

を取得する.

クラスセレクタ構文:$(".classのプロパティ値")指定したclassプロパティ値が一致する要素

パラレルセレクタ:構文:$(「セレクタ1、セレクタ2...」複数のセレクタで選択された要素の合計

すべてのセレクタ構文:$(「*」)このページのすべての要素

を取得します.
レベルセレクタ

子孫セレクタ構文:$(「A B」)A要素のすべてのB要素を選択

サブセレクタ構文:$(「A>B」)A要素のすべての直接サブ要素B

を選択

実弟選択器文法:$(「A+B」)直後の同級B要素

を選択

弟選択器構文:$(「A~B」)A要素のすべての同級B要素属性選択器

を選択する

属性名セレクタ構文:$(「A[属性名])は、セレクタ

を含む.

属性セレクタ構文:$(「A[属性名=‘値’」)指定した値に等しい属性を持つセレクタオプション関係演算子:!=:属性値がこの値に等しくない^=:属性値がこの値で始まる$=:属性値がこの値で終わる*=:属性値にこの値が含まれる

.

複合属性セレクタ構文:$(「A[属性名=‘値’][]...」)複数の属性条件を含むセレクタは、

に一致する必要があります.
JQueryオペレーションDOM
1.属性操作

attr()を使用する取得:オブジェクト.attr("属性名")/現在の値を返します.下位層ではgetAttributeを使用しています.この方法ではvalue属性のデータは取得できません.オブジェクト名を使用します.val()取得修正:オブジェクト.attr(「属性名」,「属性値」)削除さくじょ:removeAttr(「属性名」):この属性値

を削除します.

prop()の使用方法はattr()と一致し、下位層はproperty

である.

attrとpropの区別要素の固有属性である場合、propを使用することを推奨し、特定の属性attrの一部が要素のカスタム属性である場合、attr

を使用することを推奨する.
2.コンテンツ操作
取得:1.html():要素内のラベルボディの内容を取得し、呼び出すinnerHTML 2.text():要素のラベルボディ純テキストコンテンツの下位レベルで呼び出されたinnerText 3を取得する.val():要素のvalue属性値を取得する変更:1.html(「新しいコンテンツ」):新しいコンテンツは元の容量を上書きし、HTMLタグは解析的に実行する.text("新しいコンテンツ"):新しいコンテンツは元の容量を上書きし、HTMLラベルは解析的に実行されません.val(「新しい内容」):要素のvalue値を設定する
3.スタイル操作
1、css()オブジェクトを使用する.css("属性名")/現在の属性の式値オブジェクトを返す.css("属性名","属性値")/要素のスタイルオブジェクトを追加、修正する.css({「スタイル名」:「スタイル値」、「スタイル名」:「式値」......})/jsonパラメータを使用して、コードの書き込み率を向上させます.2、addClass()オブジェクトを使用する.addClass(「クラスセレクタ名」)/クラススタイルオブジェクトを追加.removeClass("クラスセレクタ名")/指定したクラススタイルオブジェクトを削除します.toggleClass("クラスセレクタ名")://切class属性toggleClass("one"):要素オブジェクトにclass="one"が存在する場合、属性値oneを削除すると判断します.要素オブジェクトにclass="one"が存在しない場合は、
4.要素の取得
jQueryの基本的な設計思想と主な使い方は、「あるページ要素を選択し、それを何らかの操作を行う」ことです.これは、他のJavascriptライブラリとは異なる根本的な特徴です.jQueryを使用する最初のステップは、構造関数jQuery()(略記$)に選択式を配置し、選択された要素を得ることです.選択式はCSSセレクタです.

$(document) //        
$('#myId') //  ID myId     
$('div.myClass') //   class myClass div  
$('input[name=first]') //   name    first input  

jQuery固有の式であってもよい.

$('a:first') //        a  
$('tr:odd') //        
$('#myForm :input') //       input  
$('div:visible') //     div  
$('div:gt(2)') //      div  ，     
$('div:animated') //            div  

5.要素の移動
jQueryは、2つの方法を提供し、要素のウェブページ内の位置移動を操作します.1つの方法は、要素を直接移動することであり、もう1つの方法は、ターゲット要素が所望の位置に達するように他の要素を移動することである.
div要素を選択した場合、p要素の後ろに移動する必要があります.

で使用する.insertAfter()は、div要素をp要素の後ろに移動します:

$('div').insertAfter($('p'));

で使用する.after()は、div要素の前にp要素を追加します:

$('p').after($('div'));

6.新しい要素のコピーと削除を作成する
新しい要素を作成して、新しい要素を直接jQueryのコンストラクション関数に入れればいいです.

$('
Hello
');

$('
new list item
');

$( "
Test
" ).appendTo( ".inner" ); // 
Test
  class=inner     

コピーと削除

$('p').remove();  //    ，    
$('p').empty(); //         ，    

7.イベントアクション

$('p').click(function(){   //              。
alert('Hello');
});
.blur() //        。
.change() //          
.click() //    
.dblclick() //    
.focus() //        
.focusin() //       
.focusout() //       
.hover() //   mouseenter mouseleave        
.keydown() //    （     ，       ）
.keypress() //    （     ，       ）
.keyup() //    
.load() //      
.mousedown() //    
.mouseenter() //    （        ）
.mouseleave() //    （        ）
.mousemove() //         
.mouseout() //    （        ）
.mouseover() //    （        ）
.mouseup() //    
.ready() //DOM    
.resize() //            
.scroll() //          
.select() //           
.submit() //      
.toggle() //         ，        
.unload() //      

8.一般的な取値と賦値関数

.html() //     html  
.text() //     text  
.attr() //           
.width() //            
.height() //            
.val() //          

アニメーション効果
1.要素のデフォルト表示と非表示

show([speed,[easing],[fn]))speed:アニメーションの速度.3つの事前定義された値(slow"normal","fast")またはアニメーション時間の長さを表すミリ秒(例えば:1000600,200)、デフォルトは0 easing:切り替え効果を指定するために使用され、デフォルトは"swing使用可能なパラメータ"linear"swing:アニメーション実行時の効果は先に遅く、中間が速く、最後に遅いlinear:アニメーション実行時の速度は均一なfn:アニメーション完了時に実行する関数、要素ごとに1回実行します.

hide([speed,[easing],[fn]])

toggle([speed],[easing],[fn])

2.スライド表示と非表示

slideUp([speed,[easing],[fn]])
slideDown([speed],[easing],[fn]) 
slideToggle([speed],[easing],[fn])

3.フェードアウト表示と非表示

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
fadeTo([speed,opacity,easing],[fn]])