jQuery

//1.获取Dom元素

const { $getCache } = require("sence/modules/storage");

//jQ选择器（根据选择器类型快速获取需要的类型）
$([selector], [context]);
$("#box");
// 获取子集
$("#box a");
$("a", box);

/* 
JQ支持的选择器、传统的css3中大部分都是支持的
还支持自己独有的
* :eq(n) 获取集合中的索引为n
* :gt(n) 获取集合中的大于索引为n
* :lt(n) 获取集合中的小于索引为n
*/

//操作方法

//节点之间关系属性  用JQ选择器获取元素、我们设置变量名的时候一般以$开始
var $box = $(".box");

/*三大筛选方法 拿取  */
$box.children("a"); //=>获取对应的子元素
$box.find("a"); //=>获取对应的后代元素
$("a").filter(".active"); //=>同级筛选

/*描述关系的 =>一下都可以设置选择器的二次筛选 */
$box.prev("p");

$box.prev();
$box.prevAll();

$box.next();
$box.nextAll();

$box.siblings(); //=>获取所有的兄弟
$box.index(); //获取当前索引

$box.parent(); //=>获取父元素
$box.parents(); //=>获取所有祖先元素

//=>2.DOM增删改
var str = `<div id="box" class="box>哈哈哈</div>`;
$("body").append(str); //追加到容器的末尾
$("body").html(str); //=>等价于innerHTML
$("body").html(); //=>获取body html内容
/*
 *下面的方法，插入$box的必须是页面中已经有的元素
 */
$box.insertBefore(str); //=>将$box元素放到str之前
$box.insertAfter(str); //=>将$box元素放到str之后
$(`<div id="box" class="box>哈哈哈</div>`).insertBefore($(".list"));
// $(`<div id="box" class="box>哈哈哈</div>`) 想当于创建一个元素
$A.appendTo($B); //=>$B.appendTo($A)  在B的后面追加A
$A.prependTo($B); //
//克隆
var $list = $(".list").clone();
//删除
$box.remove();
//操作表单元素的内容
$input.val();
$input.val("小狗"); //设置表单元素的内容

// -------------------------------------------------------------------------------------

//=>创建box

//=>3.操作自定义属性
//非表单元素
$box.attr("data-type"); //获取自定义属性
$box.attr("data-type", "b"); //设置自定义属性
$box.attr({
  type: 1,
  name: "AA",
}); //批量设置
$box.removeAttr("data-type"); //移除自定义属性
//表单元素操作

$radio.prop("checked");
$radio.removeProp("checked");
$radio.prop("checked", true);
//=>4.操作css样式（盒子模型属性）

$box.css("width", 200); //=>css 设置或者批量设置样式（原理是style添加） 数字会自动加上px
$box.addClass("active"); //=>设置样式类  removeClass hasClass toggleclass 有就移除 没有就添加

$box.css(); //=>  原理就是（getComputedStyle）
$box.offset(); //=>  当前元素的距离BODY的左偏移和上偏移
$box.position(); //=>  当前元素的距离父参照物的左偏移和上偏移
/* 
clientWidth/Height和offsetWidth offsetHeight
*/
$box.innerWidth();
$box.innerHeight();
$box.outerWidth();
$box.outHeight();

$(document).scrollTop([val]);

//=> 5.事件处理

/* 
*$元素.on([event type],[function])
*$元素.off([event type],[function])
*$元素.bind()
*$元素.unbind()
*$元素.delegate()
* 等常用的快捷绑定事件
*$元素.click(),.mouseover,.mouseout ....

*/
$box.on("click", function () {});

//=>6.动画处理
//.animate([目标样式],[总时间],[运动方式],[运动的做完的事情])
//.stop /.finish

$box.animate(
  {
    top: 100,
    left: 200,
  },
  1000,
  "liner",
  function () {}
);

//=>7.ajax 请求处理
$.ajax({
  url: "",
  method: "GET",
  dataType: "json",
  success(result) {},
});

//=>8.常用的工具方法

$each([数组,类,数组,对象],function (index,item) {
    //遍历数组的每一项
})
//$.toArray() 转化为数组 $.merge()数组合并

//$.makeArray()把类数组转化为数组
//$.uniqueSort() 去重加排序