ディレクトリ
1.プロパティ
ATTR：独自のカスタムプロパティまたは属性のid
.attr({'属性名':'值',...}); // 设置属性
.attr('属性名'); //查看属性
.removeAttr('属性名'); //删除属性支える：チェックボックスとラジオを
单选框radio：必须定位到具体的标签
.prop('checked'); // 查看标签是否选中，返回true和false
.prop('checked',true); // 选中
.prop('checked',false); // 取消选中
多选框checkbox：
$(":checkbox").prop('checked',true) //全选選択を解除するにはATTR属性のチェックボックスを設定し、方法はありません。
要約：
ATTRと属性とカスタム属性のいくつかを見るためにラベルの1
例えば、チェックボックス、ラジオが選択または設定されているかどうかのオプションとして返すブール値、2.を選択し、小道具を持つすべてをオフにしています。
真と偽の属性が、確認され、選択や小道具を（使用して無効などの2つのプロパティを、）は、他の人がATTR（）を使用
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
用户名：<input type="text">
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div class="d1">
性别：
<input type="radio" name="sex" id="s1" value="1">男
<input type="radio" name="sex" id="s2" value="2">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="3">抽烟
<input type="checkbox" name="hobby" value="4">喝酒
<input type="checkbox" name="hobby" value="5">蹦迪
</div>
</body>
</html>
操作：
$('#d1').attr({'age1':'18','age2':'19'}); // 添加两个属性
$('#d1').attr('age1'，'18'); // 添加一个属性
$("").prop("checked");
$("#s1").prop("checked"); // 查看 男 是否被选中
$("#s2").prop("checked",true); // 选择 女
$(":checkbox").prop("checked",true) // 爱好 全选
$(":checkbox").prop("checked",true) // 爱好 全取消选中2.文書処理
指定された要素（息子）の内部の背面に追加
$(A).append(B) // 把B追加到A
$(A).appendTo(B)// 把A追加到B方式一：
var a = document.createElement('a');
$(a).text('百度');
$(a).attr('href','http://www.baidu.com');
$("#d1").append(a);
方式二：
$('#d1').append("<a href=''>百度</a>")
// 添加a标签，能够识别标签
方式三：
// var s = `<a href="">${xxx}</a>` // 字符串格式化
var s = '<a href="">' + '百度' + '</a>'
$('#d1').append(s)
要素を指定するために追加の内側のフロント（息子を）
$(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() // 删除所有匹配的元素。
empty() // (清空)删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在置き換えます
$(A).replaceWith(B); //B替换A
$(A).replaceAll(B); //A替换Bクローン
.clone(); // 克隆标签，但没有事件效果
.clone(true); // 克隆标签，并且克隆事件例クローニング;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script>
$(".btn").click(function () {
// var bEle=$(this).clone();
var bEle=$(this).clone(true);
$(this).after(bEle);
})
</script>
</html>
3.イベント
バインディングのイベント
方式一：
$("#d1").click(function (){
$(this).css('background-color','green');
})
方式二：
$("#d1").on('click',function (){
$(this).css('background-color','green');
})イベントを削除します
.off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")一般的なイベント
click(function(){...}) //鼠标左键点击
hover(function(){...}) // 鼠标悬浮
blur(function(){...}) // 失去光标
focus(function(){...}) // 获取到光标
change(function(){...}) //内容发生变化，用于select等
keydown/keyup(function(){...}) //键盘按下/抬起
input // 实时监听输入值入力イベントは、上の結合入力値の検索、リアルタイム監視のために使用する必要があります
$('#cc').on('input',function () {
console.log($(this).val());
})
绑定多个事件 事件名称空格间隔:
$('#xxx').on('input blur',function () {
console.log($(this).val());
})MouseEnterイベント：マウスは、タグのトリガーに入り、トリガしないサブラベルを入力するように一度だけトリガ。
マウスアウトイベント：マウスがトリガータグを去ります
ホバーイベント：トップイベントへの2の統合
ないことホバーDOMのネイティブ、無onhover jsのイベントがある、これはjQueryのホバーイベントで、jQueryのパッケージで、ネイティブjsはありません
hover事件 鼠标进进出出的事件
$('#d1').hover(
// 鼠标进入
function () {
$(this).css('background-color','green');
},
// 鼠标离开
function () {
$(this).css('background-color','red');
});
mouseoverイベント：マウスがトリガーに入り、サブラベルがトリガされます入力（mousenterに注意してください）
KeyDownイベント/ keyUpイベントイベント：キーボードのキーを押し/リリース
$(window).keydown(function (e) {
console.log(e.keyCode)
}) //按下键就会输出一个值
$(window).keyup(function (e) {
console.log(e.keyCode)
}) //抬起键就会输出一个值
イベントバブリング
子どもと親ラベルlabel（ラベルの祖先は）同じイベントにバインドされました。たとえば、クリックイベント、タグをクリックして、そのイベントの親や祖父母の1つ上のレベルにトリガされます。
ソリューション：サブタブ機能に追加します。
falseを返します。
または：e.stopPropagation（）;
$('.c1').click(function () {
alert('父级标签!!!');
});
$('.c2').click(function (e) {
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; // 方式1
// e.stopPropagation() // 方式2
})
イベントのデリゲート
イベントのデリゲートは、（サブラベルが動的である）のイベントに結合自動的にいくつかのサブラベルを追加するために、将来的に来るイベントサブラベルをキャプチャするために、親タグを使用して、イベントバブリングの原則を介して行われます。
# 示例：克隆
$("#d1").on('click','.btn',function () {
// $(this)是点击的儿子标签
var a=$(this).clone();
$("#d1").append(a);
})
// 将儿子.btn 的事件委托给父级#d1，
4.ページのロード
1. window.onloadイベント
将script放在html的head部分：onload 等待页面内容全部加载完之后自动触发事件,多个onload存在覆盖现象
window.onload = function(){
$("").click(function () {
});
}
2. jQueryのloadイベント
負荷後のjQueryのページの実行が完了しています。
$(document).ready(function(){
// 在这里写JS代码...
})
简写：
$(function () {
$("").click(function () {
});
})
そして、window.onload差：
1.window.onload（）関数は、現象をカバーしている呼び出す前に、我々は、リソースの完了後にロードするために絵を待つ必要があります
2.jQueryこの現象の入り口機能は何のカバーを持っていない、文書はあなたが呼び出すことができるのロードが終了した後に（この機能を使用することをお勧めします）
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
window.onload = function () {
$(".c1").click(function(){
$(this).addClass("cc")
})
};
// window.onload = function () {
// $(".c1").click(function(){
// $(this).addClass("c2")
// })
// }
$(function () {
$(".c2").click(function(){
$(this).addClass("cc")
})
});
</script>
<style>
.c1{
width: 200px;
height:200px;
background-color:red;
}
.c2{
width: 200px;
height: 200px;
background-color: green;
}
.cc{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
5.各
シームレスに使用することができる一般的な反復機能、およびオブジェクトの反復配列。プロパティの長さによってインデックス付け反復回数にアレイおよびアレイ状の物体（例えば、パラメータオブジェクトの機能）0から長さ、 - 1。他の目的には、プロパティ名を反復処理します。
$ -----> jQuery.each
# 循环数组： k是索引位置，v是数据
$.each(数组，function (k,v){
console.log(k,v)
})
# 循环标签：v是Dom标签
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
$("li").each(function (k,v) {
console.log(k,v) // 取标签
console.log(k,$(v).text()) // 取标签文本
})
终止each循环：
return false；
注意：
在遍历过程中可以使用 return false提前结束each循环。
而直接使用return;后面什么都不加，不写false，就是跳过本次循环。
数组示例：
var a = [1,3,5,7,9];
$.each(a,function (k,v){
console.log(k,v)
});
/*
0 1
1 3
2 5
3 7
4 9
*/
标签示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>each</title>
</head>
<body>
<div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</html>
操作：
$("li").each(function (k,v) {
console.log(k,v)
}); // 查看所有的li标签
$("li").each(function (k,v) {
console.log(k,$(v).text())
}) // 查看所有的li标签的文本内容
6.アニメーション
.show(3000) // 3s后显示标签
.hide(2000) // 2s后隐藏标签
.toggle(3000) // 以前什么效果，反着来
.slideDown(2000) // 向下滑动
.slideUp(2000) // 向上滑动隐藏
.slideToggle()
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])
$("div").hide(3000,function () {
alert("执行完毕");
}) // 执行完动画后，执行回调函数
7.データ（）
任意jQueryオブジェクトデータの方法は、任意の値で保存されなければならないグローバル変数の代わりに使用することができる
名所与のセットに最初に一致した要素を返すマッチした要素または要素のセットのすべての要素に任意のデータを格納します格納されたデータの値。
.DATA（キー、値）の設定値
説明：マッチした要素の任意のデータを格納します。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.dataの（キー）：値、未定義返さない場合
説明： -によって与えられるデータ・ストレージ名の値に一致した要素のセット内の最初の要素を返し.data(name, value)、またはHTML5 data-*プロパティを。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData（キー）：
説明：keyパラメータはすべて保存されたデータの削除を指示することなく、要素に格納されたデータを削除します。
$("div").removeData("k"); //移除元素上存放k对应的数据
8.プラグイン
jQuery.extend（オブジェクト）
jQueryの名前空間の下に新しい機能を追加します。マルチユースのプラグイン開発者のためには、中にjQueryのに新しい機能を追加します。
速記：$延長（）。
他の標識を使用することはできません、
$.extend({
min:function (a,b) {return a < b ? a : b;},
max:function (a,b) {return a < v ? a:b;}
})
$.min(2,5) // 2
$ .Fn.extend（）＃を使用することができます
$.fn.extend({
min:function (a,b) {return a < b ? a : b;},
max:function (a,b) {return a < v ? a:b;}
})
$("#d1").max(2,5) // 5