[TOC]

jQueryの紹介

1、jQueryのは、軽量、マルチブラウザの互換性のJavaScriptライブラリです。

2は、jQueryのは、JavaScriptが大幅に簡素化プログラミングをすることができ、ユーザーがより簡単にAjaxので簡単に相互作用、HTMLドキュメント、イベントを処理するアニメーション効果を達成することができます。

利点：

1は、軽量のJSのフレームワークです。jQueryのコアのjsファイルのみ数十キロバイト、ページの読み込み速度には影響しません。

2、多くのタスクは、コードの行を取得することができます。

3、鎖発現。あなたは、行で記述されたコード全体、より簡潔に置くことができます。

4、操作性とより多くのJSよりも可読性

フル主要なブラウザの互換性として知られている5、

6、強い展開。良い、シンプルで実用的なのプラグ追加。

jQueryのコンテンツ：

セレクタ
フィルタ
スタイルの操作
テキストの操作
プロパティの操作
文書処理
イベント
アニメーション
プラグ
それぞれ、データ、アヤックス

jQueryオブジェクト

jQueryオブジェクトは、 jQueryのでDOMオブジェクトをパッケージ化した後に生成されるオブジェクトです。jQueryオブジェクトは、 jQueryのに固有のものです。オブジェクトがある場合はjQueryオブジェクト、それは使用することができますjQueryのを道に：例えば、$（「＃i1の」）HTML （）。

$("#i1").html()これは、意味：id値が取得i1HTMLコード要素。これはhtml()jQueryの方法です。

それはと同等です。 document.getElementById("i1").innerHTML;

がjQuery对象包装はDOM对象後で生成するが、jQuery对象使用することができないDOM对象任意の方法を、共感をDOM对象使用することができないjQuery方法で。

私たちは、$変数名の前に時間にjQueryオブジェクト変数を宣言します。

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

jQueryのオブジェクトとDOMオブジェクトを使用して、例えば、上記の例を見てみましょう：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQueryの基本的な構文：$（セレクタ）.action（）

jQueryのセレクタ

基本的なセレクタ

IDセレクタ：$（ "＃IDは"）

タグセレクタ：$（ "tagNameを"）

クラスセレクタ：$（ "クラス名。"）

組み合わせでは：$（「div.c1」）// divタグを見つけるC1クラスのクラスを持っています

すべての要素セレクター：$（ "*"）

組み合わせセレクター：$（ "＃IDは、.className、tagNameを"）

レベルセレクター：

xおよびyは任意選択であってもよいです

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本フィルタ：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

カスタムフレームモード、およびポップアップjQueryの隠された機能を使用して達成。

属性セレクタ：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例：

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

フォームフィルタ：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例：

$(":checkbox")  // 找到所有的checkbox

オブジェクトのプロパティを構成します：

:enabled
:disabled
:checked
:selected

例：

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

選択されたオプションを探します：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

フィルター方式

次の要素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

要素の場合：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父の要素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

息子や兄弟要素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

求めます

$("div").find("p")  //找div的后代中所有的p，可写成  $("div p")

フィルタ

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的。可写成 $("div.c1")

サプリメント

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

ラベルの取り扱い

スタイルの操作

スタイルクラス

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

例：光モードとフレームを切り替えるために参照してください

CSS

css("color","red")//DOM操作：tag.style.color="red"

例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

作動位置

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()この方法は、私たちは、ドキュメントの現在の位置に対して一つの要素を取得することができます（文書）があります。

そして、.position()の差である：.position()親要素に対する変位に対して。

外形寸法：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

テキストの操作

HTMLコード：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

テキスト値：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

値：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

例えば：

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

セッティング：

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

選択したチェックボックスやラジオの値を取得します：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

あなたは使用することができます。

$("input[name='gender']:checked").val()

プロパティの操作

IDまたはその他のカスタムプロパティ：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

チェックボックスとラジオ

prop() // 获取属性
removeProp() // 移除属性

小道具およびattRの違い：

フルネーム属性（属性）ATTR

完全な小道具のプロパティ（属性）

そこのプロパティがありますが、それらが言及されている同じ属性、HTMLタグの属性を参照する属性attrではなく、DOMオブジェクトのプロパティを参照する小道具が、ATTR、明示的、暗黙的および小道具も考えることができます。

例えば：

<input type="checkbox" id="i1" value="1">

上記のコードのために、

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

ATTRあなたは小道具取得プロパティは、DOMオブジェクトである一方、その偽としてチェック、未定義れますラベルのものを取得できません見ることができます。

次のコードを交換する場合：

<input type="checkbox" checked id="i1" value="1">

その後、実行します。

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

これは、その範囲は、HTMLタグ内のプロパティに限定され、attrの限界を証明しなければならない、と小道具取得はDOMオブジェクトのプロパティである、ないはfalseを返します選択、真の選択を返します。

次に、カスタム属性のためにもう一度見て、ATTRや小道具の違いは何ですか。

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

次のコードを実行します。

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

あなたは取得カスタムタグの属性をサポートしていない小道具を見ることができます。

要約すると：

ATTRと属性とカスタム属性のいくつかを見るためにラベルに
戻って、このようなチェックボックス、ラジオや小道具によって選択されているかどうかのオプションとしてブール値について。

文書処理

指定された要素に追加の内側後者

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

追加指定された要素の内部の前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

追加指定された要素の外側の後ろ

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

指定された要素を加え外の前方に

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

要素を削除し、空

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

置き換えます

replaceWith()
replaceAll()

クローン

clone()// 参数

イベント

一般的なイベント

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydownイベントとからkeyup組み合わせ例：

ホバーイベント例：

リアルタイム監視入力入力値を変更する例：

イベントバインディング

.on( events [, selector ],function(){})

イベント：イベント
セレクタ：セレクタ（オプション）
機能：イベントハンドラ

削除イベント

.off( events [, selector ][,function(){}])

off()削除するために使用する方法.on()イベントハンドラが結合しました。

イベント：イベント
セレクタ：セレクタ（オプション）
機能：イベントハンドラ

後発事象の実施を防ぎます

return false; // 常见阻止表单提交等
e.preventDefault（）;

注意：

クリックして、KeyDownイベントや他のDOMのようなイベントは、私たちが使用することができ、定義された.on()イベントをバインドする方法を、しかしhoverjQueryの使用することはできませんイベントが定義された.on()アップバインドする方法を。

停止イベントバブリング

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

ページのロード

DOM照会および操作する準備ができたときに実行されるバインド機能。それが大幅にWebアプリケーションの応答速度を向上させることができますので、このモジュールは、機能の最も重要なイベントです。

双方向：

$(document).ready(function(){
// 在这里写你的JS代码...
})

速記：

$(function(){
// 你在这里写你的代码
})

イベントのデリゲート

イベントデリゲートは、イベントサブタグをキャプチャするために親タグを使用してバブリング原則イベントです。

例：

テーブル編集、削除ボタンの各行は、対応するイベントをトリガすることができます。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

アニメーション

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

各

jQuery.each（コレクション、コールバック（indexInArray、valueOfElement））：

説明：シームレスに使用することができる一般的な反復機能、およびオブジェクトの反復配列。アレイおよびアレイ状プロパティの長さによってインデックス付け反復回数にオブジェクト（例えば、パラメータオブジェクトの機能）、0から長さ - 1。他の目的には、プロパティ名を反復処理します。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

出力：

.each（関数（指数、エレメント））。

説明：jQueryオブジェクトを横切るは、各要素の一致機能を実行します。

.each()各要素jQueryのDOMオブジェクトの反復方法。コールバックが実行されるたびに、現在のパラメータとして渡されたサイクル数（0から数えて）。コールバックは、コンテキストとして現在のDOMエレメントのコンテキストでトリガーされるので、キーがあるのでthis、常にこの要素を指しています。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注：一連のjQueryの要素を介してjQueryのメソッドの戻りjQueryオブジェクトは、 -暗黙呼ば反復手順を。これが起こるとき、それは通常、明示的に循環する必要はありません.each()方法：

換言すれば、上記の例では、直接その上に書かれたこのような、それぞれ（）メソッドを使用する必要はありません。

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

これは、トラバーサル中に使用することができますreturn false途中で、各サイクルを終了しました

jQueryのフロントエンドの基礎