原生 JavaScript 进阶（三） - 8 - jQuery - 《JavaScript 学习笔记》

一、jQuery
- 1. 如何学习jQuery
- 2. JQ的三大版本
二、JQ中常用的方法
三、封装一个css方法

一、jQuery

一款伟大的，用原生 JS 封装的，“操作DOM”的类库：它里面封装了大量的方法（在原先的版本中 v1.xxx，这些方法兼容所有的浏览器），基于这些方法我们可以快速的进行DOM操作和项目开发

1. 如何学习jQuery

看 API 文档
http://jquery.cuishifeng.cn/
看书籍
《锋利的jQuery第二版》
大量做案例
在学习阶段，案例可以用原生 JS 做一遍，再用 JQ 做一遍
学习 JQ 源码
- 更好的掌握 JQ 的应用，写出高性能可扩展的项目代码
- 让自己的 JS 能力，尤其是组件插件等封装的能力直接上一个新台阶

2. JQ的三大版本

v1.xxx 第一代版本
第一代版本的特点：大而全，方法是兼容所有浏览器的（包括IE6），主要应用于需要考虑兼容的 PC 端项目中
v2.xxx 第二代版本
主要是为移动端的开发准备的，不在兼容低版本浏览器（例如：IE8及以下），配合出现的还有 jQuery mobile 等 UI 库。但是，第二代版本在移动端方面的处理不如 Zepto.js
v3.xxx 第三代版本
也不再兼容 IE 低版本浏览器了，它从性能等方面都要比之前的强，但是生不逢时，此时正好是 angular / vue / react 这种框架崛起的时代，大家已经不再基于操作 DOM 的思想开发了，JQ 也就慢慢退出舞台了

二、JQ中常用的方法

1. 获取dom元素

// 1.获取 DOM 元素
// 操作方法：JQ 选择器（根据选择器类型快速获取需要的元素）
$([selector],[context])
    $('#box')
    $('.imgBox')
    $('.box a')
    $('a',box)
    ...
/*JQ 支持的选择器：传统 CSS3 中的大部分都支持、还支持一些自己独有的
 * :eq(n) 获取集合中索引为 n 的
 * :gt(n) 大于这个索引的
 * :lt(n) 小于这个索引的
 */    
// ------------------------------    
// 节点之间关系的属性：用 JQ 选择器获取的元素，我们设置变量名的时候一般都以$开始
// 还可以再设置对应的选择器进行二次筛选
let $box = $('.box');
$box.children('a'); // 获取对应的子元素
$box.find('a'); // 获取对应的后代元素
$('a').filter('.active'); // 同级筛选（在所有的A中筛选出具备 CLASS='ACTIVE' 样式类的 A）
$box.prev();
$box.prev('p'); // 获取它上一个标签名为 P 的哥哥
$box.prevAll();
$box.next();
$box.nextAll('.link');
$box.siblings(); // 获取所有的兄弟
$box.index(); // 获取索引
$box.parent(); // 获取父元素
$box.parents(); // 获取所有的祖先元素，一直到 document

2. dom增删改

let str = `<div id="box" class='box'>
    ...
</div>`;
$('body').append(str); // 追加到容器 BODY 的末尾
$('body').html(str); // 等价于 innerHTML  $('body').html()不传参是获取 BODY 中的 HTML 内容，除了这个方法还有 text 方法，等价于 innerText
$A.insertBefore($B); // 把 $A 放到 $B 的前面（注意点：$A,$B 都是页面中已经存在的元素）
$A.insertAfter($B); // 把 $A 放到 $B 的后面
$(`<div id="box" class='box'>
    哈哈
</div>`).insertBefore($A); // 需要把新增加元素放到 $A 前面，需要把字符串用 $() 包起来，相当于创建了一个元素
$A.appendTo($B); // $B.append($A) 在 $B 容器的末尾追加 $A
$A.prependTo($B); // $B.prepend($A) 在 $B 容器的开头追加 $A
$A.clone();  // 实现元素的克隆
$A.remove(); // 实现元素的删除
// 操作表单元素的内容
$inp.val() // 获取表单元素内容
$inp.val('AAA') // 设置表单元素内容
// html和text方法是操作非表单元素内容的

3. 操作自定义属性

$box.attr('data-type') // 获取自定义属性值
$box.attr('data-type','B') // 设置自定义属性值
$box.attr({
    'type':1,
    'name':'AA'
}); // 批量设置
$box.removeAttr('data-type'); // 移除自定义属性
// 表单元素操作内置或者自定义属性一般使用 prop 和 removeProp
$radio.prop('checked')
$radio.prop('checked',true)
...

4. 操作CSS样式（盒子模型属性）

// 设置样式
$box.css('width',200); // css 方法是设置或者批量设置样式（原理是设置 STYLE 行内样式）
// $box.css({ width:200,height:200 })，写的值不加单位，方法会帮我们自动设置上 px 单位
$box.addClass('active');// 设置样式类（原理是对 className 的操作），removeClass 是移除，hasClass 验证是否存在某个样式类，toggleClass 之前有就是移除，没有就是新增
// 获取样式
$box.css('width'); // 不设置值的时候就是获取（原理是 getComputedStyle，所有经过计算的样式都可以获取）
$box.offset(); // 当前元素距离 BODY 的左偏移和上偏移 
$box.position(); // 当前元素距离父参照物的左偏移和上偏移
$box.innerWidth/.innerHeight/.outerWidth/.outerHeight() // 等价于 clientWidth / Height 和 
offsetWidth / Height
$(document).scrollTop([val]); // 可以获取或者设置 scrollTop 的信息，对应的方法 .scrollLeft

5. 其它有助于项目开发的方法

// 事件处理
// $元素.on([event type],[function])
// $元素.off([event type],[function])
// $元素.bind()  $元素.unbind()  $元素.delegate() ...
// $元素.click() .mouseover .mouseout ...等常用事件的快捷绑定
$box.on('click',function(){});
$box.click(function(){});
// 动画处理
// .animate([目标样式],[总时间],[运动方式],[运动完做的事情])
// .stop / .finish
$box.stop().animate({
    top:100,
    left:200
},1000,'linear',function(){});
// AJAX 请求处理
let _DATA=null;
$.ajax({
    url:'json/product.json',
    method:'GET',
    async:false,
    dataType:'json',
    success:result=>{
        // result:当请求成功执行 success 函数，result 就是从服务器获取的结果
        _DATA=result; 
    }
});
// 常用的工具方法
$.each([数组、类数组、对象],function(index, item){
    // 遍历数组中的每一项 index:索引 item:当前循环这一项（对象：index 是属性名 item 属性值）
});
$('A').each(function(index,item){});
// $.toArray()转换为数组  $.merge()数组合并  $.makeArray() 把类数组转换为数组  $.uniqueSort() 去重加排序  $.type数据类型检测 ...

三、封装一个css方法

// 封装一个 css 的方法，根据参数不同有不同的功能
const { getCss, setCss, setBatchCss } = window.utils;
function css(ele, param, val) {
  // 根据传参的不同调用不同的方法
  // 第二个参数是字符串类型，不传 val 时，就是获取
  // 第二个参数是字符串时，并且第三个参数传了，就是设置单个样式
  // 第二个参数是对象时，就是批量设置 CSS 样式
  if (typeof param === 'string' && typeof val === 'undefined') {
    return getCss(ele, param);
  }
  if (typeof param === 'string' && typeof val !== 'undefined') {
    setCss(ele, param, val);
    return;
  }
  if (typeof param === 'object') {
    setBatchCss(ele, param);
  }
}
let box = document.getElementById('box');
console.log(css(box, 'width')); // 获取 box 的 width 属性值
css(box, 'width', 150); // 设置 box 的 width 属性值是 100px
css(box, {
  width: 100,
  height: 200,
  backgroundColor: 'red'
}); // 批量设置