jQueryでは何ができるのでしょうか？

この記事では、jquery の使用に関する関連する概要を提供します。

jQuery は、小型、高速、強力な JavaScript ライブラリです。 DOM 操作、イベント リスニング、アニメーション、AJAX など、いくつかの使いやすい API を通じて多くのことが簡素化されます。
jQuery でできることはネイティブ JS でもできますが、ネイティブ JS はより複雑になり、複雑さをシンプルに変えることが jQuery の目的です。
記述を減らし、より多くのことを実行します。

jQuery オブジェクトと DOM ネイティブ オブジェクトの違いは何ですか?変換方法は?

このような HTML フラグメントがあるとします

d6c02ac93c87e38cc95db2f13e5b094c65281c5ac262bf6d81768915a4a77ac0

この要素ノードは、jQuery メソッドまたはネイティブ DOM メソッドを通じて取得できます

$("#btn1");  //jQuesy方法；document.querySelector("#btn1");    //原生DOM方法；

これら 2 つのメソッドで取得できます要素オブジェクトは 2 つのまったく異なるオブジェクトです。
jQuesy メソッドで取得したものを jQuesy オブジェクトと呼びます。これは独自のメソッドを持ち、ネイティブ DOM メソッドを使用できません。
ネイティブ DOM メソッドで取得したものを DOM ネイティブ オブジェクトと呼びます。独自のメソッドもあり、使用できません。

2 つのオブジェクトは相互に変換できます

$("#btn1")[0]; // jQuery オブジェクトはネイティブに変換されます。 DOM オブジェクト、およびインデックスを使用して対応する要素オブジェクトが取得されます。 $(document .querySelector("#btn1")); // DOM 要素オブジェクトを $ で囲んで、jQuery オブジェクトを取得します。 jQuery？バインド、バインド解除、デリゲート、ライブ、オン、オフの機能は何ですか?どれがおすすめですか？を使用してイベントをバインドし、イベント プロキシを使用するにはどうすればよいですか?

jQuery では、on() メソッドを使用してイベントをバインドできます

$("#btn1").on("click",function() {  //最简单的事件绑定；
    console.log("hello world");
}）

その他のイベント バインド メソッド

bind()、このメソッドは 3.0 以降のバージョンでは非推奨となり、on();

1.4 .3 に置き換えられます。 version: いくつかのパラメータを受け入れます:eventType (イベント タイプ、「クリック」など)、eventData (イベント処理関数に渡されるデータ)、handler (イベント処理関数)、preventBubble (ブール値、デフォルト イベントの防止、イベント バブリングの防止)

既存の要素にのみバインドできるため、新しく追加された要素はイベントにバインドされません。これは十分な柔軟性がなく、非推奨になりました。

unbind() メソッドは、指定されたイベントをバインドする binding() メソッドを削除できます。 、パラメーターを渡さないと、すべてのイベントが削除されます。パラメーターを渡すと、指定されたイベントとイベント処理関数を削除できます。

delegate() メソッドは、バージョン 1.7 より前に一般的に使用されていたイベント プロキシ メソッドであり、on() replace に置き換えられました。いくつかのパラメータを受け入れます:

selector: イベントをトリガーする要素をフィルターするために使用されるセレクター文字列

evenType: イベント タイプ、スペースで区切られた複数

eventData: イベント ハンドラーに渡されるデータ
handler: イベント ハンドラー

live() もイベントですプロキシメソッドは、セレクターによって一致するすべての要素にイベントハンドラーをアタッチしますが、イベントをドキュメントに直接バインドし、関連するパラメーターを通じてイベントをトリガーするかどうかを決定します
events: イベントタイプ

data: イベントハンドラーに渡されるデータ

handler: イベント ハンドラー
live() はイベントをドキュメントにバインドするため、バブリング チェーンが長すぎるため、非推奨になりました。

on() は現在、イベントをバインドするための一般的なメソッドであり、いくつかのパラメーター
1.events: 1 つ以上のスペースで区切られたイベント タイプとオプションの名前空間、または "click" 、 "keydown.myPlugin" などの名前空間のみを受け入れます。または ".myPlugin";

2.selector: 選択された要素の間でイベントをトリガーできる子孫要素をフィルターで除外するために使用されるセレクター文字列。セレクターが null であるか、セレクターが無視される場合、選択された要素は常にイベントをトリガーできます。

3.data: イベントがトリガーされると、event.data がイベント ハンドラー関数
4.handler (eventObject; ): イベントがトリガーされたときに実行される関数。関数が returnfalse のみを実行する必要がある場合は、パラメーターの位置を false として直接省略できます。 on() メソッドによってバインドされたイベントを削除できます。パラメーターが渡されない場合は、すべてのイベントが削除されます。パラメーターは、指定されたイベントとイベント処理関数を削除できます

jQuery イベント プロキシの書き方
HTML フラグメントを想定します

<ul id="container">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li></ul>

on() メソッドを使用し、関連するパラメーターを指定してイベント プロキシを完成できます

// On でイベントをバインドします親コンテナの場合、フィルター セレクターを満たす子要素のみがイベントをトリガーできます $("#container").on("click","li",function() { //何かをします..})

jQuery要素を表示/非表示にするにはどうすればよいですか?

jQuery の Hide() メソッドを使用して要素を非表示にします。このメソッドは 3 つのパラメータを受け取ります:
[duration]: アニメーションの継続時間

[easing]: 遷移に使用するイージング関数を示します。jQuery 自体は「linear」と「スイング"

[complete]: アニメーションが完了したときに実行される関数

パラメータを追加しない場合、このメソッドは要素の表示を直接 none に設定するのと同等です

パラメータを追加することで、このメソッドはグラデーション非表示の効果を実現できますelement

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同様に、jQueryではshow()メソッドを使って非表示の要素を表示します。使い方はjQueryアニメーションの使い方と同じです。

jQuery中通过hide()方法隐藏元素，其接受三个参数
[duration]：动画持续多久
[easing]：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
[complete]：在动画完成时执行的函数
不添加参数时，其方法等同于直接设置元素的display为none
通过添加参数，该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同样，jQuery中使用show()方法来展示隐藏的元素，使用方法与hide()相同
hide()方法会把元素的display变为none，show()方法会还原元素的display
toggle()方法用于切换元素的隐藏/显示，参数与hide()``show()相同，它的机制就是元素如果是隐藏的，就显示该元素，如果元素是显示的，就隐藏该元素，来回切换

fadeIn()/fadeOut用调整元素透明度的方法来显示/隐藏元素，一旦透明度变为0，display将设置为none，接受参数与hide()、show()相同
不设置参数，fadeIn()/fadeOut默认会有渐进显示/隐藏的效果

$(element).fadeIn()
$(element).fadeOut()

fadeTo以动画的形式调整元素到指定的透明度，接受这几个参数：
duration, opacity [, easing ] [, complete ]
opacity为指定变化的透明度
当opacity为0时，fadeTo方法不会使元素display为none

$(element).fadeTo(1000,0.5) //在1s内透明度变化到0.5

fadeToggle会通过改变透明度的方式显示和隐藏元素，如果元素是隐藏的，则显示，显示的，则隐藏，参数与fadeIn()``fadeOut()相同
fadeToggle在元素透明度为0时，会display为none

fadeIn()/fadeOut和show()/hide()的区别：
前者通过调整元素透明度实现元素隐藏和显示，透明度为0时设置display为none。后者通过改变同时元素的width/height/opacity来显示隐藏元素

slideUp()/slideDown()通过上下滑动来实现元素的隐藏/显示，接受参数与show()/hide()相同
slideToggle()通过上下滑动的方式切换元素的隐藏/显示

animate()是自定义动画方法，接受这几个参数
properties：一个CSS属性和值的对象,动画将根据这组对象进行变化
[duration]：动画时间
[easing]：缓动函数
[complete]：完成动画后的回调函数
animate()的本质是通过动画的方式把元素的样式变为指定的样式
animate()可以通过链式调用实现多个动画

$(element).animate({//something})
          .animate({//something})
          .animate({//something})
          .animate({//something})

多个动画可以整合到一个数组中，对数组进行遍历，执行所有动画

var action = [{//action1},
              {//action2},
              {//action3},
              {//action4}]action.forEach(function(action,index) {
    ${element}.animate(action)
})

stop()方法可以停止当前动画，它接受2个参数：
[clearQueue]：一个布尔值，当为true时，当前动画停止，未执行的动画全部删除
[jumpToEnd]：为true时，当前动画将停止，但该元素上的 css属性会被立刻修改成动画的目标值
stop()不添加任何参数时，会立即结束掉元素当前动画（不完成），马上进入下一个动画（如果有的话）

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

在原生DOM中，我们可以使用innerText操作元素文本，innerHTML操作元素内的HTML
在jQuery中提供了相同功能的方法：html()和text()
当没有传递参数时，获取元素内的innerHTML和innerText；当传递了一个string参数的时候，修改元素的innerHTM和innerText为参数值

<ul id="container">
    <li>content1</li></ul>
$("#container").html() //"<li>content1</li>"$("#container").text() //"content1"

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

val()方法可以用来获取和设置input的value
当没有传递参数时，获取value的值
传递一个字符串参数时，将value的值改为参数值
attr()可以获取指定属性，也可以设置属性

$(element).attr("id") //获取元素id属性值$(element).attr("id","container") //设置元素id值为container

本篇对jquery的作用进行了相关的讲解，更多相关内容请关注php中文网。

相关推荐：

关于前端跨域总结的相关知识点

前端常见跨域解决方案（全）

什么是跨域？跨域有几种实现形式？

以上がjQueryでは何ができるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。