预习jQuery

作者: 晚月川 | 来源:发表于2020-04-02 21:54 被阅读0次

jQuery

jQuery是一款用原生JS封装的,操作DOM的类库:它里面封装了大量的方法(在原先的版本中v1.xxx,这些方法兼容所有的浏览器),基于这些方法我们可以快速地进行DOM操作和项目开发(jQuery是一款强大的DOM库)

如何学习jQuery

  • 看API文档
  • 阅读书籍
    • 《锋利的jQuery第二版》
  • 大量做案例

    在学习阶段,案例可以用原生JS做一遍,再用jQuery做一遍

  • 学习jQuery源码
    • 更好的掌握jQuery的应用,写出高性能可扩展的项目代码
    • 让自己的JS能力,尤其是组件插件等封装的能力直接上一个新台阶

jQuery的三大版本

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

jQuery中常用的方法

// =>1.获取DOM元素
//操作方法:jQuery选择器(根据选择器类型快速获取需要的元素)
$([selector],[context])
    $('#box')
    $('.imgBox')
    $('.box a')
    $('a', box)
    ...
/* jQuery支持的选择器:传统CSS3中的大部分都支持、还支持一些自己独有的
 * :eq(n) 获取索引为n的
 * :gt(n) 大于这个索引的
 * :lt(n) 小于这个索引的
 */

=============================================
//节点之间关系的属性:用jQuery选择器获取的元素,设置变量名的时候一般都以$开始
// =>还可以再设置选择器二次筛选
let $box = $('.box');
$box.children('a'); //=>获取对应的子元素a
$box.find('a'); //=>获取对应的后代元素a
$('a').filter('.active'); //=>同级筛选(在所有的a中筛选出具备class="active";样式类的a)
$box.prev(); //=>获取它上一个哥哥
$box.prev('p'); //=>获取它上一个标签名为p的哥哥
$box.prevAll(); //=>获取它所有哥哥
$box.next(); //=>获取它下一个弟弟
$box.nextAll(); //=>获取它所有的弟弟
$box.nextAll('.link'); //=>在所有弟弟中获取带有.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前面创建一个元素

$A.appendTo($B);//=> $B.append($A);  在$B容器的末尾追加$A
$A.prependTo($B); //=>$B.prepend($A); 在$B容器的开头追加$A

$A.clone();  //=>实现元素的克隆
$A.remove();  //=>实现元素的删除

// => 操作表单元素内容
$input.val(); //获取表单元素内容
$input.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方法是设置或者批量设置样式(原理是设置行内样式) $box.css({width:200,height:200}),写的值不加单位,方法会帮我们自动设置上px单位
$box.addClass('active'); //=>设置样式类(原理是对className的操作),removeClass是移除,hasClass验证是否存在某个样式类,toggleClass之前有就是移除,没有就是新增


// 获取样式
$box.css('width'); //=>不设置值的时候就是获取(原理是getComputedStyle)
$box.offset(); //=>当前元素距离body的左偏移和上偏移
$box.position(); //=>当前元素距离父参照物的左偏移和上偏移
$box.width(); //=>.height 获取盒子的宽高(传递值进来就是设置)
$box.innerWidth()/.innerHeight()/.outerWidth()/.outerHeight();
//=>等价于clientWidth/Height 和 offsetWidth/Height
$(document).scrollTop([val]); //=>可以获取或者设置scrolltop的信息,对应的方法  .scrollLeft

除了操作DOM,jQuery中还提供了其他有助于项目开发的方法

// =>事件处理
// $元素.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.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  数据类型检测

相关文章

网友评论

    本文标题:预习jQuery

    本文链接:https://www.haomeiwen.com/subject/btafphtx.html