jQuery笔记

jQuery

使用原生js封装的操作DOM的类库，
提供大量的API进行DOM操作
兼容所有的浏览器

• JQ的三大版本

  1. jquery-1.11.3.min.js 第一代版本，大而全，兼容PC端浏览器（政府的项目)
  2. 第二版本 鸡肋？主要为移动端开发者准备，不在兼容低版本浏览器(IE8及以下),配合jQuery mobile出现等UI库，但是，第二代版本处理步入 zepto.js
  3. 第三代版本，不在兼容低版本浏览器，性能方面提升很大 angular/vue/react崛起， 不在基于DOM操作思想开发了，基于数据操作开发。

jQuery中常用方法

获取方法DOM元素
操作方法： JQ选择器根据选择器获取元素
$([selector],[context])
节点之间的关系属性
里面的参数是选择器或者不传入参数
let $box = $('.box')
$box.prev('a')
$box.prevAll('p')
$box.next('p')
$box.nextAll('a')
$box.siblings() // 获取所有的兄弟
$box.index(); // 获取索引
$('a').filter('.active') //=>同级筛选，获取同级a中，具备class=active样式类的A
$box.children('.a'); // 子代筛选 
$box.find('a') //获取对应的后代元素 

$box.parent(); // 获取父元素
$box.parents();// 获取所有的父元素，直接到docuemnt


DOM增删改
$('<div> 创建元素</div> ') // 创建元素
$A.insertBefore($B); // 把$A放到$B的前面($A,$B都是页面中已经存在的元素)
$A.insertAfter($B);  // 把$A放到$B的后面()
$A.appendTo($B); // 把$A追加到$B末尾
$A.prepend($B) // 把$A追加到容器的开头

$('body').append('<div class="box">我很帅！</div>') // 将元素追加到容器的末尾

// 分别等价于 innerHTML innerText
$('body').html() // 不传入参数是获取里面的内容 
// 传入参数是整体替换里面的内容
$('body').text()
// 克隆元素
$A.clone();  // 实现元素克隆
$A.remove(); // 元素删除

// 操作表单元素
$inp.val() 获取表单元素内容
$inp.val('AAA') 设置表单元素内容
// html和text方法是操作非表单元素的

// 获取自定义属性
$box.attr('data-type');
// 设置
$box.attr('data-type','我很帅！')
// 使用对象来设置属性
$box.attr({
    'type':1,
    'name':'AA'
});

// 表单元素 操作内置或者自定义属性 removeProp prop
$radio.prop('checked'); 获取属性checked的值
$radio.prop('checked',true); 将属性checked的值设置为true

// 操作CSS样式(盒子模型属性)
 $box.css('width',200);
 // 不用加单位,默认为px
 $box.css({
     200,
     height:200
 });
$box.addClass(’activeClass‘); // 原理是className的操作
$box.removeClass('[className]') 
$box.hasClass()
$box.toggleClass() 之前有就是移除，没有就是增加
// 移除自定义属性
$box.removeAttr('data-type');

// 获取样式
$box.css('width')
getComputedStyle() // 所有经过计算的样式

$box.offset(); 获取当前元素距离body的上偏移和左偏移
$box.position(); 距离父级参照物的上偏移和左偏移
$box.width(); 获取盒子的宽高，传递值进来就是设置
$box.innerWidth/ innerHeight outWidth  outHeight
等价于 clientWidth / clientWidth offsetWidth offsetHeight

$(document).scrollTop([val]) scrollTop 可以获取或者设置对应的信息 
// JQ支持选择器,传统CSS3的大部分都支持
// :eq(n) 获取索引为
// :lt(n) 小于这个索引
// :gt(n) 大于索引
操作自定义属性
操作CSS样式

DOM, JQ提供的其他方法

事件处理
$元素.on([event type],[function])
$元素.off([event type],[function])
$box.on('click',function(){});
// 绑定多个事件处理函数
$box.unbind();
$box.bind({
    event:function(){

    }, 
    event:function(){

    }}
);

// 动画处理
$元素.anaimate({
    [目标样式],
    [总时间],
    [运动方式],
    [运动完成后做得事情]
})
$box.anaimate({
    top:100,
    left:200
},
100,
'linear',
fucntion(){//运动完成之后做得事情
});

let _DATA = null;
$.ajax({
    url:"",
    method:"GET",
    async:false,
    dataType:"json",]
    // 成功后，执行success
    success:function(result){
        _DATA = result;
    },
})


常用的工具方法
$each([数值，类数组，对象],function(index,item){
    // index是索引(属性名)
    // item 为当前对象
})

$.toArray()
$.merge();
$.makeAarry(); // 把类数组转化为数组
$.uniqueSort(array);