jQuery メソッドの概要 (例付き)

この記事では、jQuery メソッドの概要 (例付き) を紹介します。これは一定の参考価値があります。必要な友人はそれを参照できます。お役に立てば幸いです。

jQuery の紹介

jQuery は DOM を操作するための軽量な JS ライブラリで、主に次の機能が含まれています:

HTML 要素の選択と操作

HTMLイベント関数

HTML DOM トラバーサルと変更

CSS 操作

JavaScript 特殊効果とアニメーション

AJAX

jQuery ベースのプラグin

jQuery の利点は、Internet Explorer 6 を含むすべての主要なブラウザと互換性があることです!

jQuery 構文

$(selector).action()

ドキュメントがロードされました イベント

$(document).ready(function() {
  // 代码...
});

// 简写方式
$(function() {
  // 代码...
});

$(document).ready と window.onload

$(document).ready と window.onload の違い両方ともページの読み込み中です。完全に実行される関数は、ほとんどの場合、それほど違いはありません。
$(document).ready: DOM 構造が描画された後に、それがロードされるまで待つことなく実行されます。これは、ページ内の画像やその他の外部ファイルがロードされるのを待たずに、DOM ツリーがロードされた後に実行されることを意味します。また、.ready を複数記述することもできます。
window.onload: 画像やその他の要素を含む、ページのすべての要素がロードされました。実行できるのは 1 回だけです。

jQuery セレクター

jQuery セレクターは既存の CSS セレクターに基づいています

$('*')
$('p ')
$('ul li')
$('ul li:last-child')
...

jQuery イベント

##マウス イベント##クリックdbclickマウス入力マウス放置ホバー##一般的に使用される jQuery イベント メソッド

キーボード イベント	フォーム イベント	ドキュメント/ウィンドウ イベント
keypress	submit	load
keydown	変更	サイズ変更
キーアップ	フォーカス	スクロール
	ぼかし	アンロード

click( ) クリックevent

dbclick() ダブルクリックevent

• mouseenter() マウスが要素を通過するevent
• mouseleave() マウスが要素を離れるevent
• mousedown () マウスを要素上に移動し、マウス イベントを押します
• mouseup() マウスを押したまま要素上に移動し、マウス イベントを放します
• hover() マウス ホバー イベント
• focus() フォーム要素のフォーカス イベント
• blur() フォーム要素がフォーカスを失うイベント
• submit() フォーム送信イベント
• change() フォーム要素の値変更イベント
• keypress() キーボードキー押下イベント
• keydown() キーボードキー押下イベント
• keyup() キーボードキーリリースイベント
• load()指定要素読み込み完了実行イベント(バージョン1.8以降廃止)
• resize()ウィンドウサイズ変更イベント
• scroll()スクロールリスニングイベント
• jQuery効果

##$(セレクタ).アクション(速度,コールバック)

##変数

##説明

##セレクターアクションイベント速度 (ミリ秒) は、「遅い」または「速い」にもできます##callbackコールバック関数hide() 要素を非表示show() 要素を表示toggle() 要素を表示非表示要素、表示要素を非表示

セレクター
	speed
	表示非表示

フェードインおよびフェードアウト

fadeIn() フェードイン
• fadeOut() フェードアウト
• fadeToggle () フェード要素がフェードイン、フェード要素がフェードアウト
• #fadeTo() 指定された不透明度にフェードします

$(selector).fadeTo(speed,opacity,callback) ;

不透明度の値は 0 ～ 1 です

• Slide
• slideDown() 下にスライドして要素を展開します

• slideDown ( ) 上にスライドして要素を折りたたみます

  slideToggle() 上にスライドして展開された要素を折りたたみ、下にスライドして折りたたまれた要素を表示します
  

animation

$( animate({params},speed,callback);

• パラメータ
• 説明

必須かどうか

paramsspeed Speed (ミリ秒) は、「遅い」、「速い」にもできますコールバック関数インスタンス

$("button").click(function() {
  $("p").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});

アニメーションの停止$(セレクター).stop(stopAll, goToEnd);パラメータ

アニメーションを形成する CSS プロパティを定義する	Must
オプション		callback
オプションの選択

説明

必須かどうか

stopAllgoToEnd 現在のアニメーションをクリアするかどうかすぐに完了します##オプション

jQuery 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就不必多次查找相同的元素。

$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

jQuery HTML

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获取内容和属性

获取内容

• text() 设置或返回所选元素的文本内容
• html() 设置或返回所选元素的内容（包括 HTML 标记）
• val() 设置或返回表单字段的值

获取属性

• attr() 设置或者返回所选的属性的值

// 获取属性
$('#test').attr('href'）

// 设置属性
$('#test').attr('href','http://www.baidu.com')

$('#test').attr({
    href: 'http://www.baidu.com',
    title: '百度'
})

// 回掉函数
$('#test').attr('href', function(i, origValue){
    // i 被选元素列表中当前元素的下标
    // origValue 原始值
    return origValue + '/jquery'
  })

添加删除元素

• append() 在被选元素的结尾插入内容
• prepend() 在被选元素的开头插入内容
• after() 在被选元素之后插入内容
• before() 在被选元素之前插入内容
   
• remove() 删除被选元素（及其子元素）
• empty() 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素

$('p').remove('.italic')

获取并设置 css 类

• addClass() 向被选元素添加一个或多个类
• removeClass() 从被选元素删除一个或多个类
• toggleClass() 对被选元素进行添加/删除类的切换操作
• css() 设置或返回样式属性

// 返回样式属性
$("p").css("background-color");

// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

尺寸方法

• width() 元素宽度
• height() 元素高度
• innerWidth() 包含 padding 宽度
• innerHeight() 包含 padding 高度
• outerWidth() 包含 padding、border 宽度
• outerHeight() 包含 padding、border 高度
• outerWidth(true) 包含 padding、border、margin 宽度
• outerHeight(true) 包含 padding、border、margin 高度

元素遍历

祖先元素：

• parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
• parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function() {
  // p > ul > li > span
  $("span").parentsUntil("p");
  // 返回 ul 和 li
});

后代元素：

• children() 返回被选元素的所有直接子元素。
• find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function() {
  $("p").find("span");
});

同胞元素：

• siblings() 返回被选元素的所有同胞元素。
• next() 返回被选元素的下一个同胞元素。
• nextAll() 返回被选元素的所有跟随的同胞元素。
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
• prev() 返回被选元素的上一个同胞元素。
• prevAll() 返回被选元素之前的所有的同胞元素。
• prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。

元素过滤：

• first() 返回被选元素的首个元素。
• last() 返回被选元素的最后一个元素。
• eq() 返回被选元素中带有指定索引号的元素。
• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
• not() 方法返回不匹配标准的所有元素。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！

アニメーション キューをクリアするかどうか。デフォルトは false	Optional

以上がjQuery メソッドの概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。